今年2017年は「WebVR元年」と呼ばれています。API」は、今年中にFirefoxやChromeなどの主要なWebブラウザーに実装されると言われています。なるとWebブラウザー上でVR(バーチャル・リアリティ)の体験ができるようになります。Webの開発者たちは今後WebのコンテンツのひとつとしてVRコンテンツを扱う必要が出てきます。View」を紹介したいと思います。VRについてVRはバーチャル・リアリティの略で、いわゆる仮想現実と言われているものです。ここ数年で、VR専用のヘッドセットをつけて、この仮想現実空間を体験できるようなコンテンツが急激に増え出しました。爆発的な普及と言える状況ではありません。VRコンテンツの作成が難しいというのもそのひとつの原因だと言われています。APIの仕様の策定が開始されました。API」は現在も策定中となっていますが、それと並行するようにWebでVRコンテンツを作成するツールがすでに生み出されています。Mozillaが開発するHTMLのタグを書く感覚でVRコンテンツを作成するフレームワーク「A-Frame」、VR界を牽引するOculusが開発するReactの技術でVRの開発が行えるフレームワーク「ReactVR」、こちらもMozillaが開発をしていますが、Reactで「A-Frame」を扱えるようにするReactライブラリ「aframe-react」などが有名です。これらのツールは、ある程度専門的なWebフロントエンド技術の知識が求められるので、扱うのが難しいです。View」は、それらに比べるとだいぶ敷居が低いものとなっています。View」について紹介したいと思います。View」はGoogleが提供する360度対応メディア(画像や動画)をデスクトップ、モバイル、ネイティブアプリ(iOSやAndroid)上のWebサイトに埋め込むためのツールです。「旅行サービスサイトにスキューバーダイビングを体験できるVRコンテンツ」を埋め込んだり、「不動産サービスサイトに実際に部屋の様子がわかるVRコンテンツ」を埋め込んだりして、サービスを強化することができるようになります。View」の大きな特徴として、実装がそれほど難しくないということが挙げられます。VRコンテンツさえ用意できれば、あとは自力でWebサイトに360度対応の画像や動画を表示させることができます。Viewを使って360度画像を埋め込んでみたDEMOとなります。PCであれば、ドラッグして画像を動かしてみたり、スマホであれば、さまざまな角度に傾けたりしてみたりして実際にどのようなものか体験してみてください。面白いかと思います(通信状況により画像の読み込みに時間がかかる場合があります)。Viewを使ってVRコンテンツを埋め込む方法を紹介します。詳細は以下の公式サイトのドキュメントをご参照ください。Viewを使用する環境の準備について説明します。Viewをダウンロードする必要があります。Viewをダウンロードしてください。ZIP」をクリックしてダウンロードしてください。「vrview-master.zip」というzipファイルがダウンロードされます。googlevr/vrviewzipファイルを解凍し、プロジェクトフォルダにコピーダウンロードした「vrview-master.zip」を解凍すると、「vrview-master」というフォルダとなります。この「vrview-master」フォルダをそのまま、プロジェクトフォルダにコピーまたは移動させてください。ファイルの準備プロジェクトフォルダ内に、VRコンテンツを埋め込むためのhtmlファイル(vr.html)を作成し、実際に表示するVRコンテンツ(vr-image.jpg、vr-video.mp4)を用意します。フォルダ構成を以下のようにします。(vrview-master以下のファイルやフォルダについては、実際に使用するもの以外は便宜上省略しておきます。└─vr-video.mp4これで準備は完了です。Viewは「iframeで実装する方法」と、「JavaScriptで実装する方法」があります。それぞれ説明していきます。iframeでVRコンテンツをWebページに埋め込むiframeを使ってVRコンテンツを埋め込む方法は、プロジェクトフォルダに作成したvr.htmlファイル内の任意の箇所に以下の一文を埋め込むだけで完了です。src="./vrview-master/index.html?image=../vr_iamge.jpg"></iframe>「vrview-master」フォルダに用意されたindex.htmlのパラメータ(imageまたはvideo)に対して、「表示したいVRコンテンツのパス」を指定します。(iframeのサイズは適宜指定します。)結果は以下の通りです(通信状況により画像の読み込みに時間がかかる場合があります)。JavaScriptでVRコンテンツをWebページに埋め込むJavaScriptを使って実装する場合は、若干手順が増えます。iframeのところでは画像を使ったので、こちらは動画を使って実装方法を説明していきます。Viewの本体となっているので、この「vrview.js(vrview.min.js)」をvr.htmlファイルにscriptタグを使って読み込みます。版も用意されています。CDN版を使用する場合は、以下をvr.htmlファイルに記述します。src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>HTMLの実装プロジェクトフォルダに作成したvr.htmlファイル内の任意の箇所にVRコンテンツを表示するための要素を記述します。id="vrview"></div>JavaScriptの実装プロジェクトフォルダに作成したvr.htmlファイル内に以下を記述します。});}</script>コンテンツがロードされた際にonVrViewLoad関数が呼び出されるようになっています。onVrViewLoad関数内のVRView.Playerオブジェクトのインスタンスを作成する際に、第一引数に「VRコンテンツを表示する要素のid名」、第二引数に「各種設定内容(使用するVRコンテンツのパスなど)」を渡すようにします。結果は以下の通りです。動画のVRコンテンツを埋め込んだので、当たり前ですが、VRコンテンツには動きがあります。これはこれで面白いですね。Viewにはいくつかのオプションも用意されています。オプションについての詳細は以下を参照してください。Viewのオプションiframeで実装する場合は、「vrview-master」内のindex.htmlファイルにつけるパラメーター、JavaScriptで実装する場合は、VRView.Playerオブジェクトの第二引数に渡すパラメーターを使って指定します。Viewで使用する画像や動画については、以下のような仕様のものを使うことを推奨されています。推奨する「画像」の仕様png、jpeg、gifで保存された画像。2,048のステレオ動画の両方を提供することを推奨まとめいかがでしたでしょうか。iframeで実装する場合は、1行のみでVRコンテンツをWebサイトに埋め込むことができます。JavaScriptで実装する場合も、パターンを覚えればさほど迷わずVRコンテンツをWebサイトに埋め込むことができるかと思います。Viewを利用されることをおすすめします。VRコンテンツを自分で作成するのは難しい場合もあるかと思います。今回は私はサンプルを作るにあたってflickrを利用させてもらいました。VR用の画像や動画がたくさん見つかります。クリエイティブ・コモンズのものも用意されているので、ライセンスに気をつけてお使いください。Flickrなお、以下のような有料のサービスもあります。クオリティが高いかと思います。このようなサービスも使ってVRコンテンツを探されると良いでしょう。動画・パノラマもちろん360度カメラを購入して、自分でコンテンツを用意しても良いでしょう。以下は、2017年6月1日発売のサムスン製の360度カメラです。4K画質の360度動画を24fpsで撮影が可能で、自分も欲しいなと思っている360度カメラです。360Amazon.co.jpで詳細を見るそれから、やはりVRコンテンツをWebサイトに実装したら、自分でも確認してみたいと思うはずです。VR専用のヘッドセットも、だいぶ安価なものが出てきています。Cardbordに準拠した組み立て式のものを選ぶとよいでしょう。1,000円以下で購入可能です。(Cardbordを選ぶ際は、Cardboardの上に操作ボタンがついているものを選ぶことをオススメします。→コメント初めまして。Viewを使ってインラインする方法を検索し、前田さんのブログにたどりつきました。ほとんどプログラミングについては素人レベルです。Viewの本体となっている”「build」フォルダ内にある「vrview.js(vrview.min.js)”が見当たりません。このvrview.js(vrview.min.js)はどのように準備をすれば良いのか?行き詰まっています。山田さんコメントありがとうございます。今vrviewのドキュメントを改めて読んでみたら、2017年6月13日にプレビルド版(つまりvrview.min.js)はソースから削除されたようです。buildを実行するように書かれているので、試してみてください。当記事の内容も書き直す必要がありますね...。返信はじめましてNAKAと申します。Maeda様の当ページを参考に(というかそのまま)ホームページへiframeにて埋め込みをしたのですが、chromeですと、正常に表示されるのに、IEになると、くるくる回る画像のみで全然表示されません。IEは11を使用しております。IE対策でなにかなさっているのでしょうか。よろしければご教授くださいませ。返信NAKAさんはじめまして。コメントありがとうございます。11にも対応しているので、正しく動かない原因として考えられることとしては、addEventListenerでしょうか。11の設定で互換表示が有効になっていた場合、addEventListenerがおそらく機能しないはずです。返信ご返信ありがとうございます!多忙のためしばらく訪れていなかったため、お礼が遅れてしまいました。addEventListenerというのは、よくわかっておりませんが調べながらやってみます。本当にありがとうございます。何度も申し訳ございません。なんとか解決できました。Googleの最新のvrviewをzipでダウンロードし、解凍したものをそのままアップして、という感じで埋め込んでいたのです。」のところを、Maeda様のindex.htmlと同じように「」に書き換えて、buildディレクトリに、Maeda様のところから拝借させていただいたvrview-analytics.min.jsを投入したところ、chromeもIEも正常に開くことができました。Googleの最新のvrviewがダメだったようです。右往左往しましたが、Maeda様のページが本当に参考になり、解決することができました。本当にありがとうございました。11に対応していなかったみたいですかね。何はともあれ解決されたということで、良かったですね。vrviewは、VRコンテンツを手軽にサイトに表示できるので便利ですよね。ところで、書き込んでいただいたコメントですが、消えてしまっている部分があるかと思います。タグを入力されたんじゃないかと思いますが、このコメント欄には直接タグは入力できないようになっています。説明がなくてすみません。タグを入力される場合は、半角の&lt;と&gt;をお使いください。今後ともよろしくお願いいたします。Viewって面白いなー、と記事を読み進めていました。Viewを使って色々オプションを膨らませていきたいな、と思ったのですが、ifameを使ったやり方とJavaScriptでのオプションの実装では、JavaScriptの方が少々面倒な印象でしたが、JavaScriptでのオプション実装のメリットってあるのでしょうか?初心者で申し訳ないのですが、iframeを使わず、iframeより手間のあるJavaScriptでのオプション実装に「?」となりました。何か理由があれば教えていただきたいです。返信YAMAさんコメントありがとうございます。Viewを実装したい場合は、仰るように実装が簡単なiframeを使うと良いと思います。Viewを表示させたい場合や、オプションを動的に指定したい場合などが挙げられます。Viewを使ったWebアプリのようなものを作る場合はJavaScriptで実装することになります。今後ともよろしくお願いいたします。こちらの記事を元に初心者ながら試みてみました。どの段階で間違えたのかご指導賜わりたくご連絡致しました。clone3、ユーザーディレクトリにvrviewが作成される4、vrviewをデスクトップに作った新規フォルダに入れる。5、vrviewと同じく、VR画像を置く。HP上で右クリックして別名保存したHPのHTMLを置く。src="./vrview/index.html?image=../vr-image.jpg"></iframe>と入力。フォルダ名は元から「vrview」だったため。「vr-image.jpg」はハイフンに用意した画像名と合わせました。7、保存し、HTMLを開く。表示といった流れです。ご教授頂けましたら幸いです。返信MOTOYAさんコメントありがとうございます。└─vr-video.mp4エラーメッセージの内容からすると、../vr-image.jpgから画像をロードできないということなので、画像を置いた場所が間違っている可能性があります。./vrview/index.htmlファイルから見た相対パスで指定する必要があるので、vrviewと同じディレクトリにvr-image.jpgを置く必要があります。ご不明点などあれば、ご遠慮なくお知らせください。今後ともよろしくお願いいたします。対応くださりありがとうございます。自分なりに考えうることをしてみましたが、変わりなく詰んでいます。ご指摘のとおり、画像の場所を確認しましたが、おそらく間違いはないかと。変えたり、画像自体を違うものに変えたり、画像も2:1で推奨比ですし、、、1からやり直しも試みてみましたが変わらず。src="./vrview/index.html?image=../vr-image.jpg"></iframe>挿入先のサーバー(lollipop)やサイトについてはwordpressですが、そういった挿入先の影響は考えられますか?ご意見頂けましたら幸いです。返信MOTOYAさん以下のまま挿入したということですね。src=”./vrview/index.html?image=../vr-image.jpg”></iframe>そうしましたら、./vrview/index.htmlのパスを見直すと良いかもしれません。WordPressだとパスが複雑になっていて間違いやすかったりするので、絶対パスで指定してみるとよいかもしれません。何かあれば、またご連絡ください。maechabinホーム目次トップ。