webブラウザでARができる!「AR.js」とは?

ARが注目されていますが、スマホのカメラとブラウザでarが使えるのはご存知でしょうか。ARのことがまだよくわかっていない、arが使えるとそんなに便利なものなの?と思っている人も多いですが、どのようにすればスマホのカメラとブラウザで使えるようになるのかを知り、実際にやってみたらどんなものかがわかります。
ここでは、スマホのカメラとブラウザでarを使えるようにする方法をご紹介します。できる限りわかりやすい言葉で説明しますので、チャレンジしてみてください。

AR.jsとは?

ARとは、拡張現実のことを言います。ARを使ったサービスはいろいろあるのですが、代表的なものはポケモンGOがそうです。手持ちのスマホでarを使えるようにするには、AR.jsを使って設定をすると使えるようになります。AR.jsとは、数行のコードでARが体験できるjavascriptライブラリーを言います。
これで設定すると、アプリをインストールする必要はありません。設定が完了すればブラウザで動作するようになります。AR.jsを使うことで、カメラを設定したマーク(印)に向けると図形が表示されるようになるのです。スマートフォン推奨で、Androidなら4.4.2以上のChrome、iOSのSafariとChromeが対応ブラウザになります。自分のスマホが対応しているか確認しておきましょう。

AR.jsの使い方は?


では、AR.jsを使ってarが使えるようにしましょう。デバイス(ここではスマホ)のカメラの起動、映像をスマホに認識させる、その認識した印と図形をAR.jsが関連付けをして、表示させるのです。その図形はA-Frameで作成します。A-Frameというのは、WebVRをHTMLの記述で簡単に作れるフレームワークのことです。簡単なものならタグだけでWebVRが使えるようになります。AR.jsをダウンロードしたら、A-Frameのjsファイルを読み込みましょう。AR.jsのソースコードで、「A-Frameを読み込む」でA-Frameを読み込みます。
<script src=”https://aframe.io/releases/0.6.1/aframe.min.js”></script>
「AR.jsを読み込む」でAR,jsを読み込みます。
<script src=”https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js”></script>
次にシーンを追加します。シーンでは「a-scene」タグを使います。
<a-scene embedded arjs>
シーンを追加したらマーカーを追加しましょう。ここは、マーカーにカメラをかざした時に表示するものを記述します。あらかじめ、「hiro」というマーカーが用意されているので、a-markerでpreset=”hiro”と指定しましょう。このマーカーはダウンロードしてパソコンの画面に表示させるか用紙に印刷しておくと良いです。
<a-marker preset=”hiro”>
次にオブジェクトを追加します。
<a-sphere scale=”.25 .25 .25″ position=”0 .5 0″ color=”#111″>
<a-animation attribute=”position” to=”0 1 0″ direction=”alternate” dur=”2000″ repeat=”indefinite”>
</a-animation>
</a-sphere>
</a-marker>
これは、a-sphereで丸いオブジェクトを追加し、a-animationと入れたことにより、丸いオブジェクトのアニメーションを出すように指示しています。
最後にカメラを追加します。
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
と入力すればカメラも追加できました。
設定ができれば、動作確認をしてみましょう。動作確認の方法は、スマホで確認するので無料ホスティングサービスを利用します。
netlify URL: https://www.netlify.com/にアクセスし、変更したWebARフォルダを「フォルダをここにドラッグアンドドロップしてください」と書いてあるところにドラッグアンドドロップしてください。そうすると、「http://—.netlify.com」というようなURLができますので、http://をhttps://に変えてスマホのブラウザから開きます。カメラへのアクセスを許可するかどうかを求められるので、許可をタップします。あらかじめ用意しておいたhiroのマーカーにカメラを向け、オブジェクトが表示されればOKです。全くの初心者の人だと少し難しいかもしれませんが、この流れの通りに進めればほぼ問題なくARが体験できるようになるでしょう。いろんなサイトでもAR.jsの使い方を説明しています。ある程度パソコン操作に慣れている人であれば簡単に設定できたという声が多いです。わからない用語があれば、その用語を検索してみると良いでしょう。

まずAR.jsの使い方をマスターしよう

ARが自分のスマホでも使えるようになったら、ますます使い道が増えてスマホライフが楽しくなります。そのためには、まずAR.jsの使い方をマスターすることが大切です。
最初は何のことを言っているのかよくわからないかもしれませんが、これらの使い方をあちこちのサイトで調べて自分なりに勉強するのも良いですし、詳しい人に聞いてみるなどして設定できるようになりましょう。
慣れてくると、表示されるオブジェクトを変更することもできます。そのためにはA-Frameの知識も必要となります。パソコン、スマホはとても奥深いものですが、使いこなせるようになるととても楽しいものです。

最新情報をチェックしよう!