Google Apps ScriptとGoogle Fusion TablesでWebアプリ作成

| コメントをどうぞ

今回は、Googleドライブの拡張機能である「Google Fusion Tables」と「Google Apps Script」を利用して簡単なマスタメンテナンスアプリを作成してみたいと思います。

ドライブへのアプリケーション追加

Google Fusion TablesとGoogle Apps ScriptはどちらもGoogleドライブで利用できるアプリケーションですが、デフォルトではインストールされていません。

作成からアプリ追加を選択します。

1.drive-app-menu-1

アプリ検索画面でGoogle Apps ScriptとFusion Tablesを検索して接続を選択すると作成メニューに追加されます。

2.drive-app-search

データベースの作成

それではGoogle Fusion Tablesでデータベースを作成してみたいと思います。
まず、作成からFusion Tableを選択します。

3.drive-app-menu-2

テーブルの作成方法としてCSVファイルや既存のスプレッドシートからインポートする方法もありますが、今回はCreate Empty Tableを選択します。

4.create-table-1

テーブル設定画面で以下のようにテーブル名とカラムを設定します。

テーブル名:商品マスタ
カラム名:code, name, price

4.create-table-3

画面作成

Google Apps Scriptで画面を作成していきます。
作成からスクリプトを選択します。

3.drive-app-menu-3

スクリプトエディタでHTMLとスクリプトファイルを作成していきます。
作成するファイルは以下となります。

  • コード.gs:スクリプトファイル
  • list.html:一覧画面
  • create.html:追加画面
  • update.html:更新・削除画面

5.script-editor

■コード.js

var tableId = '1lUTCLqAQRzkStXvlyake3eEqP2FNa54N93IDDPml'; //作成したFusionTableのurlに含まれるdocidを指定します

function doGet(request) {
  if( request.parameters.cmd == 'create' ) {
    // 追加画面の表示
    var output = HtmlService.createTemplateFromFile('create');
    return output.evaluate();
  }
  else if( request.parameters.row_id ) {
    // 更新・削除画面の表示
    var sql = 'SELECT ROWID, code, name, price FROM ' + tableId + ' WHERE ROWID = ' + request.parameters.row_id;
    var result = FusionTables.Query.sqlGet(sql);
    if( result.rows.length > 0 ) {
      var output = HtmlService.createTemplateFromFile('update');
      output.row = result.rows[0];
      return output.evaluate();
    }
  }
  else {
    // 一覧画面の表示
    var sql = 'SELECT ROWID, code, name, price FROM ' + tableId + ' LIMIT 100';
    var result = FusionTables.Query.sqlGet(sql);
    var output = HtmlService.createTemplateFromFile('list');
    output.result = result;
    return output.evaluate();
  }
}

// レコード追加
function createRecord(form) {
  var sql = "INSERT INTO " + tableId
   + " ('code','name','price')"
   + " VALUES ('" + form.code + "','" + form.name + "','" + form.price + "')";
  FusionTables.Query.sql(sql);
}

// レコード更新
function updateRecord(form) {
  var sql = "UPDATE " + tableId
   + " SET code='" + form.code + "', name='" + form.name + "', price=" + form.price
   + " WHERE ROWID = '" + form.row_id + "'";
  FusionTables.Query.sql(sql);
}

// レコード削除
function deleteRecord(form) {
  var sql = "DELETE FROM " + tableId + " WHERE ROWID = '" + form.row_id + "'";
  FusionTables.Query.sql(sql);
}

■list.html(一覧画面)

<style>
body { margin:10px; }
</style>

<table border="1" cellpadding="3" cellspacing="0">
  <tr>
   <th>商品コード</th>
   <th>商品名</th>
   <th>価格</th>
 </tr>
<?
  var rows = result.rows;
  for( var i=0;i<rows.length;i++ ) {
?>
  <tr>
   <td><a href="?row_id=<?= rows[i][0] ?>"><?= rows[i][1] ?></a></td>
   <td><?= rows[i][2] ?></td>
   <td><?= rows[i][3] ?></td>
 </tr>
<?
  }
?>
</table>
<br>
<a href="?cmd=create">新規作成</a>

■create.html(追加画面)

<style>
body { margin:10px; }
</style>

<script>
function onSuccess(data) {
  alert('追加しました');
}
</script>

<form>
<div><label>商品コード</label><input name="code"></div>
<div><label>商品名</label><input name="name"></div>
<div><label>価格</label><input name="price"></div>
<input type="button" onclick="google.script.run.withSuccessHandler(onSuccess).createRecord(this.parentNode);" value="追加">
</form>
<br>
<a href="?cmd=list">戻る</a>

■update.html(更新・削除画面)

<style>
body { margin:10px; }
</style>

<script>
function onUpdateSuccess(data) {
  alert('更新しました');
}

function onDeleteSuccess(data) {
  alert('削除しました');
}
</script>

<form>
<input type="hidden" name="row_id" value="<?= row[0] ?>">
<div><label>商品コード</label><input name="code" value="<?= row[1] ?>"></div>
<div><label>商品名</label><input name="name" value="<?= row[2] ?>"></div>
<div><label>価格</label><input name="price" value="<?= row[3] ?>"></div>
<input type="button" onclick="google.script.run.withSuccessHandler(onUpdateSuccess).updateRecord(this.parentNode);" value="更新">
<input type="button" onclick="google.script.run.withSuccessHandler(onDeleteSuccess).deleteRecord(this.parentNode);" value="削除">
</form>
<br>
<a href="?cmd=list">戻る</a>

アプリケーションの公開

最後に作成したアプリケーションの公開設定を行い公開します。

スクリプトエディタのメニューから「公開/ウェブアプリケーションとして導入」を選択します。

  1. プロジェクトバージョンを選択します。
  2. 実行ユーザとして「ウェブアプリケーションにアクセスしているユーザー」を選択します。
  3. アプリケーションにアクセスできるユーザーに「(使用ドメイン)の全員」を選択します。

5.app-setting-1

更新を選択して以下の画面から公開用のURLを取得します。

5.app-setting-2

アクセスすると以下のように表示されます。

5.result

おわりに

Google Apps ScriptとFusion Tablesを利用することによりデータベースと連携したWebアプリケーション開発が簡単に行えます。

  • データベース作成からアプリケーション作成、公開までを全てブラウザ上で行うことができる
  • JavaScript/HTML/CSSのみで開発できる
  • Googleのアカウント上に保有しているストレージ容量の範囲内であれば追加費用なしで利用できる
  • Webアプリケーションとしてのユーザー認証機能やセキュリティ機能を既に備えている

使いどころとしては、比較的小規模でスピードが求められる社内アプリ開発での利用が想定されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>