create-react-appを使ったCordovaアプリケーション開発の流れ #Cordova

事前準備

この記事はWindows環境で検証しています。以下のソフトウェアは入っている前提です。

Windows版node.js　[6.10.3]
Windows版Oracle JDK　[1.8.0]

Apache Cordovaのインストール

> npm install -g cordova

create-react-appのインストール

> npm install -g create-react-app

アプリケーションの作成

普通にCordovaアプリケーションを作成し、その中にUI開発用にReactアプリケーションを作成します。

> cordova create myapp com.hoge.myapp MyApp
> cd myapp
> cordova platform add browser --save
> cordova build
（その後の処理のためにまずビルドします）

> create-rect-app reactsrc
（時間がかかります）
> cd reactsrc

create-react-srcで生成されたpackage.jsonを編集します。

package.json

{
  "name":"reactsrc",
  "version":"0.1.0",
  "private":true,
  "homepage":".",  //この行を追加（注1）
  ※中略
  "scripts": {
    ※以下の行を編集（注2）
    "build": "react-scripts build && ((robocopy .\\build ..\\www /MIR) & exit 0)",
    ※以下略
  }
}

注1. Reactでビルドする時に、index.htmlが正しいフォルダ（build）に配置する（多分）

注2. Reactでビルドした結果を、Cordovaのソースフォルダ（www）にコピーする

アプリケーションの開発

Reactでビルドすると、Cordovaのwwwが上書きされる。念のため、www_orgなど適当な名前にコピーしてバックアップしておきます。

create-react-appで生成したReactの初期ページ（public/index.html）は、Cordova向きではないため、Cordova側のindex.htmlを参考にindex.htmlを作成します。

reactsrc/public/index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; connect-src *;style-src *; media-src *; img-src 'self' data: content:;">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- その他、フォントやCSSを必要に応じて追加します -->
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>

Cordovaアプリケーションの場合、デバイス関連プラグインの準備完了をあらわすdevicereadyイベントでUIのレンダリングを行う必要があります。Reactの初期スクリプト（index.js）を以下のように修正します。

reactsrc/src/index.js

const startApp = () => {
  ReactDOM.render(
    <App />, document.getElementById('root')
  )
}
if (!window.cordova) {
  startApp()
} else {
  document.addEventListener('deviceready', startApp, false)
}

開発ルーチン

React側でコーディング（reactsrc/srcフォルダ）
- Cordovaイベント（deviceready、pauseなど）はindex.jsに書く
- アプリケーションのロジックはApp.jsやその他コンポーネントに書く
Reactのビルド npm run build
Cordovaのビルド cordova build

ToDo

Cordovaプラグインの機能を使うコードがあると、Reactのビルドで失敗します。グローバルスコープにCordovaプラグインのオブジェクトがあるかどうかを確かめてから実行するようにして回避できましが、このやり方でよいのか微妙なところです。（そのうち記載）