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

ソースコード

---

手順

グローバルで必要なものをインストール

$ npm i cordova -g
$ npm i jspm -g

---

プロジェクトセットアップ

$ 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セットアップ

$ 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でライブラリインストール

$ jspm install npm:react npm:react-addons-update npm:react-dom npm:aframe-react

---

aframeのライブラリを用意する

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

.
├── 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に追加。

    <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を使っていれば見慣れた記述。

        <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したファイルを読みこませる。

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

---

npm scriptsを設定して、環境ごとにビルドが走るようにしておく

uglifyもかましておこう。

    "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のエントリーポイントを作る。

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