Google、WEBサイトに360°VR画像を埋め込み可能にするVR Viewを公開

2016.3.31
Google-Cardboard-2-640x360

Googleが簡単にVRを楽しめるよう、WEBサイトに360°VR映像を埋め込める VR Viewというツールをリリースしました。これを使うとWEBサイトやアプリなどに簡単に360°VR画像や動画を埋め込むことが可能です。

WEBサイトでのVR Viewの使い方

アプリへの埋め込みについては門外漢なので、ここではWEBサイトへの埋め込み方法を紹介します。

埋め込むコード

埋め込むコードは下記のような<iframe>タグです。

<iframe width="100%" allowfullscreen frameborder="0" src="//storage.googleapis.com/vrview/index.html?image=//photovrse.com/examples/coral.jpg&is_stereo=true"></iframe>

上記のコードを埋め込むと下のように表示されます。

まずiframeタグのオプションですが、これはこのままでいいと思います。

  • frameborder="0" :ボーダーを表示しない
  • width="100%" : フレームサイズを横幅いっぱいにする。
  • allowfullscreen : フルスクリーン表示の許可

本番はその先に続く「src="~"」部分です。

最初の「//storage.googleapis.com/vrview/index.html」はVR Viewのスクリプト本体です。自身のサイトにホストすることもできますが、このままGoogleのものを利用することも可能です。それに続くパラメータは下記のようになっています。

  • image :{文字列} 360°画像や動画のURLです(必須)
  • is_stereo : {Boolean} 画像や動画がステレオフォーマットであればtrueにします。デフォルトはfalseです。
  • preview : {文字列} 実際の画像や動画とは別に最初に表示されるプレビュー用の画像があれば指定します。デフォルトはnoneです。
  • start_yaw : {数値} 最初に表示される角度。デフォルトは0です。
  • is_yaw_only : {Boolean} trueにすると表示が左右方向にみに制限されます。デフォルトはfalseです。

Richo THETAやCardboardカメラで撮影した画像が利用可能

気軽に360°画像を埋め込めるようになったとはいえ、そんなものを気軽に撮影する方法はなかったりもするのですが、一般的なパノラマ画像も埋め込んで再生が可能だそうです。公式には、

で撮影した画像が使えるということです。

下記は試しにCardboardカメラで撮影したもの。先の例は画像もGoogleのものでしたが、下記はVR View本体と画像をこのブログ上に置いています。

一応見れるけど、なんか違う気がします。設定間違えてるのかな?これは追々調べてみます。

そんな感じでVR Viewが使えるようになったので、Thetaが欲しくなってきたなぁ。

(source Google)

タグ: , ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

綾瀬はるかが「おつかれさま!」と労ってくれる、ジャイアントコーンのVR体験イベントが開催中【PR】

綾瀬はるかさんが出演しているCMでおなじみのグリコのアイス、ジャイアントコーンがVRコンテンツを作成し、その体験を行うということで早速参加してきて来ました。 ジャイアントコーン「おつかれさまです!」V

moto X(2017)とされる実機画像が流出 デュアルカメラを搭載か?

motorolaの未発表モデル、moto X(2017)とされる画像がGoogle+で公開されています。 moto Xといえば、現行のmoto Zが発売されるまでのフラッグシップシリーズ。Fastbo

Android父、開発中のベゼルレスな新端末をチラ見せ

Androidの産みの親、Andy Rubin氏が、自身が立ち上げた新会社Essentialで開発している端末をTwitterでチラ見せしています。 I'm really excited ab

ついつい時間を忘れてしまいそう。手持無沙汰を解消するHand Spinnerを購入。

以前から気になっていたHand Spinnerを購入してみました。 今回は珍しくGeekBuyingで購入したのですが、あとから調べたら日本のAmazonでも売っていました。もっとも日本だと2000円

米Amazon、Prime Exclusive Phonesにmoto G5 PlusとAlcatel A30を追加、広告表示の代わりに価格を割引

米Amazonがプライム会員向けにSIMフリー端末を販売するPrime Exclusive PhonesにMoto G5 PlusとAclatel A30を追加しました。現在Prime Exclusi

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

名前だけは聞いたことはあるものの、使っている、活用しているという話をあまり聞かないMiracast(ミラキャスト)、どんなものかと思って実際に使ってみました。 ...

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEIが若者向けのシリーズとしてあらたに投入したのnova、その下位モデルという位置づけのnova liteを購入してみました。 nova liteは公式ショップや量販店では販売しておらず、...

ついつい時間を忘れてしまいそう。手持無沙汰を解消するHand Spinnerを購入。

ついつい時間を忘れてしまいそう。手持無沙汰を解消するHand Spinnerを購入。

以前から気になっていたHand Spinnerを購入してみました。 今回は珍しくGeekBuyingで購入したのですが、あとから調べたら日本のAmazonでも売っていました。もっとも日本だと20...

moto X(2017)とされる実機画像が流出 デュアルカメラを搭載か?

moto X(2017)とされる実機画像が流出 デュアルカメラを搭載か?

motorolaの未発表モデル、moto X(2017)とされる画像がGoogle+で公開されています。 moto Xといえば、現行のmoto Zが発売されるまでのフラッグシップシリーズ。Fas...

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

上位機種のHUAWEI P9と同等のスペックを持つhonor 8の詳細レビュー。HUAWEI P9やASUS ZenFone 3と比較しながら紹介します。...

MENU

back to top