SEのせまい物置小屋: [GAS] Google Apps ScriptでjQueryを使う

Google Apps ScriptでもjQueryを使った画面制御を行うことができます。

下図の様な簡単な画面を作ります。
AのテキストボックスとBのテキストボックスに数字を入力して
「足し算」ボタンをクリックすると結果を表示する画面です。
※Javascriptだけで完結できる内容ですが、あえてGoogle Apps Scriptとの通信を発生させます。

Googleドライブからスクリプトを作成します。
そして最初に画面表示用のHTMLを作成します。

[ファイル] > [新規作成] > [HTMLファイル]とクリックしていきます。

内容はこんな感じ。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  // 画面初期表示
  $(function() {
    $('#btn').click(function(e) {
      // サーバ上のadd関数を呼び出し、成功した場合はonAddSuccess関数にコールバックする
      google.script.run.withSuccessHandler(onAddSuccess).add(this.parentNode);
    }); 
    function onAddSuccess(res) {
      $('#answer').text(res);
    }
  });
</script>
<form style="margin: 50px;">
  A<input type="text" name="a"/>
  B<input type="text" name="b"/>
  <input type="button" id="btn" value="足し算"/>
  <div id="answer"></div>
</form>

続いてGoogle Apps Scriptのコードは以下のとおり。

// 初期表示
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index"); 
}
// 足し算の結果を返却する
function add(param) {
  var a = parseInt(param.a);
  var b = parseInt(param.b);
  var c = a + b;
  return a + " + " + b + " = " + c;
}

[公開] > [ウェブアプリケーションとして導入]から画面を表示します。
そしてAとBに何か数字を入力します。