360度VR対応のギャラリーテーマを作ってみました

本日Playstation VRが発売され、一気に一般向けにもVR（バーチャルリアリティ）が普及しそうな昨今、皆様いかがお過ごしでしょうか？プロダクトマネージャーの早瀬です。

私も個人ではRICHO THETA Sを使って、360度写真を地上や空から撮っているのですが、どうやって他の人に見せようか？というところで悩みます。

現状、他の人に見せるには以下が主な方法になります。

ただ、複数の家族でキャンプに行った時に撮った場合など以下の条件から上記方法ではなかなか見せづらいな、、と思いました。

そこでMovableType.net上で見せることができれば、基本機能としてブログ毎にベーシック認証もかけられるしプライベートな写真でも良い感じではないか？と思い、360度VRな画像を見ることのできるギャラリーテーマを作ってみました。

ブラウザ上で表現するためのJavaScriptのライブラリは、MozillaのVRチームが開発しているA-Frameを利用しています。

このライブラリをベースにして、MovableType.netのテンプレートを作成していきました。

VRGalleryテーマの使い方

まず、VR用の画像は横幅が大きいので設定＞全般の画像の最大サイズを必ずオリジナルサイズに設定します。

用意する画像に関しては通常はTHETAで撮った場合でも4MB程度になるので、画像加工ソフトなどで1MB程度に容量を減らしておくのが閲覧者に優しいかと思います。

続いて以下のVRGalleryテーマをダウンロードし、

デザイン＞テーマの現在のテーマの右上「読み込み」から読み込ませます。メインページのみの潔いテンプレートと必要なファイルなどが読み込まれます。

このテーマは最新のアイテムの1５枚をギャラリーとして表示できるようになっています。

画像の追加は、アイテム＞新規から行います。THETAなどで撮影した以下のような360度が展開されたような画像をアップロードします。

アイテムのアップロードは複数枚対応しているのでまとめて選択してアップロードが可能です。

画像もアップロードしたデモサイトは以下になります。

PCの場合はドラッグで視点を360度移動でき、中心の丸を他の画像のサムネイル画像にあわせ、丸が緑色になったらクリックをすれば画像を変更できます。
※PCの場合ブラウザによって正しく表示されない場合があります。

スマートフォンでアクセスすれば加速度センサーなどによってスマートフォンを動かしながらぐるっと見渡せるようになります。中心の丸を他の画像のサムネイル画像にあわせ数秒すると画像が切り替わります。
タブレットを使うと画面が大きく迫力があります。

さらに、右下のメガネのようなアイコンをクリックすると２眼モードになるので、スマートフォンを使ったVRゴーグルなどを使えば没入感と奥行きを感じることができます。

いかがでしたでしょうか？
イベントで撮った360度写真をまとめてギャラリーで見せたい！趣味のグループで撮った360度写真をパスワードで保護してメンバー限定で見せたい！など様々な用途でお使いいただけます。

是非実際にMovableType.net（ウェブサイト毎に14日間無料）でお試しいただければと思います！
360度画像をお持ちでない場合は以下のサンプルフォトをご利用ください。

アカウント作成は無料！同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。