スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

今回はFlickr APIを使って画像を取得してみます。

The App Garden on Flickr

写真投稿SNSとして有名なFlickrですが、先日、パブリックドメインに対応したということで話題になりました。

これまで、Flickrに投稿された画像について、各レベルの著作権が設定可能であったため、
どのようにしたら流用できるのか、著作権違反にならないのか、さまざまな場所で議論されてきました。

しかし、今回、著作者がその権利を完全に放棄するパブリックドメイン(CC0)を設定できるようになったことで、
APIから画像や動画を利用しやすくなりました。

API KEYを取得する

Flickr APIの利用にはAPI KEYが必要です。

上記公式サイトより、「Your Apps」から「Get an API Key」をクリックします。
以下の画面が表示されるので、今回は左の「非商用」を選択します。
非商用の場合、APIはすぐに利用することができます。
flickr_api_1

次のページで、アプリ名、アプリの説明文をフォームに入力し、
規約に同意すれば、API KEYを取得することができます。

※一連の操作はFlickrサイトにYahooアカウントでログイン状態であることを前提とします。
 ログインしていない場合、ログインを求められます。
※右の「商用」を選択した場合、利用可能かどうか数週間のサイト審査を要します。

APIで画像を検索してみる

APIの種類は膨大です。今回は画像を探して表示するまでを追ってみます。

まず、ドキュメントを参考にして画像検索のリクエストを作成してみます。
flickr.photos.search
「Unauthenticated calls will only return public photos.」とあるように、APIで認証を通していない場合には、パブリックドメインの画像が取得できるようです。今回は意図して認証せずにパブリックドメインの画像を検索してみます。

https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={API KEY}&format=rest&text=summer

{API KEY}には先ほど取得したKEYを設定します。検索キーワードは要素textに「summer」をセットします。

このレスポンスは以下です。

<?xml version="1.0" encoding="utf-8" ?>
<rsp stat="ok">
<photos page="1" pages="3541" perpage="100" total="354053">
	<photo id="19013382162" owner="65897755@N07" secret="b9bf395170" server="308" farm="1" title="Chill Sunday :-). #Piscineo #Madrid #Caloret #instalike #instagood #instadaily #Chill #summer" ispublic="1" isfriend="0" isfamily="0" />
	<photo id="18992645396" owner="128388568@N04" secret="814c4cb4b5" server="305" farm="1" title="#love #TagsForLikes.com #TagsForLikesApp #instagood #me #smile #follow #cute #photooftheday #tbt #followme #TagsForLikes.com #girl #beautiful #happy #picoftheday #instadaily #food #swag #amazing #TFLers #fashion #igers #fun #summer #instalike #bestoftheda" ispublic="1" isfriend="0" isfamily="0" />
(以下略)

354,053枚中100枚分の情報が取得できました。ものすごい情報量ですね。

取得したパラメータを組み合わせることで画像は表示できます。

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

例えば1つ目のphotoタグから値を拾って、上の画像URLフォーマットにあてはめます。

http://farm1.staticflickr.com/308/19013382162_b9bf395170.jpg

実際に表示させてみます。

もう少しスマートに情報を取得する

APIの機能は豊富で、さまざまな形式で画像データを取得することができます。

例えば、先ほどは画像の基本情報から画像パスを組み立てましたが、画像サイズを指定して直接画像のパスを取得することもできます。

https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={API KEY}&format=rest&text=summer&extras=url_s

パラメータ「extras=url_s」を付加しました。
これでレスポンスにSサイズの画像パスが含まれるようになります。

<?xml version="1.0" encoding="utf-8" ?>
<rsp stat="ok">
<photos page="1" pages="3544" perpage="100" total="354338">
	<photo id="18831715488" owner="126399233@N08" secret="d37b10e8f1" server="3937" farm="4" title="#gopro #TagsForLikes #TFLers #tweegram #sardegna #me #instamood #cute #iphonesia #fashion #summer #tbt #igers #picoftheday #food #instadaily #instagramhub #beautiful #girl #ogliastra #instagood #bestoftheday #jj #sky #picstitch #follow #webstagram #sun #n" ispublic="1" isfriend="0" isfamily="0" url_s="https://farm4.staticflickr.com/3937/18831715488_d37b10e8f1_m.jpg" height_s="240" width_s="240" />
	<photo id="18993145836" owner="48215477@N08" secret="e798242eb3" server="324" farm="1" title="IMG_7931" ispublic="1" isfriend="0" isfamily="0" url_s="https://farm1.staticflickr.com/324/18993145836_e798242eb3_m.jpg" height_s="160" width_s="240" />
(以下略)

「url_s=”https://farm4.staticflickr.com/3937/18831715488_d37b10e8f1_m.jpg”」というように、画像パスを取得できました。

豊富な画像数と、APIの機能の充実さ、
加えて、これだけ多くの情報にも関わらず、レスポンスが早い気がします。
しっかりしたサービスサーバが用意されているのでしょうね。

アイディア次第でおもしろいアプリが作れそうですね。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search