Cordova で React VR をスマホアプリ化する

こんにちは。田中剛です。

今回は先日リリースされたReact VR を Cordovaでスマホアプリ化する話を書いてみます。

え？ユニファでVR ？ (||ﾟДﾟ)

と思った方もいらっしゃるかもしれません。

はい、VRは私の趣味100%で業務には1%も関係ありません。。

が、Cordova や ReactNative などのハイブリッドアプリのフレームワークは何かのプロジェクトで使いたいと密かに思っています。 (￣ー￣)

今回の記事を書くにあたって以下の記事がとても参考になりました。m(__)m qiita.com

では、やり方を順に説明していきます。

インストール

cordovaのインストール
```
 $ npm install -g cordova
```
React VRのインストール
```
 $ npm install -g react-vr-cli
```

プロジェクトの作成

cordovaプロジェクトの作成
```
$ cordova create path/to/your/dir com.example.hello.reactvr HelloCordovaReactVr
```
createのパラメータは corodva create ディレクトリ識別子アプリ名 です。

識別子でハイフンやアンダースコアを使うとハマるので要注意です。(AppIDとしてiOSではアンダースコア、Androidではハイフンを使えないため)

iOSやAndroidのプラットフォームを追加

 $ cordova platform add ios --save
 $ cordova platform add android --save

React VRのプロジェクトを作成

corodvaプロジェクトのルートディレクトリでReact VRのプロジェクトを作成します。
```
 $ react-vr init react_vr
```
initのパラメータは react-vr init アプリ名です。

アプリのビルドとコードの修正

React VRアプリのコード（js）の修正

index.vr.js をエディタで編集します

せっかくなので extract-streetviewというツールを使って弊社オフィス地点のストリートビューのパノラマ画像をダウンロードして使ってみます。

 <View>
   <Pano source={asset('unifa_office_sv_pano.jpg')}
     style={{
       transform: [
         {rotateY : -90}
       ] }}
   />
   <Text
     style={{
       backgroundColor: '#77ff79',
       fontSize: 0.5,
       layoutOrigin: [0.5, 0.5],
       paddingLeft: 0.2,
       paddingRight: 0.2,
       textAlign: 'center',
       textAlignVertical: 'center',
       transform: [{translate: [0, 0, -3]}],
     }}>
     Welcome to Unifa
   </Text>
 </View>

ちなみに extract-streetview は次のような感じで使えます。

 $ extract-streetview 35.7004793,139.7768184 -f jpg -q 100 -z 2 -o unifa_office_sv_pano.jpg

React VRアプリをビルド
```
 $ cd react_vr
 $ npm run bundle
```
React VRアプリのコード（html）の修正

vr/index.html をエディタで編集します
1. index.htmlにcordova.jsを追加
```
<body>
      .....
     <script type="text/javascript" src="cordova.js"></script>
</body>
```
2. ビルドした js を使うようにパスを修正
  
  2箇所修正します。.jsをつけないとNGのようです
  
  client.bundle.js <script src="./build/client.bundle.js?platform=vr"></script>
  
  index.bundle.js './build/index.bundle.js?platform=vr&dev=true'
3. static_assets が index.html があるディレクトリから見えるようにする
```
 ln -s ../static_assets .
```
4. assetsRootのパラメータを追加
```
 ReactVR.init(
     // When you're ready to deploy your app, update this line to point to
     // your compiled index.bundle.js
     './build/index.bundle.js?platform=vr&dev=true',
     // Attach it to the body tag
     document.body,
     { assetRoot: 'static_assets' }  // 追加
   );  
```
cordovaのwwwディレクトリがReact VRのコンテンツを参照するようにする

cordovaプロジェクトのルートディレクトリに移動して
```
$ mv www www.orig
$ ln -s react_vr/vr www
```
cordovaアプリをビルド
```
 $ cordova build [ios/android]
```
この状態で $ cordova serve ios をするとブラウザ上で動作確認できます。

エミュレーターで確認

続いてエミュレーターで動作確認します

iOS
```
 $ cordova emulate ios 
```
必要に応じて --target=iPhone-6sのようにターゲット端末をオプションで指定します。

おお、出ました！ただし、シミュレーターではジャイロが使えないため真下向きのままから動きません… (´Д｀。)
Android

Android は最初にエミュレーターを起動してからコマンドを打ってください
```
 $ cordova emulate android
```
orz.. AndroidのエミュレーターはWebGLをサポートしてないようです..

実機で確認

手持ちのiPad mini でやってみます。

そのまま、$ cordova run ios すると

 `Code Sign error: No code signing identities found: No valid signing identities (i.e. certificate and private key pair) were found.`

のエラーが出るので Xcodeのプロジェクトを開きます

$ open platforms/ios/HelloCorodvaReactVr.xcodeproj

Fix issueしてXcode上でビルド、実行します。 f:id:sanshonoki:20170511151122j:plain:w300

アプリは起動できたもののテクスチャが表示されません..。(ﾉﾟοﾟ)ﾉ
iPad miniが古いせいでしょうか…

Androidは手持ちのNexus5がいつの間にやらUSBデバッグ接続できなくなっていて（なぜ…?）実機で確認できませんでした..

iOS、Androidとも最新の実機では動いてくれると信じています。。

実機で確認（続）

iPad mini の OS を10.3 にアップデートしたら見れるようになりました! ヾ(´▽｀)ﾉ f:id:sanshonoki:20170512141643j:plain

アップデート前は動いてなかったThree.jsのサンプルがOSアップデート後に動くようになったのでそれでWebGL対応を判定できそうです。 https://threejs.org/examples/#webgl_animation_cloth

ユニファ開発者ブログ

ユニファ株式会社プロダクトデベロップメント本部メンバーによるブログです。