クリック単価11円の男 / セールス
 クリック単価11円の男 / セールス
  2. Web制作
  3. あのARをブラウザで体験できる！「AR.js」であそんでみた
2018.10.11

あのARをブラウザで体験できる！「AR.js」であそんでみた

ハル
2018.10.11
Web制作 フロントエンド

こんにちは、フロントエンドエンジニアのハルです。

最近カメラにハマっています。一眼カメラを買いました。

ほかにもカメラで何か面白いことできないかなと考えていろいろ調べていたら、スマホのカメラとブラウザでARが使えることを知りました。遊びながら記事を書いたのでふわふわした内容になりましたが、気楽に読んでいただけたらと思います。

※ARとは……「Augmented Reality」の略で、「拡張現実」のこと。デバイスのカメラの映像を認識して、その映像にオブジェクトやテキスト情報など表示するような技術のことを言う。ARを利用した代表的なサービスのひとつに『ポケモンGO』がある

目次

  1. AR.jsとは
  2. AR.jsをつかってみる
  3. 動作確認をしてみる
  4. できた
  5. まとめ

AR.jsとは

数行のコードでARを体験できるjavascriptライブラリです。

three.jsとjsartoolkit5をベースにしているため、アプリのようなインストールは不要。webブラウザ上でも動作します。

AR.jsを使うと、「決められたマーカーにカメラを向けるとオブジェクトを表示する」よう簡単に設定することができます。

ドキュメントには、

スマートフォン推奨で
対応ブラウザは
– Android 4.4.2 以上のChrome
– iOSのSafariとChrome

と書いてあります。詳しくはこちらからドキュメントを確認してください。
https://github.com/jeromeetienne/AR.js/blob/master/README.md#browser-support

AR.jsをつかってみる

今回のソースコード

<!DOCTYPE html>
<head>
  <!-- ① A-Frame を読み込む -->
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
  <!-- ② AR.js を読み込む -->
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin: 0; overflow: hidden;'>
<!-- ③ シーンを追加 -->
<a-scene embedded arjs>
  <!-- ④ マーカーを追加 ここから -->
  <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-entity camera></a-entity>
</a-scene>
</body>
</html>

基本的にドキュメント(README)で紹介されているソースですが、ポイントを紹介したいと思います。（参考URL: https://github.com/jeromeetienne/AR.js#augmented-reality-for-the-web-in-less-than-10-lines-of-html）

全体を見てわかるかと思いますが、javascriptを書いていません。

実はA-FrameというWebVRフレームワークに沿って記述することで、javascript自体を書かずに、タグだけで完成させられるんです。上から順を追ってざっと説明していきたいと思います。

scriptでライブラリ等を読み込む

① A-Frame を読み込む
② AR.js を読み込む
の行で、まずは『A-Frame』と『AR.js』を読み込んでいます。

body部分を追記する

③ シーンを追加
まず、シーンを追加するのに
『a-scene』タグを使います。

④ マーカーを追加
の部分でマーカーにカメラをかざしたときに表示するオブジェクトを記述しています。

ここでは『a-marker』タグの『preset=”hiro”』でマーカーの指定をしています。

あらかじめ用意されている『hiro』というマーカーがあります。
（マーカーURL: https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg）

また、『④ マーカーを追加』記述されている『a-marker』タグは『A-Frame』のドキュメントにはなく、『AR.js』での拡張されたタグのようです。
（『A-Frame』のドキュメントURL: https://aframe.io/docs/0.8.0/introduction/）

⑤ オブジェクトの追加
『a-sphere』タグで、丸いオブジェクトを追加。その入れ子の中に『a-animation』で丸オブジェクトのアニメーションを指示しています。

詳しいことは、別で『A-Frame』を紹介する記事を書こうかと思います。今回は、「これだけでアニメーションもできて、簡単！」というのを感じてもらえれば幸いです。

⑥ カメラを追加
ここでカメラ追加しています。

以上です。たったこれだけでした。

動作確認をしてみる

スマートフォンで動作確認をする場合、『https』から始まるSSLで用意したサーバーにアップロードをして確認する必要があります。

私は、ささっと確認するためBitbucketでソースを管理し、netlifyにデプロイを行い確認しました（その方法の説明は今回は省きます）。

netlify URL: https://www.netlify.com/

できた

netlifyでデプロイし発行されたURLにスマホでアクセス。デフォルトで用意されているhiroのマーカーにカメラを向けると、オブジェクトがパッと表示されました。

すごい簡単でした。

まとめ

表示させたいオブジェクトを変更したい場合はフレームワークの『A-Frame』の知識が必要です。次の記事で、『A-Frame』でこんなことができるよ！ という紹介記事を書きたいと思います。

遊びで触ってみた「AR.js」ですが、とても楽しいです！ 皆さんもぜひ試してみてくださいね！

この事業についてもっと詳しく知りたい方へ

Web制作事業のページへ

この記事を書いた人

ハル

バックエンドエンジニア

PR記事をぎゅっと詰め込んだよ PR記事をぎゅっと詰め込んだよ

U Y A
K A