Rhodes

Ruby で iPhone, Android の

ネイティブアプリを作成する

フレームワークの紹介

有限会社ブルームーン 酒井能克 ( twitter @bluemooninc)

Rhodes とは

• １つのコードから複数のネイティブアプを生成

• Ruby + HTML のMVCフレームワーク

• MITライセンス

• コンパイルして各デバイスのSDKから実機へデプロイ

Rhodesのインストール

• Gemsフォルダを開放

– sudo chmod 775 /Library/Ruby/Gems/1.8

• $ gem install rhodes

homebrew のインストール

• $ ruby -e "$(curl -fsSkL

raw.github.com/mxcl/homebrew/go)"

• $ sudo chmod 775 /usr/local #=> パスワードを聞かれる場合はログインパスワードを入力

• $ sudo chown -R $USER /usr/local/*

• $ brew update

HomebrewとはMacのUNIXツールをインストールするためのパッケージ管理システム。HomebrewはMac OS Xにすでにあるものは、できるだけそれを利用するように設計されていて MacPorts と比べて依存関係でインストールされるソフトウェアが少ない

gcc のインストール

• $ brew tap homebrew/dupes

• $ brew install autoconf automake apple-

gcc42

Xcodeのインストール

• https://developer.apple.com/devcenter/ios/i

ndex.action

Xcode追加インストール

• xCodeを立ち上げてpreferenceから iOS

Simulator, Command line Tools を入れる

Android SDK/NDKのインストール

• android用にJDKをアップルよりダウンロード– http://support.apple.com/downloads/#java

• Android SDK/NDKダウンロード– http://developer.android.com/sdk/index.html#dow

nload

• 最近のMacなら64bit版（ちょっと古い場合は、以下参照）– http://support.apple.com/kb/HT3696?viewlocale=j

a_JP

Android NDKはネイティブコード（C、C++）で開発できるキット

Android SDK/NDK のパス設定

• ターミナルを開いてhomeフォルダに行く

• vim等のエディタで .bash_profileをに作成

• macなら open .bash_profile で編集した方が楽

Vimチートシートhttp://www.namaraii.com/files/vim-cheatsheet.pdf

Mac OS の bashについて補足bashはログイン時に読み込む順番が決まっておりMac場合以下のようになっている/etc/profile

/etc/bashrc

~/.bash_profile

~/.bash_login

~/.profile

今回はホームディレクトリに.bash_profileを作成

.bash_profileの中味

• .bash_profileの中味-------------------------------------------

• export PATH=$PATH:/Users/bluemooninc/android_sdk/sdk/tools

• #Android NDK PATH

• ANDROID_NDK=/Users/bluemooninc/android_ndk/toolchains

• export PATH=$PATH:${ANDROID_NDK}

• #Android SDK PATH

• ANDROID_SDK=/Users/bluemooninc/android_sdk/sdk/platform-tools

• export PATH=$PATH:${ANDROID_SDK}

• -------------------------------------------------------------

パスの確認

• $ printenv

• PATH=/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/local/git/bin:/usr/local/rvm/bin:/Users/bluemooninc/android_sdk/sdk/tools:/Users/bluemooninc/android_ndk/toolchains:/Users/bluemooninc/android_sdk/sdk/

• Android SDKとNDKのパスが通っているか太字部分確認する。

• ターミナルを一度閉じて開くか以下コマンド– $source ~/.bash_profile でも設定される。

ビルド変数の設定

• $ rhodes-setup >> build.ymlが作成される

– We will ask you a few questions below about your dev environment.

– JDK path (required) (/Library/Java/Home): /System/Library/Flameworks/JavaVM.flamework/Home

– Android SDK path (blank to skip) (): /Users/bluemooninc/android_sdk/sdk/

– Android NDK path (blank to skip) (): /Users/bluemooninc/android_ndk/

Ruby 2.0へ！

• Mac OS X(Moutain lion)デフォルトのRuby1.8.7 ではエラーストップするのでバージョンを上げる。

• $ ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"

• $ brew install rbenv

• $ brew install ruby

UTF-8のセット

• /Library/Ruby/Gems/1.8/gems/highline-

1.6.18/lib/highline.rb:621:in `say':

undefined method `default_external' for

Encoding:Class (NoMethodError)

• default_externalを'UTF-8'へ変更

アプリケーションの生成

• $ rhodes app storemanager

– >>アプリケーションディレクトリとテンプレートになるファイルが生成

• $ cd storemanager

– >> プロジェクトフォルダへ

• $ rhodes model storemanager name

– >> モデル作成でMVCの足場が完成

Androidシミュレータ実行

• rhodes/platform/android/build/androidc

ommon.rb

– Android NDK の64bitで実行させるなら以下の様に"_64" を androidcommon.rb へ追加

– $ndkhost = `uname -s`.downcase!.chomp! +

"-x86_64”

• $ rake run:android:rhosimulator

– >> 手早いのでデバッグ時に便利

１つ修正

• 直近3.5.1.12はバグ修正が必要（github修正済）– There is a bug in build script that causes this error.

It is already fixed at master. You may fix it yourself in your rhodes.Open /var/lib/gems/1.9.1/gems/rhodes-3.5.1.12/platform/android/build/android_tools.rb

– At line 211 And make this line to look as クラス指定の文字列追加

– FileUtils.rm_f $applog_path if !$applog_path.nil?

Android Virtual Deviceの準備

• android_sdkに入っているeclipseを起動しWindowからAVMマネージャを開く

build.yml へ記述

• build.ymlの編集 ---------------------------------

• android:

• minSDK: 11

• version: 4.0.3

• emulator: galaxyS2

• android_title: 0

• orientation: portrait

• --------------------------------------------------------

エミュレータの実行

• $ adb start-server >> adb サーバを明示起動• rake run:android:rhosimulator >>高速デバッグ• $ rake run:android >> エミュレータへデプロイ

iOS開発環境構築

• build.yml の編集--------------------------------

• iphone:

• configuration: Debug

• sdk: iphonesimulator6.1

• provisionprofile:

• codesignidentity: "iPhone Developer"

• -------------------------------------------------------

シミュレータの実行

• rake run:iphone:rhosimulator >> rhosimulatorにデプロイしてデバッグ（高速）

• rake run:iPhone >> iOSシミュレータにデプロイ

Android実機デプロイ

• $ CD $home へ移動して以下を編集

• open .android/adb_usb.ini

• ここに、システムプロファイラに繋がっているandroidを選択して製造元IDを取得

Galaxy SII の場合

• Samsungの場合以下IDを追加して保存。

• 0x04e8

デバイス確認とコンパイル

• Cd ~/android_sdk/sdk/platform-tools/

• android update adb

• adb devicesList of devices attached4************** device >> ここでUSB接続デバイスのシリアル表示を確認

• プロジェクトフォルダからビルド実行rake run:android:deviceerror: device not foundが出たら手動で以下を再度実行。

• /Users/bluemooninc/android_sdk/sdk/platform-tools/adb -d install -r /Users/bluemooninc/RhodesProject/storemanager/bin/target/android/storemanager-debug.apk

Successでデプロイ完了

iPhone実機デプロイ

• build.ymlを編集---------------------------------

• iphone:

• configuration: Release

• sdk: iphoneos6.1

• provisionprofile:

• codesignidentity: "iPhone Developer"

• entitlements: ""

• BundleIdentifier: com.xoopsec.ios.* >> iOSデベロッパーより

• BundleURLScheme: StoreManager001 >> iOSデベロッパーより

iPhone用パッケージの生成

• $ rake device:iphone:production

– デバイス用パッケージが出来るRhodesProject/bin/target/iOS/iPhoneos6.1/Re

lease/storemanager.app

Xcodeprjのビルド

• $ rake switch_app

• $ rake build:iphone:setup_xcode_project

Library/Ruby/Gems/1.8/gems/rhodes-

3.5.1.12/platform/iphone/rhorunner.xcodepro

j

iOS実機デプロイ

• Library/Ruby/Gems/1.8/gems/rhodes-3.5.1.12/platform/iphone/rhorunner.xcodeprojをダブルクリック

• USBに実機を繋いでRunでデプロイ• この後のページは、Appleのデベロッパー登録についての解説

yourappleid@mac.co

m

https://developer.apple.com

証明書の作成

• CAのメールアドレスは空欄• ディスクに保存と鍵ペア情報を指定し次へで（2048bit,RSAを指定）• CertificateSigningRequest.certSigningRequest ファイルが保存され

る

証明書の登録作成した証明書を選択して送信。

その後承認要求のメールが来るのでApproveす

る

証明書をMacにインストール

• ダウンロードした developer_identity.cer

をダブルクリック

iOSのデバイス情報を登録

• iOSデバイスをMacに接続し、Xcodeを起動して Window OrganizerよりDeviceをクリック

ここにある40文字の個体識別番号をコピー

個体識別番号をDeveloperへ登録

AppIDを取得

• Wildcard App ID:第三者と被らない名前で、ドメイン名を逆にしたスタイルが推奨されている

• App ID Name：アプリケーション名等、任意の名前

例）com.xoopsec.ios.*

App name etc.

Provisioning Profiles 登録

• Profile Name：任意の名称• Certificates：チェックを入れる• App ID：今回作成したものを選択• Device：チェックを入れる

コード署名IDの設定

• XcodeでRhodes内のプロジェクトを開く• Build Setting の Code Signing Identity で登録したデバイスを選択