Web開発者が利用できる、Webで仮想現実（以下、VR）を構築する方法は驚くべきスピードで進化しています。私が昨年、WebでVRを構築する方法の記事を執筆したあとも、ずいぶん進歩しています。この2週間、オープンソースの拡張可能なWebVRフレームワークのA-FrameとPrimroseを使ったVR構築について調査していますが、2016年も新たな方法がたくさん登場しています。3月、グーグルはWebにこれまで以上のVR体験ができる新しいオプション、VRコンテンツを埋め込める「VR View」を発表しました。
VR Viewとは？
「VR View」を使って、開発者は360度VR画像や映像をPCやスマートフォンのWebサイトに埋め込めます。AndroidとiOS対応のネイティブアプリにも埋め込めます。この記事では、360度パノラマ画像を既存のWebサイトに埋め込む簡単な方法を説明しましょう。
デバイスの互換性
グーグルのVR Viewは、PC、スマートフォンともに、以下のブラウザーの最新バージョンで利用できます。
- Android、iOS、Windows、OS X、Linux向けのChrome
- iOSとOS X向けのSafari
- Windows、OS X、Linux向けのFirefox
- WindowsのIE11とEdge
PC版でのVR体験は風景をマウスでドラッグしてまわす、疑似パノラマです。「magic window」と呼ばれており、知っている人もいるとは思いますが、数年前に登場したPC用Quicktime VRのパノラマに似ています。しかし、今回発表されたグーグルのVR Viewはサードパーティー製のプラグインではなくJavaScriptを採用していて、Google Cardboardを使うとより一層、本当にその場にいるようなVR体験ができます。
パノラマ写真を撮影する
グーグルはAndroidで360度のパノラマ写真が撮影できるアプリ「Cardboard Camera」を提供しています。iOS向けには「Optonaut」というアプリで、360度写真を撮せます。Optonautで撮影した写真データの取り扱いやアプリの使用感についてはよく知りませんので、もしiOSデバイスを使っている人がいればぜひ使い心地を教えてください。
グーグルのCardboard Cameraは、立ち止まって身体を回しながら画面の指示に従っていけば、360度写真を撮影できます。この撮影に最適な風景は、広いオープンスペースで、画像の上下にディテールが写り込まないところでしょう。狭い部屋での撮影は、うまく見えるように画像を加工する必要があるかもしれません（以下でそのやり方を見てみましょう）。
Cardboard Cameraで写真を撮ったら、スマートフォンの/sdcard/DCIM/CardboardCameraに360度写真が保存されるはずです。そのデータをPCに移せば、好きなように使えます。
画像の準備
画像に広大な空や地平線がないと、少し変な風に見えます。特に室内での撮影では避けられない課題です。SitePointのオフィスの写真（Angelaさん、ありがとう！）を例に、画像に回避できないディテールがたくさん入っている場合、どのようになるかを見てみましょう。
画像の上下にディテールがたくさん入りすぎるのを避けるために、画像の上下に追加したスペースに、ぼかした逆転画像を配置すると、よりすっきりと見せられます。あまり不自然ではない程度に、スペースを追加するテクニックはたくさんありますが、私が気に入っている方法です。
Photoshopで2048×1024サイズの新規ドキュメントを作成し、そこに同じパノラマ画像を3枚ペーストしましょう。
3枚の画像をドキュメントのサイズに合わせて引き伸ばし、Edit > Transform > Flip Verticalの順で上と下の画像を反転します。
こんな風に見えるはずです。
上と下の画像を複製し、Filter > Blur > Gaussian Blurの順でぼかしを入れます。
Gaussian Blurの設定値にいろいろな数値を入れて試してみてください。ぼかしをきつくした方がよく見える場合やその反対もあります。設定が終わったら、OKをクリックします。
ぼかしの入った各レイヤーを元画像よりも大きく引き伸ばしてください（へりはフェードアウトしますが、ぼかしが画像の四隅に入るようにするためです）。
こんな風に仕上がるはずです。
Photoshopを上手に使える人ならば、もっと自然に画像の上下の加工ができるしれません。もっと簡単に、目立たないように背景を加工できるものもあります。
画像を埋め込む
VR Viewには画像を埋め込む方法が2つあります。グーグルホスト型VR Viewかセルフホスト型VR Viewです。現時点では、VR Viewと同じサーバーにセルフホストする方が信頼性が高いです。VR Viewと画像が違うサーバーに置かれた場合、iOS Safariではうまく動きません。グーグルホスト型VR Viewを使う場合は、画像を置くサーバーがCORS（Cross-Origin Resource Sharing）をサポートしていることも必要です。
グーグルホスト型VR Viewを使う
Webページに以下のコードを入れて、VR Viewがどのようなものか簡単に試してみましょう。
<iframe width="100%"
allowfullscreen
frameborder="0"
src="//storage.googleapis.com/vrview/index.html?image=//photovrse.com/examples/coral.jpg&is_stereo=true">
</iframe>グーグルが提供するサンプルコードが実行されるとこのように見えます。
初期設定で、サンゴ礁の海を泳ぐ魚の美しい360度パノラマビューが見られます。iframeのURLのimage=パラメータを変更して、自分の画像に変更できます。画像を置くサーバーがCORSをサポートしている限り、動くはずです。
コードにあるis_stereo=true属性は1つの画像の中にパノラマの複製が設定されている場合の属性です。難しくならないように、この記事では触れません。詳しい情報を知りたい人はグーグルのVR Viewのドキュメントをご覧ください。
セルフホスト型VR View
グーグルホスト型VR Viewは非常に便利です。YouTubeの動画を組み込むのと同じくらい簡単で、素早くパノラマコンテンツを埋め込める理想的な方法です。しかし、多くのプラットフォームで大勢のユーザー向けにVR Viewを使いたい場合は、自分でVR Viewをホストすることになります。そうしないと、iOS Safariでは画像位置決めの不具合が起きてしまいます。この問題は近いうちに改善され、iOS Safariのためだけのセルフホストが不要になることを期待しています！
セルフホストの設定はそれほど難しくありません。グーグルのVR View GitHubからコードをダウンロードし、パブリックアクセスができる場所にホストしてください。たとえばサーバー上の「vrview」フォルダに保存した場合、「//yourdomain.com/vrview/?image=examples/coral.jpg&is_stereo=true」でアクセスできるでしょう。
他の画像を追加するには、サーバー上の置きたい場所に画像（たとえばimages/yourimage.jpg）を入れ、上記のURLを変更すれば追加した新しい画像が見られます（たとえば//yourdomain.com/vrview/?image=images/yourimage.jpg）。
もし簡単にセルフホストを試す方法を調べているだけで、使用予定ホストの準備もまだできていない場合は、GitHubページを使うのも良いでしょう。
GitHubページでVR Viewをホストする
VR Viewのダウンロードやセルフホスト以外にも、グーグルのリポジトリをフォークして、自分のGitHubアカウントでGitHubページを使ってVR Viewをホストする方法があります。
最初に、GoogleのVR View GitHub repoにアクセスし「Fork」をクリックします。
次に、リポジトリのフォークの中の「CNAME」ファイルをクリックします。
CNAMEはGitHubページにドメイン名を割り当てます。独自ドメインを設定したい場合は、GitHubページで専用ドメインを使うためのGitHubガイドに目を通してください。独自ドメインを使わない場合は、右側にあるゴミ箱をクリックして、CNAMEをフォークしたリポジトリのバージョンから削除してください。定型的なアドレスhttp://you.github.io/を使うことになります。
変更をコミットします。
最後に、フォークしたVR Viewのバージョンの中に新しいブランチ「gh-pages」を作成します。gh-pagesにあるすべての画像に、GitHubページ上でアクセスできるようになります。
http://you.github.io/vrview/?image=examples/coral.jpgにアクセスすると、VR Viewが動いているはずです。
ここまでくれば、どこにでも画像を追加できます。gh-pagesに直接追加するか、マスターに追加してからgh-pagesに移動する必要があります。GitHubに慣れていないなら、コマンドラインを使って混乱しないように、画像のフォルダを開いて、追加したい画像をドラッグ＆ドロップしましょう。
URLを更新した画像に変更すれば（たとえばhttp://you.github.io/vrview/?image=yourimage.jpg）、素晴らしい360度パノラマが見られるはずです。
やってみましょう！
SitePointのオフィスの様子を示す360度のプレビューがあります。遂にSitePointのスタッフ全員の手が空いているときに、仮想的にオフィスに立ち寄ることができるようになりました！ 右下のフルスクリーンのアイコンをクリックすればフルスクリーンで表示できます。スマートフォンなら、プレビューの隣にあるVRアイコンでフルスクリーンになります。Google Cardboardがあれば、クリックして楽しんでみてください！
my VR View GitHub PageでVR Viewの全容を見られます！
