LoginSignup
53

More than 5 years have passed since last update.

create-react-app と Cordova を使って一発でReactのネイティブアプリ開発環境を作る

Posted at

React 絶好調ですね。以前はちゃんとした開発環境を整えるには Webpack や Babel などを設定する必要があり面倒でしたが、Facebook の create-react-app の登場により一発で環境構築ができるようになり、大変便利になりました。

create-react-app そのものは
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する
や、
Facebook 公式ツール Create React App を使って React 開発の初歩を学ぶチュートリアル
などを参照いただければと思いますが、この記事では Cordova と組み合わせてネイティブアプリとしてパッケージする方法を書いています。

環境は OS X Yosemite 10.10.5 です。

Cordova のインストール

https://cordova.apache.org/docs/en/latest/guide/cli/
の手順通り、Cordova をインストールします。

% sudo npm install -g cordova
...
% cordova --version
6.4.0
...
% cordova create myapp de.georepublic.myapp MyApp
% cd myapp
% cordova platform add ios --save  #ios環境の追加
% cordova platform add android --save  #android 環境の追加

cordova requirements を実行すると、ビルドするのに足りないライブラリなどが出てくるので、インストールします。
私の場合は ios-deploy が足りませんでした。
指示通りsudo npm install --global ios-deployを実行してみた所エラーになったのですが、
https://github.com/phonegap/ios-deploy/issues/109
にあるように
sudo npm install --global --unsafe-perm ios-deploy
を実行したらインストールできました。

この時点で、

% cordova build

を叩いてみて、色々でたあとに
** BUILD SUCCEEDED **
と表示されればビルド成功。

cordova emulate android

で android のエミュレータが、

cordova emulate ios

でiOSのエミュレータが立ち上がりデフォルトのページが表示されます。

create-react-app でアプリを作る

では、いよいよ create-react-app をインストールします。

% npm install -g create-react-app
...
% create-react-app --version
create-react-app version: 0.6.0

React app を作成します。

# cordova アプリの root にて
% create-react-app src  # src フォルダに React アプリを作成

npm start を実行すると、ブラウザが立ち上がりデフォルトのページが見れるはずです。

% cd src
% npm start

Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

Kobito.3yvg5b.png

とりあえずビルドしてみますが、 その前に、"homepage" の設定を package.json に加え、相対パスで js などのファイルを読み込む設定に変更しましょう。
これをやっておかないと、後で Cordova から読み込んだ時にページが表示されません。(Cordova で開いたindex.htmlのルートパスは違う場所にあるため)

package.json
{
  "name": "src",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",  #この行を追加
  "devDependencies": {
  ....
% npm run build 

> src@0.1.0 build your_source_path
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  47.15 KB (-1 B)  build/static/js/main.309660ee.js
  289 B            build/static/css/main.9a0fe4f1.css

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

うまくビルドできたようです。
次に、cordova.js を読み込む文を index.html に追加しておきましょう。

% vi src/public/index.html

<script type="text/javascript" src="cordova.js"></script>
の行を </body>の前に追加する

改めてビルドをしておきます

% npm run build 

では、cordova から React の build フォルダを読み込むようにしましょう。

% cd ..           # cordova のルートに戻る
% mv www www.org  # 既存のファイルを移動
% ln -s src/build/ www  #build フォルダを、www で参照できるようにする

Reactアプリの build フォルダにシンボリックリンクを貼っています。
これで、cordova の build を行います。

% cordova build
....
** BUILD SUCCEEDED **

注:最初に私が実行したときには、 /platforms/android/build/intermediates/assets/debug/www/static/css/ が見つからないといったエラーがでました。そのときは、
mkdir -p ./platforms/android/build/intermediates/assets/debug/www/static/css/
を実行して再度実行したらビルドに成功しました。

ビルドに成功したら、emulator を起動してみます。

cordova emulate android

Kobito.FDdOdH.png

cordova emulate ios

Kobito.N6QoNd.png

無事表示がされました!

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
  3. You can use dark theme
What you can do with signing up
53