検索条件のカスタマイズ

　検索条件を { user_id: '50902562@N00' } のように変更すると， 指定したIDのユーザーが投稿した写真から検索を行います（リスト3）。

リスト3：search-user.html（部分）　⇒動作デモ

    window.onload = function () {
        photo_search({ user_id: '50902562@N00' });
    }

図3：処理結果画面例

　また，Flickr では「ジオタグ」という緯度経度情報のついた画像が増えてきています。 撮影地点の緯度経度を写真に紐付けて管理することができます。 Flickr API からも緯度経度を指定した画像検索が可能です。

リスト4：search-bbox.html（部分）　⇒動作デモ

    window.onload = function () {
        photo_search({ tags: 'sky', 
            bbox: '139.70,35.61,139.78,35.74' });
    }

　リスト4では，タグと緯度経度の二つの検索条件を指定しています。 東経139.70度/北緯35.61度〜東経139.78度/北緯35.74度の矩形エリア（概ね山手線＋周辺エリア）で撮影された写真から，『sky』というタグのついたものを抽出します。 タグは，アルファベットだけでなく，日本語も指定可能です。

　bbox の機能を応用すれば，新宿駅前といった狭いエリアや， 反対に関東全域など広いエリアも指定できます。 さらに，bbox: '122,20,154,46' とすれば， 東経122度/北緯20度〜東経154度/北緯46度となり， 沖縄〜北海道まで大まかに日本全国を検索対象とできます。 ただし，矩形指定ですので，緯度経度から韓国なども含まれます。

　検索結果表示の細かな見た目の調整にはスタイルシートを利用します。 以下のスタイルシートは各画像の周りに1ピクセルずつの余白を付けています。

リスト5：スタイルシート（部分）

<style><!--
    #photos_here img {
        margin: 1px;
    }
--></style>

　また，検索結果として単純に a タグ img タグを並べずにテーブル構成に変更する場合などは，JavaScript の編集が必要となります。 具体的には jsonFlickrApi 関数を書き換えることになりますが，残念ながら，今回は誌面が尽きました。

　今回は，JavaScript を使って Flickr の提供する Web サービス API『Flickr API』にアクセスし，画像を検索する手順を紹介しました。 これ単体では『マッシュアップ』とは呼べませんが，Flickr には見栄えのある写真が多いですから，いろいろな応用も考えられそうです。 今回はブラウザ内のみで処理を行いましたので，次回はサーバーサイドから Web サービス API にアクセスする事例をご紹介しましょう。