ワンソースからiPhone/Androidのネイティブアプリが! 話題の"Rhodes"を試す

まずはじめに、アプリケーションのベースとなるファイルを作成する。さきほどのgemでインストールした「RhoGen (Rhodes Generator)」ユーティリティを使用し、スケルトンを作成する。

% rhogen app storemanager http://localhost:9292/application
Generating with app generator:
     [ADDED]  storemanager/rhoconfig.txt
     [ADDED]  storemanager/build.yml
     [ADDED]  storemanager/app/application.rb
     [ADDED]  storemanager/app/index.erb
     [ADDED]  storemanager/app/index.bb.erb
     [ADDED]  storemanager/app/layout.erb
     [ADDED]  storemanager/app/loading.html
     [ADDED]  storemanager/Rakefile
     [ADDED]  storemanager/app/helpers
     [ADDED]  storemanager/icon
     [ADDED]  storemanager/app/Settings
     [ADDED]  storemanager/public
% ls -l | grep storemanager
drwxr-xr-x   8 hiroaki  staff   272B  7  9 14:17 storemanager

storemanagerという名前のディレクトリが作成された。ファイル構成は次のとおり。

% tree storemanager/
storemanager/
|-- Rakefile
|-- app
|   |-- Settings
|   |   |-- controller.rb
|   |   |-- home.bb.erb
|   |   |-- home.erb
|   |   |-- index.bb.erb
|   |   |-- index.erb
|   |   |-- login.bb.erb
|   |   |-- login.erb
|   |   |-- reset.bb.erb
|   |   |-- reset.erb
|   |   |-- wait.bb.erb
|   |   `-- wait.erb
|   |-- application.rb
|   |-- helpers
|   |   |-- application_helper.rb
|   |   `-- browser_helper.rb
|   |-- index.bb.erb
|   |-- index.erb
|   |-- layout.erb
|   `-- loading.html
|-- build.yml
|-- icon
|   |-- icon.ico
|   `-- icon.png
|-- public
|   |-- css
|   |   |-- android.css
|   |   |-- blackberry.css
|   |   |-- iphone.css
|   |   |-- webkit.css
|   |   `-- windows_mobile.css
|   |-- images
|   |   |-- IUI_LICENSE.txt
|   |   |-- android
|   |   |   |-- btn_check_off.png
|   |   |   |-- btn_check_on.png
|   |   |   |-- btn_radio_off.png
|   |   |   |-- btn_radio_on.png
|   |   |   |-- disclosure.png
|   |   |   `-- ic_menu_more.png
|   |   |-- backButton.png
|   |   |-- blueButton.png
|   |   |-- cancel.png
|   |   |-- grayButton.png
|   |   |-- iphone
|   |   |   |-- disclosure.png
|   |   |   |-- disclosure_detail.png
|   |   |   |-- radiobutton.png
|   |   |   |-- select.png
|   |   |   `-- switch.png
|   |   |-- iui-logo-touch-icon.png
|   |   |-- listArrow.png
|   |   |-- listArrowDown.png
|   |   |-- listArrowSel.png
|   |   |-- listGroup.png
|   |   |-- loading.gif
|   |   |-- pinstripes.png
|   |   |-- right_button.png
|   |   |-- selection.png
|   |   |-- thumb.png
|   |   |-- toggle.png
|   |   |-- toggleOn.png
|   |   |-- toolButton.png
|   |   |-- toolButton_new.png
|   |   |-- toolbar.png
|   |   `-- whiteButton.png
|   `-- js
|       |-- application.js
|       |-- rho.js
|       |-- rhogeolocation-wm.js
|       `-- rhogeolocation.js
`-- rhoconfig.txt

10 directories, 64 files

デフォルトのホーム画面はstoremanager/app/index.erbファイルとなる。HTML/ERBファイル間のリンクについては、普通にHTMLを記述する場合と同じ。

iPhoneアプリのビルド

iPhoneアプリケーションをビルドする場合は、build.ymlを適切に変更しておく必要がある。今回使用するiPhone SDKのバージョンは4なので、build.ymlの12行目を次のように変更した。

% diff -u build.yml.orig build.yml
--- build.yml.orig      2010-07-09 15:19:11.000000000 +0900
+++ build.yml   2010-07-09 15:19:15.000000000 +0900
@@ -9,7 +9,7 @@
 applog: rholog.txt
 iphone:
   configuration: Debug
-  sdk: iphonesimulator3.0
+  sdk: iphonesimulator4.0
   provisionprofile:
   codesignidentity:
   entitlements:

build.yml変更後、storemanagerディレクトリ下でrakeを実行する。

% rake run:iphone

ビルドに成功すると、自動的にiPhoneシミュレータが起動する。2画面目に「storemanager」アイコンが出来ているので、さっそく実行してみよう。


iPhoneエミュレータ上でビルドしたアプリケーションが表示されていることを確認	アイコンをタップして起動。HTML/Rubyだけで構成したファイルが、ネイティブアプリケーションとして動作している


iPhoneのSettingsにもstoremanagerの項目が追加されている	動作のロギング設定をおこなう

Androidアプリのビルド

Androidアプリをビルドする場合は、さきほどrake run:iphoneとしたところをrake run:androidに変更するだけだ。

% rake run:android

ビルドに成功するとiPhoneと同様、自動的にAndroidエミュレータが起動する。


アプリケーションメニューでビルドしたアプリケーションが表示されていることを確認	ビルドしたアプリケーションを起動中	起動完了の画面。おなじソースコードから別々のプラットフォームで動作するネイティブアプリケーションを作成できた

ビルドに失敗したり、アプリケーションのアイコンが表示されない場合は、

rhodes-setupで適切なJDK, Android SDK/NDKのパスを設定しているか
Android SDK and AVD Managerの設定をおこなっているか

上記2点を確認してみよう。

この他のプラットフォームで動作するアプリケーションをビルドする場合、run:以降の引数を変えてやればOKだ。対応するコマンドと役割は次のとおり。(rake -Tの実行結果より一部抜粋)

コマンド	説明
rake clean:android	Android用にビルドしたファイルを削除
rake clean:bb	BlackBerry用にビルドしたファイルを削除
rake clean:iphone	iPhone用にビルドしたファイルを削除
rake clean:win32	Symbian用にビルドしたファイルを削除
rake clean:wm	Windows Mobile用にビルドしたファイルを削除
rake clobber_rdoc	rdoc productsを削除
rake config:checkbb	ローカルのBlackBerry設定を確認
rake run:android	Android用にアプリケーションをビルド後、エミュレータを起動
rake run:android:device	Android用にアプリケーションをビルド後、デバイスにインストール
rake run:bb	BlackBerry用にアプリケーションをビルド
rake run:bbdev	run:bbを高速に動作させる。1回だけアクセスする用
rake run:iphone	iPhone用にアプリケーションをビルド後、iPhoneシミュレータを起動
rake run:android:device	Android用にアプリケーションをビルド後、デバイスにインストール
rake run:win32	Symbian用アプリケーションを起動
rake run:wm:dev	Windows Mobile用にアプリケーションをビルド後、起動
rake run:wm:devcab	Windows Mobile用にアプリケーションをビルド後、.cabファイルをインストールし、起動
rake run:wm:emu	Windows Mobile用にアプリケーションをビルド後、WM6エミュレータを起動
rake run:wm:emucabb	Windows Mobile用にアプリケーションをビルド後、.cabファイルをインストールし、WM6エミュレータを起動
rake uninstall:android	Androidエミュレータ上からアプリケーションを削除
rake uninstall:android:device	Androidデバイス上からアプリケーションを削除