YahooSearchApi プラグインのインストールとアプリケーションIDの登録

Rails で Yahoo 検索 API を使うためのプラグイン YahooSearchApi をインストールします。

script/plugin install http://rails-workshop-tokyo.googlecode.com/svn/trunk/plugins/yahoo_search_api

Yahoo API を使うためにはアプリケーションIDの登録が必要です。

Yahoo!デベロッパーネットワーク - アプリケーションIDの登録

より登録をおこない、アプリケーションIDを取得します。

コントローラーとビューの編集

コントローラーを編集して、アプリケーションをキーワードとして Yahoo の検索結果を10件取得する処理を追加します。

== app/controllers/softwares_controller.rb ==

class SoftwaresController < ApplicationController

  def show
    @software = Software.find(params[:id])

    # 検索パラメーターを指定
    # http://developer.yahoo.co.jp/search/web/V1/webSearch.html 参照
    search_params = {
      :type => 'all',  # 全クエリー文字を含む検索結果を取得
      :results => 10,  # 10件の検索結果を取得
      :start => 1,  # 検索結果の先頭位置
      :language => 'ja'  # 言語
    }

    web_search_service = YahooSearchApi::WebSearchService.new(
      'アプリケーションID', # 取得したアプリケーションID
      @software.title,  # キーワード
      search_params  # 検索パラメーター 
    )

    @results = web_search_service.results
  end

end

ビューは以下の通りです。アプリケーションのタイトルとURLの後に、Yahoo の検索結果を表示します。

== app/views/softwares/show.rhtml ==

<p><b>Title:</b> <%= h @software.title %></p>
<p><b>Url:</b> <%= link_to h(@software.url), @software.url %></p>
<p><b>「<%= h @software.title %>」の Yahoo 検索結果:</b></p>
<ol>
<% @results.each do |result| %>
<li><%= link_to result.Title, result.ClickUrl %></li>
<%= result.Summary %>
<div style="color:green"><%= result.Url %></div>
<% end %>
</ol>

以下のように Yahoo 検索結果が表示されるようになりました。(クリックすると大きな画像が見られます)

Widgets Tabnav でタブナビゲーション

これだけだと少しもの足りないので、複数の検索結果を表示してみます。

たとえば、Firefox のページなら、「Firefox」をキーワードにした検索結果に加えて、「Firefox インストール」「Firefox 使い方」「Firefox ダウンロード」の検索結果も表示するようにします。

それぞれの検索結果はタブナビゲーションで切り替えられるようにしましょう。

» SeeSaw | Rails Widgets

というプラグインがあり、Tabnav という機能で簡単にタブナビゲーションを追加できます。

ruby script/plugin install svn://svn.seesaw.it/widgets/trunk

でインストールしておきます。

まず、複数の検索結果を表示できるようにコントローラーを改造します。

http://localhost:3000/softwares/show/1 というURLで通常の検索結果を表示するところを、keyword というパラメーターを追加し、例えば、http://localhost:3000/softwares/show/1?keyword=install で「Firefox インストール」の検索結果を表示するようにします。

keyword=usage なら「Firefox 使い方」、keyword=download なら「Firefox ダウンロード」です。

追加、変更した部分を赤字で示しました。

== app/controllers/softwares_controller.rb ==

class SoftwaresController < ApplicationController

  def show
    @software = Software.find(params[:id])

    keyword = @software.title    
    case params[:keyword]
    when 'install'
      keyword += ' インストール'
    when 'usage'
      keyword += ' 使い方'
    when 'download'
      keyword += ' ダウンロード'
    end

    search_params = {
      :type => 'all',
      :results => 10,
      :start => 1,
      :language => 'ja'
    }

    web_search_service = YahooSearchApi::WebSearchService.new(
      'アプリケーションID',
      keyword,
      search_params
    )

    @results = web_search_service.results
  end

end

ビューの作成に移ります。

yahoo_search という名前でタブナビゲーションのひな形となる partial ビューファイルを生成します。

ruby script/generate tabnav yahoo_search

生成したビューファイルのコメントを参考に、以下の通り全面的に書き換えます。

== app/views/widgets/_yahoo_search_tabnav.rhtml ==

<%
render_tabnav :yahoo_search, 
              :generate_css => true do 
         
  add_tab do |t|
    t.named "#{h(@software.title)}"
    t.titled "「#{h(@software.title)}」の検索結果"
    t.links_to :controller => 'softwares', :action => 'show', :id => @software.id
  end

  add_tab do |t|
    t.named "#{h(@software.title)} インストール"
    t.titled "「#{h(@software.title)} インストール」の検索結果"
    t.links_to :controller => 'softwares', :action => 'show', :id => @software.id, :keyword => 'install'
  end

  add_tab do |t|
    t.named "#{h(@software.title)} 使い方"
    t.titled "「#{h(@software.title)} 使い方」の検索結果"
    t.links_to :controller => 'softwares', :action => 'show', :id => @software.id, :keyword => 'usage'
  end

  add_tab do |t|
    t.named "#{h(@software.title)} ダウンロード"
    t.titled "「#{h(@software.title)} ダウンロード」の検索結果"
    t.links_to :controller => 'softwares', :action => 'show', :id => @software.id, :keyword => 'download'
  end
end 
%>

add_tab で始まる各ブロックがひとつのタブにあたり、named にタイトル、titled にツールチップの内容、links_to にリンク先を記述します。

リンク先には、さきほどのコントローラーの改造で追加した keyword パラメーターをそれぞれ指定しています。

上記 partial ファイルはビューから、tabnav :yahoo_search で呼び出します。

== app/views/softwares/show.rhtml ==

<p><b>Title:</b> <%= h @software.title %></p>
<p><b>Url:</b> <%= link_to h(@software.url), @software.url %></p>

<p><b>Yahoo 検索結果:</b></p>
<% tabnav :yahoo_search do %>
<ol>
<% @results.each do |result| %>
<li><%= link_to result.Title, result.ClickUrl %></li>
<%= result.Summary %>
<div style="color:green"><%= result.Url %></div>
<% end %>
</ol>
<% end %>

以下のようなタブナビゲーションの完成です。(クリックすると大きな画像が見られます)

まとめ

Yahoo 検索 API を使い、検索結果という形で関連情報を表示してみました。

このように API を使うと、簡単に自分のサービスに新たな情報を追加することができます。

他の API と組み合わせたり、見せ方を工夫することで他にはないユニークな情報を提供できるかもしれません。

今回までのソースコードを以下にアップロードしておきます。

» 10best - Google Code

svn checkout http://10best.googlecode.com/svn/trunk/ 10best

でチェックアウトするか、ブラウザでもリポジトリを閲覧することができます。