各WebブラウザーでのWebVRの対応が徐々に進んできています。VR(バーチャルリアリティ)コンテンツがブラウザーで体験できるようになってきています。VRヘッドマウントディスプレイを開発するOculusを傘下に持つFacebookは、React360というReactでWebVRコンテンツを開発するツールを提供したりするなど、WebVRコンテンツを開発するツールも世の中に出回ってきました。今回は、以前にこのブログで紹介したMozillaが開発しているA-FrameというWebVR開発ツールをReactの作法で開発できるようにするaframe-reactというツールについて紹介します。2018年のWebVR「WebVR元年」と言われた2017年。APIのブラウザーの対応も少しずつ進み、WebブラウザーでVR(バーチャルリアリティ)体験を試せる土壌ができつつあります。SupermediumというVR専用のWebブラウザーなども登場しています。VRの普及が進めば、Webの使い方にも大きな変化が現れます。開発者であれば、このWebVR周辺の技術もそろそろキャッチアップしておく必要が出てきたのではないでしょうか。View」について記事を書いています。サンプルなども載せていますので、参考に当記事と併せてチェックいただけるとよいかと思います。VR」ことはじめaframe-reactの紹介その中で今回紹介するツール「aframe-react」は、A-FrameとReactを連携させて、A-FrameのタグをReactのコンポーネントとして開発できるようにしたものです。React360(旧ReactVR)とほぼ同じような手法でコードを書きます。ngokevin/aframe-react以下は、aframe-reactのボイラープレートです。簡単なサンプルとなっているので、併せてご確認ください。ngokevin/aframe-react-boilerplateさて、今回はこの「aframe-react」の開発環境の構築からサンプルを表示するところまでをご紹介したいと思います。「aframe-react」を利用するには、reactの開発環境を準備する必要があります。昨今のフロントエンドの開発環境が複雑になってきていますが、Reactの開発環境も例外ではありません。今回は、Facebookの提供しているコマンド一発でReactの開発環境を構築してくれる「create-react-app」を使って開発環境を構築します(なお、ゼロコンフィグのビルドツール「Parcel」を使っても簡単にReactの開発環境を作ることができます)。create-react-appのインストール以下のコマンドをたたくとシステムにcreate-react-appがインストールされて、お使いのパソコンでcreate-react-appコマンドが使えるようになります。create-react-appプロジェクトディレクトリの作成create-react-appをインストールしたら、プロジェクトディレクトリを作りたいフォルダに移動して、以下のコマンドを実行します。コマンドの後ろには任意のプロジェクト名を指定します(今回はaframe-react-sampleとしました)。Reactの開発環境が構築された状態でプロジェクトディレクトリが作成されます。aframe-react-sampleプロジェクトディレクトリに移動プロジェクトディレクトリが作成されたら、その中に移動します。initコマンドを実行する必要がありますが、すでに開発環境が構築されているので、その必要はありません。aframe-react-sampleaframe-reactのインストールプロジェクトディレクトリを作成し、中に移動したら、さっそくA-Frame本体である「aframe」とA-FrameとReactの連携を行う「aframe-react」をプロジェクトディレクトリにインストールします。aframeとaframe-reactをインストールインストールするには以下のコマンドを実行します。上記の通り、aframe-reactに加えaframe本体もインストールするのですが、この記事の執筆中のaframeの最新バージョン0.8.2が以下のエラーによってインストールできませんでした。v0.7.0をインストールしました。v0.7.0は問題なくインストールできました。aframe@0.7.0これで開発環境の準備は完了です。A-Frameで書いたサンプルaframe-reactは、A-FrameをReactで書くためのツールです。従って、A-Frameで書いたコードが、aframe-reactだとどのように書くことができるのかがわかるように、まずはA-Frameで書いたサンプルを紹介します。サンプルは当ブログの過去記事『HTML感覚でWebサイトに「VR」コンテンツが作れるツール「A-Frame」』で扱ったものです。A-Frameで書いたサンプルコードA-Frameのサンプルコードは以下となっていました。</a-scene></body>実行結果は以下のようになりました。CodePen)aframe-reactでサンプルを書き換えるA-Frameで書いたコードをaframe-reactで書き換えてみましょう。プロジェクトディレクトリをお使いのエディタで開いてください。今回は、サンプルなのでプロジェクトディレクトリ内のsrcフォルダ内のApp.jsファイルを使用します。App.jsを開くと、すでにcreate-react-appのサンプルコードが記載されているので、記載されているコードを一旦すべて削除し、以下のコードを記述してください。App;実装のポイント簡単に説明しますと、aframe-reactで用意されているSceneコンポーネントとEntityコンポーネントは、それぞれA-Frameの<a-scene>と<a-entity>をラップしており、A-Frameと同じように振る舞います。A-Frameではタグに属性を指定することができましたが、aframe-reactでは、同様の属性値をReactのPropsを通して渡すことができるようになっています。aframe-reactでは、A-Frameで用意されている<a-scene>と<a-entity>以外の<a-*>タグには対応していないので、基本的にはEntityコンポーネントを使って、それぞれのタグを再現するようにします。Systemをしっかり理解しておく必要があります。ビルド結果を確認する場合は、以下のコマンドを実行します。ローカルサーバーが起動し、ブラウザーに結果が表示されます。Replacement)となりますが、コマンドの実行中は、コードを変更するたびに自動的にブラウザーに変更箇所が反映されるようになります。startまた、ビルドする場合は、以下のコマンドを実行します。distディレクトリ内にプロダクションビルド版のファイル一式が作られます。buildaframe-reactで書き換えたサンプルコードの結果は以下の通りです。別ウィンドウで開く(スマホ用のメガネのマークが表示されなかったのが気になるところです。aframe-reactのサンプルを見るとちゃんと表示されているので、別に対応が必要なのかもしれません。)まとめ以上、紹介してきたようにaframe-reactはReactの作法で開発ができることを目的として作られていて、Facebookの提供するReact360とほぼほぼ同じような感覚で使えるんじゃないかと思います。Reactの作法でVRコンテンツ開発できるということは、Reactの開発者にとっては、大変なアドバンテージにもなるはずです。VRコンテンツを組み立てるための専用の知識が別途必要なので、それなりに敷居は高いと思います。Native上に構築され、WebVR用のJavaScriptのランタイムを備えていまるのに対して、aframe-reactはReactとブリッジするためのA-Frame上の薄いレイヤーとなります。Systemの扱いに慣れているのであれば、aframe-reactの選択はありかなと思います。どちらが好みかReact360とaframe-reactの両方を試してみるのよいかと思います。今回の記事で紹介したサンプルのコードですが、GitHubにアップしています。最後に、紹介しておきます。maechabinホーム目次トップ。