「jMaki on Rails」の導入方法とRevolverコンポーネントのカスタマイズ

jMakiで強化するRuby on Rails

Revolverのインストール

　では次に、本題であるRevolverをインストールします。jMaki RevolverはjMaki Extrasに含まれており、先ほどと同じjava.netからダウンロードできます。本稿ではjMaki Extras欄からたどっていける、こちらのページから「jmaki-extras-1.0.1.zip」をダウンロードします。

　「jmaki-extras-1.0.1.zip」を展開すると、「jmaki-extras-1.0.1」ディレクトリの下に「resources」と「templates」というディレクトリが生成されます。先程と同様、「resources」の配下にある「extras」ディレクトリを「RAILS_ROOT\public\resources」の下に配置します。また、「templates」の配下にある「extras」ディレクトリを「RAILS_ROOT\public\templates」の下に配置します。

注

　RAILS_ROOTはRailsで生成したアプリケーションのルートディレクトリを表しています。

　ビューを下記のように修正します。

index.rhtml

<%= javascript_include_tag "jmaki" -%>
<%= jmaki_setup -%>

<%
  bullets = Array.new
  bullet1 = Hash.new
  bullet1["title"] = 'Amsterdam'
  bullet1["imgSrc"] = 
  'http://farm1.static.flickr.com/67/227194339_551e710acb_m.jpg'
  bullet1["href"] = 
  'http://www.flickr.com/photos/44399047@N00/sets/72157594254916360/'
  bullets << bullet1

  bullet2 = Hash.new
  bullet2["title"] = 'Paris'
  bullet2["imgSrc"] = 
   'http://farm1.static.flickr.com/129/319228860_23770c66d3_m.jpg'
  bullet2["href"] = 
  'http://www.flickr.com/photos/44399047@N00/sets/72157594414671044/'
  bullets << bullet2

  bullet3 = Hash.new
  bullet3["title"] = 'Seoul'
  bullet3["imgSrc"] = 
   'http://farm1.static.flickr.com/106/294268722_662da2ef5a_m.jpg'
  bullet3["href"] = 
  'http://www.flickr.com/photos/44399047@N00/sets/72157594370026444/'
  bullets << bullet3
-%>

<%= jmaki_widget 'extras.jmaki.revolver', :value=>bullets %>

　すると、図13のようにRevolverが使用され、画像が表示されるようになりますます。黒い背景の左右にある矢印をクリックすると、画像を回転させることができます。

図13-jMaki Revolverの利用イメージ

　次に、データベース上のテーブルから情報を読み込んで、画像を表示できるようにします。RailsとAIRで作成する画像のRevolver表示（前篇）、RailsとAIRで作成する画像のRevolver表示（後篇）で作成した野球選手マスタを使用します。

　まず、コントローラを修正します。

jmaki_sample_controller.rb

class JmakiSampleController < ApplicationController
  def index
    @mst_baseball_player_pages, @mst_baseball_players = 
      paginate :mst_baseball_players, :per_page => 10
  end
end

　次に、ビューを修正します。

index.rhtml

<%= javascript_include_tag :defaults -%>
<%= javascript_include_tag "jmaki" -%>
<%= jmaki_setup -%>

<%
  bullets = Array.new
  for mst_baseball_player in @mst_baseball_players
    if mst_baseball_player.send('main_image_path')
      bullet = Hash.new
      bullet["imgSrc"] = 
        mst_baseball_player.send('main_image_path')
      bullet["href"] = 
        mst_baseball_player.send('main_image_path')
      bullet["title"] = mst_baseball_player.send('player_name');

      bullets << bullet
    end
  end
%>

<table class="confirm">
  <tr>
    <td>
      <%= jmaki_widget 'extras.jmaki.revolver', :value=>bullets -%>
    </td>
  </tr>
</table>

　すると、図14のように野球選手マスタの画像が表示されるようになります。

図14-野球選手の表示