Googleドライブ上で使えるデータベースFusion Tablesの基本

2018/05/07 2018/08/19

Googleドライブ上でFusion Tablesというデータベースが使えます。Google Apps Script（GAS）で制御できるのと、それを介してスプレッドシートと連携できるのでとても便利です。

今回はFusion Tablesの導入から認証方法、GASからの制御方法（今回は簡単にSELECT文からの読み込みのみ）について書き留めておきます。

[ad#top-1]

1 Fusion Tablesの導入
2 Fusion Tables のテーブルの編集
3 Google Apps Scriptからの認証
4 Google Apps Script からの制御
5 ソースコード

Fusion Tablesの導入

Google Drive上の「アプリの追加」からFusion Tablesを探して有効化します。登場してから数年経ちますがまだ（試験運用）のままですね。

有効化すると新規メニューに現れるのでクリックして起動しましょう。

新しいタブで以下のような画面が現れます。すでにあるDBファイルやスプレッドシートからインポートもできるようです。今回は新規作成ということで、「Create empty table」を選びます。

以下のように空のテーブルが現れました。空のテーブルと言ってもデフォルトでテーブル１つが用意されていて、「Text, Number, Location, Date」の４つのカラムが現れています。

Fusion Tables のテーブルの編集

デフォルトで設定されているフィールドを編集します。テーブルごと削除して新たなテーブルを作ってもOKです。今回はあくまで編集することにします。

それぞれのフィールド名のところでプルダウンメニューを開き、「Change…」をクリックします。

以下のようなウィンドウが現れるので任意のフィールド名や型を設定します。

こんな感じで設定しました。

データを追加する場合は、メニューから「Edit」−「Add row」を選択します。

このようにデータを追加すればOKです。

こんな感じでデータを追加しました。

ファイルはGoogleドライブ直下に現れます。どこかのフォルダから開いてもここに保存されるので注意しましょう。適宜、任意のフォルダに移動すれば以降はそこが作業スペースとなります。

Google Apps Scriptからの認証

ソースコードは後述するとして、Google Apps ScriptからFusion Tablesが使えるよう認証作業を行います。

Google Apps Scriptのメニューから「リソース」−「Googleの拡張サービス」を選びます。

以下の画面が現れるので、Fusion Tables APIを探して、(1)のところを「ON」にします。次に(2)の「Google API コンソール」のリンクをクリックします。

以下の画面が現れるので、左サイドメニューから「ライブラリ」をクリックします。

以下の画面が現れるので「Fusion Tables API」を探します。…が、探しきれないので検索をかけましょう。

Fusion Tables APIを有効化します。これでFusion Tablesの認証作業は終わりです。

ウェブアプリケーションとして導入する際に最初だけ承認作業が促されるので「許可を確認」ボタンを押しましょう。

以下の画面が現れるので「許可」を押してください。

Google Apps Script からの制御

指定されたURLに行くと、HTMLとgsで作ったプログラムが動きます。

今回はデータベースに入っているデータをすべて呼び出すプログラムを作りました。（ソースコードは後述）

以下のようにボタンを押すとデータが現れるようになりました。うまくFusion Tablesからデータを読み込みできますた。

ソースコード

ソースコードを掲載しておきます。

その前に、Fusion TablesのURLに記載されているdocidコードを控えておいてください。

index.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
  function getdata(){
    google.script.run.withSuccessHandler(result).getDB();
    function result(data){
      document.getElementById("TEST").innerHTML = data;
    }
  }
</script>
</head>
<body>
  <h1>Hello Fusion Tables!</h1>
  <hr />
  <div id="TEST"></div>
  <button onclick="getdata()">DB読込</button>
</body>
</html>

コード.gs

function doGet() {
  var t = HtmlService.createTemplateFromFile("index.html");
  return t.evaluate();
}

function getDB(){
  var docid = "1l8z...sLdz"; //Fusion Tablesのurlに含まれるdocid
  var sql = "SELECT * FROM " + docid + "";
  var result = FusionTables.Query.sqlGet(sql);
  var data = '<table border="0″ cellpadding="3″ cellspacing="1″ bgcolor="#666666″>';
  data += '<tr>';
  data += '<td style="background:#ddf; text-align:center; font-weight:bold; width:50px;">Name</td>';
  data += '<td style="background:#ddf; text-align:center; font-weight:bold; width:100px;">Location</td>';
  data += '<td style="background:#ddf; text-align:center; font-weight:bold; width:100px;">Age</td>';
  data += '</tr>';
  for( var i=0; i<result.rows.length; ++i ){
    data += "<tr>";
    data += '<td style="background:#fff; text-align:center;">' +result.rows[i][0]+ '</td>';
    data += '<td style="background:#fff; text-align:center;">' +result.rows[i][1]+ '</td>';
    data += '<td style="background:#fff; text-align:center;">' +result.rows[i][2]+ '</td>';
    data += "</tr>";
  }
  data += '</table>';
  return data;
}

Fusion Tablesに新規挿入・更新・削除する方法はこちら

非IT企業に勤める中年サラリーマンのIT日記