Script Labで罫線を引く
TosmmiOffice JavaScript API Excel HTML HTML This article provides a script and HTML code to draw borders on cells in Excel using the Office JavaScript API. The script allows users to select the edge of the cell to draw the border on and set the border properties such as color, style, and weight. The HTML code includes a run button to execute the script and a clear button to remove the borders.
by JanitorMar 02, 2024
Office JavaScript APIでセルに罫線を引く方法です。すぐにOffice JavaScript APIを試せるScript Labでコーディングしています。
Office JavaScript APIでセルに罫線を引く方法です。すぐにOffice JavaScript APIを試せるScript Labでコーディングしています。
Jump Links
1.Scriptを書く
2.HTMLを書く
3. 実行
1.Scriptを書く
1.Scriptを書く
下記のようなScriptを作成しました。ラジオボタンからセルのどの位置に罫線を引くかを選択して、ボタンを押すと、セル範囲「B2:D4」に罫線が引かれます。
下記のようなScriptを作成しました。ラジオボタンからセルのどの位置に罫線を引くかを選択して、ボタンを押すと、セル範囲「B2:D4」に罫線が引かれます。
Script
$("#run").on("click", () => tryCatch(run));
$("#clear").on("click", () => tryCatch(clear));
const props = {
color: "E0C4D9",
style: "Continuous",
tintAndShade: 0,
weight: "Medium"
};
async function run() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let range = sheet.getRange("B2:D4").load();
let selectedEdge = "EdgeTop";
let edgeSelects = document.getElementsByClassName("EdgeSelect");
for (let i = 0; i < edgeSelects.length; i++) {
if (edgeSelects[i].checked) {
selectedEdge = edgeSelects[i].value;
break;
}
}
range.format.borders.getItem(selectedEdge).set(props);
await context.sync();
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
let props = {
style: "None"
};
usedRange.format.borders.getItem("EdgeTop").set(props);
usedRange.format.borders.getItem("EdgeRight").set(props);
usedRange.format.borders.getItem("EdgeBottom").set(props);
usedRange.format.borders.getItem("EdgeLeft").set(props);
usedRange.format.borders.getItem("InsideHorizontal").set(props);
usedRange.format.borders.getItem("InsideVertical").set(props);
});
}
/** 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));
const props = {
color: "E0C4D9",
style: "Continuous",
tintAndShade: 0,
weight: "Medium"
};
async function run() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let range = sheet.getRange("B2:D4").load();
let selectedEdge = "EdgeTop";
let edgeSelects = document.getElementsByClassName("EdgeSelect");
for (let i = 0; i < edgeSelects.length; i++) {
if (edgeSelects[i].checked) {
selectedEdge = edgeSelects[i].value;
break;
}
}
range.format.borders.getItem(selectedEdge).set(props);
await context.sync();
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
let props = {
style: "None"
};
usedRange.format.borders.getItem("EdgeTop").set(props);
usedRange.format.borders.getItem("EdgeRight").set(props);
usedRange.format.borders.getItem("EdgeBottom").set(props);
usedRange.format.borders.getItem("EdgeLeft").set(props);
usedRange.format.borders.getItem("InsideHorizontal").set(props);
usedRange.format.borders.getItem("InsideVertical").set(props);
});
}
/** 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内でやっていることは、ラジオボタンで選択されたセルのエッジを取得し、次にセル範囲を取得して、そのセル範囲の罫線を設定するプロパティである「color」「style」「tintAndShade」「weight」をセルのエッジにセットしています。
設定できる「style」「tintAndShade」「weight」は下のリンクで確認ができます。
https://learn.microsoft.com/ja-jp/javascript/api/excel/excel.interfaces.rangeborderupdatedata?view=excel-js-preview
Script内でやっていることは、ラジオボタンで選択されたセルのエッジを取得し、次にセル範囲を取得して、そのセル範囲の罫線を設定するプロパティである「color」「style」「tintAndShade」「weight」をセルのエッジにセットしています。
設定できる「style」「tintAndShade」「weight」は下のリンクで確認ができます。
https://learn.microsoft.com/ja-jp/javascript/api/excel/excel.interfaces.rangeborderupdatedata?view=excel-js-preview
2.HTMLを書く
2.HTMLを書く
下記のようなHTMLを書きました。
下記のようなHTMLを書きました。
HTML
<!-- 実行ボタン -->
<div>
<button id="run" class="ms-Button">
<span class="ms-Button-label">Run</span>
</button>
</div>
<!-- エッジ選択 -->
<div style="margin-top: 5px">
<input type="radio" name="border" class="EdgeSelect" value="EdgeTop">Top
<input type="radio" name="border" class="EdgeSelect" value="EdgeRight">Right
<input type="radio" name="border" class="EdgeSelect" value="EdgeBottom">Bottom
<input type="radio" name="border" class="EdgeSelect" value="EdgeLeft">Left
<input type="radio" name="border" class="EdgeSelect" value="InsideHorizontal">Inside HN
<input type="radio" name="border" class="EdgeSelect" value="InsideVertical">Inside VERT
</div>
<div style="margin-top: 10px">
<button id="clear" class="ms-Button">
<span class="ms-Button-label">clear</span>
</button>
</div>
HTML
<!-- 実行ボタン -->
<div>
<button id="run" class="ms-Button">
<span class="ms-Button-label">Run</span>
</button>
</div>
<!-- エッジ選択 -->
<div style="margin-top: 5px">
<input type="radio" name="border" class="EdgeSelect" value="EdgeTop">Top
<input type="radio" name="border" class="EdgeSelect" value="EdgeRight">Right
<input type="radio" name="border" class="EdgeSelect" value="EdgeBottom">Bottom
<input type="radio" name="border" class="EdgeSelect" value="EdgeLeft">Left
<input type="radio" name="border" class="EdgeSelect" value="InsideHorizontal">Inside HN
<input type="radio" name="border" class="EdgeSelect" value="InsideVertical">Inside VERT
</div>
<div style="margin-top: 10px">
<button id="clear" class="ms-Button">
<span class="ms-Button-label">clear</span>
</button>
</div>
3. 実行
3. 実行
ラジオボタンを選択して「RUNボタン」を押すと下の画像のように罫線が引かれます。
ラジオボタンを選択して「RUNボタン」を押すと下の画像のように罫線が引かれます。
Script Labで罫線を引く
TosmmiOffice JavaScript API Excel HTML HTML This article provides a script and HTML code to draw borders on cells in Excel using the Office JavaScript API. The script allows users to select the edge of the cell to draw the border on and set the border properties such as color, style, and weight. The HTML code includes a run button to execute the script and a clear button to remove the borders.
by JanitorMar 02, 2024
Office JavaScript APIでセルに罫線を引く方法です。すぐにOffice JavaScript APIを試せるScript Labでコーディングしています。
Office JavaScript APIでセルに罫線を引く方法です。すぐにOffice JavaScript APIを試せるScript Labでコーディングしています。
Jump Links
1.Scriptを書く
2.HTMLを書く
3. 実行
1.Scriptを書く
1.Scriptを書く
下記のようなScriptを作成しました。ラジオボタンからセルのどの位置に罫線を引くかを選択して、ボタンを押すと、セル範囲「B2:D4」に罫線が引かれます。
下記のようなScriptを作成しました。ラジオボタンからセルのどの位置に罫線を引くかを選択して、ボタンを押すと、セル範囲「B2:D4」に罫線が引かれます。
Script
$("#run").on("click", () => tryCatch(run));
$("#clear").on("click", () => tryCatch(clear));
const props = {
color: "E0C4D9",
style: "Continuous",
tintAndShade: 0,
weight: "Medium"
};
async function run() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let range = sheet.getRange("B2:D4").load();
let selectedEdge = "EdgeTop";
let edgeSelects = document.getElementsByClassName("EdgeSelect");
for (let i = 0; i < edgeSelects.length; i++) {
if (edgeSelects[i].checked) {
selectedEdge = edgeSelects[i].value;
break;
}
}
range.format.borders.getItem(selectedEdge).set(props);
await context.sync();
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
let props = {
style: "None"
};
usedRange.format.borders.getItem("EdgeTop").set(props);
usedRange.format.borders.getItem("EdgeRight").set(props);
usedRange.format.borders.getItem("EdgeBottom").set(props);
usedRange.format.borders.getItem("EdgeLeft").set(props);
usedRange.format.borders.getItem("InsideHorizontal").set(props);
usedRange.format.borders.getItem("InsideVertical").set(props);
});
}
/** 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));
const props = {
color: "E0C4D9",
style: "Continuous",
tintAndShade: 0,
weight: "Medium"
};
async function run() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let range = sheet.getRange("B2:D4").load();
let selectedEdge = "EdgeTop";
let edgeSelects = document.getElementsByClassName("EdgeSelect");
for (let i = 0; i < edgeSelects.length; i++) {
if (edgeSelects[i].checked) {
selectedEdge = edgeSelects[i].value;
break;
}
}
range.format.borders.getItem(selectedEdge).set(props);
await context.sync();
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
let props = {
style: "None"
};
usedRange.format.borders.getItem("EdgeTop").set(props);
usedRange.format.borders.getItem("EdgeRight").set(props);
usedRange.format.borders.getItem("EdgeBottom").set(props);
usedRange.format.borders.getItem("EdgeLeft").set(props);
usedRange.format.borders.getItem("InsideHorizontal").set(props);
usedRange.format.borders.getItem("InsideVertical").set(props);
});
}
/** 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内でやっていることは、ラジオボタンで選択されたセルのエッジを取得し、次にセル範囲を取得して、そのセル範囲の罫線を設定するプロパティである「color」「style」「tintAndShade」「weight」をセルのエッジにセットしています。
設定できる「style」「tintAndShade」「weight」は下のリンクで確認ができます。
https://learn.microsoft.com/ja-jp/javascript/api/excel/excel.interfaces.rangeborderupdatedata?view=excel-js-preview
Script内でやっていることは、ラジオボタンで選択されたセルのエッジを取得し、次にセル範囲を取得して、そのセル範囲の罫線を設定するプロパティである「color」「style」「tintAndShade」「weight」をセルのエッジにセットしています。
設定できる「style」「tintAndShade」「weight」は下のリンクで確認ができます。
https://learn.microsoft.com/ja-jp/javascript/api/excel/excel.interfaces.rangeborderupdatedata?view=excel-js-preview
2.HTMLを書く
2.HTMLを書く
下記のようなHTMLを書きました。
下記のようなHTMLを書きました。
HTML
<!-- 実行ボタン -->
<div>
<button id="run" class="ms-Button">
<span class="ms-Button-label">Run</span>
</button>
</div>
<!-- エッジ選択 -->
<div style="margin-top: 5px">
<input type="radio" name="border" class="EdgeSelect" value="EdgeTop">Top
<input type="radio" name="border" class="EdgeSelect" value="EdgeRight">Right
<input type="radio" name="border" class="EdgeSelect" value="EdgeBottom">Bottom
<input type="radio" name="border" class="EdgeSelect" value="EdgeLeft">Left
<input type="radio" name="border" class="EdgeSelect" value="InsideHorizontal">Inside HN
<input type="radio" name="border" class="EdgeSelect" value="InsideVertical">Inside VERT
</div>
<div style="margin-top: 10px">
<button id="clear" class="ms-Button">
<span class="ms-Button-label">clear</span>
</button>
</div>
HTML
<!-- 実行ボタン -->
<div>
<button id="run" class="ms-Button">
<span class="ms-Button-label">Run</span>
</button>
</div>
<!-- エッジ選択 -->
<div style="margin-top: 5px">
<input type="radio" name="border" class="EdgeSelect" value="EdgeTop">Top
<input type="radio" name="border" class="EdgeSelect" value="EdgeRight">Right
<input type="radio" name="border" class="EdgeSelect" value="EdgeBottom">Bottom
<input type="radio" name="border" class="EdgeSelect" value="EdgeLeft">Left
<input type="radio" name="border" class="EdgeSelect" value="InsideHorizontal">Inside HN
<input type="radio" name="border" class="EdgeSelect" value="InsideVertical">Inside VERT
</div>
<div style="margin-top: 10px">
<button id="clear" class="ms-Button">
<span class="ms-Button-label">clear</span>
</button>
</div>
3. 実行
3. 実行
ラジオボタンを選択して「RUNボタン」を押すと下の画像のように罫線が引かれます。
ラジオボタンを選択して「RUNボタン」を押すと下の画像のように罫線が引かれます。