AppEngineでFlickr APIを使ってみよう

前回はPHPとFlickrAPIを使って自分の写真を表示するようなことをやってみましたが、今回は最近人気上昇中のGoogleAppEngine(GAE)を使ってFlickrタグ検索をやってみたいと思います。GAEの説明はここでは省略します。が参考になるページを紹介します。
Google Code – Google App Engine
さっそくHello Worldから作ってみた
Google App Engine を使ってみよう

Flickr APIページを見るとPythonのライブラリもありましたが、決して使う気になりませんでした。一つ一つ調べながら遊びたいからです。以下がタグ検索して画面に表示するコードになります。キーワードになるものとしては、google.appengine.api.urlfetch と xml.dom.minidom です。

main.py

#!/usr/bin/env python
#
import cgi,os
import wsgiref.handlers

from google.appengine.ext import webapp
from google.appengine.ext.webapp import template
from google.appengine.api import urlfetch
from xml.dom import minidom

class MainPage(webapp.RequestHandler):
  def get(self):
    api_url    = "http://api.flickr.com/services/rest/?"
    api_key    = "5f5ffa7c9fcf9f65bc0aae95ad71****"
    api_method = "flickr.photos.search"
    tag = self.request.get("tag")
    if tag == "":
      tag = "Flower"
    url = api_url+"api_key="+api_key+"&method="+api_method+"&tags="+tag
    result = urlfetch.fetch(url)
    dom = minidom.parseString(result.content)
    photos = dom.getElementsByTagName("photo")
    galleries=[]
    for photo in photos:
      farm   = photo.getAttribute("farm")
      server = photo.getAttribute("server")
      id     = photo.getAttribute("id")
      secret = photo.getAttribute("secret")
      img = "http://farm"+farm+".static.flickr.com/"+server+"/"+\
             id+"_"+secret+"_s.jpg"
      galleries.append(img)
    values = { 'galleries': galleries, 'tag':tag, }
    path = os.path.join(os.path.dirname(__file__), "main.html")
    self.response.out.write(template.render(path, values))
application = webapp.WSGIApplication([
  ('/', MainPage)
], debug=True)

def main():
  wsgiref.handlers.CGIHandler().run(application)

if __name__ == '__main__':
  main()

main.html

<form action="" method="get">
Tag:<input type="text" name="tag" value="{{ tag }}">
<input type="submit" value="Search">
</form>
</div>
<div id="galllery">
	{% for galllery in galleries %}
	<img src="{{ galllery }}" class="gallery-img">
	{% endfor %}
</div>

ちょっと工夫をするとこのようなページが作れます。

http://kings.appspot.com/gallery/

YouTube Data APIを使ってみよう

YouTubeのAPIも結構前出たWebサービスでしたが、YouTubeがGoogleに買収されてからGoogle data API protocol に沿った新しいAPIになりました。で、なにができる？Google側ではあくまでデータの提供のみなので、クライアントが何をしようとはアイディア次第だと思います。初めは提供してくれるのはどうせXMLフォーマットのデータだろうと思った、それが進化して操作しやいJSON型のデータも取得できるようになりました。以下が簡単なサンプルです。必要なのはブラウザとメモ帳のみ。サンプルは自分のお気に入りVideoを一覧表示するものです。１．まずは取得したいデータをAPIにリクエストを投げる。以下のコードでJSON型のデータをリクエストする。

<script type=”text/javascript” src=”http://gdata.youtube.com/feeds/api/users/dongrikin/favorites?format=1&start-index=1&max-results=24&orderby=viewCount&alt=json-in-script&callback=youtubecallback”></script>

URLを打ってみればわかると思いますが、http://gdata.youtube.com/feeds/api/users/dongrikin/favorites　はXMLデータです。後ろのパラメータはどのようなフォーマットで何件取得してどの関数（JavaScript）を呼び出すかを指定するものです。２．取得したデータを加工する。youtubecallback関数作成

function youtubecallback(json){var entries = json.feed.entry;var div = document.getElementById(“youtube”);for (var i = 0; i < entries.length; ++i) {var a = document.createElement(‘a’);a.title=entries[i].title.$t;a.href = entries[i].media$group.media$player[0].url;var img = document.createElement(‘img’);img.src = entries[i].media$group.media$thumbnail[0].url;a.appendChild(img);div.appendChild(a);}}

３．表示する場所を定義。加工したデータをどこに表示するかを定義する。

<div id=”youtube”></div>

ごく簡単なサンプルですが、Lightbox for videosのようなものと組み合わせて工夫してみると結構カッコイイものが出来上がると思います。http://www.dongrikin.com/playしかしVideobox v1.1では画面をスクロールしたときにページサイズ取得などに若干不具合（Bug？）があったので自分なりに修正してみました。コードを書きたく方はこちらでダウンロードして使ってみてください。http://www.dongrikin.com/download/youtube-api.zipあともう一つ、深くは調査してないがprototype.jsと併用できないようです。

System.out.println("HelloWorld!");

Flickr API を使ってみよう

自分の個人サイトにFlickrの写真を取り込もうとしてFeedを探してみたが、少ない！情報量も少なくて、困ったな～と思った時FlickrのAPIを思い出した。FlickrのAPIは結構前から出たが、日本のユーザにとってはそんなに使われてないようだ。Flickr自身も中国語、韓国語はサポートしてるのに、なぜか日本語はサポートされてない。英語が苦手な僕にとって英語マニュアルを読むのが苦痛であった。幸い繁體中国語があったので、比較的に楽だった。しかしサンプルコードがなかったので、どのメソッドを使えばどのようなレスポンスが返ってくるとか、写真のURL生成はどうすればよいとか戸惑った部分があったので、FlickrAPIを使うにあたって基本的な部分を紹介したいと思います。

PHPのserialize, unserializeを使ったサンプルである。

１．API Key取得以下のところでAPI Keyを取得。（入力項目は適当に）
http://www.flickr.com/services/api/keys/

２． PHPからリクエスト発行
サンプルの ‘api_key’ の部分は１で取得したキーを使用。

<?php
  //API パラメータ
  $params = array('api_key' => '**************',
          'method' => 'flickr.photos.search',
          'user_id' => '9823188@N07',
          'format' => 'php_serial',);
  $encoded_params = array();

  foreach ($params as $k => $v){
    $encoded_params[] = urlencode($k).'='.urlencode($v);
  }

  //API リクエスト
  $url = "http://api.flickr.com/services/rest/?".
                      implode('&', $encoded_params);
  $rsp = file_get_contents($url);
  $rsp_obj = unserialize($rsp);

  //API レスポンス
  if ($rsp_obj['stat'] == 'ok'){
    foreach ($rsp_obj['photos']['photo'] as $photo){
      $farm_id = $photo['farm'];
      $server_id = $photo['server'];
      $id = $photo['id'];
      $secret = $photo['secret'];
      echo "<img src='http://farm".$farm_id.".
            static.flickr.com/";
      echo $server_id."/".$id."_".$secret."_s.jpg'/>";
    }
  }else{
    echo "呼び出し失敗！";
  }
?>

今回は、flickr.photos.searchというメソッドを使いましたが、そのほかにいろんなメソッドがあります。http://www.flickr.com/services/api/オプションとして、lightboxと組み合わせるともっと格好いいアルバムをつくれるはずです。

http://www.dongrikin.com/me