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

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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というテーブルを作成しました。作り方はここを参考にしてください。

1

 

URLにdocidコードが埋め込まれているので(赤字のところ)、控えておいてください。

https://www.google.com/fusiontables/DataSource?docid=1KFfe1…E3B#rows:id=1

次に、GASエディターの「コード.gs」にFusion Tablesのデータを引っ張ってくるコードを書きます。関数名はgetDB()としました。※doGet()関数は前回のままにしておいてください。これはHTMLを表示する際に最初にコールされる関数です。

3

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は以下の通り書きます。詳しくは前回の記事を参考にしてください。

4

 

<!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のデータを受け取れたことが確認できました。

2
[ad#ad-1]

スポンサーリンク

 - Google Apps Script, Google Dirve