React 360 & GitHub Pagesで手軽にVRコンテンツを公開しよう

JavaScript製フレームワークReactにはWebVRに対応したReact 360というライブラリが存在する。このライブラリを用いることで手軽にVRコンテンツの作成を行うことができることを知ったので、今回はGitHub Pagesへの公開までの手順を紹介することにした。

概要

参考サイト

パッケージ公式ページ

https://facebook.github.io/react-360/

facebook.github.io

GitHub Pagesへの公開方法

React 360 by Example: Part 1

Taking a first dip into VR development using familiar tools and syntax.

codeburst.io

条件

• パッケージ管理ツールnpmの導入

手順例

ここでは追加ライブラリでグローバル環境を汚さない方法を載せる。また、筆者の実行環境がLinuxのため一部シェルスクリプトの記載があるが、Windowsでは同一処理のバッチファイルに置き換えればよい。

1. 1. GitHubでリモートリポジトリを作成, 以降リポジトリ名を<REPO>と表記
   2. mkdir cli
cd cli
npm init cli  // 開発ツールをインストールするディレクトリを作成＆初期化
   3. npm install react-360-cli  // React 360の開発ツールをインストール
   4. npx react-360 init hello-360  // “hello-360″という名前のプロジェクトを作成
   5. git init
git remote add origin https://github.com/<USER>/<REPO>  // Gitでローカルリポジトリを作成
   6. cd hello-360
npm install gh-pages  // プロジェクトにパッケージ”gh-pages”を追加
   7. copy_assets.shを作成, コードは以下の通り

      set -e
      set -x
      rm -f -r build/static_assets
      cp -f -R static_assets build/static_assets

   8. package.jsonの以下の部分を編集

      {
        ...,
        "homepage": "https://<USER>.github.io/<REPO>",
        "scripts": {
          "bundle": "node node_modules/react-360/scripts/bundle.js && sh copy_assets.sh",
          "deploy": "gh-pages -d build",
          ...,
        }
      }

   9. npm run bundle  // 静的ファイルへのパッケージ化, buildフォルダ以下に作成
   10. npm run deploy // GitHubへのアップロード, “homepage”で閲覧可

解説

開発ツールをインストールするディレクトリ

React 360のプロジェクト作成に用いるパッケージreact-360-cliはVRコンテンツ以外の分野で利用することはまずないので、他パッケージ依存と衝突の可能性のあるグローバル環境にインストールするのは好ましくない。

こういった場合、npmで作成したプロジェクト下にツールをインストールしてnpxでスクリプトを実行するといった方法を取ることが出来る。

パッケージのscriptsフォルダに置かれているスクリプトは、

で実行可能だ。

gh-pagesとGitHubへのアップロード

gh-pagesは名の通りGitHubに静的ファイルをアップロードしてGitHub Pagesへの公開を簡易化するパッケージである。

上記では、プロジェクト設定ファイルとなるpackage.jsonにhomepageとdeployコマンドを設定している。deployコマンドはgh-pages -d buildでbuildフォルダをターゲットとしてGitHubへアップロードを行えるようにしている。

また、package.jsonのscripts以下で設定したコマンドはnpm run <COMMAND>で実行できる。つまりこの場合、npm run deployとnode node_module/.bin/gh-pages.js -d buildは同義となる。

npm run bundleで梱包されないファイル

npm run bundleで静的ファイルへのパッケージ化を行うことが出来るが、static_assetsフォルダ内に置く画像ファイルはbuildフォルダ下にコピーされないので自身で複製処理を行う必要がある。

そこで上ではcopy_assets.shというスクリプトファイルを作成して複製処理をnpm run bundleで完結できるように拡張している。

Windowsでも以下のバッチファイルcopy_assets.batで代替できると考えるが、確認が取れていないので参考までに。

rd \s \q .\build\static_assets\
xcopy \E \I \Y .\static_assets .\build\static_assets\

サンプルプロジェクト

筆者がGitHubに作成したリポジトリを公開しておく。

自動生成されたテンプレートにボタンを押すことで背景画像が切り替わるギミックを追加している。

GitHub - 88IO/hello-360: React 360を用いた3Dビューの動作テスト

React 360を用いた3Dビューの動作テスト. Contribute to 88IO/hello-360 development by creating an account on GitHub.

github.com

GitHub Pagesでの実行結果

hello_360

88io.github.io