読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

「A-Frame」でVR開発入門!HTMLの追記だけでスマホブラウザから好きな場所を360度パノラマ画像体験

f:id:paiza:20160523205639j:plain
どうも、まさとらん(@0310lan)です。

みなさんは、「VR(バーチャルリアリティ)」を体験されたことはあるでしょうか?

Oculus Riftのような頭に装着するデバイスが人気ではあるものの、持っている人はまだ少ないと思いますので、今回はみなさんがお持ちのスマホ」にあるブラウザで疑似体験してみようと思います。

もちろん没入感はありませんが、スマホ画面の奥に広がる「仮想的な空間」を実感することはできると思います!

■「A-Frame」を使ってみよう!

ブラウザから、簡単にVR空間を楽しめるようにしてくれるフレームワークとしてA-Frameがあります。

A-Frame

f:id:paiza:20160523205900j:plain
A-Frame」のユニークなところは、HTMLタグを追記するだけですぐにVR空間を構築できる点にあります。

例えば、公式ページで紹介されている以下の「サンプルデモ」のリンクを、スマホで開いてみてください。

サンプルデモ
Panorama — A-Frame

スマホを上下左右に傾けることで、画面の奥にまるで1つの空間があるかのようにあらゆる方向を見回せるのが分かると思います。
f:id:paiza:20160523210005j:plain

さらに、「メガネアイコン」をタップしてスマホを横向きにすると、「VRモード」で表示させることも出来ます!
f:id:paiza:20160523210038j:plain

この状態であれば、「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が公式にリリースしているストリートビュー」アプリです!

(iOSアプリAndroidアプリ)
f:id:paiza:20160523210310j:plain

このアプリを使うと、スマホに標準で搭載されているカメラを使って、360度パノラマ画像を撮影することが可能で、そのまま画像をスマホ端末に保存することもできます。

撮影方法は簡単で、まずは3つのステップでカメラを起動します。

➀「非公開」タブを表示
➁「+」アイコンをタップ
➂「カメラ」をタップ
f:id:paiza:20160523210328j:plain

カメラが起動したら、自分の好きな場所をバーチャル化していきましょう!
(今回はサンプルとして、近くの畑を撮影しました…)

撮影モードになると「黄色」の丸いアイコンが表示されるので、それに中心を合わせながら撮影していきます。
f:id:paiza:20160523210342j:plain

中心がアイコンに重なると自動的に撮影されるので、どんどん撮影していきましょう。

このようにして、自分の周囲360度あらゆる方向を撮影して画像を繋いでいくわけです。
f:id:paiza:20160523210436j:plain

全周囲の画像が撮影できたら、画面下の「チェックアイコン」が緑色になります。

そして、1枚の画像として自動合成されて完成です!
f:id:paiza:20160523210510j:plain

(この段階では非公開なので、公開される心配はありません)

自動的にスマホ端末にも画像が保存されて、こんな感じになると思います。
f:id:paiza:20160523210531j:plain

ちょっと変なカタチになっていますが、これが「360度パノラマ画像」の特徴です。

あと、画像容量が大きい(10MB程度)と思うので、適当な画像編集ソフトか「pixlr」などで再度JPGに圧縮しておくと表示が速くなって使いやすくなります。

それでは、この画像を「A-Frame」を使ってバーチャル化し、スマホブラウザで体験してみましょう!

■必要なファイルを用意しよう!

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タグ」には、先ほど作成した「画像」を指定します。

スマホで体験しよう!

それでは、スマホで確認してみましょう!

私が作ったモノは、以下のリンクから確認できるので、ぜひスマホからアクセスしてみてください!

サンプルデモ
A-Frameサンプルデモ

スマホを傾けて周囲を見回したり、VRモードにしてみたり…など、簡単なコーディングにも関わらず面白い体験が出来るのが分かります。
f:id:paiza:20160524114236j:plain

慣れると誰でも素早く作れるようになるので、自分のお気に入りスポットや旅行の想い出をVRコンテンツとして公開すると面白いのではないでしょうか。

HTMLを記述するだけでなので、「CodePen」や「JSFiddle」などのオンラインエディタを使えば公開も簡単です。

ちなみに、今回は画像だけを使用しましたが、「A-Frame」を使えば「VR動画」や「3Dモデル」など多彩なコンテンツも作ることが出来るようになっています。
f:id:paiza:20160524114308j:plain

使いこなせば「VRゲーム」なども作れるので、ご興味ある方はぜひ公式ページをチェックしてみてください!
aframe.io

今回のサンプルデモの全ソースコードは、コチラから確認できます!
github.com

paizaについて

f:id:paiza:20150730172136p:plain
ITエンジニア向けの転職・就職・学習支援サービスpaizaでは、プログラミングスキルチェック問題(9言語に対応)を多数ご用意いたしております。「プログラミング問題を解いてみたい」「自分のスキルをはかってみたい」という方にピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

今回のサンプルで体験した「360度パノラマ画像」は、類似のスマホアプリを使えば似たようなことが出来ます。

しかし、「A-Frame」使うことで、カスタマイズが自由にできるという点と、ブラウザで体験できるので「URL」をシェアするだけで、簡単に友人・知人とスマホを使って共有できる点が最大の醍醐味かと思います。(もちろんPCでも可)

応用次第では、企業サイトなどで自社オフィス内の「360度パノラマ画像」を掲載したり、飲食店などの店内レイアウトなどにも活用できそうですね。

ぜひ、みなさんもオリジナルのVRコンテンツを作り、世界中に公開してみては如何でしょうか!


<参考リンク>
「A-Frame」公式ページ

「ストリートビュー」iOSアプリ

「ストリートビュー」Androidアプリ




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編