どうも、まさとらん（@0310lan）です。
みなさんは、「VR(バーチャルリアリティ)」を体験されたことはあるでしょうか？
「Oculus Rift」のような頭に装着するデバイスが人気ではあるものの、持っている人はまだ少ないと思いますので、今回はみなさんがお持ちの「スマホ」にあるブラウザで疑似体験してみようと思います。
もちろん没入感はありませんが、スマホ画面の奥に広がる「仮想的な空間」を実感することはできると思います！
■「A-Frame」を使ってみよう！
ブラウザから、簡単にVR空間を楽しめるようにしてくれるフレームワークとして「A-Frame」があります。
【 A-Frame 】
「A-Frame」のユニークなところは、HTMLタグを追記するだけですぐにVR空間を構築できる点にあります。
例えば、公式ページで紹介されている以下の「サンプルデモ」のリンクを、スマホで開いてみてください。
スマホを上下左右に傾けることで、画面の奥にまるで1つの空間があるかのようにあらゆる方向を見回せるのが分かると思います。
さらに、「メガネアイコン」をタップしてスマホを横向きにすると、「VRモード」で表示させることも出来ます！
この状態であれば、「Oculus Rift」や「Google Cardboard」などを使って没入型VR体験も実現できるので便利です。
ちなみに、「このようなサンプルを作るのは難しそう…」と思うかもしれませんが、実はソースコードを見てみると…わずか3行のHTMLタグを追加しているだけなのです！
<!-- index.html --> <a-scene> <a-sky src=”img/*******.jpg"></a-sky> </a-scene>
「360度パノラマ画像」を、「a-skyタグ」に指定するだけです。
これならば、画像さえ用意すれば誰でも簡単にWebへ公開してシェアすることが出来ると思いませんか？
■Google公式アプリで「360度パノラマ画像」を作ろう！
さて、手っ取り早く「360度パノラマ画像」を作成するにはどうすれば良いでしょうか？
専用のカメラやデバイスが販売されていますが、一番簡単な方法はスマホアプリを使って撮影することでしょう。
そこで、個人的にオススメなのはGoogleが公式にリリースしている「ストリートビュー」アプリです！
このアプリを使うと、スマホに標準で搭載されているカメラを使って、360度パノラマ画像を撮影することが可能で、そのまま画像をスマホ端末に保存することもできます。
撮影方法は簡単で、まずは3つのステップでカメラを起動します。
➀「非公開」タブを表示
➁「＋」アイコンをタップ
➂「カメラ」をタップ
カメラが起動したら、自分の好きな場所をバーチャル化していきましょう！
（今回はサンプルとして、近くの畑を撮影しました…）
撮影モードになると「黄色」の丸いアイコンが表示されるので、それに中心を合わせながら撮影していきます。
中心がアイコンに重なると自動的に撮影されるので、どんどん撮影していきましょう。
このようにして、自分の周囲360度あらゆる方向を撮影して画像を繋いでいくわけです。
全周囲の画像が撮影できたら、画面下の「チェックアイコン」が緑色になります。
そして、1枚の画像として自動合成されて完成です！
（この段階では非公開なので、公開される心配はありません）
自動的にスマホ端末にも画像が保存されて、こんな感じになると思います。
ちょっと変なカタチになっていますが、これが「360度パノラマ画像」の特徴です。
あと、画像容量が大きい(10MB程度)と思うので、適当な画像編集ソフトか「pixlr」などで再度JPGに圧縮しておくと表示が速くなって使いやすくなります。
■必要なファイルを用意しよう！
「A-Frame」を利用するのに必要なモノは「HTMLファイル」1つだけです！
そこで、「index.html」ファイルを作成しましょう。
<!-- index.html --> <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>A-Frameサンプルデモ</title> <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script> </head> <body> </body> </html>
まずは、最小限の構成です。
「head要素」に「A-Frame」のJavaScriptファイルを読み込んでおけば、もう準備完了です！
冒頭でも少し触れましたが、「360度パノラマ画像」を表示するだけであれば、わずか3行のHTMLタグを追記するだけでOK！
<!-- index.html --> <body> <a-scene> <a-sky src="img/farm.jpg"></a-sky> </a-scene> </body>
「a-skyタグ」には、先ほど作成した「画像」を指定します。
■スマホで体験しよう！
それでは、スマホで確認してみましょう！
私が作ったモノは、以下のリンクから確認できるので、ぜひスマホからアクセスしてみてください！
スマホを傾けて周囲を見回したり、VRモードにしてみたり…など、簡単なコーディングにも関わらず面白い体験が出来るのが分かります。
慣れると誰でも素早く作れるようになるので、自分のお気に入りスポットや旅行の想い出をVRコンテンツとして公開すると面白いのではないでしょうか。
HTMLを記述するだけでなので、「CodePen」や「JSFiddle」などのオンラインエディタを使えば公開も簡単です。
ちなみに、今回は画像だけを使用しましたが、「A-Frame」を使えば「VR動画」や「3Dモデル」など多彩なコンテンツも作ることが出来るようになっています。
使いこなせば「VRゲーム」なども作れるので、ご興味ある方はぜひ公式ページをチェックしてみてください！
aframe.io
今回のサンプルデモの全ソースコードは、コチラから確認できます！
github.com
■まとめ
今回のサンプルで体験した「360度パノラマ画像」は、類似のスマホアプリを使えば似たようなことが出来ます。
しかし、「A-Frame」使うことで、カスタマイズが自由にできるという点と、ブラウザで体験できるので「URL」をシェアするだけで、簡単に友人・知人とスマホを使って共有できる点が最大の醍醐味かと思います。(もちろんPCでも可)
応用次第では、企業サイトなどで自社オフィス内の「360度パノラマ画像」を掲載したり、飲食店などの店内レイアウトなどにも活用できそうですね。
ぜひ、みなさんもオリジナルのVRコンテンツを作り、世界中に公開してみては如何でしょうか！
＜参考リンク＞
・「A-Frame」公式ページ
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
