Googleドキュメントのスプレッドシートのデータを表示する。　寝太郎の江戸風呂。ね！

2024
04
20

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/20 (Sat.)

2011
06
24

Googleドキュメントのスプレッドシートのデータを表示する。

公開設定されているGoogleドキュメントのスプレッドシートは、URL さえわかれば、誰でも閲覧することができます。また、Googele Visualization API を利用すれば、自分のページにデータを取り込むこともできます。

そこで、Google Spreadsheets の URL を指定して、データを表示するページを作成しました。

「Google Spreadsheet Visualization Table」

公開されているスレッドシートの URL を入力すると、スプレッドシートのデータがテーブル形式でページに表示されます。

Googleドキュメントのスプレッドシートのデータを取得して、WEBページに表示する方法

「Google Spreadsheet Visualization Table」では、入力した URL のスプレッドシートのデータを表示しますが、以下の説明では簡略化して、固定した１つのシートのみを対象とします。

スプレッドシートの URL の確認

公開設定したスプレッドシートの URLは次のようなフォーマットになっています。

https://spreadsheets.google.com/spreadsheet/ccc?key=スプレッドシートのID&hl=言語

jsapi.js のロード

データをテーブルとして表示するところで、Google Visualization API の table パッケージを利用します。そのパッケージをロードするためには、前提として Google Data API の Google AJAX API loader をサーバーから取り込んでおく必要があります。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

パッケージのロード

Google AJAX API loader を取り込んだら、JavaScript クライアントライブラリをロードします。テーブルの作成には、Googele Visualization モジュールの table パッケージを利用するので、次のように記述します。

google.load("visualization", "1", {'packages':['table']});

モジュールのロード完了後の初期化処理

モジュールのロードが完了した際に行う処理を記述します。これは　　　　　　google.setOnLoadCallback メソッドでイベント登録します。下記の例では、init という変数を与えていますが、この部分に直接、匿名関数を当てることもできます。

init=function(){
//初期化処理
}
google.setOnLoadCallback(init);

初期化処理の内容

google.visualization.Query のインスタンスを生成します。データソースを Google スプレッドシートの公開URL とし、send メソッドを実行すれば、Google スプレッドシートのデータ取得後、コールバック関数が実行されます。次の例では、コールバック関数は handleResponse です。

init=function(){
    var sourceSheet=GoogleスプレッドシートのURL;
    var query = new google.visualization.Query(sourceSheet);
    query.send(handleResponse);
}

コールバック関数の内容

次の例では、Google スプレッドシートからのレスポンスを仮引数 response で受けています。そして、id属性が'res'である要素に、処理結果を表示します。

var handleResponse=function(response){
  var div=document.getElementById('res');
  if(response.isError()) {
    div.innerHTML = response.getDetailedMessage();
    return;
  }
  var data = response.getDataTable();
  var divTable  = new google.visualization.Table(div);
  divTable.draw(data);
}

レスポンスにエラーがあった場合には、エラーメッセージを表示し、正常な場合には、テーブルを表示します。

レスポンスの getDataTable メソッドで、Google Visualization の基本であるデータテーブルの形に Google スプレッドシートのデータが格納されます。

テーブルを表示する要素を指定して、google.visualization.Table のインスタンスを生成します。この google.visualization.Table の draw メソッドでデータテーブルを指定すると、指定した要素の中にデータテーブルのデータがテーブル形式で表示されます。