【A-Frame】Web制作者でも簡単！Webの技術で「VRコンテンツ」を作る方法！
少し前から個人的にやっていることを少し「まとめ」ておこうと思います。
以前は「AR」を個人的にいろいろと調べてやっていました。しかし「junaio（ジュナイオ）」がAppleに買収されて使えなくなってしまったので現在「AR」は保留状態。
「AR」を個人的にやっていた当時「VR」にも興味がありましたが、「Oculus Rift」などの機材が高く手が出せないなぁ～っと思っていました。
ポチップ
それでも何か簡単に「VR」らしき事ができないかとネットで調べていると『Webの技術でVRができる』ことをしりました。
mozillaが「A-Frame」というWebVRの基礎となるテンプレートを出していることを知ったのが1年ほど前でした。
A-Frameも今やヴァージョン0.5.0となりましたので、一回個人的にやった事などを「書き留め」ておこうと思います。
【A-Frame】の続編記事「【A-Frame】360°VRバーチャルツアー制作！VR空間のボタンクリックで「説明パネル」を表示する。」を公開しています。
【A-Frame】に興味のあるあなた！、360°VRバーチャルツアーを作ってみたいあなた！におススメの記事です。ぜひ読んでみてください！
この記事の目次
A-Frameについて
A-FrameはMozillaが出しているWebVRのフレームワークで、簡単なHTML、CSS、JavaScriptの記述でVRを表現できます。
現在のヴァージョンは0.5.0ですが、初めのころのA-Frameとは少し記述方法が変更、追加されていますので、ネット検索ででてくるA-Frameの記事が古い場合は、最新版の0.5.0では動かない場合がよくあるので、うまく動かない場合はA-Frame公式サイトのドキュメントで確認する事をおススメします。
またA-Frame公式のGitHubから、A-Frameのサンプルがダウンロードできます。サンプルを見るとA-Frameを試すのにたいへん参考になります。
A-Frame のインスペクタ機能
A-Frameには「A-Frame Inspector」という、シーンを確認したり微調整するためのビジュアル・ツールがついています。このビジュアル・ツールはA-Frameのヴァージョン0.3.0辺りからついている機能ですので、0.3.0以前のA-Frameを使用していると使うことができません。
「A-Frame Inspector」を使用するには、ショートカット（＜ctrl＞ + ＜alt＞ + i ）を押すと画面の左に表示されます。
A-Frameのシーン内に配置したエンティティを選択し、移動や回転、複製や削除することができます。画面制作時には、かなり役立ちますし、画面を見ながらなのでエンティティの配置なども簡単にできます。
A-Frame内での日本語表示
現在までのA-Frameのヴァージョンで日本語（マルチバイト）の表示には、まだ対応できていない状態らしいです。
A-Frame V0.5.0のコンポーネントでテキストを表示する物がありますが、「日本語」を記述してもA-Frame内には表示されません。
しかし有志の方によっていくつかのテキスト表示用のプラグインが出ています。その中のプラグインで「日本語」表示ができる「HTML Shader」がおススメです。その他のテキスト専用プラグインは、マルチバイトに未対応だったりします。
HTML Shaderは、テキスト専用のプラグインという訳ではないのですが、JavaScriptで読み込むHTML内に「日本語」を記述する事ができ、A-Frame内の3D空間にちゃんと表示してくれます。
360°パノラマ写真の表示
A-Frame内でRICOH THETASや一眼レフで撮影した360°パノラマ写真を表示するのは意外と簡単にできます。
A-Frameの＜a-scene＞内に＜a-sky＞コンポーネントを使用して360°パノラマ写真を読み込ますだけ！！
下記の様のに、HTMLの記述も非常に短いです。
＜!DOCTYPE html＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞360°パノラマ写真＜/title＞
＜script src="js/aframe.js"＞＜/script＞
＜/head＞
＜body＞
＜a-scene＞
＜a-sky src="images/images.jpg"＞＜/a-sky＞
＜/a-scene＞
＜/body＞
＜/html＞
またVRを楽しむには、A-FrameをアップしたURLにスマートフォンでアクセス！！
上の写真の様に、画面右下にVRゴーグルのマークがあるのでタップ！！
あとは表示される画面の指示に従いスマートフォンをVRゴーグルに横向きにセットすれば、写真の中に入っている様な体験ができます。
ポチップ
Googleストリートビュー認定プロフォトグラファー
個人的に、昨年の後半に「Googleストリートビュー認定プロフォトグラファー」になる事ができ、Googleストリートビューのインドアタイプの写真を撮る機会が少しずつ増えてきてます。
基本Googleストリートビューは、一眼レフのカメラと魚眼レンズを使用して撮影した物を360°パノラマ写真へ編集しGoogleへ登録しますが、いろいろとGoogleの決まり事があり、お客の望む写真が掲載できない場合もあります。
そこで、A-Frameを使用してGoogleストリートビューの様に店舗内を歩き回ったり、屋外を歩き回ったり出来るように、360°パノラマ写真を作成しHMDやVRゴーグルとスマートフォンを使ってVR-ヴァーチャルツアー体験をできないものかと試行錯誤してます。
A-Frameのサンプルの中で、VR-ヴァーチャルツアーに近いサンプルもあるのですが、何度か試していますが思うようなアイディアが浮かんでこない状態です。
VRについて思う事（かなり個人的な感想）
【ご注意】こちらに書きました事は、かなり個人的な意見となっていますので、気分を害する方は読み飛ばしてください。
個人的にVR（仮想現実）コンテンツは、HMD（ヘッドマウントディスプレイ）やVRゴーグルを使用して、いわゆる「没入感」が体験できる状態の物（コンテンツ）をVRコンテンツだと思っています。
最近よくあるホームページ上に「ヴァーチャルツアー」的な360°パノラマ写真を掲載し「VR」体験できます！や、美術館などでタブレットを貸し出し、そのタブレット内で360°パノラマ写真に音声案内をつけた「ヴァーチャルツアー」を「VR」と言っているのは、なんだか個人的には違う気がしています。
VR（仮想現実）コンテンツは、会社や美術館などの現地に行く事なく、その場にいるような体験（没入感）ができる状態の物（コンテンツ）であると思っています。
はやく様々なVRコンテンツの事例がでてきて、広く皆さんに周知されると良いと思っています。
参考サイト
今回の記事で参考にさせて頂いたサイトです。
