はじめに

ちょっとしたSPAつくるのにCreate React App がいい感じすぎる。なんか個人的にはReactでのアプリ開発環境はこれで当面決まった気がしてる。そうなったらCordovaでの開発でもCreate React Appを使いたい。いままでは React Hot Reloading Template使ってたんだけどちょっと古びてきてるし、環境統一できたらいいし。

で、いろいろ調べてみて Cordova Create React App Tutorial が一番しっくりきたのでこちらに沿って開発環境を準備してみることにした。

しかし上記のドキュメントは多少説明不足だったり、Cordovaとかのバージョンが上がったせいかそのままではうまくアプリがビルドできなかったりしたので、下記にちゃんとできたやつを記載する。

やってみる

Create React App、Cordovaをインストールしていない場合はインストールする。

npm install -g create-react-app
npm install -g cordova

create-react-app -V
1.5.2
cordova -v
8.0.0

Create React App プロジェクトを作成する

create-react-app tutorial
cd tutorial

react-scriptsをディレクトリに展開する

yarn run eject
yarn run v1.5.1
$ react-scripts eject
? Are you sure you want to eject? This action is permanent. (y/N) y

config/paths.js を開いて44行目あたりの appBuild: resolveApp('build') を appBuild: resolveApp('www') に変更して保存する。

package.json を開いて dependencies の上あたりに "homepage": "./", を追加して保存する。

別のディレクトリに Cordova プロジェクトを作成する

cd ..
cordova create tutorial-cordova com.example.tutorial Tutorial

tutorial-corodova/config.xml を tutorial 下にコピーする

cp tutorial-cordova/config.xml tutorial/

tutorial/src/index.js を開いて以下のように編集する

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const startApp = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
  registerServiceWorker();
};

if(window.cordova) {
  document.addEventListener('deviceready', startApp, false);
} else {
  startApp();
}

public/index.htmlを開いて <script type="text/javascript" src="cordova.js"></script> と以下のようなmeta要素を追加する

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

index.htmlは以下のようになる

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script type="text/javascript" src="cordova.js"></script>
  </body>
</html>

Create React Appをビルドする

cd tutorial
yarn run build

ビルドが成功すると、www ディレクトリが以下のようにできる

tree www
www
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── service-worker.js
└── static
    ├── css
    │   ├── main.c17080f1.css
    │   └── main.c17080f1.css.map
    ├── js
    │   ├── main.6f0a8148.js
    │   └── main.6f0a8148.js.map
    └── media
        └── logo.5d5d9eef.svg

このCreate React Appのプロジェクト上で、Cordova プラットフォームを追加する。とりあえずAndroidとiOSを追加。先ほどコピーしたconfig.xmlに従ってプラットフォームが追加される

cordova platform add ios
cordova platform add android

ここで、npm installを実行しなおす。これは参考にしたドキュメントにはなかったが、Cordovaがnode_modlesを変更しているようなので、これをやらないとビルド時にエラーが発生した。

npm install

アプリをビルドして実行する。Androidの場合ぼくはGenymotionのエミュレーターを使ってるのでGenymotionエミュレーターを起動したのちrunする

cordova run android

アプリがエミュレーターで実行された

iOSでも実行してみる

cordova run ios

実行できた

これで基本的な開発ができそうだが、このプロジェクトにCordova Pluginを追加した場合webpackで正常にビルドできるかどうか気になったので、このサンプルプロジェクトにプラグインを追加してみることにする。

PhoneGap Toast plugin を追加してボタンをクリックするとToastを表示するアプリにしてみる。

プラグインを追加する

cordova plugin add cordova-plugin-x-toast

tutorial/src/App.js を開いて以下のように変更する

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  popUp() {
    window.plugins.toast.showLongBottom('Hello there!',
      function(a){console.log('toast success: ' + a)},
      function(b){alert('toast error: ' + b)}
    );
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
          <button onClick={ this.popUp.bind(this) }>Click!</button>
        </div>
      </div>
    );
  }
}

export default App;

webアプリをビルドする

yarn run build

iOSエミュレーターでアプリを実行する

cordova emulate ios

起動したアプリの Click! ボタンをタップするとアプリ下部にToastが表示された

Androidアプリをビルドすると同様となる

cordova run android

まとめ

開発環境をつくるおおまかな流れとしては

create-react-app プロジェクトを作成する
webpackビルドの出力先をwwwに変更する
config.xmlのみをプロジェクトにコピーする
Cordova Platformを追加する
Webアプリをビルドする
Cordovaアプリをビルドする

という感じか。とりあえずこれでCordovaアプリは開発できそうな感じ。
しかし今後のCreate React App、Cordovaのバージョンアップでこのフローが壊れる可能性がある。なので2018年4月時点で可能な方法として掲載しておくが、それでもしばらくはこれで快適にCordovaアプリが開発できそうだ。