久しぶりにこんにちわこんばんわ。
皆さんがお使いの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だって負けてないですよ！
【気になる！】WebVRの本命なるか？ Facebook発のライブラリー「React VR」を使ってみた https://t.co/05zujvU0fW
— VRon -VRARニュースブログ- (@VRonjp) June 21, 2017
こちらはsitepointの6月20日の記事をWPJさんが日本語化しているものでございまして、今年の4月にFaceBookが行ったプレスカンファレンス「F8」で発表したのが、こちらのオープンソースのフレームワーク「React VR」。
元々FaceBook上のアプリを開発するためのフレームワークが「React」って名前なんですが、これはそのVR版ですね。A-frameに比べると導入の敷居が高めではありますが、FaceBookのフレームワークを扱っている方にはかなりよさげな感じみたいですね。
こんな感じで、様々な形でWebVRを使った試みが今も続けられております。この特集ではそんなWebVRの最新動向も追いかけていきながら、ゆるーくWebVRのオリジナルサンプルを作っていきますので、今後もお楽しみに！