Rhodesで作るスマートフォンアプリ
第二回 Rhodesアプリーションの作成
目次
■1. Rhodesプロジェクトの作成
早速Rhodesのプロジェクトを作成してみましょう。
プロジェクトの作成には「rhogen」というコマンドを使用します
Windowsの場合はコマンドプロンプトを、Linux/Macの場合はターミナルエミュレータを起動して下さい。
それでは、実際にプロジェクトを作成してみましょう。
今回は「demo」というプロジェクトを作成します。
以下のコマンドを実行して下さい。
rhogen app demo
コマンドが正常に実行されると、以下の様な出力と共にプロジェクトのディレクトリが作成されます。
[ADDED] demo/rhoconfig.txt
[ADDED] demo/build.yml
[ADDED] demo/app/application.rb
[ADDED] demo/app/index.erb
[ADDED] demo/app/index.bb.erb
[ADDED] demo/app/layout.erb
[ADDED] demo/app/loading.html
[ADDED] demo/Rakefile
[ADDED] demo/app/loading.png
[ADDED] demo/app/helpers
[ADDED] demo/icon
[ADDED] demo/app/Settings
[ADDED] demo/public
■2. プロジェクトの中身
作成されたプロジェクトディレクトリの中に、何が入っているのかを調べてみましょう。
ディレクトリの中身をみると、以下の様になっています。
Rakefile # ファイル
app # ディレクトリ
build.yml # ファイル
icon # ディレクトリ
public # ディレクトリ
rhoconfig.txt # ファイル
それでは、各ファイルやディレクトリが何の役割を持っているのかを説明します。
■2.1 Rakefile
日頃Rubyを使用されている方は目にする機会が多いファイルです。
Linux等でよく使われる「make」コマンドのRuby版「rake」コマンド用のファイルです。
Rhodesプロジェクトをビルドするときに使用されます。
基本的にビルドの手順や環境を自動で読み込むコードが書かれていますので、特に修正する事はありません。
■2.2 app
Rhodesのキモの部分です。
このディレクトリにコードを設置していきます。
3章で詳しく説明します。
■2.3 build.yml
RhodesアプリケーションをビルドするときにRakefileから呼ばれる設定ファイルです。
中の記述は拡張子の通りYAML形式で書かれています。
このファイルにはアプリケーションの名前や、各スマートフォン用の設定を記載し、外部拡張のライブラリの読み込み、カメラやGPSを使用する際にはそれらを使用するという記述を行います。
このファイルについての詳しい説明は連載第三回でお届けする予定です。
■2.4 icon
スマートフォンに表示されるアイコンファイルを設置するディレクトリです。
標準では以下の四つのファイルが設置されています。
icon.ico # WindowsMobile用
icon.png # Android用
icon114.png # iPhone4(RetinaDisplay)用
icon72.png # iPad用
icon57.png # iPhone3GS用
実際にアプリケーションを作成し、配布するときは、同名ファイルでアイコンを作成し、このフォルダに保存して下さい。
■2.5 public
第一回の連載でも説明したとおり、Rhodesの開発はRubyを使用しますがそれ以外にも、画面表示部分でHTML/CSS/Javascriptを使用します。
このディレクトリには、各プラットフォーム用にカスタマイズされたCSSや、画像、jqtouch(Javascriptのスマートフォン向けライブラリ)等が納められています。
■2.6 rhoconfig.txt
アプリケーション実行時の各種設定を行うファイルです。
アプリケーションのパスやSyncサーバの設定、ログの吐き出し方などの設定を行うことが出来ます。
これらの詳しい設定は連載第四回でお届けする予定です。
■3. rhogenコマンドによるソースの自動生成
2.2に書いたように、Rhodesのソースコードはappディレクトリに設置します。
プロジェクトを作成した時点では以下のファイルとディレクトリが設置されています。
Settings # ディレクトリ
helpers # ディレクトリ
application.rb # ファイル
index.bb.erb # ファイル
index.erb # ファイル
layout.erb # ファイル
loading.erb # ファイル
loading.png # ファイル
各ファイルの詳しい解説は第三回にてお届けする予定です。
それでは、いよいよ機能を作成していきましょう。
今回は「名刺管理アプリケーション」を作成してみたいと思います。
作成する機能は以下の通りです。
・住所、名前、メールアドレス、会社名が入力出来る
・新規作成、編集、更新、削除が出来る
・データ一覧が出来る
・データの詳細表示が出来る
早速作成しましょう。
RhodesにはRailsのscaffoldに相当するコマンドが用意されています。
プロジェクトのルートで以下のコマンドを実行して下さい。
rhogen model BCard address,name,email,company
正常に実行されると以下の出力と共にappディレクトリにソース一式が生成されます。
Generating with model generator:
[ADDED] app/BCard/index.erb
[ADDED] app/BCard/edit.erb
[ADDED] app/BCard/new.erb
[ADDED] app/BCard/show.erb
[ADDED] app/BCard/index.bb.erb
[ADDED] app/BCard/edit.bb.erb
[ADDED] app/BCard/new.bb.erb
[ADDED] app/BCard/show.bb.erb
[ADDED] app/BCard/b_card_controller.rb
[ADDED] app/BCard/b_card.rb
[ADDED] app/test/b_card_spec.rb
appディレクトリに「BCard」というディレクトリが作成されている事を確認して下さい。
次に、今作成した機能にアクセスするため、appディレクトリに入っている「index.erb」を編集します。
index.erbを開き修正します。
<div class="pageTitle">
<h1>Demo</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>
上記の22行目<span class〜から始まる部分を以下の様に書き換えて下さい。
<a href="/app/BCard/index"><span class="title">名刺管理</span><span class="disclosure_indicator" /></a>"
はい、これで名刺管理アプリケーションが作成されました。
「えっ？たったこれだけで？」
と思われるかもしれませんが、本当にたったこれだけでiPhoneでもAndroidでも動く名刺管理アプリケーションが作成出来ました。
それでは、実際に動かして見ましょう。
■4. ビルド・・・の前に
さぁ！早く動かして見ましょう！・・・の前に、やっておかなければならないことがあります。
AndroidやiPhoneの実機を持っていない場合は、それぞれのエミュレータ・シミュレータ上で稼働させる必要があります。
iPhoneの場合は何の設定もいりませんが、Androidの場合は事前にエミュレータの設定が必要です。
また、AndroidSDKには、実はAndroidのソースをビルドするためのAPIライブラリが入っていません。
それらの設定については、別ページを用意させて頂きましたので、以下のページをご覧下さい。
・連載 番外編 AndroidSDK/Androidエミュレータの設定
■5. ビルド
いよいよ実際にビルドしてみましょう。
プロジェクトのディレクトリに移動して、以下のコマンドを実行してみて下さい。
Androidの場合:
rake run:android
iPhoneの場合(OSXのみ):
rake run:iphone
ビルドタスクが実行され、2分程度待つとシミュレータが立ち上がり、demoアプリケーションが起動します。
■6. 実機への転送
実機への転送方法ですが、各プラットフォームよってある程度差があります。
本連載では主にAndroidを対象としていますので、Android実機への転送方法をご説明します。
コマンドプロンプトやターミナルエミュレータで以下のコマンドを実行して下さい。
※必ずAndroid端末を接続した上で行って下さい。
rake run:android:device
■7. 次回は
第一回から大分時間がたってしまいましたが、二回目の連載、いかがだったでしょうか。
少しずつですが、Rhodesのフットワークの良さが分かって頂けたのではと思います。
次回からは、実際にソースがどうなっているのか、機能を後から追加するにはどうしたらいいのか。
等々、Rhodesへの疑問を解き明かして行きたいと思います。それでは、また次回でお会いしましょう。