iPhoneアプリ開発に興味を持ってMacを買った人は多いと思いますが、Objective-Cの敷居の高さに挫折した人もまた多いと思います。僕もその１人です（だって、メソッド名とか引数とかものすごく長いんだもん…）。そんな人におすすめなのが、今回紹介するRhodesフレームワークです。Rhodesフレームワークを使えば、Ruby、HTML、CSS、JavaScriptといった馴染みのある技術を使ってiPhoneアプリを作ることができます。
Rhodesについて
RhodesはRubyでiPhoneアプリを開発するためのフレームワークです（正確にいうとiPhoneだけでなく、Android、BlackBerry、Windows Mobileのアプリを作ることができます）。Rhodesフレームワークを使えば、難解なObjective-Cではなく、Ruby、HTML、CSS、JavaScriptといった馴染みのある技術を使ってiPhoneアプリを作ることができます。フレームワーク自体はRailsライクのMVCフレームワークで、Railsを使ったことがある人ならすんなり馴染めると思います。
インストール
Rhodesはgemでインストールすることができます。
$ sudo gem install rhodes
インストールが終わったらセットアップスクリプトを実行します。iOS SDKのパスなどを設定していきます。
$ sudo rhodes-setup
これでインストールは完了です。簡単ですね。
RhodesでHello World
RhodesでHello Worldアプリを作ってみます。Rhodesでアプリを作る際の大まかな流れは以下のとおりです。
- プロジェクトを作る
- モデル、ビュー、コントローラを作る
- アプリをビルドする
1. プロジェクトの作成
rhodes appコマンドでプロジェクトを作成します。Railsでいうところのrailsコマンドです。
$ rhodes app hello_world
Generating with app generator:
[ADDED] hello_world/rhoconfig.txt
[ADDED] hello_world/build.yml
[ADDED] hello_world/app/application.rb
[ADDED] hello_world/app/index.erb
[ADDED] hello_world/app/index.bb.erb
[ADDED] hello_world/app/layout.erb
[ADDED] hello_world/app/loading.html
[ADDED] hello_world/Rakefile
[ADDED] hello_world/app/helpers
[ADDED] hello_world/icon
[ADDED] hello_world/app/Settings
[ADDED] hello_world/public
[ADDED] hello_world/app/loading.png
この時点でプロジェクトディレクトリは次のような構成になっています。
$ tree hello_world/ -d
hello_world/
├── app
│ ├── Settings
│ └── helpers
├── icon
└── public
├── css
├── images
│ ├── android
│ └── iphone
│ └── jqtouch
├── jqtouch
└── js
12 directories
各ディレクトリの大まかな説明は以下のとおりです。
- app
- モデル、ビュー、コントローラなどを置きます
- icon
- ホーム画面用のアイコンを置きます
- public
- JavaScript、CSS、画像ファイルなどを置きます
2. モデル、ビュー、コントローラの作成
プロジェクトを作成したら、次はモデル、ビュー、コントローラを作成します。モデル、ビュー、コントローラの作成にはrhodes modelコマンドを使用すると便利です。これはRailsでいうところのscaffoldコマンドに相当します。使用方法は以下のとおりです。
$ rhodes model <モデル名> <属性>
モデルは使わずビューとコントローラだけがほしい場合でも、属性は省略することはできません。その場合は、適当な値を入れておいてください。
$ rhodes model hello_world id
Generating with model generator:
[ADDED] app/HelloWorld/index.erb
[ADDED] app/HelloWorld/edit.erb
[ADDED] app/HelloWorld/new.erb
[ADDED] app/HelloWorld/show.erb
[ADDED] app/HelloWorld/index.bb.erb
[ADDED] app/HelloWorld/edit.bb.erb
[ADDED] app/HelloWorld/new.bb.erb
[ADDED] app/HelloWorld/show.bb.erb
[ADDED] app/HelloWorld/hello_world_controller.rb
[ADDED] app/HelloWorld/hello_world.rb
[ADDED] app/test/hello_world_spec.rb
これでモデル、ビュー、コントローラが生成されました。生成されたファイルの大まかな説明は以下のとおりです。
- app/HelloWorld/hello_world.rb
- モデル
- app/HelloWorld/hello_world_controller.rb
- コントローラ
- app/HelloWorld/*.erb、app/HelloWorld/*.bb.erb
- ビュー（*.bb.erbファイルはBlackBerry用のビュー）
- app/test/hello_world_spec.rb
- 単体テストコード
RhodesはRailsと違って、1つのディレクトリの中にモデル、ビュー、コントローラのセットを置きます。
まずビューを編集してみます。
app/HelloWorld/index.erb
<div class="pageTitle">
<h1>HelloWorlds</h1>
</div>
<div class="toolbar">
<div class="leftItem regularButton">
<a href="<%= Rho::RhoConfig.start_path %>">Home</a>
</div>
<div class="rightItem regularButton">
<a class="button" href="<%= url_for :action => :new %>">New</a>
</div>
</div>
<div class="content">
<ul>
<% @hello_worlds.each do |hello_world| %>
<li>
<a href="<%= url_for :action => :show, :id => hello_world.object %>">
<span class="title"><%= hello_world.id %></span><span class="disclosure_indicator"></span>
</a>
</li>
<% end %>
</ul>
</div>
「Hello, world!」という文字列をコントローラで設定し、それをビューで表示するようにしてみましょう。18〜22行目を以下のように書き換えます。
<li>
<%= @message >
</li>
@messageにコントローラで設定した文字列を入れることにします。
次にコントローラを編集します。indexアクションを以下のように書き換えます。
app/HelloWorld/hello_world_controller.rb
#GET /HelloWorld
def index
@message = @params['message']
render
end
@paramsでGETパラメータやPOSTパラメータの値を取得できます。この場合、messageパラメータの値を@messageに入れてビューに渡しています。
最後に、HelloWorldコントローラのindexアクションに文字列「Hello, world!」を渡すリンクをアプリのトップ画面に実装します。アプリのトップ画面はデフォルトではapp/index.erbです。
app/index.erb
<div class="pageTitle">
<h1>HelloWorld</h1>
</div>
<div class="toolbar">
<% if SyncEngine::logged_in > 0 %>
<div class="leftItem blueButton">
<a href="<%= url_for :controller => :Settings, :action => :do_sync %>">Sync</a>
</div>
<div class="rightItem regularButton">
<a href="<%= url_for :controller => :Settings, :action => :logout %>">Logout</a>
</div>
<% else %>
<div class="rightItem regularButton">
<a href="<%= url_for :controller => :Settings, :action => :login %>">Login</a>
</div>
<% end %>
</div>
<div class="content">
<ul>
<li>
<a href="#"><span class="title">Add link here...</span><span class="disclosure_indicator"/></a>
</li>
</ul>
</div>
23行目を以下のように書き換えます。
<a href="<%= url_for :controller => :HelloWorld, :action => :index, :query => {:message => 'Hello, world!'} %>"><span class="title">Hello Wolrd Demo</span><span class="disclosure_indicator"/></a>
url_forはURLを組み立てるRhodesのヘルパーメソッドです（Railsにもありますね）。
3. ビルドする
Rhodesで作ったアプリをビルドするには以下のコマンドを実行します。ビルドが完了すると自動的にiPhoneシミュレータが起動し、アプリが立ち上がります。
$ rake run:iphone
トップ画面に先ほど実装したリンクが表示されていますね。
タッチしてみます。
画面遷移し、「Hello, world!」と表示されました。
まとめ
Rhodesを使ってHello Worldアプリを作ってみました。Rhodesを使えばObjective-Cで書くより圧倒的に少ないコード量でアプリを作ることができます。
ただし、RhodesはiOSのすべての機能をカバーしているわけではないので、その点は注意が必要です（
http://docs.rhomobile.com/rhodes/device-caps）。とはいうものの、ツイッタークライアントなど、あまり凝ったUIを使わず、APIの実行結果を表示するだけアプリであれば十分作ることが可能です。複雑なタッチ操作や加速度センサをバリバリ使うようなアプリは難しいかな。
いずれ、ツイッターやフォースクエアのAPIを利用する例や、GPSを使用する例なども紹介したいと思います。
参考
Rhodesのページ
http://rhomobile.com/
Rhodesドキュメントの日本語訳
http://ackcell.blogspot.com/
