Google Apps Script試行錯誤 Blog: Webアプリを作ってシートに値を入力する

2017年10月7日土曜日

Webアプリを作ってシートに値を入力する

HtmlServiceを使ったWebアプリケーションを作成して、スプレッドシートに値を入力してみましょう。

Webアプリケーションをつくって実行する手順はこちら

Webアプリの雛形

コード.gs

function doGet(){
 return HtmlService.createHtmlOutputFromFile('index'); 
}

function input_to_sheet_gs(ss_url, value) {
  var ss = SpreadsheetApp.openByUrl(ss_url);
  var sh = ss.getSheets()[0];
  sh.getRange("A1").setValue(value);
  return "入力したよ";
}

意訳.gs

この処理は以下を実行する
指定したファイルのHTMLを表示する


この処理は以下を実行する
受け取ったss_urlのシートを開いて
先頭のシートを選択して
A1に受け取った値を入力する
指定したテキストを返す

index.html

<!DOCTYPE html>
<html>
<body>
  <input type="text" id="ss_url">
  <br>
  <textarea id="ta"></textarea>
  <br>
  <button id="submit">submit</button>
  <script>
    document.getElementById("submit").onclick = input_to_sheet;

    function input_to_sheet() {
      var ss_url = document.getElementById("ss_url").value;
      var value = document.getElementById("ta").value;
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(onSuccess)
        .input_to_sheet_gs(ss_url, value);
    }

    function onSuccess(result) {
      alert(result);
    }

    function onFailure(e) {
      alert([e.message, e.stack]);
    }
  </script>
</body>
</html>

意訳.gs

HTML5の文書
ここからhtml
ここからbody
テキストボックスを配置
改行
テキストエリアを配置
改行
ボタンを配置
ここからJavascript
idが"submit"の要素をクリックしたら指定した処理を実行する

この処理は以下を実行する
idが"ss_url"の要素の値を取得して
idが"ta"の要素の値を取得して
以下を下から順に実行する
失敗したらonFailureを実行する
成功したらonSuccessを実行する
取得した値をinput_to_sheet_gsで実行する


この処理は以下を実行する
受け取った値をアラートに表示する


この処理は以下を実行する
エラーメッセージと過程をアラートに表示する

ここまでJavascript
ここまでbody
ここまでhtml

Webアプリの雛形の手順でアプリケーションを開くと
以下のUIが表示されます