Script Labの使い方
Script Lab Excel HTMLCSSJavaScript Script Lab JavaScript Excel HTML UI CSS Excel Excel Script Lab is an addin for Excel that allows you to quickly prototype addins. It provides a predefined structure for HTML, CSS, and JavaScript, making it easy to get started with programming without having to set up an environment. Script Lab allows you to manipulate Excel data using JavaScript, create UI elements with HTML, and style them with CSS. It also provides a range of functions for interacting with the Excel object model, making it easy to automate tasks and extend the functionality of Excel.
by JanitorMar 01, 2024
Script Labは、アドインのプロトタイプ作成用のアドインです。ファイル -> アドインを取得 -> Script Labで追加することができ、タブに「Script Lab」が出てきます。HTML、CSS、javascriptを書く場所が事前に決まっているので、環境を構築する必要もなく気軽にプログラミングを始めることができて便利です。
Script Labは、アドインのプロトタイプ作成用のアドインです。ファイル -> アドインを取得 -> Script Labで追加することができ、タブに「Script Lab」が出てきます。HTML、CSS、javascriptを書く場所が事前に決まっているので、環境を構築する必要もなく気軽にプログラミングを始めることができて便利です。
Jump Links
1. エクセルのセルにデータを準備
2. htmlとcssを書く
3. スクリプトを書く
4.さいごに
1. エクセルのセルにデータを準備
1. エクセルのセルにデータを準備
下の図のようなデータを30個用意しました。右側にあるのがScript Labの画面です。Data列の数値を読みとって、合格範囲外の場合はセルの色を赤い背景にしています。
下の図のようなデータを30個用意しました。右側にあるのがScript Labの画面です。Data列の数値を読みとって、合格範囲外の場合はセルの色を赤い背景にしています。
2. htmlとcssを書く
2. htmlとcssを書く
html、css、scriptを作成する場所を開くには、タブの「Script Lab」をクリックして「Code」を押します。表示された画面の「Script」「HTML」「CSS」にそれぞれ記載していきます。
html、css、scriptを作成する場所を開くには、タブの「Script Lab」をクリックして「Code」を押します。表示された画面の「Script」「HTML」「CSS」にそれぞれ記載していきます。
HTML
<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>
<div class="okRange mt-5">
<p>合格範囲</p>
<input type="number" id="okRangeStart"/>
<input type="number" id="okRangeEnd"/>
</div>
HTML
<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>
<div class="okRange mt-5">
<p>合格範囲</p>
<input type="number" id="okRangeStart"/>
<input type="number" id="okRangeEnd"/>
</div>
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;
}
.okRange input{
height: 30px;
}
p{
margin: 0px;
}
.mt-5{
margin-top: 20px !important;
}
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;
}
.okRange input{
height: 30px;
}
p{
margin: 0px;
}
.mt-5{
margin-top: 20px !important;
}
HTMLには、Data列の数値が合格範囲外だった場合は赤い背景にするスクリプトを実行するボタンと、赤い背景を元に戻すボタンと、合格範囲を入力するinputを2つ用意しました。
CSSに追加したのはinputの高さの設定などを追加しました。
HTMLには、Data列の数値が合格範囲外だった場合は赤い背景にするスクリプトを実行するボタンと、赤い背景を元に戻すボタンと、合格範囲を入力するinputを2つ用意しました。
CSSに追加したのはinputの高さの設定などを追加しました。
3. スクリプトを書く
3. スクリプトを書く
やっていることは、入力があるセル範囲を取得、合格範囲を入力するinputの入力値を取得してData列の数値が合格範囲外だった場合は、エラー用の配列にrangeの文字列を入れています。最後に、getRagesという関数で複数の範囲を一括で選択して、赤い背景にしています。
やっていることは、入力があるセル範囲を取得、合格範囲を入力するinputの入力値を取得してData列の数値が合格範囲外だった場合は、エラー用の配列にrangeの文字列を入れています。最後に、getRagesという関数で複数の範囲を一括で選択して、赤い背景にしています。
Script
$("#run").on("click", () => tryCatch(run));
$("#clear").on("click", () => tryCatch(clear));
async function run() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
let okRangeStart = Number(document.getElementById("okRangeStart").value);
let okRangeEnd = Number(document.getElementById("okRangeEnd").value);
let errRangeStrs = [];
for (let i = 0; i < usedRange.values.length; i++) {
if (i == 0) continue;
if (usedRange.values[i][1] < okRangeStart || okRangeEnd < usedRange.values[i][1]) {
let errRangeStr = `A${i + 1}:B${i + 1}`;
errRangeStrs.push(errRangeStr);
}
}
let errRange = sheet.getRanges(errRangeStrs.join(",")).load();
errRange.format.fill.color = "FCE4EC";
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
usedRange.format.fill.clear();
})
}
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));
async function run() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
let okRangeStart = Number(document.getElementById("okRangeStart").value);
let okRangeEnd = Number(document.getElementById("okRangeEnd").value);
let errRangeStrs = [];
for (let i = 0; i < usedRange.values.length; i++) {
if (i == 0) continue;
if (usedRange.values[i][1] < okRangeStart || okRangeEnd < usedRange.values[i][1]) {
let errRangeStr = `A${i + 1}:B${i + 1}`;
errRangeStrs.push(errRangeStr);
}
}
let errRange = sheet.getRanges(errRangeStrs.join(",")).load();
errRange.format.fill.color = "FCE4EC";
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
usedRange.format.fill.clear();
})
}
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);
}
}
4.さいごに
4.さいごに
エクセルを操作するためにどの関数を使えばいいのか調べてもよくわからないのが難点ですが、javascriptでエクセル操作ができてUIもhtmlで書けてとても便利です。
エクセルを操作するためにどの関数を使えばいいのか調べてもよくわからないのが難点ですが、javascriptでエクセル操作ができてUIもhtmlで書けてとても便利です。
Editors pick
Our other articles
Script Labの使い方
Script Lab Excel HTMLCSSJavaScript Script Lab JavaScript Excel HTML UI CSS Excel Excel Script Lab is an addin for Excel that allows you to quickly prototype addins. It provides a predefined structure for HTML, CSS, and JavaScript, making it easy to get started with programming without having to set up an environment. Script Lab allows you to manipulate Excel data using JavaScript, create UI elements with HTML, and style them with CSS. It also provides a range of functions for interacting with the Excel object model, making it easy to automate tasks and extend the functionality of Excel.
by JanitorMar 01, 2024
Script Labは、アドインのプロトタイプ作成用のアドインです。ファイル -> アドインを取得 -> Script Labで追加することができ、タブに「Script Lab」が出てきます。HTML、CSS、javascriptを書く場所が事前に決まっているので、環境を構築する必要もなく気軽にプログラミングを始めることができて便利です。
Script Labは、アドインのプロトタイプ作成用のアドインです。ファイル -> アドインを取得 -> Script Labで追加することができ、タブに「Script Lab」が出てきます。HTML、CSS、javascriptを書く場所が事前に決まっているので、環境を構築する必要もなく気軽にプログラミングを始めることができて便利です。
Jump Links
1. エクセルのセルにデータを準備
2. htmlとcssを書く
3. スクリプトを書く
4.さいごに
1. エクセルのセルにデータを準備
1. エクセルのセルにデータを準備
下の図のようなデータを30個用意しました。右側にあるのがScript Labの画面です。Data列の数値を読みとって、合格範囲外の場合はセルの色を赤い背景にしています。
下の図のようなデータを30個用意しました。右側にあるのがScript Labの画面です。Data列の数値を読みとって、合格範囲外の場合はセルの色を赤い背景にしています。
2. htmlとcssを書く
2. htmlとcssを書く
html、css、scriptを作成する場所を開くには、タブの「Script Lab」をクリックして「Code」を押します。表示された画面の「Script」「HTML」「CSS」にそれぞれ記載していきます。
html、css、scriptを作成する場所を開くには、タブの「Script Lab」をクリックして「Code」を押します。表示された画面の「Script」「HTML」「CSS」にそれぞれ記載していきます。
HTML
<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>
<div class="okRange mt-5">
<p>合格範囲</p>
<input type="number" id="okRangeStart"/>
<input type="number" id="okRangeEnd"/>
</div>
HTML
<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>
<div class="okRange mt-5">
<p>合格範囲</p>
<input type="number" id="okRangeStart"/>
<input type="number" id="okRangeEnd"/>
</div>
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;
}
.okRange input{
height: 30px;
}
p{
margin: 0px;
}
.mt-5{
margin-top: 20px !important;
}
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;
}
.okRange input{
height: 30px;
}
p{
margin: 0px;
}
.mt-5{
margin-top: 20px !important;
}
HTMLには、Data列の数値が合格範囲外だった場合は赤い背景にするスクリプトを実行するボタンと、赤い背景を元に戻すボタンと、合格範囲を入力するinputを2つ用意しました。
CSSに追加したのはinputの高さの設定などを追加しました。
HTMLには、Data列の数値が合格範囲外だった場合は赤い背景にするスクリプトを実行するボタンと、赤い背景を元に戻すボタンと、合格範囲を入力するinputを2つ用意しました。
CSSに追加したのはinputの高さの設定などを追加しました。
3. スクリプトを書く
3. スクリプトを書く
やっていることは、入力があるセル範囲を取得、合格範囲を入力するinputの入力値を取得してData列の数値が合格範囲外だった場合は、エラー用の配列にrangeの文字列を入れています。最後に、getRagesという関数で複数の範囲を一括で選択して、赤い背景にしています。
やっていることは、入力があるセル範囲を取得、合格範囲を入力するinputの入力値を取得してData列の数値が合格範囲外だった場合は、エラー用の配列にrangeの文字列を入れています。最後に、getRagesという関数で複数の範囲を一括で選択して、赤い背景にしています。
Script
$("#run").on("click", () => tryCatch(run));
$("#clear").on("click", () => tryCatch(clear));
async function run() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
let okRangeStart = Number(document.getElementById("okRangeStart").value);
let okRangeEnd = Number(document.getElementById("okRangeEnd").value);
let errRangeStrs = [];
for (let i = 0; i < usedRange.values.length; i++) {
if (i == 0) continue;
if (usedRange.values[i][1] < okRangeStart || okRangeEnd < usedRange.values[i][1]) {
let errRangeStr = `A${i + 1}:B${i + 1}`;
errRangeStrs.push(errRangeStr);
}
}
let errRange = sheet.getRanges(errRangeStrs.join(",")).load();
errRange.format.fill.color = "FCE4EC";
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
usedRange.format.fill.clear();
})
}
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));
async function run() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
await context.sync();
let okRangeStart = Number(document.getElementById("okRangeStart").value);
let okRangeEnd = Number(document.getElementById("okRangeEnd").value);
let errRangeStrs = [];
for (let i = 0; i < usedRange.values.length; i++) {
if (i == 0) continue;
if (usedRange.values[i][1] < okRangeStart || okRangeEnd < usedRange.values[i][1]) {
let errRangeStr = `A${i + 1}:B${i + 1}`;
errRangeStrs.push(errRangeStr);
}
}
let errRange = sheet.getRanges(errRangeStrs.join(",")).load();
errRange.format.fill.color = "FCE4EC";
});
}
async function clear() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
let usedRange = sheet.getUsedRange().load();
usedRange.format.fill.clear();
})
}
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);
}
}
4.さいごに
4.さいごに
エクセルを操作するためにどの関数を使えばいいのか調べてもよくわからないのが難点ですが、javascriptでエクセル操作ができてUIもhtmlで書けてとても便利です。
エクセルを操作するためにどの関数を使えばいいのか調べてもよくわからないのが難点ですが、javascriptでエクセル操作ができてUIもhtmlで書けてとても便利です。
Editors pick
Our other articles