[JS] Google Visualization API がなかなか便利な件

Google Spreadsheetを愛用していて、ゲームの攻略データなんかを纏めていると「この中身をそのままサイトにできないものか…」と思ってたんだけど、
普通のエクスポートでCSV形式だとドメインの呪縛を受けてしまってJSだけでは難しい。
そこで適当に検索してたら結構前からあるらしいGoogle Visualization APIが使えると知って飛びついてみたら、
なかなか便利な感じだったので簡単なサンプルを書いてみた。

悪魔図鑑 (Google Visualization API + backbone.js test) – jsdo.it – share JavaScript, HTML5 and CSS

元のスプレッドシートはこれ

※ローカルで組んでるやつがbackbone.js + underscore.js + jQuery 使ってるのでそのまま流用したものですが、
Visualization API自体は単独で動くのでこれでないと作れないというわけではない。

スプレッドシートの取得自体はとても簡単で、Queryのインスタンス作ってsendメソッドを実行するだけである。(line61)

query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=' + key);
query.send(callback);

当然ながら非公開のドキュメントは参照できないので、事前に「ウェブに公開」をしておかねばならない。

send実行前にsetQueryでSQLライクな条件を指定して該当するデータだけ得ることもできる。(line60)

query.setQuery("select A");

コールバック関数の引数として渡されるのはgoogle.visualization.QueryResponse(line69)で、
これにgetDataTable()を使えば(line70) google.visualization.DataTableのインスタンスが取れる。
色々なメソッドが用意されているが、全ての行とセルを配列で返してくれるメソッドはないので、
全部のセルを処理したい場合には getNumberOfRowsとgetNumberOfColumnsでそれぞれ行数と列数を得てforループを回すしかない。(line72)

backbone.jsのモデルは{key:value}なデータを必要とするので、
getColumnLabel(columnIndex)で得たラベルをキーにして作っている。(line78)
collectionにaddで作ったオブジェクトを投げれば(line83)、bindしておいたview作成(line53)が実行されて悪魔情報がずらっと並ぶ。

Googleの検索結果にquery.sendした結果を出したいとなると、それ用の手順を踏む必要があるので割と面倒くさい。

注意すること

  1. データの中に数値が入っているセルがないと1行目のラベルがすべて空になるっぽい。(つまりデータが全部stringだとバグる)
  2. スプレッドシート更新直後は、ファイル→ウェブに一般公開→今すぐ再公開 しないと反映されない

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください