はじめに

記事について

先日(2017-04-19)のFacebookの開発者会議F8では、エンジニアの方々は楽しい時間を過ごされた思います。React Fiberの発表や、Relay Modernなどの発表もありましたが、本稿では安定版となったReact VRをピックアップし、React VRのインストール方法からホームページへの埋め込みまでの一連をご紹介いたします。
*React.jsの説明はいたしませんが、React VRの埋め込み自体は難しくありませんのでご安心ください。

記事の対象者

本稿では、以下の方を対象に、先日のF8で発表で正式公開となったReact VRの、ホームページへの埋め込み方法をご紹介致します。

• CUIでの操作をしたことがある方。
  本稿ではターミナル(macOS Sierra)を利用して解説いたします。
  CUI環境にて公開用のソースコードを生成する必要がありますので、少しでも経験があると楽です。

• gulpやwebpack等で、node.jsを利用した開発経験がある方。
  node.jsによる開発環境が用意されています。事前に開発環境としてnode.jsを自分のPCにインストールしておいてください。
  macOSはhomebrew、Windowsはnodejs.orgのインストーラーよりインストールが可能です。

• CSS3やJavaScriptなどで、プロパティを変えたときにスタイルがどのように反映されるかわかる方。
  画像や動画、モデリングデータや、クリッカブルエリアなど、VR用のオブジェクトの配置はCSS3のTransformプロパティを利用します。

React VR サンプル

STEP.1 React VR のインストール

React VRはコマンドラインにて、基礎となるファイル群(以下、スケルトン)をインストールします。
手順は以下の通りです。

# step 0 他のnode.jsが動いている場合は停止しておく。(ターミナルにてCTRL+Cを押下)

# step 1 react vr cliをインストールして、react-vrコマンドが使えるようにする。
$ npm i -g react-vr-cli

# step 2 React VRを動かすプロジェクト名(キャメルケースで)を決め、スケルトンをインストールする
$ react-vr init HelloReactVr

# step3 React VRを動かすフォルダに移動する
$ cd HelloReactVr

# step4 React VRの開発環境を動かす
$ npm start

npm startコマンドのあと、http://localhost:8081/vr/index.htmlにアクセスしてみてください。以下のような画面が確認できれば、開発環境の構築は完了です。
最初にアクセスした時に、client.jsやindex.vr.jsといった設定ファイルやスクリプトが生成されますので、画面が表示されるまで数十秒の時間がかかります。

STEP.2 React VR のパノラマ画像を差し替える

STEP.2.1 パノラマ画像を用意する

デフォルトの画像でも良いのですが、せっかくなので自分で撮影した画像をホームページに埋め込んで動かしたいものです。
本稿では以下の、横手城(秋田県横手市)のパノラマ画像を利用します。お手元にパノラマ画像がない場合は画像クリックで、リンク先から横手城のパノラマ画像をダウンロードしてご利用ください。(画像は副社長が撮影してきてくれました！)
※Flickr VRも良い素材が提供されています。ただし、公開する際はライセンスを必ずご確認ください。

利用するパノラマ画像をプロジェクトホームのstatic_assetsフォルダに入れてください。
初期状態だと、chess-world.jpgが格納されていますが、以降は、上の横手城の画像(yokote_castle.jpg)を利用するとして解説をすすめます。

STEP2.2 index.vr.jsを確認する

React VRのスケルトンでは、主にindex.vr.jsを編集することになります。index.vr.jsを開いて次のコードが記述されているか確認してください。

import React from 'react';
import {
    AppRegistry,
    asset,
    StyleSheet,
    Pano,
    Text,
    View,
} from 'react-vr';

export default class HelloReactVr extends React.Component {
    render() {
        return (
            <View>
                <Pano source={asset('chess-world.jpg')}/>
                <Text
                    style={{
                    backgroundColor: '#777879',
                    fontSize: 0.8,
                    fontWeight: '400',
                    layoutOrigin: [0.5, 0.5],
                    paddingLeft: 0.2,
                    paddingRight: 0.2,
                    textAlign: 'center',
                    textAlignVertical: 'center',
                    transform: [{translate: [0, 0, -3]}],
                }}>
                hello
                </Text>
            </View>
        );
    }
};

AppRegistry.registerComponent('HelloReactVr', () => HelloReactVr);

STEP.2.3 パノラマ画像を差し替える

index.vr.jsの15行目でパノラマ画像を指定します。

# index.vr.jsの15行目

//- 変更前
<Pano source={asset('chess-world.jpg')}/>

//- 変更後
<Pano source={asset('yokote_castle.jpg')}/>

変更したら、保存してブラウザをリロードし、横手城のパノラマ画像に差し替わっていることを確認してください。
asset関数の引数としてファイル名を入力することで、static_assetsフォルダの中の画像がセットされます。
このフォルダの指定は、ReactVR.init()時にassetRootプロパティにて変更が可能です。(STEP.3.1にて後述)

STEP.2.4 テキストオブジェクトを変更する

同様にindex.vr.jsを編集します。初期状態ですと、オブジェクトを回転するプロパティが抜けていますので、rotateプロパティを追加して、適当なビジュアルに変更してみます。

# index.vr.jsの16行目から
    <Text
        style={{
            //- 背景画像: 透過で表示
            backgroundColor: 'rgba(255,255,255,0.3)',

            //- 文字サイズ
            fontSize: 0.3,

            //- 文字の太さ: 太文字で
            fontWeight: '700',

            //- 配置の基準点(最小0,最大1)
            layoutOrigin: [0.5, 0.5],

            //- 余白
            paddingLeft: 0.1,
            paddingRight: 0.1,

            //- テキスト揃え
            textAlign: 'center',
            textAlignVertical: 'center',

            //- 空間の配置座標(1で1m換算)
            transform: [
                {translate: [0, 0, -3]},
                {rotateX: 0},
                {rotateY: 0},
                {rotateZ: 0},
            ],
        }}>
        Welcome to YOKOTE!
    </Text>

STEP.2.4.1 transformプロパティの説明

React VRにおいて、オブジェクトの配置はtransformプロパティによって調整します。

transform: [
    //- オブジェクトの座標指定。カメラを原点として、数値1=1mで換算。
    {translate: [X座標、Y座標、Z座標]},

    //- rotateで回転。x,y,z軸は別々に指定。個人的にrotateYが結構使われると思います。
    {rotateX: 0}
    {rotateY: 0}
    {rotateZ: 0}
]

ここは、適当に数値を変更して確かめた方が、感覚をつかみやすいと思います。

STEP.3 公開用の.jsファイルを生成する

開発環境にて変更が完了したら、いよいよ公開用のファイルを生成します。

STEP.3.1 公開用.jsファイルの生成

一プロジェクトを停止(Ctrl + C)し、プロジェクトのホームに移動しておいた後、以下のコマンドで公開用の.jsファイルを生成します。

# 公開用ソースコードの生成
$ npm run bundle

上記コマンドの後、vrフォルダにbuildフォルダとその中に、index.bundle.js、index.bundle.js.meta、client.bundle.js、client.bundle.js.metaの４つのファイルが生成されます。

STEP.3.2 index.htmlの編集

vrフォルダの中のindex.htmlにて、先程生成した公開用の.jsファイルを読み込むように変更します。

# vr/index.html

# 10行目付近のclient.jsを公開用に差し替える
# 変更前
<script src="./client.bundle?platform=vr"></script>
# 変更後
<script src="./build/client.bundle.js?platform=vr"></script>

# 16行目付近のindex.vrを公開用に差し替える
# 変更前
'../index.vr.bundle?platform=vr&dev=true',
# 変更後
'./build/index.bundle.js?platform=vr',

# ついでにasset関数の呼び出しフォルダを設定する(20行目付近)
document.body,
{
    assetRoot: './static_assets'
}

# assetRootのパスを変更したので、static_assetsフォルダをvrをフォルダに移動する

これで公開の準備が整いましたのでサーバーにアップロードしてみましょう。
アップロードするvrフォルダの中は、index.html,buildフォルダ,static_assetsフォルダがあることを確認してください。

React VR で横手城

※リンク先ではテキストの他、秋田県の白地図画像も入れています。次回記事にて画像や動画などのオブジェクトの配置方法を解説します。

STEP.4 ホームページにReact VRを埋め込む

さて、本稿の目的であるReact VRをホームページに埋め込む方法ですが、React.jsに慣れている方や、すでにプロジェクトでReact.jsを使っている方は、そのままコンポーネント化して埋め込む事もできると思います。ですが、既存ページへの統合は「iframe」タグを使った埋め込みが推奨されているようです。
つまり、上記プロジェクトファイルのURLをiframeのsrc属性にあてて、埋め込む形になります。
詳しくはPublishing Your Projectにて解説がありますので、ご確認ください。

次回について

次回は、画像や複数のオブジェクトの配置などを解説したいと思います。同時にクリックイベントを検知する方法なども合わせて解説できたらと考えています。

所感

今まではGoogleのVR ViewとVue.jsの組み合わせを採用することが多かったのですが、オブジェクトの配置が簡単にできることや、視線のイベント設定も比較的用意にできることから、当面、自分の周りではReact VRがメインストリームになりそうな気配です。