VR・AR・MR・IoTなメディアの話題・ニュース・コラム

VRonWEBMEDIA(ヴイアール・オン)

WebVRをイチから始めてみたその4・A-Frameのサンプルを1行ずつ解説しながらWebVRの進化に驚く

投稿日:

久しぶりにこんにちわこんばんわ。

皆さんがお使いのPCはもちろんのこと、スマートフォンのウェブブラウザでもダイレクトにVRコンテンツを取り扱うことのできる「WebVR」についてつづるコラム、その第4回です。

前回、こんなものを書いてみましたね。

デカい!

で、このHTMLで表示できるサンプルがこちらでした。(ボタンをクリック!)

A-Frame(WebVR)のサンプル

 

で、真っ赤な立方体がぐりぐりできますよ! という内容を紹介して終わってしまったんでした。

あのたった10行のサンプルを無駄に1行ずつ解説!

このサンプルページは「WebVR」の一つであります「A-Frame」を使用しているのですが、今回はそれらを1行ずつ1行ずつご説明していくことで、「これって超~~~カンタンに書けるのにすげええええことやってるんすよ!」ということをとりあえずアピールしてみたいと思います。たまにはこんな記事も、いいじゃない?

<!DOCTYPE html>
<head>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-cube position="0 1 0" color="#d00"></a-cube>
<a-sky color="#EEE"></a-sky>
</a-scene>
</body>

僅か10行です。まず1行め。

<!DOCTYPE html>

このファイルはHTMLですよー! てゆうか、そこまで書いてないように見えるけど、私実はHTML5なんですよー! ……と宣言しています。

ブラウザさんはこのファイルを見た瞬間にこの1行目を読み込んで、「ハイハイHTML5ですねー」と認識し、ブラウザで読み込んだ内容を表示させようとするわけです。結構長く説明できたな。

<head>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
</head>

<head>というのはヘッダーと言いまして、HTMLの本文(<body>)の前に入れて、この文書は何というタイトルで~、どういうプログラムを読み込んでいて~、文字の装飾(CSS)にあれやこれやをつかってまして~、みたいな情報を書いておく部分になります。

よし、これで<body>の説明が省けたぞ。

で、ここに書いてあるとっても重要な情報が、<script src="https://aframe.io/releases/latest/aframe.min.js"></script>というヤツでございます。「えー、このHTMLではですね、A-FrameというフレームワークをJavascriptを使って読み込んでおります!」と申しております。ここでこのA-Flameを読み込むことで、上のような仕組みを利用できるのですね。

なお、HTMLでは「<」や「>」の不等号を使った「タグ」で、文章を<hogehoge>…</hogehoge>という形で挟むようにすることで、書かれたタグのコマンドを認識することができますので、覚えておくといいですよ!

<body>

の説明はしたからいいや(本文ですよー、というタグ)。

<a-scene>
<a-cube position="0 1 0" color="#d00"></a-cube>
<a-sky color="#EEE"></a-sky>
</a-scene>

さあ! いきなり核心です!

まずこの<a-scene>というタグに注目。このタグに囲まれている中にあるものが、VR空間の中にて構成されるオブジェクト(球とか、立方体とか、動画とか、背景とか)になります。そのオブジェクトを入れる場所を決めているのがこれです。

つづいて<a-cube>というタグが出てきました。これが直方体のオブジェクトを置くためのタグです。あの赤いヤツね。

a-cube の後に続くのがいわゆるパラメータ、設定情報みたいなやつです。positionというのは「オブジェクトを置くポジション」。3つ数字がありますが、3次元式でいうところの「x軸」「y軸」「z軸」に対応していて、この数字をいろいろいじくると配置が換わります。colorはそのまま色の設定です。

もう一つでてきましたね。<a-sky>というタグ。これは背景を置くためのタグでございまして、ここではグレーの背景を置くために色の設定だけを入れてあります。背景だけに「sky」って、ちょっとロマンチックじゃない?

つまり、このa-sceneタグの中に様々なオブジェクトを配置していくことで、自分の思う通りのVR空間を組み立てていく……というのがまず初めの一歩、ということになります。

</a-scene>
</body>

で、タグを閉じて終了。

これだけですよ? はい、これだけですーー(無邪気)。これでスマホで見たうえで右下にあるVRボタンをタッチすればちゃんとVRで見られるってんですから、スゴイ時代になったもんです!(対応しないスマホ・ブラウザがありますので、予めご了承ください)。

A-Frameだけじゃない! WebVRの新たな可能性に迫る(次回予告的なもの)

さて、次回ではVRon的に大本命! 実際の画像や動画を使って「VR動画的なサンプルページ」を作ってみようかなと思っておりますが、その前にこんな動きがあったので、前フリを兼ねてご紹介しましょ。

A-FrameはFireFoxでおなじみのmozillaが開発を行っていますが、FaceBookだって負けてないですよ!

こちらはsitepointの6月20日の記事をWPJさんが日本語化しているものでございまして、今年の4月にFaceBookが行ったプレスカンファレンス「F8」で発表したのが、こちらのオープンソースのフレームワーク「React VR」。

元々FaceBook上のアプリを開発するためのフレームワークが「React」って名前なんですが、これはそのVR版ですね。A-frameに比べると導入の敷居が高めではありますが、FaceBookのフレームワークを扱っている方にはかなりよさげな感じみたいですね。

こんな感じで、様々な形でWebVRを使った試みが今も続けられております。この特集ではそんなWebVRの最新動向も追いかけていきながら、ゆるーくWebVRのオリジナルサンプルを作っていきますので、今後もお楽しみに!

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

Twitter で

オススメ記事

1

「セカンドライフ」運営で知られますLinden Labが2日、「ソーシャルVRプラットフォーム」として開発中の「Sansar」をクリエートベータとして一般に公開しました。 Linden Labがセカン ...

2

日本各地で展開されているVR・ARアトラクションの情報を、VRonが発見した順に随時纏めています。取り上げているのは、 Oculus RiftやHTC Viveなどを使用し、フロアマーカーに対応したV ...

3

こんにちわこんばんわ。81plusです。 寒いけど晴れたので、会社のベランダにGear VRを乗っけて撮影してみました。VRゴーグルのある日常、みたいな。   先日、私の友人からこんな質問を ...

-コラム, 特集
-, , , , ,

Copyright© VRonWEBMEDIA(ヴイアール・オン) , 2017 All Rights Reserved.