A-AUTO 50 開発者ブログ: Fusion Tables×Google Apps Script　（Webアプリケーション作成編2）

こんにちは、井下です。

前々回はFusion TablesのAPIを利用して、自前のWebアプリケーションからFusion Tablesへデータを追加したり、参照できるようにしました。
今回はそこから拡張して、操作の対象となるテーブルを選択できるようにしたり、テーブル自体を削除できるように実装していきます。

実装内容
今回は全て説明していると長くなってしまうので、Fusion Tables APIの利用における部分を中心に、コードを元に説明していきます。

fusionTableAPI.gs（サーバサイドの処理）

var tableId;

function doGet() {
var output = HtmlService.createTemplateFromFile('index');
return output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function getInsertPage(setTableId){
tableId = setTableId;
return getPageHtml('insert');
}

function getSelecPage(setTableId){
tableId = setTableId;
return getPageHtml('select');
}

function getPageHtml(page){
var output = HtmlService.createTemplateFromFile(page);
return output.evaluate().getContent();
}

//テーブルの一覧を取得する
function getTableList() {
//②
var opts = {
'maxResults': 50,
};
//①
var tableList = FusionTables.Table.list(opts);

return tableList.items;
}

function select(){
var columns = getColumns();

if(columns.length > 0) {
var sql = 'SELECT ';

for(var index in columns){
sql += '\'' +columns[index].name + '\','
}

sql = sql.slice(0, -1);
sql += ' FROM ' + tableId;

var res = FusionTables.Query.sql(sql).rows;
// HTMLで表示する都合上、ヘッダー（カラム名）を一番最初にする
res.unshift(getHeaderList());

return res;
}
}

function insert(form){
tableId = form.tableId;
var datas = form.datas;
var maxData = datas.length;

var sql = 'INSERT INTO ' + tableId;
var colums = getHeaderList();
var maxColum = colums.length;

sql += ' (';
for(var columIndex = 0; columIndex < maxColum; columIndex++){
if(datas[columIndex]) {
sql += '\'' + colums[columIndex] + '\','
}
}
sql = sql.slice(0, -1);
sql += ') VALUES (';

for(var dataIndex = 0; dataIndex < maxData; dataIndex++){
if(datas[dataIndex]) {
sql += '\'' + datas[dataIndex] + '\','
}
}
sql = sql.slice(0, -1);
sql += ')';

Logger.log(sql);

var res = FusionTables.Query.sql(sql);

return 'データを追加しました'
}

//テーブルを1件削除
function deleteTable(tableId) {
//③
FusionTables.Table.remove(tableId);
return 'テーブルを削除しました'
}

function getHeaderList() {
var columns = getColumns();
var headerArray = new Array();

if(columns.length > 0) {
for(var index in columns){
headerArray.push(columns[index].name);
}
}

return headerArray;
}

//Fusion Tablesからカラムのデータを取得
function getColumns() {
//③
var columns = FusionTables.Column.list(tableId).items;
return columns;
}

function getTables(){
var tables = FusionTables.Table.list();
var retTables = new Array();

if (tables.items) {
for (var index = 0; index < tables.items.length; index++) {
retTables.push([tables.items[index].name, tables.items[tableIndex].tableId]);
}
} else {
Logger.log('No tables found.');
}

return retTables;
}

function getTableId() {
return tableId;
}

①Fusion Tables APIでテーブルの一覧を取得しています。取得できるテーブルは「自分が作成しているテーブル」か、「共有されているテーブル」に限定されます。

②デフォルトでは取得するテーブルは25件（Fusion Tablesのリファレンスではデフォルトは5件とあったのですが、実際にやってみると25件取れていました）までなので、取得する件数を50件にしています。
コード内では"maxResults"パラメータのみ指定していますが、他には"pageToken"パラメータが存在しています。"pageToken"はテーブルの一覧を取得したときのインデックスのような役割を持っており、例えばテーブルの一覧を複数ページで表示させたいときに利用できそうです。

③テーブルの削除はテーブルIDを指定するだけで1行で行えます。ただし、削除用のメソッドの型はvoidとして定義されているので、本当に削除されたかは他の方法で確認するしかありません。

④Fusion Tablesで登録している1テーブルからカラムとデータを取得しています。Fusion Tablesはテーブルに関する情報はJSON構文で保持しているようで、"FusionTables.Column.list(tableId)"でテーブルIDで指定したテーブルのJSON構文のデータを取得し、以降のパラメータで取得したいデータを絞り込んでいきます。
コード内では"FusionTables.Column.list(tableId).items"としていますが、これでカラム名とデータを一覧で取得することができます。

以降は参考までに、画面のHTMLファイルです。

index.html（最初にテーブル一覧を表示する画面）

select.html（選択されたテーブルのデータ参照画面）

<div id="html">
<h2>データ一覧</h2>
<form>
<table border=1>
<?
var datas = select();
var maxData = datas.length;
var maxColumn = datas[0].length;

output.append('<tr>');
for(var index = 0; index < maxColumn; index++){
output.append('<th>' + datas[0][index] + '</th>');
}
output.append('</tr>');

for(var data = 1; data < maxData; data++){
output.append('<tr>');
for(var index = 0; index < maxColumn; index++){
output.append('<td>' + datas[data][index] + '</td>');
}
output.append('</tr>');
}
?>
</table>
<input type="button" value="テーブル一覧へ戻る" onclick="google.script.run.withSuccessHandler(transitionPage).getPageHtml('index')">
</form>

</div>

insert.html（選択されたテーブルのデータ追加画面）

<h2>データ追加</h2>

<form>

var tableId = getTableId();

output.append('<input type="hidden" name="tableId" value="' + tableId + '">');

var headerList = getHeaderList();

var maxHeader = headerList.length;

for(var index = 0; index < maxHeader; index++){

output.append('<tr><td>' + headerList[index] +'</td><td><input type="text" name="datas"></td></tr>');

}

</table>

</form>