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

こんにちは、井下です。

個人的に冬⇒春は寒気⇒花粉のコンボで毎年苦しめられるのですが、みなさんはいかがでしょうか。
早く夏来ないかなぁ…。


前回はGoogle Apps ScriptでFusion Tables APIを利用するところまで書きましたが、
今回と次回でWebアプリケーション化を行い、それ以降は速度の検証や
マッピング機能について詳細に書いていく予定です。

実装する内容
繰り返しになりますが、前回はテーブルから"SELECT"で値を参照し、"INSERT"で値の挿入を行いました。
今回はそのWebアプリケーション化ということですが、Fusion TablesだからAPIの使い方が変わるような部分はありません。

実際のコードを以下の通りです。

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"による結果表示画面）

<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"による入力画面）

<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メソッドの中身が前回と変わっている点としては…

• 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アプリケーションを作ることができました。

ただ、これでは流石に単純過ぎるので、次回もう少し機能を増やしたものを作ってみます。
例えば、自分が作ったテーブルから、参照するテーブルを選んだり、テーブル自体を作成・削除できるようにしたり…

主にFusion Tables APIの機能をもっと使ったものを作成する予定です。