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

jMakiで強化するRuby on Rails

Revolverのカスタマイズ～その2～

　下記のコントローラではbullet_actionを定義します。画像が切り替えられた時にbullet_actionが呼び出され、render :inline=>"<%= render :partial=>'baseball' %>"で表示を切り替えます。

jmaki_sample_controller.rb

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

  #--------------------------------------------------------
  # jmaki revolver の画像が入れ替わった時に発生する
  # イベントで処理されるメソッドです。
  # 現在選択されている野球選手の情報を表示します。
  #--------------------------------------------------------
  def bullet_action
    @baseball_player = MstBaseballPlayer.find_by_id(params[:name]);
    render :inline=>"<%= render :partial=>'baseball' %>"
  end
end

　「_baseball.rhtml」のコードは下記のようになります。

_baseball.rhtml

<br/>
<table class="confirm">
  <tr>
    <th>プロフィール</th>
    <th>コメント</th>
  </tr>
  <tr>
    <td width="40%">
      <%= @baseball_player.profile.gsub("\n", "<br/>") %>
    </td>
    <td width="60%">
      <%= @baseball_player.comment.gsub("\n", "<br/>") %>
    </td>
  </tr>
  <tr>
    <th>記録</th>
  </tr>
  <tr>
    <td width="35%">
      <%= @baseball_player.record.gsub("\n", "<br/>") %>
    </td>
  </tr>
</table>
<br/>

　画像のサイズを小さくして、全体的にバランスを取るために「component.js」を修正します。「component.js」内にあるiWidthとiHeightの値を次のように修正します。

画像のサイズを小さくする

  //var iWidth = 250;
  //var iHeight = 300;
  var iWidth  = 160;
  var iHeight = 120;

　また、「RAILS_ROOT\public\resources\extras\jmaki\revolver」配下にある「components.css」の内容を添付のサンプルソースに従い書き変えます。

　以上のカスタマイズを行うことで、図15のようになります。

図15-野球選手の表示

注

　図1や図14、図15、図16で使用している野球選手のキャラクタ画像は、筆者が購入したロイヤリティフリーの画像です。

まとめ

　本稿では、jMaki on Railsの利用方法と、Revolverを例にとったjMakiコンポーネントのカスタマイズ方法を説明しました。本稿で行った修正のように、jMakiの動的な動きに合わせて画面表示を変更すれば、よりリッチな画面を作成できます。

　jMaki on Railsは本稿で行ったように簡単にカスタマイズができるので、読者の皆さんの役に立つと思います。

　Sun Developer Networkのサイト内にライセンス関連の記述があります。jMakiのコンポーネントにカスタマイズを加えて変更を行った場合、
「Copyright 1994-2006 Sun Microsystems, Inc. All Rights Reserved.」
の記述をはじめ、注意書きなども記載する必要があります。従って本稿のカスタマイズもそれに基づいて行っています。

　余談ですが、作成した画面は図16のように携帯（922SH）からも閲覧することができました。

図16-携帯からのRevolver表示

参考資料

• CodeZine『jMakiでリッチなGUIを作ろう！』 掌田 津耶乃 著、翔泳社、2007年10月
• java.net『jMaki on Rails - Updated for NetBeans 6 M10』 Arun Gupta 著、2007年7月