Movable Type.net

MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

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

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

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

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

  • THETA公式サイト等に写真を投稿して、そのページか提供されるプレイヤー(スクリプトコード)を貼り付けて見せる。
  • Facebookが今年対応したのでFacebookにアップロードする

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

  • 公式のサイト貼り付け系は基本公開が前提なのでプライベートなものは上げられない
  • Facebookの場合、Facebookを使っていない人に見せられない

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

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

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

VRGalleryテーマの使い方

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

画像最大サイズの設定画面

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

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

VRGallery.zipをダウンロード

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

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

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

360度展開画像

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

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

http://demosite.movabletype.io/vrgallery/

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

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

VRGalleryをタブレットで開いた写真

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

VRゴーグルでみた場合

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

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

SamplePhoto.zipをダウンロード

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

アカウント作成

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス