Google VRの「VR View」で360度対応の画像や動画をWebサイトに埋め込んで表示させる

今年2017年は「WebVR元年」と呼ばれています。MozillaとW3Cが共同で仕様の策定を進めている「WebVR API」は、今年中にFirefoxやChromeなどの主要なWebブラウザーに実装されると言われています。そうなるとWebブラウザー上でVR（バーチャル・リアリティ）の体験ができるようになります。つまり、Webの開発者たちは今後WebのコンテンツのひとつとしてVRコンテンツを扱う必要が出てきます。そうした状況に備えて、今回は比較的簡単にVRコンテンツをWebページに埋め込むことができるGoogleの開発している「VR View」を紹介したいと思います。

はじめに – Web VRについて

VRはバーチャル・リアリティの略で、いわゆる仮想現実と言われているものです。ここ数年で、VR専用のヘッドセットをつけて、この仮想現実空間を体験できるようなコンテンツが急激に増え出しました。しかしまだ爆発的な普及と言える状況ではありません。VRコンテンツの作成が難しいというのもそのひとつの原因だと言われています。しかし、多くの開発者が扱えるWeb技術でVRコンテンツが作れるようになれば、VRコンテンツも増えていくだろうということで、Mozillaが中心となって2014年頃よりWebVR APIの仕様の策定が開始されました。

上でも述べたように現在ブラウザーでVRコンテンツを扱うための「WebVR API」は現在も策定中となっていますが、それと並行するようにWebでVRコンテンツを作成するツールがすでに生み出されています。Mozillaが開発するHTMLのタグを書く感覚でVRコンテンツを作成するフレームワーク「A-Frame」、VR界を牽引するOculusが開発するReactの技術でVRの開発が行えるフレームワーク「ReactVR」、こちらもMozillaが開発をしていますが、Reactで「A-Frame」を扱えるようにするReactライブラリ「aframe-react」などが有名です。

これらのツールは、ある程度専門的なWebフロントエンド技術の知識が求められるので、扱うのが難しいです。今回紹介するGoogleの「VR View」は、それらに比べるとだいぶ敷居が低いものとなっています。今回はこのGoogle VRの「VR View」について紹介したいと思います。

googlevr/vrview

Google VRの「VR View」

「VR View」はGoogleが提供する360度対応メディア（画像や動画）をデスクトップ、モバイル、ネイティブアプリ（iOSやAndroid）上のWebサイトに埋め込むためのツールです。例えば、「旅行サービスサイトにスキューバーダイビングを体験できるVRコンテンツ」を埋め込んだり、「不動産サービスサイトに実際に部屋の様子がわかるVRコンテンツ」を埋め込んだりして、サービスを強化することができるようになります。

そして、この「VR View」の大きな特徴として、実装がそれほど難しくないということが挙げられます。VRコンテンツさえ用意できれば、あとは自力でWebサイトに360度対応の画像や動画を表示させることができます。

以下は実際にこのVR Viewを使って360度画像を埋め込んでみたDEMOとなります。PCであれば、ドラッグして画像を動かしてみたり、スマホであれば、さまざまな角度に傾けたりしてみたりして実際にどのようなものか体験してみてください。なかなか面白いかと思います（通信状況により画像の読み込みに時間がかかる場合があります）。

VR Viewを使ってVRコンテンツを埋め込んだデモ

実際に、VR Viewを使ってVRコンテンツを埋め込む方法を紹介します。詳細は以下の公式サイトのドキュメントをご参照ください。

VR View for the Web | Google VR | Google Developers

VR Viewを使用する環境を準備する

まずは、VR Viewを使用する環境の準備について説明します。

VR Viewをダウンロード

まずVR Viewをダウンロードする必要があります。以下のGitHubのページからVR Viewをダウンロードしてください。アクセスしたGitHubのページの右上にClone or downloadと書かれている「緑色のボタン」が表示されていますので、そちらから「Download ZIP」をクリックしてダウンロードしてください。「vrview-master.zip」というzipファイルがダウンロードされます。

googlevr/vrview

zipファイルを解凍し、プロジェクトフォルダにコピー

ダウンロードした「vrview-master.zip」を解凍すると、「vrview-master」というフォルダとなります。この「vrview-master」フォルダをそのまま、プロジェクトフォルダにコピーまたは移動させてください。

ファイルの準備

プロジェクトフォルダ内に、VRコンテンツを埋め込むためのhtmlファイル（vr.html）を作成し、実際に表示するVRコンテンツ（vr-image.jpg、vr-video.mp4）を用意します。

例えば、フォルダ構成を以下のようにします。（vrview-master以下のファイルやフォルダについては、実際に使用するもの以外は便宜上省略しておきます。）

vr-project
 ├─vrview-master
 │  ├─build
 │  │  └─vrview.min.js
 │  └─index.html
 ├─vr.html
 ├─vr-image.jpg
 └─vr-video.mp4

これで準備は完了です。

VR Viewは「iframeで実装する方法」と、「JavaScriptで実装する方法」があります。それぞれ説明していきます。

iframeでVRコンテンツをWebページに埋め込む

iframeを使ってVRコンテンツを埋め込む方法は、プロジェクトフォルダに作成したvr.htmlファイル内の任意の箇所に以下の一文を埋め込むだけで完了です。

<iframe width="100%" height="400" src="./vrview-master/index.html?image=../vr_iamge.jpg"></iframe>

「vrview-master」フォルダに用意されたindex.htmlのパラメータ（imageまたはvideo）に対して、「表示したいVRコンテンツのパス」を指定します。（iframeのサイズは適宜指定します。）

結果は以下の通りです（通信状況により画像の読み込みに時間がかかる場合があります）。

JavaScriptでVRコンテンツをWebページに埋め込む

JavaScriptを使って実装する場合は、若干手順が増えます。iframeのところでは画像を使ったので、こちらは動画を使って実装方法を説明していきます。

vrview.jsの読み込み

「vrview-master」フォルダ内の「build」フォルダ内にある「vrview.js（vrview.min.js）」がVR Viewの本体となっているので、この「vrview.js（vrview.min.js）」をvr.htmlファイルにscriptタグを使って読み込みます。

<script src="./vrview-master/build/vrview.min.js"></script>

CDN　版も用意されています。CDN版を使用する場合は、以下をvr.htmlファイルに記述します。

<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

HTMLの実装

プロジェクトフォルダに作成したvr.htmlファイル内の任意の箇所にVRコンテンツを表示するための要素を記述します。id名は任意です。

<div id="vrview"></div>

JavaScriptの実装

プロジェクトフォルダに作成したvr.htmlファイル内に以下を記述します。

<script>
window.addEventListener('load', onVrViewLoad);
function onVrViewLoad() {
  var vrView = new VRView.Player('#vrview', {
    video: './vr-video.mp4'
  });
}
</script>

コンテンツがロードされた際にonVrViewLoad関数が呼び出されるようになっています。onVrViewLoad関数内のVRView.Playerオブジェクトのインスタンスを作成する際に、第一引数に「VRコンテンツを表示する要素のid名」、第二引数に「各種設定内容（使用するVRコンテンツのパスなど）」を渡すようにします。

結果は以下の通りです。動画のVRコンテンツを埋め込んだので、当たり前ですが、VRコンテンツには動きがあります。これはこれで面白いですね。

VR Viewのオプション

VR Viewにはいくつかのオプションも用意されています。オプションについての詳細は以下を参照してください。

VR Viewのオプション

iframeで実装する場合は、「vrview-master」内のindex.htmlファイルにつけるパラメーター、JavaScriptで実装する場合は、VRView.Playerオブジェクトの第二引数に渡すパラメーターを使って指定します。

使用する画像や動画について

VR Viewで使用する画像や動画については、以下のような仕様のものを使うことを推奨されています。

推奨する「画像」の仕様

png、jpeg、gifで保存された画像。特に圧縮に対応しているjpegを推奨
互換性やパフォーマンスを最大限に保つために画像サイズは2のべき乗（2,048や4,096など）とすることを推奨
モノラル画像 => アスペクト比2:1を推奨（4,096 × 2,048など）
ステレオ画像 => アスペクト比を1:1を推奨（4,096 × 4,096）

推奨する「動画」の仕様

h264でエンコードされたmp4sで保存された動画
モノラル動画 => アスペクト比2:1を推奨
ステレオ動画 => アスペクト比1:1を推奨
古いデバイスは1,080p（1,920 × 1,080）より大きな動画をデコードできないため、最大限の互換性と品質を優先する場合は、1,920 × 1,080のモノラル動画と2,048 × 2,048のステレオ動画の両方を提供することを推奨

まとめ

いかがでしたでしょうか。iframeで実装する場合は、1行のみでVRコンテンツをWebサイトに埋め込むことができます。JavaScriptで実装する場合も、パターンを覚えればさほど迷わずVRコンテンツをWebサイトに埋め込むことができるかと思います。VR Viewは手軽に扱えると思いますので、ぜひWebサイトに一工夫を加えたいと思った際は、このVR Viewを利用されることをおすすめします。

なおVRコンテンツを自分で作成するのは難しい場合もあるかと思います。今回は私はサンプルを作るにあたってflickrを利用させてもらいました。VR用の画像や動画がたくさん見つかります。クリエイティブ・コモンズのものも用意されているので、ライセンスに気をつけてお使いください。

Flickr VR | Flickr

なお、以下のような有料のサービスもあります。クオリティが高いかと思います。このようなサービスも使ってVRコンテンツを探されると良いでしょう。

Top VR 360°素材集（Royalty Free）バーチャルリアリティ・ 360度動画・パノラマ

もちろん360度カメラを購入して、自分でコンテンツを用意しても良いでしょう。以下は、2017年6月1日発売のサムスン製の360度カメラです。4K画質の360度動画を24fpsで撮影が可能で、自分も欲しいなと思っている360度カメラです。

それから、やはりVRコンテンツをWebサイトに実装したら、自分でも確認してみたいと思うはずです。VR専用のヘッドセットも、だいぶ安価なものが出てきています。しかし、まだそこまで気合いを入れたくないという方は、以下のようなGoogle Cardbordに準拠した組み立て式のものを選ぶとよいでしょう。1,000円以下で購入可能です。（Cardbordを選ぶ際は、Cardboardの上に操作ボタンがついているものを選ぶことをオススメします。）

カテゴリー: Web技術
Google JavaScript VR 写真

maesblog