Google Apps Script: htmlからFusion Tablesを制御する
2018/08/19
前回、Google Apps Script（GAS）上でHTMLファイルを作成し、GAS（gsファイル）からHTMLファイルを制御する方法を書きました。
GASからHTMLを制御できるということは、以前書いたように、Googleドライブ上で使えるデータベース Fusion Tablesが使えるということになります。
[ad#top-1]
今回は、Fusion TableのデータをHTML上に表示する方法を紹介します。
ベースは前回のコードです。基本的にそこに書き加えていきます。
まず最初にFusion Tablesでデータベーステーブルを作成しておきます。以下の通り、myTableというテーブルを作成しました。作り方はここを参考にしてください。
URLにdocidコードが埋め込まれているので（赤字のところ）、控えておいてください。
https://www.google.com/fusiontables/DataSource?docid=1KFfe1…E3B#rows:id=1
次に、GASエディターの「コード.gs」にFusion Tablesのデータを引っ張ってくるコードを書きます。関数名はgetDB()としました。※doGet()関数は前回のままにしておいてください。これはHTMLを表示する際に最初にコールされる関数です。
function getDB(){
var docid = "1KFfe1...E3B"; //Fusion Tablesのurlに含まれるdocid
var sql = "SELECT * FROM " + docid + " ORDER BY ID";
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;">ID</td>';
data += '<td style="background:#ddf; text-align:center; font-weight:bold; width:100px;">Name</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;
}
次にHTMLです。index.htmlは以下の通り書きます。詳しくは前回の記事を参考にしてください。
<!DOCTYPE html>
<html>
<head>
<base target=“_top”>
</head>
<script>
function getdata(){
google.script.run.withSuccessHandler(result).getDB();
function result(data){
document.getElementById(“TEST”).innerHTML = data;
}
}
</script>
<body>
<h1>Hello World!</h1>
<hr />
<div id=“TEST”></div>
<button onclick=“getdata()”>DB読込</button>
</body>
</html>
最後にFusion table APIを使うためのGoogleの拡張サービスの設定を行います。★2016/5/19 追記★
これは以下の記事を参考にしてください。
実際にWebアプリとしてブラウザ上で開く（Webアプリとして開く方法はこちら）と、「DB読込」ボタンを押すとデータテーブルが現れます。Fusion Tablesのデータを受け取れたことが確認できました。
[ad#ad-1]
スポンサーリンク