【簡単】WebARの作り方【作成／開発方法を2パターン紹介】

ARを作成には専門知識や技術が必要で、またそれを体験するには専用デバイスやアプリのインストールが必要…とお悩みの方。
本記事では、お手持ちのスマホのWebブラウザで簡単に体験できる「WebAR」という技術をご紹介しつつ、WebARコンテンツを作る手段（開発ライブラリ、ノーコードツール）をご提案します。

Table of Contents

WebARとは？

WebARとは「Webブラウザで体験できるAR」のことで、現在多くのイベントやキャンペーンの施策に取り入れられています。
WebARにはこんなメリットがあります。

・アプリのインストールが必要ない
・URLをシェアするだけで簡単に共有できる
・ライブラリや作成ツールが充実していて手軽に作成できる

このように、WebARではとにかく手軽さ・簡単さが大きな特徴。
では実際にWebARコンテンツを作りたいとき、どのような手段があるのでしょうか。今回は2パターンの作り方をご紹介していきます！

〜WebARの作り方〜
1. コードを書く
2. WebAR作成ツールを使ってみる

1. コードを書く

WebAR開発はAR.jsとA-Frameというライブラリを使用することで、少ないコードでコンテンツを開発することができます。
ここでは例としてマーカーを読み取ったら立方体の格子を表示するコードをご紹介します。

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>WebARの体験</title>
     <!--A-frameライブラリの読み込み-->
　   <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
     <!--AR.jsライブラリの読み込み-->
     <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
  </head>
  <body style="margin:0px; overflow:hidden;">
     <!--A-frameにAR.jsを紐づける-->
     <a-scene embedded arjs="debugUIEnabled:false;">
       <!--マーカーを登録(ここではデフォルトで用意されているhiroマーカーを指定)-->
       <a-marker preset="hiro">
         <!--マーカー上にワイヤーフレーム表示-->
　       <a-box position="0 0.5 0" wireframe="true"></a-box>
       </a-marker>
       <!--AR用のカメラを置く-->
　    <a-entity camera></a-entity>
    <a-scene>
  </body>
</html>

たった30行以内のコードでWebARコンテンツが完成します！
使用するARマーカーはこちら。AR.jsでデフォルトで登録されている「Hiro」と呼ばれるマーカーです。