VR画像をWebサイトに埋め込む！

実写VRを撮影できるVRカメラが安く手に入るようになり、誰でも簡単に実写VRを撮
影できるようになりました。
実写VRの静止画や動画が溜まってくると、人に見せたくなるもんです。
Facebok、LINE、Youtubeなどでは、VRコンテンツをサポートしています。これらの
サイトにアップすれば、実写VRコンテンツを共有できます。

また、ようやく360度の画像や動画を取り入れているサイトも増えてきました。
サイト内に360°コンテンツを埋め込むには、普通の写真のようにimgタグで張り付
けただけでは当然360°グリグリ動かすような処理はできません。

360度コンテンツに対応したカメラであれば、専用のアプリでwebサイトに表示させ
ることはできますが、ロゴが入っていたり、自由に自分のWebに組み込めなかった
りと、ちょっと不自由です。
360度コンテンツとしてサイトに埋め込むにはWebGLと呼ばれるweb上で3次元グラフ
ィックス（3Dコンテンツ）を表示させるための技術を用いる必要があります。
webGLを実装するには「three.js」のような構築をサポートしてくれるライブラリ
も存在しますが、この方法も自作するには、ハードルが高すぎます。

そこで、今回はGoogle VR Viewを使って360度コンテンツを表示させる方法につい
て紹介します。
Google VR Viewを使えば、ロゴも入らず、カスタマイズの自由度も高く、簡単に
webサイトに360度コンテンツを入れることが出来ます。
Google VR View の使い方もいくつか方法がありますが、今回はいろいろと小回り
の利くサーバーにVR Viewコードをホストして表示する方法を使います。

scriptでVR画像のパスを指定するだけで、すぐに表示できるようになります。
VR Viewを使って、開発者は360度VR画像や映像をPCやスマートフォンのWebサイト
に埋め込めます。AndroidとiOS対応のネイティブアプリにも埋め込めます。

■VR ViewをWebサイトのサーバに配置する
VR View GitHubからコードをダウンロードし、パブリックアクセスができる場所に
配置してください。
たとえばサーバー上の「vrview」フォルダに保存した場合、「
//yoursite.jp/vrview/?image=images/sample.jpg&is_stereo=true」でアクセスで
きます。
他の画像を追加するには、サーバー上の置きたい場所に画像（たとえば
images/yourimage.jpg）を入れ、上記のURLを変更すれば追加した新しい画像が見
られます（たとえば//yoursite.jp/vrview/?image=images/yourimage.jpg）。

■Webページ内での使い方
Javascript内で、新しいVR Viewインスタンスを登録するためにidを指定します。

<script>
var vrView = new VRView.Player('#vrview', {
image: './img/tyopress.jpg', //画像を埋め込むパスを指定する
width: '100%', //コンテンツの幅を指定
height: '100%', //コンテンツの高さを指定
});
</script>

あとは、使いたい箇所に同じidを指定するだけです。

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

これでWebサイトに360度コンテンツを表示出来ます。

■動画を表示する
パラメータを変更して、動画を表示することも出来ます。
動画の表示は、imageで画像のパスを指定していた箇所を
"image"の箇所を"video"に変更してください。

var vrView_movie = new VRView.Player('#vrview_movie', {
video: './img/tyopress.mp4', //動画のパスを指定する
width: '100%',
height: '100%',
});

■パラメータを設定する
Google VR Viewには、コンテンツ表示に必要なパラメータの他に、任意で指定出来
るパラメータがいくつか用意されています。

　preview: 文字列
　コンテンツ画像がロードされるまでに表示される画像。（任意）

　is_stereo: ブーリアン型
　モノスコープか、ステレオスコープかの設定。(任意)
　defaultは、false。

　is_debug: ブーリアン型
　trueで画面左下にftpメーターが表示される。(任意)
　defaultは、false。

　is_vr_off: ブーリアン型
　trueの場合、VRモードボタンを無効にする。(任意)
　defaultは、false。

　is_autopan_off: ブーリアン型
　falseの場合、左から右へシーンの切り替えが行われる。（任意）
　defaultはfalse。

　default_yaw: 数値
　コンテンツの角度。(任意)
　defaultは画像中央。

　is_yaw_only: ブーリアン型
　tureの場合、ロールとピッチを防止する。（任意）
　defaultはtrue。
　スマホで上下に動かした際の動きを無効にすることが出来る。