Smart Communication Design Company
ホーム > ナレッジ > Blog > フロントエンドBlog > 2017年12月 > WebのARを先取りしよう!

フロントエンドBlog

Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

WebのARを先取りしよう!

UI開発者 加藤

今年も残すところあとわずかとなりました。2017年を個人的に振り返ってみるとPWAやAMPなどの話題が多く、パフォーマンスがより重視され始めた年だったのではないかと思います。また、日本でもスマートスピーカーが発売され、フロントエンドの技術を活用できる範囲が少しずつ広がってきています。そんな中、個人的に今後注目していきたいと思っている技術がARです。

ARといえばまず思い浮かぶのは「Pokemon Go」でしょうか。2016年にリリースされた直後に爆発的なヒットを生み出し、世にARを知らしめた立役者といっても過言ではありません。また、つい先日Magic Leapが「Magic Leap One」というデバイスを発表しました。Magic Leapは、数年前からAR技術に関する魅力的なプロモーション動画をいくつか発表していたものの、デバイスや技術の詳細は公開せず、長い間謎に包まれていました。2018年の初旬に開発者版が発売されるということで、非常に楽しみです。

一方で、WebコンテンツとしてのARも少しずつ動きを見せ始めています。Googleのプロジェクトである「ARCore」はそのうちの1つで、WebGLのフレームワークであるThree.js用のヘルパーライブラリという形で、three.ar.jsの開発が進められています。three.ar.jsはWebARonARKitがインストールされているiOS端末、もしくはWebARonARCoreがインストールされているAndroid端末でのみ実行することができます。どちらのアプリケーションもGoogle公式のもではなく、標準化される予定もないと記載されていますので、あくまでthree.ar.jsの実験レベルで使うのがよいとのことです。iPhone7がサポートされていたので、実際に試してみました。

WebARonARKitはいわゆるWebviewを表示するアプリケーションなのですが、カメラで取得した画像を背景として設定することにより、実世界の上にコンテンツが置かれているように見せています。iOS11以上であればブラウザだけで実現することも可能ですが、まだパフォーマンスが悪く実用的ではありません。

ぱっと思いつくWebARの使いどころは製品を取り扱うECサイトです。これまではブラウザ内で画像や3Dモデルを表示することしかできませんでしたが、ARを用いれば製品をブラウザの外に出すことができるようになります。ユーザーは現実世界に製品を置くことでサイズやフォルムなどの全体像をよりつかみやすくなります。

WebにおけるARはまだまだ実験段階ですが、将来ARが普及したときのことを見据えて、UIやUXを考えてみるのもいいかもしれません。2018年は注目していきたいと思います。