React 360を開発するときに引っかかりやすい点

開発環境と他のサンプルページ見ていろいろ気が付いたこと。

ChromeではHttps環境でないとデバイスの傾きが感知できない

サンプルページではスマートフォンでみると傾きが反映されていたのに、 開発環境で立てたローカルネットワークにアクセスしてみると、デバイスの傾きが反映されていなかった。 window.DeviceOrientationEventが何らかの原因で働かないんだろうなと思い、調べてみたところ、下記のIssueで答えが出ていた。

github.com

Chromeではセキュリティーの問題でHttps環境でないと傾きを検知できない。

じゃあNetlifyにホスティングしてみるか…と思ったら引っかかりポイントがまた増えた。

ビルド結果が黒背景⇨buildディレクトリにstatic_assetsがない

特に考えずビルドしてフォルダ指定すればNetlifyへのデプロイ大丈夫っしょ、と思ったらダメだった。 よくみると公式で「static_assetsディレクトリに何かファイルあるならそれもコピーしてね」と書いてある。

https://facebook.github.io/react-360/docs/publish.html

というわけでpackage.jsonのscriptを一部を書き換え。static_assetsをbuildディレクトリに含める。

    "bundle": "node node_modules/react-360/scripts/bundle.js && cp -rp ./static_assets ./build/ ",

Netlifyであとは下記のように設定。

• Build command: yarn bundle

• Publish directory: build

これでHttps環境でデバッグできる。Netlifyは本当に楽にデプロイできるし早いのでありがたい。