ARというとマーカーを読み込んでオブジェクトを表示したり、位置情報を使って情報を表示するといったものが知られています。カメラを使って周りの風景を読み込み、そこにオブジェクトを投影することで現実とデジタル情報を混在させるのが特徴です。したARをMonacaアプリで実現する方法はいくつかありますが、今回はオープンソースで利用できるA-Frameを紹介します。最近のアップデートで対応した位置情報ベースのARを行ってみます。注意点A-FrameのARではWebRTCを利用します。そのためスマートフォンアプリではセキュリティ制限に引っかかる可能性があります。そこで今回はPWA(Web)アプリとして開発しています。A-FrameとはA-FrameはオープンソースのARライブラリで、JavaScriptで実装されています。多くのARライブラリがネイティブアプリ向けだったり、Cordovaプラグインを利用するのに対して、A-FrameはJavaScriptだけで実装します。A-Frameでは専用のHTMLタグを使ってARコンテンツを表示します。表示するだけであればHTMLだけで実現できるので、とても手軽です。JavaScriptとの親和性が高いので、タップなどのイベントに合わせてARコンテンツを表示できます。A-Frameは以下のAR表示に対応しています。最新のアップデートで対応したのが位置情報ベースのARになります。スマートフォンの位置情報を使って、あらかじめ登録してあるARコンテンツを表示する仕組みです。A-FrameのインストールまずA-Frameをインストールします。これは指定されたHTMLタグを使うのが早いようです。src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">A-Frameを実行するまずA-Frameを定義します。ARの設定、コンテンツはこの中に定義していきます。このタグでARコンテンツを表示するカメラを起動します。rotation-reader></a-camera>主なオプションは次の通りです。この値以内のオブジェクトが表示されます。正の数字を指定します。この値以上の距離にあるオブジェクトは表示されません。正の数字を指定します。0たとえば距離を大きく設定すれば、遠くにあるARコンテンツでも表示できます。表示するコンテンツを用意する今回は簡易的にARコンテンツとしてボックスを表示してみます。A-Frameを使えば他にも多彩なコンテンツの表示が可能です。イベントも付けられるので、ボタンを押したらYouTube動画を再生されるような仕組みも作れるでしょう。当たり前ですが、コンテンツには表示する位置情報を要素として持たせておきます。表示する高さなどをpositionとして定義します。0"/>自分に近いところにあるオブジェクトであれば、カメラを通して表示されます。JavaScriptでオブジェクトを追加するA-FrameはJavaScriptで作られていますので、コンテンツの操作もJavaScriptから行えます。以下はJavaScriptからboxを追加するサンプルです。document.querySelector('a-scene').appendChild(ele);})表示にも反映されます。まとめA-Frameが多機能になり、ARアプリを作るのに必要十分な機能が揃ってきました。位置情報を使ったARアプリはトラベル系、地域探索系アプリで人気の高い機能です。皆さんのアプリに実装してみてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。(JavaScript基礎構文)iOS16から導入された「デベロッパモード」についてhtmx:JavaScriptなしでサーバーとの通信を実現する見やすい、メンテナンスしやすいJavaScriptのために。