Google VR viewを利用して360度画像を埋め込む

Google VR viewを利用して360度画像を埋め込む

2016年がVR元年と言われて早1年半以上が経ちました・・・。
2016年の1月にPC向けVRゴーグルの「Oculus Rift」のプレオーダーが開始され、3月末から「Oculus Rift」発売（初回出荷）が始まり、VR用デバイスが身近になる第一歩を踏み出しました。その後「HTC Vive」や「PlayStation VR」といったハイエンドVRHMD（ヘッドマウントディスプレイ）が発売され、どんどんとハードウェアが出てきています。
まだまだ一般化したとは言えない状況ですが、今後はVR（仮想現実）やAR（拡張現実）、またMR（複合現実）やSR（代替現実）といった方向が加速することは容易に想像できます。

VR（仮想現実：Virtual Reality:バーチャルリアリティ）
AR（拡張現実：Augmented Reality:オーグメンテッドリアリティ）
MR（複合現実：Mixed Reality:ミックスドリアリティ）
SR（代替現実：Substitutional Reality:sa:サブストゥショナルリアリティ）

そんな中で表題に話しを戻しますと、今回web上360度画像や動画を埋め込むための方法をご紹介したいと思います。
360度の画像はFacebookとInstagramの人気SNSも対応しており。かなり身近に感じることができるようになりました。
また、360度の全天球カメラと言えば・・・「RICOH THETA」が有名だと思いますが、その「THETA」の新製品が9月30日に発売予定となりました。
今後ますます360度の画像が増えてくる状況の中でwebサイトに手っ取り早く360度画像（動画）を埋め込みたいと思います。

どんな感じなるかはとりあえず下記のデモをご確認下さい。
デモはこちら

では、早速始めていきたいと思います。
まずはgoogleさんのサイトを確認していきましょう。

Google VR View for the Web Documentation

このサイトに沿って進めていきたいと思います。
3ステップで完了です。

英語は苦手な人はgoogle chromeの翻訳機能を使ってみてください。
ページ上で右クリックを押すとウィンドウが出てきて、その中の項目に「日本語に翻訳（T)」と書かれた部分があるのでそこをクリックするとオッケーです。

ではDocumentationに沿ってまずは下記のコードをHTMLの中に埋め込みます。

ステップ１

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

ステップ２
次に画像を表示したい箇所に下記のコードを入力。
divタグの中に文字などは入れなくて大丈夫です。

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

ステップ３
最後に下記のscriptを読み込ませておげれば完了です。 

<script>
  window.addEventListener('load', onVrViewLoad)
  function onVrViewLoad() {
    var vrView = new VRView.Player('#vrview', {
      width: '100%',//横幅の指定
      height: 300,//高さの指定
      image: '任意の画像のパスを指定',
      is_stereo: true //stereo画像を指定の場合はこれを指定。Monoの場合は不要
    });
  }
</script>

以上の３ステップで完了です。

Google VR viewに対応しているフォーマットは下記のページでご確認下さい。
対応フォーマットの確認はこちら

MonoとStereoの指定を間違わないように気をつけて下さい。
defaultはMonoが指定されています。Stereoを利用する際にはis_stereo: trueを忘ないで下さい。

上記方法でエラーが出る場合は下記2点が間違っている可能性があります。
１．パスの設定が間違っている。
２．画像形式が対応していないフォーマットになっている。
　　またサイズが規格に合っていない。（※画像が小さい。アスペクト比が間違っている。等々）

また上記を見直してもエラーが出る場合は
サーバーがクロスドメインを許可していない可能性があるので
その場合は自身のサーバーで出力してあげて下さい。

GoogleのVR View Githubよりzipファイルをダウンロードすることができます。
ダウンロード先はこちら

上記サイトにアクセスしたら右側にある緑色のボタンで『Clone or download』と書かれたボタンがあるので
そこから「Download ZIP」を選択するとダウンロードすることができます。

ファイルがダウンロードできたら、解凍してサーバーの任意の場所に保存して下さい。
そしてステップ１で指定したvrview.min.jsへのパスを変更したらオッケーです。

以上で完了になります。

※360度動画も埋め込む事は可能ですが、容量が大きくなるので読み込みに時間がかかる場合があります。

クイックウェブサイトはこちら