search
LoginSignup
17

More than 5 years have passed since last update.

posted at

React Native - iOS開発のはじめの方

今日は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すれば下記の画面が立ち上がる。
firstios.png

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編をお届けします。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
17