HTML Serviceでサイドバーを作成してそのUI上で値の読み書きをしてみます
このサイドバー上でできること
- 読み込むボタンを押したら
- 選択されているセルの行数を取得する
- B列の値を読み込む
- ２つめのテキストエリアにテキストを入力したら
- C列にその値を入力する
コード.gs
var LOAD_COL = 2;
var INPUT_COL = 3;
function onOpen() {
SpreadsheetApp.getUi()
.createMenu("SCRIPT")
.addItem("サイドバーを開く", "openSidebar")
.addToUi();
}
function openSidebar() {
var html = HtmlService.createHtmlOutputFromFile("index")
.setTitle("Input App");
SpreadsheetApp.getUi().showSidebar(html);
}
function get_value_gs() {
var sh = SpreadsheetApp.getActiveSheet();
var row = sh.getActiveRange().getRow();
var LOAD_COL_value = sh.getRange(row, LOAD_COL).getValue();
var results = [row, LOAD_COL_value,];
return results;
}
function set_value_gs(values) {
var row = values[0];
var value = values[1];
var sh = SpreadsheetApp.getActiveSheet();
var range = sh.getRange(row, INPUT_COL);
range.setValue(value);
}
|
意訳LOAD_COLに2を入れる INPUT_COLに3を入れる スプレッドシートが開いた時に実行する スプレッドシートのUIを取得して メニューに SCRIPT を作って "サイドバーを開く" 項目を追加して openSidebar の機能を割り当てて UIに追加する この機能がやること 指定したHTMLファイルを表示して タイトルを Input App にして スプレッドシートのUIを取得してサイドバーに表示する この機能がやること アクティブシートを取得して 選択されているセルの行番号を取得して その行のLOAD_COL行目（２行目）の値を取得して 行数と値を配列に入れて 返す この機能がやること 受け取ったvaluesの0番目（行数が入っている）を取得して 受け取ったvaluesの1番目（値が入っている）を取得して アクティブシートを取得して 受け取った行のINPUT_COL列に 受け取った値を入力する |
index.html
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
width: 80vw;
height: 10vh;
}
</style>
</head>
<body>
<label for="row">row</label>
<input type="text" id="row"><br>
<label for="load_col_value">load_col_value</label>
<textarea id="load_col_value"></textarea><br>
<label for="input_col_value">input_col_value</label>
<textarea id="input_col_value"></textarea><br>
<button type="button" id="bt">読み込む</button><br>
</body>
<script>
document.getElementById("bt").onclick = get_value;
document.getElementById("input_col_value").onkeyup = set_input_col_value;
function get_value() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.get_value_gs();
}
function onSuccess(results) {
var row = results[0];
var load_col_value = results[1];
document.getElementById("load_col_value").value = load_col_value;
document.getElementById("row").value = row;
}
function onFailure(e) {
alert([e.message, e.stack]);
}
function set_input_col_value() {
var row = document.getElementById("row").value;
var value = document.getElementById("input_col_value").value;
var values = [row, value];
google.script.run.set_value_gs(values);
}
</script>
</html>
|
意訳これはHTML5文書です テキストエリアの 幅を表示領域の最大を100とした時の80にする 高さを表示領域の最大を100とした時の10にする idがrowのラベル そのテキストボックス idがload_col_valueのラベル そのテキストエリア idがinput_col_valueのラベル そのテキストエリア idがbtのボタン idがbtの要素がクリックされたらget_valueを実行する idがinput_col_valueの要素でキーが上がったらset_input_col_valueを実行する この機能がやること .gsファイルのスクリプトを実行する 失敗したらonFailureを実行する 成功したらonSuccessを実行する .gsファイルのスクリプトはget_value_gsを実行する この機能がやること resultから行数を取得して 読み込んだ値を取得して idがload_col_valueの要素に値を入力して idがrowの要素に行数を入力する この機能がやること エラーメッセージをアラートに出す この機能がやること idがrowの要素の値を取得して idがinput_col_valueの要素の値を取得して それら配列に入れて .gsファイルのset_value_gsに渡す |
参考
Dialogs and Sidebars in G Suite Documents / Custom sidebars
https://developers.google.com/apps-script/guides/dialogs
Dialogs and Sidebars in G Suite Documents / Custom sidebars
https://developers.google.com/apps-script/guides/dialogs