2017年11月5日日曜日

Webアプリを作ってシートの値を読み込む

A1セルに hello と入力されているシートがあって



HTML Serviceで作ったWebアプリに読み込む
ということをやってみましょう


HTML ServiceでWebアプリケーションを作る方法




コード.gs 
function doGet(){
 return HtmlService.createHtmlOutputFromFile('index'); 
}

function get_value_gs(ss_url, sh_id) {
  var ss = SpreadsheetApp.openByUrl(ss_url);
  var shs = ss.getSheets();
  for(var i = 0; i < shs.length; i++){
    if(shs[i].getSheetId() == sh_id){
      var value = shs[i].getRange("A1").getValue();
    }
  }
  return value;
}
意訳.gs
この処理は以下を実行する
indexという名のHTMLファイルを返す


この処理は以下を実行する
渡されたss_urlのスプレッドシートを取得し
シートをすべて取得する
シートの数だけ以下を繰り返す
もし渡されたsh_idに一致するシートが見つかったら
valueにA1の値を入れて


その値を返す

index.html 
<!DOCTYPE html>
<html>
<body>
  <textarea id="ta"></textarea>
  <script>
    get_value();

    function get_value() {
      var ss_url = "https://docs.google.com/spreadsheets/d/FILE_ID/edit";
      var sh_id = 0;
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(onSuccess)
        .get_value_gs(ss_url, sh_id);
    }

    function onSuccess(result) {
      document.getElementById("ta").value = result;
    }

    function onFailure(e) {
      document.getElementById("ta").value = [e.message, e.stack];
    }
  </script>
</body>
</html>
意訳.gs
HTMLファイルであることを宣言する
htmlタグを作成
bodyタグを作成
textareaタグを作成
scriptタグを作成
get_value()を実行する

この処理は以下を実行する
取得したいスプレッドシートのURLを指定する
シートidを指定する
以下を下から順に実行する
失敗したらonFailureを実行する
成功したらonSuccessを実行する
get_value_gsを実行する


この処理は以下を実行する
get_value_gsから返ってきた値をテキストエリアに入れる


この処理は以下を実行する
エラーメッセージと過程をテキストエリアに入れる

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


参考サイト
https://developers.google.com/apps-script/guides/html/