Cordova + JSPM + React + AFrame-ReactでVRを試す

# ソースコード
https://github.com/mk2/VRSample

-----

# 手順

## グローバルで必要なものをインストール
```bash
$ npm i cordova -g
$ npm i jspm -g
```

-----

## プロジェクトセットアップ
```bash
$ cordova create VRSample
$ cordova platform add android
$ cordova platform add browser
$ npm init -y
$ npm i jspm --save-dev
$ npm i uglifyjs --save-dev
```

-----

## JSPMセットアップ
```bash
$ jspm init
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:./www # ここはwwwにする
Enter jspm packages folder [www/app/jspm_packages]:
Enter config file path [www/app/config.js]:MacBook-Pro:VRSample mk2$ jspm init
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:./www
Enter jspm packages folder [www/jspm_packages]:
Enter config file path [www/config.js]:
Configuration file www/config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:./www
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:
ok   Verified package.json at package.json
...
```

-----

## JSPMでライブラリインストール
```bash
$ jspm install npm:react npm:react-addons-update npm:react-dom npm:aframe-react
```

-----

## aframeのライブラリを用意する
https://aframe.io/ からダウンロードし、distに入っているファイルを丸っとコピーする。最終的にwwwディレクトリが下の感じになっているようにする（配置は自由）

```text
.
├── config.js
├── css
│   └── index.css
├── img
│   └── logo.png
├── index.html
├── js
│   └── index.js
├── jspm_packages
│   └── ...
└── managed_packages
    └── aframe
        ├── aframe-v0.2.0.js
        ├── aframe-v0.2.0.js.map
        ├── aframe-v0.2.0.min.js
        ├── aframe.js
        ├── aframe.js.map
        └── aframe.min.js
```

-----

## ゴリゴリっとソースコードを書く

### config.xmlでbrowserとandroidのエントリHTMLファイルを分ける

- browser
    - index.html
- android
    - index.android.html

にするので、下記の記述をconfig.xmlに追加。

```xml
    <platform name="android">
        <allow-intent href="market:*" />
        <content src="index.android.html"/>
    </platform>
    <platform name="browser">
        <content src="index.html"/>
    </platform>
```

-----

### browserとandroidで読み込みのscriptタグを分ける

#### browser
SystemJSが普通に動くので、JSPMを使っていれば見慣れた記述。

```html
        <script type="text/javascript" src="managed_packages/aframe/aframe.js"></script>
        <script type="text/javascript" src="jspm_packages/system.js"></script>
        <script type="text/javascript" src="config.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
```

-----

#### android
JSPM Bundleしたファイルを読みこませる。

```html
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/build.js"></script>
```

-----

### npm scriptsを設定して、環境ごとにビルドが走るようにしておく
uglifyもかましておこう。

```js
    "bundle": "./node_modules/.bin/jspm bundle-sfx ./www/app/index.js ./www/js/bundle.js --skip-source-maps",
    "uglify": "./node_modules/.bin/uglifyjs --keep-fnames --reserved-file --screw-ie8 --output ./www/js/build.js -- ./www/managed_packages/aframe/aframe.js ./www/js/bundle.js ./www/js/index.js",
    "android": "npm run bundle && npm run uglify && cordova run android",
    "browser": "cordova run browser",
```

-----

### TIPS
cordovaとJSPMを併用するときの注意点は、

- ブラウザで動かすときはSystemJSが正しく動くので、普通に開発する
- androidで動かすときはSystemJS経由で読み込むファイルがAPKにバンドルされないので（**ここ要調査**）、JSPM Bundleの機能で1ファイルにまとめてそれを読み込ませる

### AFrame-Reactを使ってみる
wwwの下にappディレクトリを切り、そこにReactのエントリーポイントを作る。

```js
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Animation, Entity, Scene } from 'aframe-react';

class App extends Component {
  render() {
    return (
      <Scene>
        <Entity geometry={{primitive: 'box'}} material="color: red" position={[0, 0, -5]}>
          <Animation attribute="rotation" dur="5000" repeat="indefinite" to={[0, 360, 360]}/>
        </Entity>
      </Scene>
    );
  }
}

render(<App/>, document.getElementById("app"));
```

-----

## 動かす

### browser
```
npm run browser
```

### android
※Android SDKがインストール済みであること

```
npm run android
```