Google Apps ScriptとFusion Tablesを用いたWebアプリケーションの開発方法について記載します。

まずFusion Tablesを利用できるようAPIを有効にします。以下のURLにアクセスして、Googleの管理コントロールパネルにアクセスして下さい。

https://admin.google.com/

「アプリ」をクリックして下さい。

「その他のGoogleサービス」をクリックして下さい。

「フィルタ:主なサービス」のところにあるXをクリックして下さい。

すべてのサービスが表示されます。「Fusion Tables」の右端をクリックして、「オン(すべてのユーザー)」をクリックして下さい。

「すべてのユーザーに対してオンにする」をクリックして下さい。

以下のURLにアクセスして、スクリプトエディタを開いて下さい。

https://script.google.com/

「リソース」→「Googleの拡張サービス」をクリックして下さい。

プロジェクト名の入力画面が表示されます。任意のプロジェクト名を入力して、「OK」をクリックして下さい。

APIの一覧画面が表示されます。スクロールして「Fusion Tables API」を探して、その行の右端のスイッチをクリックして緑色に反転した状態にして、「OK」をクリックして下さい。

「リソース」→「Developers Consoleプロジェクト」をクリックして下さい。

「このスクリプトが現在関連付けられているプロジェクト:」の直下に表示されているプロジェクト名をクリックして下さい。

「すべてのサービスと関連 API について、適用される利用規約を遵守して利用することに同意します。」にチェックをして、「同意する」をクリックして下さい。

「Google APIを利用する」をクリックして下さい。

虫眼鏡が表示されている検索ボックスに「Fusion」と入力して下さい。「Fusion Tables API」が表示されるので、クリックして下さい。

「APIを有効にする」をクリックして下さい。

以下の様な画面になり、しばらくすると画面が切り替わり、APIが有効になります。

スクリプトエディタに戻って下さい。「閉じる」をクリックして下さい。

名前と自己紹介を一覧で表示するWebアプリケーションを作成します。

まず、テーブルを作成します。Googleの管理コントロールパネルに戻り、画面右上のアイコン(■が9個並んでいるやつ)をクリックして、「ドライブ」をクリックして下さい。

「新規」→「その他」→「アプリを追加」の順にクリックして下さい。

右上の検索ボックスに「Fusion」と入力して、エンターをクリックして下さい。

「Fusion Tables」が表示されますので、「+接続」をクリックして下さい。

「OK」をクリックして下さい。

画面右上の「✕」をクリックして下さい。

「新規」→「その他」→「Google Fusion Tables」の順にクリックして下さい。

「Create empty table」をクリックして下さい。

「Edit」→「Change columns」の順にクリックして下さい。

左端にカラム名が表示されます。カラム名の隣の「✕」ボタンをクリックして、「Text」以外のフィールドをすべて削除して下さい。

下記のような状態になるはずです。画面右部の「Column name」のところを「name」と入力して下さい。これは、名前を格納するフィールドになります。

次に、自己紹介文を格納するフィールドを作成します。「NEW」→「Column」の順にクリックして下さい。

新しいフィールドが作成されます。「Column name」のところを「profile」と入力して、画面上部の「Save」をクリックして下さい。

カラムを削除したので、以下の様な確認画面が表示されます。構わず「Save and remove columns」をクリックして下さい。

テーブルにデータを追加します。「Edit」→「Add Row」を追加します。

「name」と「profile」の部分に文字を入力して「Save」をクリックして下さい。同様の作業を繰り返していくつかデータを登録します。

ここで、URLに記載されている「docid=XXXXX#rows:id=1・・・」の「XXXXX」部分をメモしておいて下さい。Fusion Tablesはテーブルにアクセスするとき、テーブル名ではなく、このIDを使います。

スクリプトエディタに戻って、以下のソースコードを作成して下さい。(ソースコードの作成方法は、Google Apps ScriptによるWebアプリケーション開発を参考にして下さい)

■コード.gs

function doGet(e) {
  var sql = 'SELECT * from 1mWsMLoxQfl5G6hAFgmax7Of6skVqizHbsYSL797U'; // (1)

  var result = FusionTables.Query.sqlGet(sql); // (2)

  var output = HtmlService.createTemplateFromFile('result');
  output.result = result;
  return output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME); 
}

■result.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
<?
  var rows = result.rows; // (3)

  for( var i=0;i<rows.length;i++ ) { 
?>

<?= rows[i][0] ?>:<?= rows[i][1] ?><br>

<?
  } 
?>
  </body>
</html>

(1)では、SQLを定義しています。テーブル名は先ほど取得したテーブルのIDを指定しています。

(2)はSQLを実行しています。

(3)では、SQLで取得したデータを表示しています。「コード.gs」にてSQLの結果を格納した「result」という変数のプロパティ「rows」に結果が一行ずつ配列として格納されています。

(4)では、結果を一行ずつ取得して表示しています。

Webアプリケーションを公開して下さい。アプリケーションの公開方法は、Google Apps ScriptによるWebアプリケーション開発を参考にして下さい。ちなみに初回の公開のときだけ、以下の様なダイアログが表示されますので、「許可」をクリックして下さい。

アプリケーションを実行すると、以下の様な画面が表示され、テーブルに登録した名前と自己紹介が一覧で表示されます。