Google Spreadsheetsをデータベースとして活用JSONでデータ取得

Google Spreadsheetsでデータ作成・アクセス設定

まずは、Google Spreadsheetsでデータを作成。
例えば、次のような感じ。

次に、このスプレッドシートを公開する設定をする。
右のほうにある『公開』タブをクリックして『公開する』ボタンを押せば、公開されちゃう。

次に、JSONでデータを取得できるように公開の形式を設定する。

下の方にある『公開の詳細設定』リンクをクリック。

『ファイル形式：』を『ATOM』とする。これで、スプレッドシート側の設定は完了。
次に、『URLを生成』ボタンを押す。ここで生成されたURLから、このスプレッドシートのIDが分かる。 この例だと『o03298909112281802961.454088638750018433/od6』。

Javascriptでデータ取得＋表示

ソース：

< div id ="result" > loading...</div>
< script type="text/javascript" >
<!--
 var html="";
 function loadJSON(json) {
   html += "<TABLE>";
   for (var i = 0; i < json.feed.entry.length; i++) {
     html += "<TR>";
     var entry = json.feed.entry[i];
     if(entry["gsx$photoid"]) {
       html += "<TD>"+entry.gsx$photoid.$t+"</TD>"
       + "<TD>"+entry.gsx$lat.$t+"</TD>"
       + "<TD>"+entry.gsx$lng.$t+"</TD>"
       + "<TD>"+entry.gsx$flickrphotohtml.$t+"</TD>";
     }
     html += "</TR>";
   }
   html += "</TABLE>";
   document.getElementById("result").innerHTML = html;
 }
-->
</script>
<script src="http://spreadsheets.google.com/feeds/list/o03298909112281802961.454088638750018433/od6/public/values?alt=json-in-script&callback=loadJSON" type="text/javascript"></script>

最後の<script src="http://..." >のところでGoogle SpreadsheetsのAPIにアクセスして『o03298909112281802961.454088638750018433/od6』のスプレッドシートのデータを取得し、 引数callbackで指定された関数loadJSONを呼び出す。

実行例（お化粧付き）：

photoID	lat	lng	flickrPhotoHTML
496065935	35.5577079868245	139.724928438663	496065935_b01811832a
493652910	35.556002	139.725862	493652910_d0c7fb9409

注意点（というかハマった点）：

• IEだと、<script src="http..." />ではloadJSONが呼び出されない。
  Firefoxでは呼び出されるけども。<script src="http..." ></script>とすれば、IEでもFirefoxでも大丈夫。Firefoxの『ツール(T)>エラーコンソール(C)』でデバッグしてからIEで試してみたら動かなくてびっくり。
• スプレッドシートでカラム名に大文字を使ってもJSONでは全て小文字に変換される。
  上の例だと、スプレッドシートでは『photoID』としたけども、JSONでは『photoid』。alert(entry.toSource());に凄く助けられた。

JSON(上のソースでのentry)

({
 id       : { $t : "http://spreadsheets.google.com/feeds/list/
              o03298909112281802961.454088638750018433/
              od6/public/values/cpzh4" },
 updated  : { $t : "2007-06-02T13:40:35.085Z" },
 category : [
  {
   scheme : "http://schemas.google.com/spreadsheets/2006",
   term   : "http://schemas.google.com/spreadsheets/2006#list"
  }
 ],
 title   : { type : "text", $t : "493652910" },
 content : { type : "text", $t : "lat: 35.556002,
                                  lng: 139.725862,
                                  flickrPhotoHTML:
                                  493652910_d0c7fb9409" },
 link    : [
  {
    rel  : "self",
    type : "application/atom+xml",
    href : "http://spreadsheets.google.com/feeds/list/"
            o03298909112281802961.454088638750018433/
            od6/public/values/cpzh4"
  }
 ],
 gsx$photoid         : { $t : "493652910" },
 gsx$lat             : { $t : "35.556002" },
 gsx$lng             : { $t : "139.725862" },
 gsx$flickrphotohtml : { $t : "493652910_d0c7fb9409" }
})