jQuery

jQueryでAjax、はじめの一歩

次のサンプルは、画像共有サイトFlickrの「Public photos」フィードサービスを利用して、こちらから指定したタグに関連するデータを受け取り、渡されたデータから「media」で指定された画像を表示する例である。「鉄は熱いうちに打て」ということで、jQueryをもう少し突っ込んで利用してみる。

使い方は、カテゴリを選択してから「読込む」ボタンを押せば、「次へ」で次の画像を読み込んで表示する。何が出るか分からないので、心の準備はしておいて下さい。責任は一切持ちません(^_^;)。



この例の元ネタは、jQueryのAPIリファレンスでAjaxのgetJSONの項である。FlickrのAPIは、Flicker ServicesのFeedsページでPublic photosに説明がある。フィードデータのJSONフォーマットは、「NEW」の印が付いているので最近サポートされるようになったのかな?

以下が、この例のソースプログラムである。表現を短くするために、if文などカッコで囲まないで１行で書いたり、利用しない引数を書いたりするのは自分はあまり好きではないが、ソースが読み易くなるならそれもいいか…。

<script type="text/javascript">
  var flcd = new Array();
  var cno = -1;

  function dispImage() {
    $("#flcs").empty();
    for (var j = 0; j < 2; j++) {
      $("#flcs").append("<img src=\"" + flcd[cno + j].media.m + "\" />");
    }
  }

  $(document).ready(function() {
    $("select").change(function() {
      $("#seltag").attr("value", $(this).attr("value"));
    });
    $("#getimg").click(function() {
      $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=" + $("#seltag").attr("value") + "&tagmode=and&format=json&jsoncallback=?", function(data) {
        flcd = data.items;
        dispImage(cno=0);
        $("#next").removeAttr("disabled");
        $("#prev").removeAttr("disabled");
      });
    });
    $("#next").click(function() {
      if (cno < flcd.length - 2) dispImage(++cno);
    });
    $("#prev").click(function() {
      if (0 < cno) dispImage(--cno);
    });
  });
</script>

JavaScriptでは、セキュリティ上読み出されたサイト以外のサイト（クロスドメイン）には、接続できないようになっている。そのため、 WebAPIサービスを利用する場合、自サイトに他サイトのWebAPIサービスからデータを取ってくるCGIを用意し、JavaScriptでその CGIを利用して読み込んだりする。

一方この例はJSONPと呼ばれる方法で、JavaScriptのソースはクロスドメインでもアクセスできることから、WebAPIサービスのデータを受け取るJavaScriptのコールバック関数を用意して呼び出すことで、コールバック関数とそれに配列データを加えて戻す方法を利用したものである。どこの説明にも、悪意あるコードを含めることが可能なので、利用する際は注意するように、と書かれているので念のため。

理屈はよく分からないけど、これならサーバーサイドのCGIを利用しなくても、Web2.0プログラムができるかも知れないですね（自分には無理っぽいですが　orz)。

アーカイブ