昨日Railsで作ったFlickrインタフェースを少し改良してみました。改良点は以下の通り。
flickrの特定ユーザを検索し、そのコレクションを表示できるようにする。
１つの検索インタフェースを使って、タグおよびユーザの両方の検索が切り替えでできるようにする。
表示レイアウトにタイトルバーナーを追加する。
手順は以下の通り。
1. select_tagの追加
検索の対象を選択するために、select_tagをindex.rhtmlの＜fieldset＞に追加する。選択肢はoptions_for_selectで記述する。
<fieldset>
<label for="tags">Tags:</label>
<%= select_tag 'kind', options_for_select({'tag' => 'search_tag','user' => 'search_user'}) %>
<%= text_field_tag 'tags' %>
<%= submit_tag 'Find' %>
</fieldset>
2. form_remote_tagの修正
select_tagで選択した対象(tag or user)をsearch methodに渡せるようにform_remote_tagを修正する。
<%= form_remote_tag :url => {:action => 'search', :params => params[:kind]},
:update => 'photos',
:complete => visual_effect(:blind_down, 'photos'),
:before => %(Element.show('spinner')),
:success => %(Element.hide('spinner')) %>
3. search methodの修正
select_tagでの選択肢によって処理を切り分けるためにcase文を使う。こちらにあったFlickr.rbのmethodを参照にしてsearch_user内の処理を記述する。
def search
flickr = Flickr.new 'your flickr API key'
case params[:kind]
when "search_tag"
render :partial => "photo",
:collection => flickr.photos(:tags => params[:tags], :per_page => '30')
when "search_user"
user = flickr.users(params[:tags])
render :partial => "photo", :collection => user.photos
end
end
4. application.rhtmlの修正
タイトルバナーを表示するように、application.rhtmlの<body>を修正する。
<body>
<div id="banner">
My Flickr
</div>
<div id="main">
<%= yield %>
</div>
</body>
5. flickr.cssの修正
application.rhtmlに追加したbanner, mainのスタイルをflickr.cssに記述する。
#banner {
background: #C0C0C0;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #A52A2A;
text-align: center;
}
#main {
margin-left: 0em;
padding-top: 2ex;
padding-left: 2em;
background: white;
}
6. 完了
ブラウザでhttp://localhost:3000/flickrにアクセスし表示を確認。タブでtagまたはuserを選択し検索ワードを入れて検索。動いているようです。select_tagで選択した対象をsearch methodに渡す方法が分からずに悩みました。入力した検索ワードがヒットしない場合に、画面上にrailsのエラーメッセージが出てしまいます。これも直したいです。
Flickrインタフェースをさらに少し改良してみました。改良点は写真をオーバーレイ表示する機能の追加です。ネットを検索したらLightbox JSというスクリプトを使って既にこれを実現しているサイトがありましたので利用させて頂きました。
Seb Blog - Home
手順は以下の通り。
1. Lightbox JSを入手
こちらのサイトからLightbox JS v2.0をダウンロードする。
2. 必要ファイルをflickrプロジェクトにコピー
以下のファイルをプロジェクトの対応ディレクトリにコピーする。
lightbox.css => public/stylesheets/
lightbox.js => public/javascripts/
image-1.jpg, thumb-1.jpg以外のすべてのイメージファイル => public/images/
3. application.rhtmlの修正
lightbox.css, lightbox.jsを参照するようapplication.rhtmlの対応箇所に追加する。
<%= javascript_include_tag :defaults, 'lightbox' %>
<%= stylesheet_link_tag 'flickr', 'lightbox' %>
4. Lightboxリンクの作成
表示される写真にLightboxのリンクが貼られるように_photo.rhtmlを修正する。
<a href="<%= photo.sizes[3]['source'] %>" rel="lightbox"><img class="photo" src="<%= photo.sizes[0]['source'] %>"/></a>
5. index.rhtmlの修正
Lightboxが初期化されるようにindex.rhtmlにおけるform_remote_tagのcompleteオプションを修正する。
:complete => visual_effect(:blind_down, 'photos') + %(new Lightbox())
6.lightbox.jsの修正
var fileLoadingImage = "../images/loading.gif";
var fileBottomNavCloseImage = "../images/closelabel.gif";
