LANG SELRCT

コードを書く場所についてはこちら

2018年1月5日金曜日

サイドバー上でデータを入出力するUIを作る


HTML Serviceでサイドバーを作成してそのUI上で値の読み書きをしてみます


このサイドバー上でできること

  • 読み込むボタンを押したら
    • 選択されているセルの行数を取得する
    • B列の値を読み込む
  • 2つめのテキストエリアにテキストを入力したら
    • 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行目(2行目)の値を取得して
行数と値を配列に入れて
返す


この機能がやること
受け取った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