RhodesRuby で iPhone, Android のネイティブアプリを作成するフレームワークの紹介有限会社ブルームーン 酒井能克 ( twitter @bluemooninc)
Rhodes とは• 1つのコードから複数のネイティブアプを生成• Ruby + HTML のMVCフレームワーク• MITライセンス• コンパイルして各デバイスのSDKから実機へデプロイ
Rhodesのインストール• Gemsフォルダを開放– sudo chmod 775 /Library/Ruby/Gems/1.8• $ gem install rhodes
homebrew のインストール• $ ruby -e "$(curl -fsSkLraw.github.com/mxcl/homebrew/go)"• $ sudo chmod 775 /usr/local #=> パスワードを聞かれる場合は...
gcc のインストール• $ brew tap homebrew/dupes• $ brew install autoconf automake apple-gcc42
Xcodeのインストール• https://developer.apple.com/devcenter/ios/index.action
Xcode追加インストール• xCodeを立ち上げてpreferenceから iOSSimulator, Command line Tools を入れる
Android SDK/NDKのインストール• android用にJDKをアップルよりダウンロード– http://support.apple.com/downloads/#java• Android SDK/NDKダウンロード– http:/...
Android SDK/NDK のパス設定• ターミナルを開いてhomeフォルダに行く• vim等のエディタで .bash_profileをに作成• macなら open .bash_profile で編集した方が楽Vimチートシートhttp:...
.bash_profileの中味• .bash_profileの中味-------------------------------------------• export PATH=$PATH:/Users/bluemooninc/androi...
パスの確認• $ printenv• PATH=/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/local/git/bin:/usr/local/rvm/bin:/Users/bluemoon...
ビルド変数の設定• $ rhodes-setup >> build.ymlが作成される– We will ask you a few questions below about yourdev environment.– JDK path (r...
Ruby 2.0へ!• Mac OS X(Moutain lion)デフォルトのRuby1.8.7 ではエラーストップするのでバージョンを上げる。• $ ruby -e "$(curl -fsSkL raw.github.com/mxcl/ho...
UTF-8のセット• /Library/Ruby/Gems/1.8/gems/highline-1.6.18/lib/highline.rb:621:in `say:undefined method `default_external forE...
アプリケーションの生成• $ rhodes app storemanager– >>アプリケーションディレクトリとテンプレートになるファイルが生成• $ cd storemanager– >> プロジェクトフォルダへ• $ rhodes mod...
Androidシミュレータ実行• rhodes/platform/android/build/androidcommon.rb– Android NDK の64bitで実行させるなら以下の様に"_64" を androidcommon.rb へ...
1つ修正• 直近3.5.1.12はバグ修正が必要(github修正済)– There is a bug in build script that causes this error.It is already fixed at master. ...
Android Virtual Deviceの準備• android_sdkに入っているeclipseを起動しWindowからAVMマネージャを開く
build.yml へ記述• build.ymlの編集 ---------------------------------• android:• minSDK: 11• version: 4.0.3• emulator: galaxyS2• a...
エミュレータの実行• $ adb start-server >> adb サーバを明示起動• rake run:android:rhosimulator >>高速デバッグ• $ rake run:android >> エミュレータへデプロイ
iOS開発環境構築• build.yml の編集--------------------------------• iphone:• configuration: Debug• sdk: iphonesimulator6.1• provisio...
シミュレータの実行• 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**************...
iPhone実機デプロイ• build.ymlを編集---------------------------------• iphone:• configuration: Release• sdk: iphoneos6.1• provisionp...
iPhone用パッケージの生成• $ rake device:iphone:production– デバイス用パッケージが出来るRhodesProject/bin/target/iOS/iPhoneos6.1/Release/storemana...
Xcodeprjのビルド• $ rake switch_app• $ rake build:iphone:setup_xcode_projectLibrary/Ruby/Gems/1.8/gems/rhodes-3.5.1.12/platfor...
iOS実機デプロイ• Library/Ruby/Gems/1.8/gems/rhodes-3.5.1.12/platform/iphone/rhorunner.xcodeprojをダブルクリック• USBに実機を繋いでRunでデプロイ• この後...
yourappleid@mac.comhttps://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 で登録したデバイスを選択
Upcoming SlideShare
Loading in …5
×

Rhodes mobile Framework (Japanese)

973 views

Published on

  • Be the first to comment

Rhodes mobile Framework (Japanese)

  1. 1. RhodesRuby で iPhone, Android のネイティブアプリを作成するフレームワークの紹介有限会社ブルームーン 酒井能克 ( twitter @bluemooninc)
  2. 2. Rhodes とは• 1つのコードから複数のネイティブアプを生成• Ruby + HTML のMVCフレームワーク• MITライセンス• コンパイルして各デバイスのSDKから実機へデプロイ
  3. 3. Rhodesのインストール• Gemsフォルダを開放– sudo chmod 775 /Library/Ruby/Gems/1.8• $ gem install rhodes
  4. 4. homebrew のインストール• $ ruby -e "$(curl -fsSkLraw.github.com/mxcl/homebrew/go)"• $ sudo chmod 775 /usr/local #=> パスワードを聞かれる場合はログインパスワードを入力• $ sudo chown -R $USER /usr/local/*• $ brew updateHomebrewとはMacのUNIXツールをインストールするためのパッケージ管理システム。HomebrewはMac OS Xにすでにあるものは、できるだけそれを利用するように設計されていて MacPorts と比べて依存関係でインストールされるソフトウェアが少ない
  5. 5. gcc のインストール• $ brew tap homebrew/dupes• $ brew install autoconf automake apple-gcc42
  6. 6. Xcodeのインストール• https://developer.apple.com/devcenter/ios/index.action
  7. 7. Xcode追加インストール• xCodeを立ち上げてpreferenceから iOSSimulator, Command line Tools を入れる
  8. 8. Android SDK/NDKのインストール• android用にJDKをアップルよりダウンロード– http://support.apple.com/downloads/#java• Android SDK/NDKダウンロード– http://developer.android.com/sdk/index.html#download• 最近のMacなら64bit版(ちょっと古い場合は、以下参照)– http://support.apple.com/kb/HT3696?viewlocale=ja_JPAndroid NDKはネイティブコード(C、C++)で開発できるキット
  9. 9. Android SDK/NDK のパス設定• ターミナルを開いてhomeフォルダに行く• vim等のエディタで .bash_profileをに作成• macなら open .bash_profile で編集した方が楽Vimチートシートhttp://www.namaraii.com/files/vim-cheatsheet.pdfMac OS の bashについて補足bashはログイン時に読み込む順番が決まっておりMac場合以下のようになっている/etc/profile/etc/bashrc~/.bash_profile~/.bash_login~/.profile今回はホームディレクトリに.bash_profileを作成
  10. 10. .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}• -------------------------------------------------------------
  11. 11. パスの確認• $ 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 でも設定される。
  12. 12. ビルド変数の設定• $ rhodes-setup >> build.ymlが作成される– We will ask you a few questions below about yourdev 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/
  13. 13. 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
  14. 14. UTF-8のセット• /Library/Ruby/Gems/1.8/gems/highline-1.6.18/lib/highline.rb:621:in `say:undefined method `default_external forEncoding:Class (NoMethodError)• default_externalをUTF-8へ変更
  15. 15. アプリケーションの生成• $ rhodes app storemanager– >>アプリケーションディレクトリとテンプレートになるファイルが生成• $ cd storemanager– >> プロジェクトフォルダへ• $ rhodes model storemanager name– >> モデル作成でMVCの足場が完成
  16. 16. Androidシミュレータ実行• rhodes/platform/android/build/androidcommon.rb– Android NDK の64bitで実行させるなら以下の様に"_64" を androidcommon.rb へ追加– $ndkhost = `uname -s`.downcase!.chomp! +"-x86_64”• $ rake run:android:rhosimulator– >> 手早いのでデバッグ時に便利
  17. 17. 1つ修正• 直近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 ityourself 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?
  18. 18. Android Virtual Deviceの準備• android_sdkに入っているeclipseを起動しWindowからAVMマネージャを開く
  19. 19. build.yml へ記述• build.ymlの編集 ---------------------------------• android:• minSDK: 11• version: 4.0.3• emulator: galaxyS2• android_title: 0• orientation: portrait• --------------------------------------------------------
  20. 20. エミュレータの実行• $ adb start-server >> adb サーバを明示起動• rake run:android:rhosimulator >>高速デバッグ• $ rake run:android >> エミュレータへデプロイ
  21. 21. iOS開発環境構築• build.yml の編集--------------------------------• iphone:• configuration: Debug• sdk: iphonesimulator6.1• provisionprofile:• codesignidentity: "iPhone Developer"• -------------------------------------------------------
  22. 22. シミュレータの実行• rake run:iphone:rhosimulator >> rhosimulatorにデプロイしてデバッグ(高速)• rake run:iPhone >> iOSシミュレータにデプロイ
  23. 23. Android実機デプロイ• $ CD $home へ移動して以下を編集• open .android/adb_usb.ini• ここに、システムプロファイラに繋がっているandroidを選択して製造元IDを取得
  24. 24. Galaxy SII の場合• Samsungの場合以下IDを追加して保存。• 0x04e8
  25. 25. デバイス確認とコンパイル• 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.apkSuccessでデプロイ完了
  26. 26. iPhone実機デプロイ• build.ymlを編集---------------------------------• iphone:• configuration: Release• sdk: iphoneos6.1• provisionprofile:• codesignidentity: "iPhone Developer"• entitlements: ""• BundleIdentifier: com.xoopsec.ios.* >> iOSデベロッパーより• BundleURLScheme: StoreManager001 >> iOSデベロッパーより
  27. 27. iPhone用パッケージの生成• $ rake device:iphone:production– デバイス用パッケージが出来るRhodesProject/bin/target/iOS/iPhoneos6.1/Release/storemanager.app
  28. 28. Xcodeprjのビルド• $ rake switch_app• $ rake build:iphone:setup_xcode_projectLibrary/Ruby/Gems/1.8/gems/rhodes-3.5.1.12/platform/iphone/rhorunner.xcodeproj
  29. 29. iOS実機デプロイ• Library/Ruby/Gems/1.8/gems/rhodes-3.5.1.12/platform/iphone/rhorunner.xcodeprojをダブルクリック• USBに実機を繋いでRunでデプロイ• この後のページは、Appleのデベロッパー登録についての解説
  30. 30. yourappleid@mac.comhttps://developer.apple.com
  31. 31. 証明書の作成• CAのメールアドレスは空欄• ディスクに保存と鍵ペア情報を指定し次へで(2048bit,RSAを指定)• CertificateSigningRequest.certSigningRequest ファイルが保存される
  32. 32. 証明書の登録作成した証明書を選択して送信。その後承認要求のメールが来るのでApproveする
  33. 33. 証明書をMacにインストール• ダウンロードした developer_identity.cerをダブルクリック
  34. 34. iOSのデバイス情報を登録• iOSデバイスをMacに接続し、Xcodeを起動して Window OrganizerよりDeviceをクリックここにある40文字の個体識別番号をコピー
  35. 35. 個体識別番号をDeveloperへ登録
  36. 36. AppIDを取得• Wildcard App ID:第三者と被らない名前で、ドメイン名を逆にしたスタイルが推奨されている• App ID Name:アプリケーション名等、任意の名前例)com.xoopsec.ios.*App name etc.
  37. 37. Provisioning Profiles 登録• Profile Name:任意の名称• Certificates:チェックを入れる• App ID:今回作成したものを選択• Device:チェックを入れる
  38. 38. コード署名IDの設定• XcodeでRhodes内のプロジェクトを開く• Build Setting の Code Signing Identity で登録したデバイスを選択

×