Flickr APIを使った写真検索in development

 
date:2013.11.12   posted by:yamakawa
 

こんにちは。毎日崖っぷちの新人山川です(´ε`;)

今回は会津大学で現在行われている『GameLab』というWebアプリを作る講座で、Flickr APIの使い方を勉強したので紹介します。

Flickrはご存知の通り、写真共有できるコミュニティーサイトです。
便利なAPIを利用することで、Flickrにアップされている大量の写真を利用することができます。
今回はFlickr APIのflickr.photos.searchを使った簡単な写真検索の方法を紹介します。
機能としてはシンプルに、検索した単語を説明文に含む写真を検索できるようにします。

今回作るDEMOはこちら

1. APIキーの入手
2. HTML部分
3. JS部分:入力した文字の取得
4. APIのテスト
5. Javascript部分:リクエスト先のURLを作成する
6. Javascript部分:AJAX通信
7. Javascript部分:画像の表示を行う関数を用意する
8. Javascript部分:Javascript 部分まとめ
9. もっと楽に画像URLを取得する。
10. 全体まとめ

1. APIキーの入手

Flickrのapiを使うにはキーを入手しなくてはいけません。

まずはflickrのトップページに行き左上の「Sign Up」から登録してみてください。
http://www.flickr.com/

Facebook or Googleのアカウントを利用してもログインできます。もし、それらのアカウントがなかったら米YAHOOのアカウントを作ってみてください。

アカウントを取得したらこちらのページから「Get your API Key」からAPIを取得してください。

取得するのに商用かどうか聞かれるので、非商用の場合は「Non-Commercial」を選んでください。

またアプリについての説明を簡単に書いてください。(日本語でも可)

ここまで入力出来たらAPIキーが発行されます。
下記画像の黒く塗りつぶされているところがAPIキーです。

後程使うのでメモしておきましょう。

2. HTML部分

ここでは最低限検索ワードを入れるテキストフィールドと検索ボタン、写真表示エリアのみを用意します。

JQueryを使うのでGoogleのホスティングサーバーから読み込み、Javascriptもhtmlに書かずに可読性を上げるために外部ファイル化しておきます。

index.html

<h1>Flickr写真検索</h1>
<input type="text" id="word" name="word">
<button id="submit">検索</button>
<div id="photoArea"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/search.js"></script>

3. JS部分:入力した文字の取得

まずはボタンをクリックした時に入力フォームの中身を取得してphotoAreaにその文字が出るようにします。

search.jsの中身

//HTML要素の登録
var photoArea = document.getElementById("photoArea");
var serachWord = document.getElementById("word");
var submit = document.getElementById("submit");
//検索ボタンにクリックイベントをつける
submit.addEventListener("click", searchPhoto, false);

//各種メッセージテンプレート
var searchingMessage = "検索中";
var notFoundMessage = "画像がみつかりません";

//検索開始(検索ボタンクリック後)
function searchPhoto() {
    var keyword = encodeURIComponent(serachWord.value.trim());//テキストボックスの中の文字を変数につっこむ
    photoArea.textContent = keyword;//photoArea(id=photoAreaがついたdivタグの中)に上記の文字を表示
}

4. APIのテスト

flickrのAPIは沢山用意されています。
API一覧

今回は仕様が「キーワードを送ったら、そのキーワードを説明文に含む写真情報を返す」なのでflickr.photos.searchというAPIを使用します

flickr.photos.search

flickr.photos.searchページの下部に「API Explorer」というブラウザ上でAPIのテストを行える便利な機能があるのでまずはここでテストをします。

textの右の入力フォームに適当な文字列をいれてページ下部の「Call Method」ををクリックします。

そうしますとXMLの情報が呼び出されるのでそのXMLの情報を使って画像を表示していきます。

5. Javascript部分:リクエスト先のURLを作成する

「キーワード」のデータを送る先のURLを作成します。

先ほど取得したAPIキーはここで使います。

※「method」の部分を変えると他のAPIを使う事ができます。

search.js

//HTML要素の登録
var photoArea = document.getElementById("photoArea");
var serachWord = document.getElementById("word");
var submit = document.getElementById("submit");
//検索ボタンにクリックイベントをつける
submit.addEventListener("click", searchPhoto, false);

//リクエストURIの生成
var server = "http://api.flickr.com/services/rest";
var method ="?method=flickr.photos.search";
var api_key = "&api_key=取得したAPIキーを入力してください";
var searchURI = server + method + api_key + "&text=";

//各種メッセージテンプレート
var searchingMessage = "検索中";
var notFoundMessage = "画像がみつかりません";

//検索開始(検索ボタンクリック後)
function searchPhoto() {
    var keyword = encodeURIComponent(serachWord.value.trim());//テキストボックスの中の文字を変数につっこむ
    photoArea.textContent = keyword;//photoArea(id=photoAreaがついたdivタグの中)に上記の文字を表示
    var requestURI = searchURI + keyword;
    console.log(requestURI);
}

6. Javascript部分:AJAX通信

AJAX通信についてはこちらを参照してください

function requestSearch(uri) {
    $.ajax({
       type: "GET",
       url: uri,
       success: function(data){
         dispPhoto(data);
       }
     });
}

※ついでにさきほどのsearchPhoto()の最後の行に「requestSearch(requestURI);」と記述して、requestSearchを実行させます。

dataの中にはさきほど表示したXML(API Explorerで表示したXML)が格納されています(試しにalert(data)としてみると引っ張ってきたデータを簡易的に確認できます)。

7. Javascript部分:画像の表示を行う関数を用意する

さきほどの関数でデータの取得までは行えたので今度はそれをブラウザ上に表示します。
ajax通信のsuccessにdispPhotoという関数の呼び出しを記載してあるので呼び出し先の関数を作ります。

Flickrの写真URLは独特の命名規則を持っています。詳しくはこちら

http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg

farm-id、server-id、id, secretの要素が画像のURL取得に必要です。
それぞれ必要な物はXMLのタグに入っているのでそれを取得して配列に入れていきます。

変数「url」にFlickr独特の命名規則になるようにした画像URLをいれます。
このURLをimgタグのsrc属性に入れれば画像は表示されます。

var img = new image()でimgタグを作成して img.srcでURLをいれます。
そしてphotoAreaに作成したimgタグを追加していけば取得した画像がすべて入ります。

search.js

function dispPhoto(data) {
    var photos = data.getElementsByTagName('photo');//返ってきたデータのphotoタグ一覧を変数(配列)に突っ込む
    photoArea.textContent = "";//クリック後に表示していた文字を消す

    for (var i = 0, count = photos.length; i < count; i++) {
        var farmId = photos[i].getAttribute('farm');
        var serverId = photos[i].getAttribute('server');
        var id = photos[i].getAttribute('id');
        var secret = photos[i].getAttribute('secret');

        var url = "http://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_s.jpg";

        var img = new Image();
        img.src = url;
        photoArea.appendChild(img);
    }
    if(photos.length == 0){
        photoArea.textContent = notFoundMessage;
    }
}

8. Javascript部分:まとめ

まとめたsearch.jsがこちらです。

search.js

//HTML要素の登録
var photoArea = document.getElementById("photoArea");
var serachWord = document.getElementById("word");
var submit = document.getElementById("submit");
//検索ボタンにイベントをつける
submit.addEventListener("click", searchPhoto, false);

//リクエストURIの生成
var server = "http://api.flickr.com/services/rest";
var method ="?method=flickr.photos.search";
var api_key = "&api_key=a396f2bde7c1d809d735e20dbc3d4b92";
var searchURI = server + method + api_key + "&text=";

//各種メッセージテンプレート
var searchingMessage = "検索中";
var notFoundMessage = "画像がみつかりません";

//検索開始(検索ボタンクリック後)
function searchPhoto() {
    photoArea.textContent = searchingMessage;
    var keyword = encodeURIComponent(serachWord.value.trim());

    var requestURI = searchURI + keyword;
    requestSearch(requestURI);
}

function requestSearch(uri) {
    $.ajax({
       type: "GET",
       url: uri,
       success: function(data){
         dispPhoto(data);
       }
     });
}

function dispPhoto(data) {
    var photos = data.getElementsByTagName('photo');
    var str = '';
    photoArea.textContent = "";

    for (var i = 0, count = photos.length; i < count; i++) {
        var farmId = photos[i].getAttribute('farm');
        var serverId = photos[i].getAttribute('server');
        var id = photos[i].getAttribute('id');
        var secret = photos[i].getAttribute('secret');

        var url = "http://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_s.jpg";
        var img = new Image();
        img.src = url;
        photoArea.appendChild(img);
    }
    if(photos.length == 0){
        photoArea.textContent = notFoundMessage;
    }
}

9. もっと楽に画像URLを取得する。

flickr.photo.searchのページを見ていたら「extras」でflickr独自の画像URLが一括で取得出来る方法を見つけたので説明します。

DEMOはこちら

API Explorerの「extras」に「url_s」と入力して「Call Method」を押してください。
xmlのurl_sの属性にurl_sが入ります。

タグの中にurl_sという属性が出来るのでその中身のURLを利用すれば画像を表示できます。

まずはリクエストURIの生成部分を変更していきます。送信するデータに「extras=”url_s”」を追加するので var searchURI を変更します。

//リクエストURIの生成

var server = "http://api.flickr.com/services/rest";

var method ="?method=flickr.photos.search";

var api_key = "&api_key=取得したAPIキーを入力してください";

var searchURI = server + method + api_key + "&extras=url_s" + "&text=";

続いてdispPhotoの中身を変更します。

farm-idなどが不必要になるのでそれらを取得しているものをすべて消してしまって大丈夫です。

新たに「url_s」という変数を作りその中にXMLの「url_s」タグの中身を配列として追加していきます。
取得したurl_sをimgタグのsrcに入れれば画像は表示されます。

function dispPhoto(data) {
 var photos = data.getElementsByTagName('photo');
 var str = '';
 photoArea.textContent = "";
 for (var i = 0, count = photos.length; i < count; i++) {
 var url_s = photos[i].getAttribute('url_s');
 var img = new Image();
 img.src = url_s;
 photoArea.appendChild(img);
 }
 if(photos.length == 0){
 photoArea.textContent = notFoundMessage;
 }
}

「url_s」を使うと記述が短くできます。

さらに「s」の部分を変えると取得できる画像のサイズも変わります。
対応しているのは以下です。

  • url_s, url_sq:75×75 px
  • url_q:150×150 px
  • url_t : どちらかの長い方の辺を100pxに調整したサイズ
  • url_m:どちらかの長い方の辺を240pxに調整したサイズ
  • url_n:どちらかの長い方の辺を320pxに調整したサイズ
  • url_z:どちらかの長い方の辺を640pxに調整したサイズ
  • url_c:どちらかの長い方の辺を800pxに調整したサイズ
  • url_l:どちらかの長い方の辺を1024pxに調整したサイズ
  • url_o:元の画像サイズ

10. 全体まとめ

FlickrのAPIを使えば割と楽にリッチなコンテンツを作る事が出来ると思います。
またAPIの利用方法も探せば探すほど色々な使い方や簡単な使い方など見つかって面白いですね。
flickr.photo.searchだけでも沢山のオプションがありAPI Explorerで試しながら調べると分かりやすいですね。
他にもアップロードされた日や位置情報を絞って検索することもできるようです。

また他にFlickrで何か検証出来たら記事にします!

adobe cs4 resellers
 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|none