「Google Apps Script連携編」では、テーブルから"SELECT"で値を参照し、"INSERT"で値の挿入を行いました。
今回は、Google Apps ScriptでFusion Tablesを利用した、基本的なWebアプリケーションを作ってみるということで、前回のものをWebアプリケーション化ます。

実装内容

先ずは、実装したコードを先に示して、その後に解説します。

fusionTableAPI.gs（サーバサイドの処理）

fusionTableAPI.gs

function doGet() {
  var output = HtmlService.createTemplateFromFile('select');
  return output.evaluate();
}

function select(){
  var tableId = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
  var sql = 'SELECT name, value FROM ' + tableId;
  var res = FusionTables.Query.sql(sql);

  return res.rows;
}

function insert(form){
  var tableId = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
  var name = form.name;
  var value = form.value;

  var sql = 'INSERT INTO ' + tableId + '(name, value) VALUES (\'' + name + '\'' + ',' + value + ')';
  var res = FusionTables.Query.sql(sql);

  return 'データを追加しました'
}

function getPageHtml(page){
  var output = HtmlService.createTemplateFromFile(page);
  return output.evaluate().getContent();
}

select.html（"SELECT"による結果表示画面）

select.html

<script>
  function transitionPage(resultHtml) {
    var outputDiv = document.getElementById('html');
    outputDiv.innerHTML = resultHtml;
  }

  function onSuccess(message){
    alert(message);
  }
</script>  

<div id="html">
<h2>データ一覧</h2>
<form>
  <p><input type="button" value="データ追加" onclick="google.script.run.withSuccessHandler(transitionPage).getPageHtml('insert')"></p>
<table border=1>
<?
  var datas = select();
  for(var data in datas){
    output.append('<tr><td>' + datas[data][0] + '</td>');
    output.append('<td>' + datas[data][1] + '</td></tr>');
  }
?>
</table>
</form>
</div>

insert.html（"INSERT"による入力画面）

insert.html

<div id="html">
<h2>データ追加</h2>
<form>
  <p><input type="button" value="データ追加" onclick="google.script.run.withSuccessHandler(onSuccess).insert(this.parentNode)">
  <input type="button" value="データ一覧" onclick="google.script.run.withSuccessHandler(transitionPage).getPageHtml('select')"></p>
  <table border=1>
    <tr>
      <th>都市名</th>
      <th>人口</th>
    </tr>
    <tr>
      <td><input type="text" name="name"></td>
      <td><input type="text" name="value"></td>
    </tr>
  </table>
</form>
</div>

解説

コードを見ていただいたとおり、"SELECT"と"INSERT"のメソッドは、特に通常のWebアプリケーションと変わりなく呼び出すことができます。

selectメソッドとinsertメソッドの中身が前回（Google Apps Script連携編」）と変わっている点としては…
select："select.html"で表示させやすいように、"res.rows"を返している（登録されているデータのみで構成された配列が返るようになります）
insert：SQL文内部で変数に対応するようになっている

若干前回と変わりはあるものの、Webアプリケーションにするうえでの表示の配慮や、変数への対応くらいの変更に収まっています。

緑字の部分は非同期で画面を切り替えるための処理を示しています。
Google Apps Scriptの難点としても挙げられますが、単純な< a href>などによる画面遷移ができないため、ボタンをクリックされたら、対象のHTMLの情報を読み取り、中身を書き換えるようにしています。