LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2017年10月7日土曜日

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

HtmlServiceを使った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が表示されます


入力したいスプレッドシートのurlを入力する


入力したいテキスト入力する


submitボタンをクリックする




スプレッドシートを見るとA1に値が入力されている




FYI
スプレッドシート上にUIを作成したい場合はこちら
入力ツールからシートに値を入力する


最新の投稿

選択したテキストを配列に入れてテキストエリアに出力したい

今回やりたいこと アプリケーションの中で 選択したテキストを取得する。 選択したテキストを テキストエリアに入れる。 選択したテキストを 配列に追加していく。 STEP1 「テキストを」を選択するとテキストエリアに「テキストを」が入る。 STEP2 その後、「追加して」を選択する...