アジサイのこれから

on the way to my friend' house 友達の家への道中

Flickr API

<input type="button" value="call" onClick="callFlickr();">
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
 function callFlickr(){
    var param={};
    // APIリクエストパラメタの設定
    param.method   = 'flickr.photos.getSizes';
    param.api_key  = '46aae73ef606fb170b318268699a991a';
    param.photo_id = '496065935';
    param.format   = 'json';
    param.jsoncallback = 'jsonFlickrApi';

    // APIリクエストURLの生成(GETメソッド)
    var url = 'http://www.flickr.com/services/rest/?'+
               obj2query( param );

    // script 要素の発行
    var script  = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src  = url;
    document.body.appendChild( script );
    document.write("FlickrAPI done.");
 }

 // オブジェクトからクエリー文字列を生成する関数
 function obj2query ( obj ) {
    var list = [];
    for( var key in obj ) {
        var k = encodeURIComponent(key);
        var v = encodeURIComponent(obj[key]);
        list[list.length] = k+'='+v;
    }
    var query = list.join( '&' );
    return query;
 }

 // Flickr検索終了後のコールバック関数
 function jsonFlickrApi ( data ) {
    alert("jsonFlickrAPI called");
    var list=data.sizes.size;
    var msize=list.find(
                function(obj,index) {
                 return obj.label == "Medium";
                }
              );
    alert(msize.source);
 }
-->
</script>

Javascript上でのオブジェクト・データベースprototype.jsとJSONで

ソース：

<script src="prototype.js" type="text/javascript"></script>
<script>
//データベースの作成
 var objDB = new Array();
 objDB.push( { id: '235', value: '二百三十五' } );
 objDB.push( { id: '372', value: '三百七十二' } );
 objDB.push( { id: '102', value: '百二' } );

//データベースの内容を表示
 objDB.each(
  function( obj, index ) {
    document.write(
      "objDB["+index+"]:"
      +"obj.id="+obj.id+","
      +"obj.value="+obj.value"
      + "<BR/>"
    );
  }
 );

//データベースの内容を検索する関数
 function get( id ) {
  return
   objDB.find(
    function( obj, index ) {
      return obj.id == id;
    }
   );
 }

//データベースの検索を実行
 var resultObj = get( '372' );
 document.write("id=372のvalueは"+resultObj.value );
</script>



元ネタ：Javascriptにおける配列と連想配列 prototype.js編 その1 @GreenSpace

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" }
})