イントロダクション

360度を写せるカメラが簡単に手に入る世の中になってきました。筆者はリコーの360度カメラを持っています。なかなか使い勝手の良いものです。

さて、現在作成中のGoogleMapを使用したブラウザアプリに写真を埋め込むような形で実装しようと考えていましたが、PHPでの実装ではXmlHttpRequestでの通信処理が遅いのと、不具合(写真が時々表示できない)があるのと、深く追求うする気もないのでやめることにしました。

360度カメラで撮影したものです。

その代替え案として

次のようなものがあることを知りました。Google VR Viewです。

Google VR View

これ使って動画や、写真をHTMLに埋め込もうと考えたので、調査をすることにしました。

概要

HTMLに360度画像を埋め込むことができます。そのために使用するのが次のJSファイルです。

• vrview.min.js

HTML内の配置するタグには下記のDIVタグをセットします。

<div id='vrview'></div>

手順

1. vrview.min.jsを読み込む
2. idを指定した表示領域を作成
3. JSでnew VRView.Playerをインスタンス化

サンプル

ここのページに「こんな感じ」というものがありました。

埋め込む方法

JSを使用して埋め込む方法がありました。使用するJSファイルは「vrview.min.js」のようです。

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

そして、360度のイメージファイルは圧縮率などを考慮に入れると「JPEG」がオススメのようです。
圧縮を改善するためにjpegを使用することをお勧めします。

メディアの配置

上のようにJSでファイルを読み込むような形でHTMLに埋め込むのでJPEGなどのファイルを適当な場所に配置する必要があります。
そして、既存の問題もあるようです。PHPでの画像表示がうまくいかない原因もここにありそうです。

Web上の既知の問題
（JavaScript APIを使用せずに）iframeを明示的に宣言し、コードと画像が異なるサーバでホストされている場合、iOS Safariでは360度画像の方向が正しくありません。

メディアとVR Viewコードが異なるサーバーでホストされている場合、360°ビデオはOSX Safariでは機能しません。

2のべき乗でない正方形の画像は、ChromeおよびSafari iOS 8では正しく表示されない場合があります。

配置するタグ

<div id='vrview'></div>

VRView.Playerのインスタンス化

ロードイベント(onload)で起動するように設定します。
言葉を変えると、オンロードイベントに下の「onVrViewLoad」を登録してVRView.Playerをインスタンス化する関数を実行するというわけです。

// onVrViewLoadをオンロードイベントで動くように登録しています。
window.addEventListener('load', onVrViewLoad);

// onVrViewLoadを定義しています。
function onVrViewLoad() {
  // Selector '#vrview' finds element with id 'vrview'.
  var vrView = new VRView.Player('#vrview', {
    video: '/url/to/video.mp4',
    is_stereo: true
  });
}

まとめ

意図しないところで、PHP画像アップロード問題の原因がわかったものの解決に至らずですが、とりあえずはWebアプリに関して

1. 画像でなくURLを渡すような形で表示する
2. URL形式でHTMLに出力してJSでコントロールする

このような形で実装すると良いという発見がありました。
そして、360°の写真とビデオはこれも URLで参照先(画像などの配置場所)を指定する形でHTMLに出力するので問題なくいけそうだということがわかりました。

でわでわ。。。