react360で作ったスライドショーアプリの解説

#このエントリーでは！
WerVRフレームワークのひとつである「React360」を使ってスライドショーアプリを作成したのでそのサンプルコードの公開とその簡単な解説をしたいと思います。

前日の23:00に書いてるので雑です。気が向いたら加筆します。

#作ったもの

こんな感じで、下に表示されている写真をコントローラーで選択すると、周囲の景色がその写真に切り替わるアプリを作りました。WebVRなので、当然インストールは不要で、ブラウザでURLにアクセスすればいいわけです。

動くところが面白いのですが、さすがにノートPCには負荷が大きく、動きをうまく撮ることができませんでした。。無念。。

#開発に使用した機器たち
##VR HMD
Oculus GO
俺のVR生活はこいつのおかげで始まりました。
こいつに内蔵されたブラウザでデプロイ先のURLにアクセスすれば、WebVRとして使用できます。めっちゃ手軽
##PC
Lenovo YOGA(ノートPC)
それなりに性能がいいとはいえ、ノートPC単体で開発ができてしまうのがWebVRのいいところですね。ハイスペックマシンは必要ありません。表示確認もブラウザからできます（ちゃんとマウスでぐりぐり動かせるよ！）
##撮影機器
リコーTheta SC
言わずと知れた360度写真撮影デバイスです。
とってもお手軽＆ハイクオリティな撮影が可能です。今回の360度写真はこいつで撮影しました。結婚式など、周りを見渡した映像を取りたい時などにも使えますね。

#とりあえずチュートリアル的なサイトたち

• <[React360公式サイト](https://facebook.github.io/react-360/)>
  まずはここ。とにかく出回っている情報が少ないので、公式の内容は死ぬほど熟読した気がする。
• <[React360 GitHubリポジトリ](https://github.com/facebook/react-360)>
  ここも要チェック。特にハマったときは、Issuesを確認して同じ苦労をしている人を探そう。いるから。
• <[React 360を覗く](https://qiita.com/shiruco/items/3e77babe80a373c71fd5)>
  ここも全体感を知るためにはいい情報でした。ありがとうございました。

あとは適当に泣きながらググって情報を探すべし！！！！

#公開コード
https://github.com/dslerx/webvr_slideshow
ソース汚いですがご容赦を。。。ご指摘はどしどし受け付けます。

#動かし方
GitHubからCloneして、npm installしてからnpm startしてください。そのあとhttp://localhost:8081/index.htmlに接続すると勝手に裏でビルドが走り、完了次第サイトが表示されるはずです（ちなみにビルドはめっちゃ時間かかりますので耐えてください）。

もし動かなかったらReact360をグローバルインストール(npm install -g react-360-cli)してください。

なお、著作権などに抵触するファイルは除いていて、写真はすべて同一の写真に差し替えてます。。

#コードの解説
しようと思ったのですが、辛くて断念。。。
基本的にはReact&Reduxの実装をしたことがある方ならば追っていけるはずです。React Nativeの考え方もだいぶ入っているので、そのあたりの情報も必要に応じて調べてみるといいと思います。

(2018/12/22追記)大事なことを書き忘れました。このコードは、公式のSlideShowアプリのサンプルコードを基に書いています。内容はだいぶ改変していますが、読み解きのご参考まで。