【javacript】AR.jsでiPhoneでもブラウザARが可能になっていた件

　こんにちわ。ポケモンGOの大ヒットにより一般的にもいよいよ定着してきた「AR」ですが、いよいよiPhone、Androidともにブラウザ上でARが実現できるようになっていたので簡単に紹介したいと思います。

「AR」とは？

　「AR」とは「Augmented Reality」の略で、日本では「拡張現実」とも呼ばれています。

　ポケモンGOをプレーしたことある方ならご存知ですが、「AR」とはカメラを通して現実の風景にバーチャルの視覚情報を重ねて表示することで仮想空間を作り出すことになります。

　これまでエンジニアにとって、この「AR」はスマートフォンで言えばポケモンGOのように基本的にネイティブアプリの中での話しでした。

javascriptライブラリ「AR.js」の登場

　しかし、2017年3月にThree.jsの創業者アレクサンドラ・エティエンヌ氏とJavascript開発者のジェローム・エティエンヌ氏の共同開発によって、AndroidとWindows Mobile端末向けにブラウザでもAR体験ができる「AR.js」というjavascriptライブラリが公開されました。

　「AR.js」はオープンソースとしてGithubに公開されており、下記の特徴を持っています。

AR.jsの特徴

　「AR.js」は、上の特徴のようにとても優れたライブラリですが、公表段階ではios端末（iPhone、iPad等）は非対応になっており、正直需要を満たすレベルには達していませんでした。

　しかし、2017年9月にAppleがios11を正式にリリースし、そのios11から「ARKit」というARフレームワークも搭載されるようになったことで、ios端末でも「AR.js」を使用してブラウザでAR体験ができるようになりました。これは日本のようにiPhoneユーザーが圧倒的に多い市場にはとても大きなインパクトになります。

実際にiPhoneで公式のデモを試してみる

　では、実際にiPhoneでも動くのか、下記の手順通りやってみましょう。

1. こちらの画像をPCのデスクトップにダウンロード
2. こちらのページにsafariからアクセス
3. カメラへのアクセスを許可
4. 1でダウンロードした画像を写す

　これで下の画像のような立体的なバーチャルな物体が現れると思います。

まとめ

　今回は、ブラウザでもAR体験ができるjavascriptライブラリ「AR.js」を紹介しました。

　実際に、これまでお客さんからARを駆使したキャンペーン等をブラウザでできないかという相談もあったのですが、「AR.js」を使用すればiosでもブラウザARが実現できることがわかったのでARを活かした簡単な企画等はwebアプリでも出来るようになると思います。

　今回は、公式のデモを紹介しただけですが、時間がある時に実際にサンプルを作ってみたいと思います！

　それでは今回はここまで！また！

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

Cody Lindley

• Amazon楽天