Script Labでセル結合
TosmmiOffice JavaScript API Office JavaScript API This script shows how to merge cells and set a string using the Office JavaScript API. It autofits rows and adjusts cell heights for proper display.In this script, a range is merged and a string is written into it using the Office JavaScript API, and the height of the merged cells is adjusted to fit the contents.
by JanitorMar 03, 2024
Office JavaScript APIでセルを結合して文字列を設定する方法です。結合したセル範囲でautofitRows()を呼び出してもうまくいかず、高さを取得するために別のセルに書き込みを行ってautofitRow()を呼び出してから高さを取得し、その高さを結合したセルに設定することでできました。
Office JavaScript APIでセルを結合して文字列を設定する方法です。結合したセル範囲でautofitRows()を呼び出してもうまくいかず、高さを取得するために別のセルに書き込みを行ってautofitRow()を呼び出してから高さを取得し、その高さを結合したセルに設定することでできました。
Jump Links
1.Scriptを書く
2.htmlとcssを書く
3.実行
1.Scriptを書く
1.Scriptを書く
下記のようなScriptを作成しました。やっていることは下記の通りです。
〇書き込みを行いたいセル結合範囲とそこに入力したい文字列をhtmlのinputタグとtextareaタグから読み込み
〇ダミー用のセルに、入力したい文字列を書き込んで、元のセル結合範囲の幅を設定し、autofitRows()を呼び出す
〇ダミー用のセルの高さが調整されたので高さを取得
〇書き込みを行いたいセル結合範囲に、入力したい文字列を書き込んで、セル結合を行い、ダミー用のセルの高さを設定
下記のようなScriptを作成しました。やっていることは下記の通りです。
〇書き込みを行いたいセル結合範囲とそこに入力したい文字列をhtmlのinputタグとtextareaタグから読み込み
〇ダミー用のセルに、入力したい文字列を書き込んで、元のセル結合範囲の幅を設定し、autofitRows()を呼び出す
〇ダミー用のセルの高さが調整されたので高さを取得
〇書き込みを行いたいセル結合範囲に、入力したい文字列を書き込んで、セル結合を行い、ダミー用のセルの高さを設定
Script
$("#run").on("click", () => tryCatch(run));
$("#clear").on("click", () => tryCatch(clear));
let dummySheetName = "dummy";
async function run() {
await Excel.run(async (context) => {
let rangeStr =
document.getElementById("mergeCellRangeStart").value + ":" + document.getElementById("mergeCellRangeEnd").value;
let inputStr = document.getElementById("inputStr").value;
let sheet = context.workbook.worksheets.getActiveWorksheet();
let range = sheet.getRange(rangeStr).load();
await context.sync();
let arr = new Array(range.rowCount).fill("");
for (let i = 0; i < arr.length; i++) {
arr[i] = new Array(range.columnCount).fill("");
}
arr[0][0] = inputStr;
await autofitMergedCell(range, arr);
});
}
async function autofitMergedCell(range: Excel.Range, data) {
await Excel.run(async (context) => {
let sheets = context.workbook.worksheets;
sheets = sheets.load();
await context.sync();
let rangeWidth = Math.ceil(range.width);
let dummySheet = sheets.items.find((item) => item.name == dummySheetName);
if (dummySheet == undefined) {
dummySheet = sheets.add(dummySheetName);
dummySheet.load();
await context.sync();
}
let dummyRangeStr = "dummy!" + range.address.split("!")[1].split(":")[0];
let dummyRange = dummySheet.getRange(dummyRangeStr).load();
await context.sync();
dummyRange.values = data[0][0];
dummyRange.format.columnWidth = rangeWidth;
dummyRange.format.wrapText = true;
dummyRange.format.autofitRows();
await context.sync();
dummyRange = dummySheet.getRange(dummyRangeStr).load();
await context.sync();
let rangeTotalHeight = dummyRange.height;
range.values = data;
range.merge();
range.format.set({ rowHeight: rangeTotalHeight / range.rowCount, wrapText: true });
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
usedRange.clear(Excel.ClearApplyTo.all);
usedRange.format.autofitRows();
});
}
/** Default helper for invoking an action and handling errors. */
async function tryCatch(callback) {
try {
await callback();
} catch (error) {
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
console.error(error);
}
}
Script
$("#run").on("click", () => tryCatch(run));
$("#clear").on("click", () => tryCatch(clear));
let dummySheetName = "dummy";
async function run() {
await Excel.run(async (context) => {
let rangeStr =
document.getElementById("mergeCellRangeStart").value + ":" + document.getElementById("mergeCellRangeEnd").value;
let inputStr = document.getElementById("inputStr").value;
let sheet = context.workbook.worksheets.getActiveWorksheet();
let range = sheet.getRange(rangeStr).load();
await context.sync();
let arr = new Array(range.rowCount).fill("");
for (let i = 0; i < arr.length; i++) {
arr[i] = new Array(range.columnCount).fill("");
}
arr[0][0] = inputStr;
await autofitMergedCell(range, arr);
});
}
async function autofitMergedCell(range: Excel.Range, data) {
await Excel.run(async (context) => {
let sheets = context.workbook.worksheets;
sheets = sheets.load();
await context.sync();
let rangeWidth = Math.ceil(range.width);
let dummySheet = sheets.items.find((item) => item.name == dummySheetName);
if (dummySheet == undefined) {
dummySheet = sheets.add(dummySheetName);
dummySheet.load();
await context.sync();
}
let dummyRangeStr = "dummy!" + range.address.split("!")[1].split(":")[0];
let dummyRange = dummySheet.getRange(dummyRangeStr).load();
await context.sync();
dummyRange.values = data[0][0];
dummyRange.format.columnWidth = rangeWidth;
dummyRange.format.wrapText = true;
dummyRange.format.autofitRows();
await context.sync();
dummyRange = dummySheet.getRange(dummyRangeStr).load();
await context.sync();
let rangeTotalHeight = dummyRange.height;
range.values = data;
range.merge();
range.format.set({ rowHeight: rangeTotalHeight / range.rowCount, wrapText: true });
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
usedRange.clear(Excel.ClearApplyTo.all);
usedRange.format.autofitRows();
});
}
/** Default helper for invoking an action and handling errors. */
async function tryCatch(callback) {
try {
await callback();
} catch (error) {
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
console.error(error);
}
}
2.htmlとcssを書く
2.htmlとcssを書く
下記のようなhtmlとcssを作成しました。
下記のようなhtmlとcssを作成しました。
HTML
<div style="margin-bottom: 20px">
<p style="margin: 0px">セル結合範囲</p>
<input id="mergeCellRangeStart" class="inputDefault h30px w30px" style="margin-right: 4px" value="B2"/>:
<input id="mergeCellRangeEnd" class="inputDefault h30px w30px" value="D2"/>
</div>
<div style="margin-bottom: 20px">
<p style="margin: 0px">書き込む文字列</p>
<textarea class="h100px inputDefault" style="aspect-ratio: 1;" id="inputStr">Office アドインでは、Office JavaScript API を使用することで、アドインが実行されている Office ドキュメント内のコンテンツを操作できます。</textarea>
</div>
<button id="run" class="ms-Button">
<span class="ms-Button-label">Run</span>
</button>
<button id="clear" class="ms-Button">
<span class="ms-Button-label">Clear</span>
</button>
HTML
<div style="margin-bottom: 20px">
<p style="margin: 0px">セル結合範囲</p>
<input id="mergeCellRangeStart" class="inputDefault h30px w30px" style="margin-right: 4px" value="B2"/>:
<input id="mergeCellRangeEnd" class="inputDefault h30px w30px" value="D2"/>
</div>
<div style="margin-bottom: 20px">
<p style="margin: 0px">書き込む文字列</p>
<textarea class="h100px inputDefault" style="aspect-ratio: 1;" id="inputStr">Office アドインでは、Office JavaScript API を使用することで、アドインが実行されている Office ドキュメント内のコンテンツを操作できます。</textarea>
</div>
<button id="run" class="ms-Button">
<span class="ms-Button-label">Run</span>
</button>
<button id="clear" class="ms-Button">
<span class="ms-Button-label">Clear</span>
</button>
CSS
section.samples {
margin-top: 20px;
}
section.samples .ms-Button, section.setup .ms-Button {
display: block;
margin-bottom: 5px;
margin-left: 20px;
min-width: 80px;
}
.inputDefault{
padding: 5px;
font-size: 16px;
}
.h30px{
height: 30px;
}
.h100px{
height: 200px;
}
.w30px{
width: 30px;
}
CSS
section.samples {
margin-top: 20px;
}
section.samples .ms-Button, section.setup .ms-Button {
display: block;
margin-bottom: 5px;
margin-left: 20px;
min-width: 80px;
}
.inputDefault{
padding: 5px;
font-size: 16px;
}
.h30px{
height: 30px;
}
.h100px{
height: 200px;
}
.w30px{
width: 30px;
}
3.実行
3.実行
Runボタンを押すと下の画像のように、入力したセル結合範囲に文字列が書き込まれ、高さは調整された状態となります。
Runボタンを押すと下の画像のように、入力したセル結合範囲に文字列が書き込まれ、高さは調整された状態となります。
参考にさせて頂いたWebサイト
https://daitaideit.com/vba-autofit-rowheight-of-merge-cell/
参考にさせて頂いたWebサイト
https://daitaideit.com/vba-autofit-rowheight-of-merge-cell/
Script Labでセル結合
TosmmiOffice JavaScript API Office JavaScript API This script shows how to merge cells and set a string using the Office JavaScript API. It autofits rows and adjusts cell heights for proper display.In this script, a range is merged and a string is written into it using the Office JavaScript API, and the height of the merged cells is adjusted to fit the contents.
by JanitorMar 03, 2024
Office JavaScript APIでセルを結合して文字列を設定する方法です。結合したセル範囲でautofitRows()を呼び出してもうまくいかず、高さを取得するために別のセルに書き込みを行ってautofitRow()を呼び出してから高さを取得し、その高さを結合したセルに設定することでできました。
Office JavaScript APIでセルを結合して文字列を設定する方法です。結合したセル範囲でautofitRows()を呼び出してもうまくいかず、高さを取得するために別のセルに書き込みを行ってautofitRow()を呼び出してから高さを取得し、その高さを結合したセルに設定することでできました。
Jump Links
1.Scriptを書く
2.htmlとcssを書く
3.実行
1.Scriptを書く
1.Scriptを書く
下記のようなScriptを作成しました。やっていることは下記の通りです。
〇書き込みを行いたいセル結合範囲とそこに入力したい文字列をhtmlのinputタグとtextareaタグから読み込み
〇ダミー用のセルに、入力したい文字列を書き込んで、元のセル結合範囲の幅を設定し、autofitRows()を呼び出す
〇ダミー用のセルの高さが調整されたので高さを取得
〇書き込みを行いたいセル結合範囲に、入力したい文字列を書き込んで、セル結合を行い、ダミー用のセルの高さを設定
下記のようなScriptを作成しました。やっていることは下記の通りです。
〇書き込みを行いたいセル結合範囲とそこに入力したい文字列をhtmlのinputタグとtextareaタグから読み込み
〇ダミー用のセルに、入力したい文字列を書き込んで、元のセル結合範囲の幅を設定し、autofitRows()を呼び出す
〇ダミー用のセルの高さが調整されたので高さを取得
〇書き込みを行いたいセル結合範囲に、入力したい文字列を書き込んで、セル結合を行い、ダミー用のセルの高さを設定
Script
$("#run").on("click", () => tryCatch(run));
$("#clear").on("click", () => tryCatch(clear));
let dummySheetName = "dummy";
async function run() {
await Excel.run(async (context) => {
let rangeStr =
document.getElementById("mergeCellRangeStart").value + ":" + document.getElementById("mergeCellRangeEnd").value;
let inputStr = document.getElementById("inputStr").value;
let sheet = context.workbook.worksheets.getActiveWorksheet();
let range = sheet.getRange(rangeStr).load();
await context.sync();
let arr = new Array(range.rowCount).fill("");
for (let i = 0; i < arr.length; i++) {
arr[i] = new Array(range.columnCount).fill("");
}
arr[0][0] = inputStr;
await autofitMergedCell(range, arr);
});
}
async function autofitMergedCell(range: Excel.Range, data) {
await Excel.run(async (context) => {
let sheets = context.workbook.worksheets;
sheets = sheets.load();
await context.sync();
let rangeWidth = Math.ceil(range.width);
let dummySheet = sheets.items.find((item) => item.name == dummySheetName);
if (dummySheet == undefined) {
dummySheet = sheets.add(dummySheetName);
dummySheet.load();
await context.sync();
}
let dummyRangeStr = "dummy!" + range.address.split("!")[1].split(":")[0];
let dummyRange = dummySheet.getRange(dummyRangeStr).load();
await context.sync();
dummyRange.values = data[0][0];
dummyRange.format.columnWidth = rangeWidth;
dummyRange.format.wrapText = true;
dummyRange.format.autofitRows();
await context.sync();
dummyRange = dummySheet.getRange(dummyRangeStr).load();
await context.sync();
let rangeTotalHeight = dummyRange.height;
range.values = data;
range.merge();
range.format.set({ rowHeight: rangeTotalHeight / range.rowCount, wrapText: true });
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
usedRange.clear(Excel.ClearApplyTo.all);
usedRange.format.autofitRows();
});
}
/** Default helper for invoking an action and handling errors. */
async function tryCatch(callback) {
try {
await callback();
} catch (error) {
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
console.error(error);
}
}
Script
$("#run").on("click", () => tryCatch(run));
$("#clear").on("click", () => tryCatch(clear));
let dummySheetName = "dummy";
async function run() {
await Excel.run(async (context) => {
let rangeStr =
document.getElementById("mergeCellRangeStart").value + ":" + document.getElementById("mergeCellRangeEnd").value;
let inputStr = document.getElementById("inputStr").value;
let sheet = context.workbook.worksheets.getActiveWorksheet();
let range = sheet.getRange(rangeStr).load();
await context.sync();
let arr = new Array(range.rowCount).fill("");
for (let i = 0; i < arr.length; i++) {
arr[i] = new Array(range.columnCount).fill("");
}
arr[0][0] = inputStr;
await autofitMergedCell(range, arr);
});
}
async function autofitMergedCell(range: Excel.Range, data) {
await Excel.run(async (context) => {
let sheets = context.workbook.worksheets;
sheets = sheets.load();
await context.sync();
let rangeWidth = Math.ceil(range.width);
let dummySheet = sheets.items.find((item) => item.name == dummySheetName);
if (dummySheet == undefined) {
dummySheet = sheets.add(dummySheetName);
dummySheet.load();
await context.sync();
}
let dummyRangeStr = "dummy!" + range.address.split("!")[1].split(":")[0];
let dummyRange = dummySheet.getRange(dummyRangeStr).load();
await context.sync();
dummyRange.values = data[0][0];
dummyRange.format.columnWidth = rangeWidth;
dummyRange.format.wrapText = true;
dummyRange.format.autofitRows();
await context.sync();
dummyRange = dummySheet.getRange(dummyRangeStr).load();
await context.sync();
let rangeTotalHeight = dummyRange.height;
range.values = data;
range.merge();
range.format.set({ rowHeight: rangeTotalHeight / range.rowCount, wrapText: true });
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
usedRange.clear(Excel.ClearApplyTo.all);
usedRange.format.autofitRows();
});
}
/** Default helper for invoking an action and handling errors. */
async function tryCatch(callback) {
try {
await callback();
} catch (error) {
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
console.error(error);
}
}
2.htmlとcssを書く
2.htmlとcssを書く
下記のようなhtmlとcssを作成しました。
下記のようなhtmlとcssを作成しました。
HTML
<div style="margin-bottom: 20px">
<p style="margin: 0px">セル結合範囲</p>
<input id="mergeCellRangeStart" class="inputDefault h30px w30px" style="margin-right: 4px" value="B2"/>:
<input id="mergeCellRangeEnd" class="inputDefault h30px w30px" value="D2"/>
</div>
<div style="margin-bottom: 20px">
<p style="margin: 0px">書き込む文字列</p>
<textarea class="h100px inputDefault" style="aspect-ratio: 1;" id="inputStr">Office アドインでは、Office JavaScript API を使用することで、アドインが実行されている Office ドキュメント内のコンテンツを操作できます。</textarea>
</div>
<button id="run" class="ms-Button">
<span class="ms-Button-label">Run</span>
</button>
<button id="clear" class="ms-Button">
<span class="ms-Button-label">Clear</span>
</button>
HTML
<div style="margin-bottom: 20px">
<p style="margin: 0px">セル結合範囲</p>
<input id="mergeCellRangeStart" class="inputDefault h30px w30px" style="margin-right: 4px" value="B2"/>:
<input id="mergeCellRangeEnd" class="inputDefault h30px w30px" value="D2"/>
</div>
<div style="margin-bottom: 20px">
<p style="margin: 0px">書き込む文字列</p>
<textarea class="h100px inputDefault" style="aspect-ratio: 1;" id="inputStr">Office アドインでは、Office JavaScript API を使用することで、アドインが実行されている Office ドキュメント内のコンテンツを操作できます。</textarea>
</div>
<button id="run" class="ms-Button">
<span class="ms-Button-label">Run</span>
</button>
<button id="clear" class="ms-Button">
<span class="ms-Button-label">Clear</span>
</button>
CSS
section.samples {
margin-top: 20px;
}
section.samples .ms-Button, section.setup .ms-Button {
display: block;
margin-bottom: 5px;
margin-left: 20px;
min-width: 80px;
}
.inputDefault{
padding: 5px;
font-size: 16px;
}
.h30px{
height: 30px;
}
.h100px{
height: 200px;
}
.w30px{
width: 30px;
}
CSS
section.samples {
margin-top: 20px;
}
section.samples .ms-Button, section.setup .ms-Button {
display: block;
margin-bottom: 5px;
margin-left: 20px;
min-width: 80px;
}
.inputDefault{
padding: 5px;
font-size: 16px;
}
.h30px{
height: 30px;
}
.h100px{
height: 200px;
}
.w30px{
width: 30px;
}
3.実行
3.実行
Runボタンを押すと下の画像のように、入力したセル結合範囲に文字列が書き込まれ、高さは調整された状態となります。
Runボタンを押すと下の画像のように、入力したセル結合範囲に文字列が書き込まれ、高さは調整された状態となります。
参考にさせて頂いたWebサイト
https://daitaideit.com/vba-autofit-rowheight-of-merge-cell/
参考にさせて頂いたWebサイト
https://daitaideit.com/vba-autofit-rowheight-of-merge-cell/