RailsでFlickrを遊ぼう! (Putting Flickr on Rails)
Ruby on Railsサイトには、Flickrのインタフェースを５分で作ってしまうというデモビデオがあります(screencasts)。ちょっと感動したので自分でも同じものを作ってみました。手順を書いておきます。
まず、自分はRailsの環境としてLocomotiveを使っていたのですが、flickr libraryの取得がうまくできなかったので、AWDwRで紹介のあったこちらのサイトで環境を再構築しました。
Flickr APIを利用するためには、flickrのサイトよりAPI keyを取得する必要があります。簡単な必要事項を入力すれば直ちにkeyが発行されます。公開サーバーでAPIを利用する場合はconfigurationが必要になりますが、ローカルで遊ぶだけなら必要ありません。
- 2. flickrプロジェクトの作成
flickrという名前でrailsのプロジェクトを作成します。
>rails flickr
- 3. flickr libraryのインストール
rubyでflickr APIを使うためのライブラリFlickrをインストールします。
>sudo gem install flickr
- 4. 環境設定
flickr libraryを使えるように、configディレクトリにあるenvironment.rbの最後に以下を追加する。
require 'flickr'
- 5. application.rhtmlの作成
viewのlayoutディレクトリ内に、以下のapplication.rhtmlファイルを作成する。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Flickr</title> <%= javascript_include_tag :defaults %> <%= stylesheet_link_tag 'flickr' %> </head> <body> <%= yield %> </body> </html>
public/stylesheetsディレクトリにflickr.cssを作成し、application.rhtmlのスタイルを記述する。
body {
background-color: #888;
font-family: Lucida Grande;
font-size: 11px;
margin: 25px;
}
- 7. flickr controllerの作成
flickrという名前でcontrollerを作成する。
> ruby script/generate controller flickr
- 8. index.rhtmlの作成
views/flickrディレクトリにindex.rhtmlを作成し、以下を記述する。
<%= form_remote_tag :url => {:action => 'search'}, :update => 'photos' %>
<fieldset>
<label for="tags">Tags:</label>
<%= text_field_tag 'tags' %>
<%= submit_tag 'Find' %>
</fieldset>
<div id="photos"></div>
<%= end_form_tag %>
form {
margin: 0;
margin-bottom: 10px;
background-color: #eee;
border: 5px solid #333;
padding: 25px;
}
fieldset {
border: none;
}
- 10. サーバーの起動
サーバーを起動し、http://localhost:3000/flickrにアクセスして表示を確かめる。
>ruby script/server
- 11. search methodの実装
controllersディレクトリ内のflickr_controller.rbにsearch methodを記述する。1.で取得したFlickr API keyをFlickr.newのパラメータとして渡す。
def search
flickr = Flickr.new 'your flickr API key'
render :partial => "photo", :collection => flickr.photos(:tags => params[:tags], :per_page => '24')
end
- 12. _photo.rhtmlの作成
indexのpartial viewとして、views/flickrディレクトリに_photo.rhtmlを作成し、以下を記述する。
<img class="photo" src="<%= photo.sizes[0]['source'] %>">
#photos img {
border: 1px solid #000;
width: 75px;
height:75px;
margin: 5px;
}
- 14. 表示の確認
ブラウザをリロードし、検索ワード'rubyconf'を入れて表示を確かめる。
- 15. index.rhtmlの修正
(1)表示エフェクトの追加,(2)spinner.gif(データロード待ちの間くるくる回っているやつ)の表示のためにindex.rhtmlを以下のように修正する。
<%= form_remote_tag :url => {:action => 'search'}, :update => 'photos',
:complete => visual_effect(:blind_down, 'photos'),
:before => %(Element.show('spinner')),
:success => %(Element.hide('spinner')) %>
<%= image_tag 'spinner.gif', :id => 'spinner', :style => 'display: none' %>
<fieldset>
<label for="tags">Tags:</label>
<%= text_field_tag 'tags' %>
<%= submit_tag 'Find' %>
</fieldset>
<div id="photos" style="display: none"></div>
<%= end_form_tag %>
#spinner {
float: right;
margin: 10px;
}
- 17. spinner.gifの入手
こちらなどからspinner.gifを入手し、public/imagesディレクトリにコピー。
- 18. 完成
ブラウザをリロードし試してみてください。僕の環境ではちょっと動作が重いですが、なかなか楽しめそうです。enjoy!
関連記事：Flickr on Railsをいじる(その１)
Flickr on Railsをいじる(その２)
追記(2006/10/28)：flickrライブラリ(flickr.rb)の仕様が変わったようで、現時点(2006/10/28)では上記はうまく動きませんね。今の仕様ではflickr api keyはflickr.rb内に記述するようになっていますので、以下を試してください。
1./usr/local/lib/ruby/gems/1.8/gems/flickr-1.0.0にあるflickr.rb内の仮のapi keyを取得したapi keyに書き換える。
2.flickr_controller.rbではapi keyを書かずに、flickr = Flickr.newのみとする。
追記(2007/5/21)：flickr.rbの在処は環境によって異なります。上記を試して表示されるエラーの内容で場所を確認してください。
