Help us understand the problem. What is going on with this article?

Create React App & Cordovaでアプリをつくる環境を整える 2018年4月時点

More than 1 year has passed since last update.


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

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



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

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

create-react-app -V
cordova -v

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

create-react-app tutorial
cd tutorial


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.xmltutorial 下にコピーする

cp tutorial-cordova/config.xml tutorial/

tutorial/src/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'));

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

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

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: '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">


<!DOCTYPE html>
<html lang="en">
    <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: '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
    <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>
      You need to enable JavaScript to run this app.
    <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>

Create React Appをビルドする

cd tutorial
yarn run build

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

tree www
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── service-worker.js
└── static
    ├── css
    │   ├── main.c17080f1.css
    │   └──
    ├── js
    │   ├── main.6f0a8148.js
    │   └──
    └── 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 


cordova run android


スクリーンショット 2018-04-09 14.12.00.png


cordova run ios


スクリーンショット 2018-04-09 14.15.34.png

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

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


cordova plugin add cordova-plugin-x-toast

tutorial/src/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>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
          <button onClick={ this.popUp.bind(this) }>Click!</button>

export default App;


yarn run build


cordova emulate ios

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

スクリーンショット 2018-04-09 14.32.55.png


cordova run android

スクリーンショット 2018-04-09 14.37.26.png



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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away