FeaturesPluginsDocs & SupportCommunityPartners

Flickr on Rails の配置

執筆: Brian Leonard
2007 年 12 月 [リビジョン番号: V6.0--6]

このチュートリアルでは、Flickr データベースを検索する Ruby on Rails アプリケーションを作成する方法を説明します。

注: このチュートリアルでは、インターネットへの直接接続が必要です。プロキシを使用している場合は作業できません。

目次

このページの内容は NetBeans IDE 6.0 が対象です
-  チュートリアルの要件
-  Flickr API の入手
-  Flickr ライブラリのインストール
-  Ruby on Rails アプリケーションの作成
-  プロジェクトへのスタイルの追加
-  コントローラの作成
-  検索メソッドの定義
-  アプリケーションの実行
-  ユーザー体験の改良

チュートリアルの要件

このチュートリアルでは、次のテクノロジが必要です。

Flickr API の入手

Flickr API を利用するには、API キーが必要です。
  1. Web ブラウザで http://www.flickr.com/services/api/misc.api_keys.html を表示します。
  2. 「Apply for your key online now」をクリックします。
  3. Flickr キーを入手する手順に従います。
  4. Flickr が生成する API キーをコピーし、テキストファイルまたはほかの使いやすい場所に保存します。

Flickr ライブラリのインストール

  1. 「ツール」メニューから「Ruby Gems」を選択します。
  2. 「Ruby Gems」ダイアログで「新しい Gem」タブをクリックします。
  3. 「検索」フィールドに「flickr」と入力し、Enter キーを押します。
  4. flickr を選択して、「インストール」をクリックします。「Gem のインストール設定」ダイアログで「了解」をクリックします。
  5. インストールの成功を示すメッセージが表示されたら、ダイアログを閉じます。

Ruby on Rails アプリケーションの作成

  1. 「ファイル」>「新規プロジェクト」を選択します。
  2. 「カテゴリ」フィールドで Ruby を選択し、「プロジェクト」フィールドで「Ruby on Rails アプリケーション」を選択して、「次へ」をクリックします。

  3. 「プロジェクト名」フィールドに「flickr」と入力し、「完了」をクリックします。

    Flickr ライブラリは、スクリプトに Flickr API キーが直接追加されることを想定しています。そのようにもできますが、次の手順で説明する方法を使用すると、Flickr ライブラリにさわらずに使用できます。
  4. 「プロジェクト」ウィンドウで「構成」ノードを展開し、environment.rb を開きます。

  5. environment.rb ファイルの最後に次のコードを追加します。必ず MY_KEY 変数に自分の Flicker API キーを入力してください。 Flickr API にアクセスするには、このキーが必要です。

    コード例 1: Flickr API キーの追加 
    require 'rubygems'
require 'flickr'
MY_KEY='Enter your Flicker API Key'
class Flickr
  alias old_initialize initialize
  def initialize(api_key=MY_KEY, email=nil, password=nil)
    puts "new_initialize " + MY_KEY
    old_initialize(api_key, email, password)
    @host="http://api.flickr.com"
    @activity_file='flickr_activity_cache.xml'
  end
end

  6. メインメニューから、「ファイル」>「すべてを保存」を選択します。

プロジェクトへのスタイルの追加

  1. 「プロジェクト」ウィンドウで「ビュー」ノードを展開し、「layouts」ノードを右クリックして、「新規」>「RHTML ファイル」を選択します。ファイルを application という名前にして、「完了」をクリックします。

  2. application.rhtml 内の既存のコードを次のコードに置き換えます。

    コード例 2: application.rhtml のコード 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
    <title>Flickr</title>
      <%= javascript_include_tag :defaults %>
      <%= stylesheet_link_tag 'flickr' %>
    </head>
<body>
      <%= yield %>
</body>
</html>

  3. 「公開」ノードを展開し、「stylesheets」を右クリックして、「新規」>「その他」を選択します。
  4. 「新規ファイル」ダイアログで、「カテゴリ」に「その他」を設定し、「ファイルの種類」に「階層式スタイルシート」を設定します。「次へ」をクリックします。

  5. ファイルを flickr という名前にして、「完了」をクリックします。

    ファイル flickr.css が編集領域で開きます。

  6. flickr.css に次のスタイルを追加します。

    コード例 3: スタイルコード 
    body {
    background-color: #888;
    font-family: Lucida Grande;
    font-size: 11px;
    margin: 25px;
}

    form {
    margin: 0;
    margin-bottom: 10px;
    background-color: rgb(222,231,236);
    border: 5px solid #333;
    padding: 25px;
}
    

fieldset {
    border: none;
}

#spinner {
        float: right;
        margin: 10px;
    }

    #photos img {
    border: 1px solid #000;
    width: 75px;
    height: 75px;
    margin: 5px;
}

コントローラの作成

  1. 「コントローラ」ノードを右クリックし、「生成」を選択します。

  2. 「Rails ジェネレータ」ダイアログで「名前」フィールドに「flickr」と入力し、「ビュー」フィールドに「index」と入力して、「了解」をクリックします。

    このアクションによって、ファイル flickr_controller.rb が作成され、編集領域に表示されます。
  3. 「ビュー」>「flickr」を展開して、index.rhtml を開きます。

  4. index.rhtml 内の既存のコードを次のコードに置き換えます。

    コード例 4: index.rhtml のコード 
    <% form_remote_tag :url => {:action => 'search'}, :update => 'photos' do %>
    <fieldset>
        <label for="tags">Tags:</label>

        <%= text_field_tag 'tags' %>
        <%= submit_tag 'Find' %>
    </fieldset>
    
    <div id="photos"></div>
<% end %>

検索メソッドの定義

  1. flickr_controller.rb を開きます。

  2. index メソッドを削除し、太字で示された search メソッドに置き換えて、コードを編集します。

    コード例 5: FlickrController クラスのコード 
    class FlickrController < ApplicationController
  def search
    flickr = Flickr.new

    if params[:tags].empty?
      render :text => '<h2>Please enter a search string&lt/h2>'
    else
      begin
        photos = flickr.photos(:tags => params[:tags], :per_page => '24')
        render :partial => 'photo', :collection => photos
      rescue NoMethodError
        render :text => '<h2>No matching photos found</h2>'
      end
    end
  end
end

  3. 「ビュー」ノードにある「flickr」ノードを右クリックし、「新規」>「RHTM ファイル」を選択します。ファイルを _photo という名前にして、「完了」をクリックします。

  4. ファイルの内容を置き換えて、次の行のみが含まれるようにします。

    <img class='photo' src="<%= photo.sizes[0]['source'] %>">

アプリケーションの実行

ここでは、環境を構成して、プロジェクトを実行するとアプリケーションが起動されるようにします。
  1. 「公開」ノードにある index.html を削除します。

  2. 「構成」ノードにある routes.rb を開きます。次の行を探します。

    # map.connect '', :controller => "welcome"
  3. コメント符号 (#) を削除し、welcome を flickr に変更して、行を編集します。

  4. 次の図に示すように、ツールバーの「主プロジェクトを実行」をクリックして、WEBrick サーバーを起動し、ブラウザを起動します。

    図 1: flickr アプリケーション

    図 1: flickr アプリケーション

  5. NetBeans などの検索文字列を入力して、「Find」をクリックします。画像を読み込むのに数秒かかります。

    図 2: 画像の読み込み

    図 2: 画像の読み込み

ユーザー体験の改良

「Find」ボタンをクリックしたとき、バックグラウンドで起こることについてのフィードバックはありません。ここでは、読み込み時に画像の効果を変更するのと同様に、この問題に対処するのに役立つ単純なアニメーション GIF を追加します。
  1. ブラウザに表示されている、このアニメーション GIF をデスクトップ上のファイルに保存します。次に、NetBeans IDE の「プロジェクト」ウィンドウで、「公開」>「images」ノードの下にファイルをドラッグします。

  2. 「ビュー」>「flickr」>「index.rhtml」を開きます。既存のコードを削除し、次の例に示すコードに置き換えます。

    コード例 6: index.rhtml のコード 
    <% form_remote_tag :url => {:action => 'search'}, :update => 'photos',
    :complete => visual_effect(:blind_down, 'photos'),
    :before   => %(Element.show('spinner')),
    :success  => %(Element.hide('spinner')) do %>

    <%= 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 %>

  3. メインメニューから、「ファイル」>「すべてを保存」を選択します。ブラウザを再表示し、JRuby など、ほかの検索文字列を試します。

    図 3: アニメーションの追加

    図 3: アニメーションの追加

    これで、サーバーが要求を処理中であることを知らせる簡単なアニメーションが確認できます。画像が現れると、一連のブラインドのようにドロップダウンされます。

次の手順



>> その他の NetBeans Ruby ドキュメント


Bookmark this page

del.icio.us furl simpy slashdot technorati digg
Companion
Projects: 		MySQL Database Server   Open JDK: an Open SourceJDK   GlassFish Community: an Open Source Application Server    Mobile & Embedded Community    Open Solaris   java.net - The Source for Java Technology Collaboration   Virtual Box - full virtualizer  Open ESB - The Open Enterprise Service Bus Powered by