温泉に行く前に（外伝: SPA！温泉！（行きたい...

## 旅に出る前に

色々確認しておく必要がある。create-react-appで作ったアプリがcordovaの環境で動くのかを確認しておく。

## 雛形

cordovaで生成されるconfig.xmlが欲しいので、そのためだけにcordovaでも雛形を作る。
取得したら、フォルダごと、消し去ってやる！

```shell
$ create-react-app sample
$ cordova create sample-cordova com.goto-tsukiyama.sample Sample
$ cp sample-cordova/config.xml sample/
$ rm -rf sample-cordova/
```

## 統合

cordovaはwwwにビルドされ、reactはbuildに生成されるので、シンボリックリンクで統合する。
そして、相対パスで参照できるようにpackage.jsonを修正する。

```shell
$ cd sample
$ ln -s build www
$ vi package.json
```

> ```json:package.json
> {
>   "name": "sample",
>   "version": "0.1.0",
>   "private": true,
>   "homepage": "./",  // <--- ここ追加
>   "dependencies": {
>     "cordova-browser": "^5.0.4",
>     "cordova-ios": "^4.5.5",
>     "cordova-plugin-whitelist": "^1.3.3",
>     "react": "^16.6.3",
>     "react-dom": "^16.6.3",
>     "react-scripts": "2.1.1"
>   },
>   "scripts": {
>     "start": "react-scripts start",
>     "build": "react-scripts build",
>     "test": "react-scripts test",
> ```

cordova環境下で動かす場合と普通に動かす場合とを識別して、うまい具合に動かすように修正する。

```
$ vi src/index.js
```

> ```jsx:src/index.js
> import React from 'react';
> import ReactDOM from 'react-dom';
> import './index.css';
> import App from './App';
> import * as serviceWorker from './serviceWorker';
> 
> const Main = () => {
>   ReactDOM.render(<App />, document.getElementById('root'));
>   serviceWorker.register();
> };
>
> if (window.cordova) {
>   document.addEventListener('deviceready', Main, false);
> } else {
>   Main();
> }
> ```

cordovaのプラグイン等使える様にjsを読み込むようする。
参考: [Cordova + React で Webブラウザ+Android+iOS アプリ その1](https://qiita.com/kspotfujita/items/181508faf4bcb21ec50f)

```shell
$ vi public/index.html
```

> ```html:public/index.html
> <!DOCTYPE html>
> <html lang="ja">
>   <head>
>     <meta charset="utf-8">
>     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, minimum-scale=1, maximum-scale=1,user-scalable=0,viewport-fit=cover">
>     <meta name="format-detection" content="telephone=no,email=no,address=no">
>     <meta name="msapplication-tap-highlight" content="no">
>     <meta name="theme-color" content="#000000">
>     <!--
>       manifest.json provides metadata used when your web app is added to the
>       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
>     -->
>     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
>     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
> ```

> ```html:public/index.html
>       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 - ブラウザ編

普通に動かしてみる。

```
$ yarn start
```

## 確認（cordova - ブラウザ編 

```
$ yarn build
$ cordova platform add browser
$ cordova run browser
```

## 確認（cordova - iOS編

```
$ cordova platform add ios
$ cordova run ios --buildFlag="-UseModernBuildSystem=0" --target="iPhone-X, 12.1"
$ cordova run ios --buildFlag="-UseModernBuildSystem=0" --target="iPad--6th-generation-, 12.1"
```

![スクリーンショット 2018-12-06 14.37.39.png](https://qiita-image-store.s3.amazonaws.com/0/105644/303919ba-f539-e234-ed18-095739fd00d4.png)

## いざ、出発！

Androidでの確認環境がなかったので、未確認だが、まぁ進んでいこう

|環境 / ツール|バージョン|
|---|---|
|macOS Mojave|10.14.1|
|node|10.14.1|
|yarn|1.12.3|
※ その他はバージョン指定してないので最新？