Google Fusion Tablesは、簡単に言うとオンラインで使えるデータベースです。これ、相当すごいと思います。夢広がりまくりです。SQLっぽいクエリを投げて、データを取得したり、追加したりなどなどできます。
特にGoogle Mapsとの連携が良くできていますが、今回は純粋にデータベースとして使ってみる試みです。詳しい手順は忘れたのでざっくりいきますが、極力絵は多めです。Googleの公式Webに説明は多くあるものの今一つつかみどころ無く、かなり苦労したためです。
APIキー取得
こちらから取得。
https://code.google.com/apis/console/
プロジェクト作成
こんな画面を出して、「CREATE PROJECT」の赤ボタンを押してプロジェクトを作ります。
API登録
作ったプロジェクトの中に進み、左のメニューの API & auth のAPIsを見ると、使えるAPIがずらっと一覧になっています。名前を見ているだけで夢が広がってきます。今回はFusion Tables APIをONにします。
アプリケーション登録
続いて左のメニューから Registered appsに進み、REGISTER APPを押してアプリケーションを登録します。これから作るプログラムをアプリケーションととらえ、そのプログラムからGoogleを使わせていただくための各種情報を頂戴します。
今回はWeb ApplicationでたぶんOK.
これで登録すると、こんな画面になります。まず使うのはBrowser Keyです。メモっておきます。また、あとでOAuth 2.0 ClientIDも必要になりますのでこちらも開いて確認しておきましょう。
Fusion Talbesの準備
新規作成
Google Driveを開いて、作成するときの「アプリの追加」を選ぶと、デフォルトのスプレッドシート等以外のドキュメントも作ることができます。ここからFusion Tablesを選択し、新規作成できる状態にします。
作成時はCreate empty tableで良いです。何か良いデータがあるなら既存のExcelファイルなどを上げても良さそうです。
データ入力
「若干操作しづらいスプレッドシート」といった感触で、気軽にデータを入れていくことができます。empty tableで始めると下の画像のような4列ができます。適当に入れてみましょう。
Locationについてはデータ型がLocationになっていて、geocodeを使うことで地名から緯度経度情報に変換できたりもします。Map of Locationのタブを押せばその位置がすぐに地図で確認できたりもします。やはりGoogle Maps連携が重視されていますね。
共有設定
APIからアクセスしやすいよう、右上の青いShareボタンから「リンクを知っている全員が閲覧できます」状態に変えます。
またこの際、このテーブルのIDも控えておきます。正攻法じゃない気はするのですが、表示されているリンクのdocid=***の部分がテーブルIDです。
JavaScriptからデータの取得
ようやくコードが書けます。手始めに全データを取得してみましょう。今回は適当なHTMLを書いて、その中のJavaScriptから実行させます。jQueryの力も借りています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<title>FusionTables Test</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://apis.google.com/js/client.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var apiKey = 'AIzaSyDB3OjI-xxxxxxxxxxxxxxxxxxxxxxxxxx';
var tableId = '1Le9Mv57xwsp7yyyyyyyyyyyyyyyyyyyyyyyyyyy';
function initialize(){
var sql = 'SELECT * FROM ' + tableId;
var url = 'https://www.googleapis.com/fusiontables/v1/query';
url += '?key=' + apiKey;
url += '&sql=' + encodeURIComponent(sql);
$.ajax({
url: url,
dataType: 'json',
success: function (data) {
console.log(data);
writeDataAsCsv(data);
}
});
}
function writeDataAsCsv(data){
var text = '';
text += data.columns.join(",") + "\n";
$.each(data.rows, function(index, row){
text += row.join(",") + "\n";
});
$('#container').html("<pre>" + text + "</pre>");
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
HTMLをブラウザで見ます。少し待たされるかもしれませんが、こんな表示が出れば成功。
Text,Number,Location,Date Hoge,1,Tokyo,2013-11-27 Fuga,2,Tottori,2013-12-25 Piyo,3,Wakkanai,2013-12-02
API(クエリ)の仕様については、このページなどが参考になります。
https://developers.google.com/fusiontables/docs/v1/using
JavaScriptからデータを追加
OAuthの追加
次は追加です。ただし追加(と削除)は取得に比べ、壁があります。上記のコードでクエリをINSERTに変えたりしても動きません。OAuthの認証が必要です。
（取得についても、「リンクを知っている全員が閲覧できます」状態でないのならOAuthが必要？）
はじめにアプリケーションの登録をしたときに、OAuthの項目もあり、ClientIDが示されていました。あれが必要です。Web Origin、Redirect Uriの欄があり、たぶん設定が必要？です。ここで示すURLにHTMLを置く必要があるようで、ローカルにHTMLを置いても認証がされませんでした。
ClientIDを使って、こんなコードを書けば認証ができます（Google謹製の例よりだいぶ端折っています）。scopesはFusion Tablesでは以下の値で固定で良いです。
var clientId = '903248181902-*************.apps.googleusercontent.com'; var scopes = 'https://www.googleapis.com/auth/fusiontables'; gapi.client.setApiKey(apiKey); gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, function(authResult) { if (authResult && !authResult.error) { alert("Auth was successful!"); } else { alert("Auth was not successful"); } });
他のGoogleアカウントによる認証サービスでよく見るダイアログが現れ、承認すればアクセストークンが得られます。以後は gapi.auth.getToken().access_token からトークンを確認できます。このトークンをクエリと一緒に渡すことでアクセスが認められます。
行追加 (INSERT) のクエリを投げる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<title>FusionTables Test</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://apis.google.com/js/client.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var clientId = '903248181902-*************.apps.googleusercontent.com';
var apiKey = 'AIzaSyDB3OjI-***************';
var scopes = 'https://www.googleapis.com/auth/fusiontables';
var tableId = '1Le9Mv57xwsp7chNDE****************';
function initialize(){
// OAuth2.0
gapi.client.setApiKey(apiKey);
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: false
}, function(authResult) {
if (authResult && !authResult.error) {
alert("Auth was successful!");
} else {
alert("Auth was not successful");
return;
}
});
// 適当な追加するデータ
var text = "Foobar";
var number = 100;
var loc = 'Beijing';
var date = '2014-01-03';
// Fusion Tablesに行を追加
var sql = "INSERT INTO " + tableId;
sql += " (Text,Number,Location,Date)";
sql += " VALUES ('"+text+"','"+number+"','"+loc+"','"+date+"')";
var url = 'https://www.googleapis.com/fusiontables/v1/query';
url += '?access_token=' + gapi.auth.getToken().access_token;
var data = 'key=' + apiKey;
data += '&sql=' + encodeURIComponent(sql);
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: data,
success: function (data, textStatus, xhr) {
alert('送信成功');
},
error: function (xhr, textStatus, errorThrown) {
alert('Fusion TableへのPOSTに失敗');
console.log(errorThrown);
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
送信成功、とアラートが出たら、Google DriveからFusion Tablesを見に行きましょう。無事行が追加されていればOKです。
