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行目のラベルがすべて空になるっぽい。（つまりデータが全部stringだとバグる）
- スプレッドシート更新直後は、ファイル→ウェブに一般公開→今すぐ再公開 しないと反映されない