Fusion Tables×Google Apps Script（Webアプリケーション作成編1）

「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の情報を読み取り、中身を書き換えるようにしています。

##画面処理の流れ
画面から動作を見てみます

select.htmlでFusion Tablesに登録されたデータを取得し、一覧表示します。
Webアプリケーションとして開いた場合、まずこの画面が開くようになっています。

上記のselect.htmlから"データ追加"をクリックすると、insert.htmlに画面が切り替わります。

入力フィールド2つに入力し、"データ追加"をクリックすることで、データが実際のFusion Tablesに入ります。

select.htmlに戻ると、先ほど入力したデータがそのまま入っています。

単純ですで、これでFusion TablesとGoogle Apps Scriptを用いてWebアプリケーションを作ることができました。
しかしながら、これでは流石に単純過ぎるので、次回もう少し拡張させてみようと思います。

以上