今日はiOSアプリをビルドしてみます。
必要な環境は下記になります。（2015年12月2日時点です。バージョンごとに変わっていくので、オフィシャルを参考にしてください。
- OSX
- Homebrew
- flowとwatchmanの使用を推奨
- Node4.0以上(Node5.0以上の場合はnpm2を推奨。npm3は遅いから）
- iOSアプリはXcode7以上
私の環境は下記になります。npm3を使っていますが、現時点でやや問題があるようです。オフィシャルのドキュメント通りにnpm2の使用した方がいいかもしれません。
$ npm --version
3.3.6
$ node --version
v5.0.0
$ brew --version
0.9.5 (git revision 5ddbed; last commit 2015-10-30)
$ watchman --version
3.7.0
$ flow version
Flow, a static type checker for JavaScript, version 0.18.1
開発環境の構築
1) 下記のコマンドでReact Nativeのプロジェクト作成。
$ npm install -g react-native-cli
$ react-native init ReactNativeAdvent2015
2) Xcodeを立ち上げて、ReactNativeAdvent2015/ios/ReactNativeAdvent2015.xcodeprojをOpenする。
3) XcodeでBuild, Runすれば下記の画面が立ち上がる。
3) 任意のエディタでindex.ios.jsを開いてコーディング開始。command-RでJSを再読み込み。
JSファイルの配信の仕組み
XcodeでBuild, Runするとターミナルがたちが上がり、バックグランドでServerが起動します。このサーバ経由でJSファイルをロードします。AppDelegate.mを開くとjsCodeLocationを指定する箇所があり、ここを変更することで配信元の変更ができます。
# in AppDelegate.m
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
デフォルトではlocalホストで配信し、イントラネットで手持ちのマシンのIPに設定すれば配信できます。
# in AppDelegate.m
jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.25:8081/index.ios.bundle?platform=ios&dev=true"];
同様に外部サーバからも配信可能です。main.jsbundleをreact-nativeコマンドを使用して作成し、これをアップロードします。
$ react-native bundle --out /tmp/main.jsbundle --minify
一例ですが、Google Driveにアップロードし、Google Driveのホスティング機能を使って配信するにはAppDelegate.mを下記のように変更します。(FileIDは適宜変更してください)
jsCodeLocation = [NSURL URLWithString:@"https://www.googledrive.com/host/[fileID]?platform=ios&dev=true"];
アップロードするファイルごとにfileIDが変わってしまうのを防ぐためにはファイルを上書きします。ファイルのバージョン管理もされるので戻すことも簡単です。
このようにJSファイルの配信はとても簡単です。Xcodeでライブラリをリンクさせる等の変更を加えなければ、このJSファイルの変更だけでアプリの変更ができてしまいます。これはユーザによるテスト時にとても有効です。Production環境の運用はファイル自体の大きさが1M近くもあることもあり、モバイル環境ではやや厳しいかもしれません。(4G環境なら平気だと思いますが,低速のエリアをカバーすると難しくなりそうです）
以上で、iOS開発のはじめの方を終わります。明日はAndroid編をお届けします。