HTMLだけでAR機能をつくってみよう！【QRコードベース】

はじめに

スマホやタブレットのカメラでQRコードをかざすと、Webブラウザ上に3Dモデルが浮かび上がるAR（拡張現実）の仕組みを、HTMLファイルだけで手軽に実装できます。
本記事では、無料ライブラリ「A-Frame」と「AR.js」を使い、ローカル構築から動作確認までをステップバイステップで解説します。
初心者の方でも迷わないよう、ファイルごとに何を表すか、どんな役割があるかを詳しく説明しています。

用意するもの

Webブラウザ（Chrome推奨）：AR機能が動作する最新バージョンのブラウザ
ネットワークカメラ（PC内蔵／USB接続カメラ）：QRコードを読み取る撮影デバイス
QRコード画像：任意のURLを埋め込んだQRコード。後述のマーカー変換で使います
AR.jsマーカー定義ファイル（qr-code.patt）：QRコードをマーカーとして認識させるためのパターンファイル
HTMLファイル（index.html）：ARシーンを構築するメインファイル
3Dモデルファイル（CDN経由URL or ローカルファイル）：表示する3Dオブジェクト（CDN利用で手軽に呼び出し可能）

手順概要

QRコードを生成し、.pattファイルに変換
XAMPPでローカルサーバーを起動
プロジェクトフォルダに必要ファイルを配置
HTMLファイル（index.html）の内容を確認・設置
各ファイルの役割とポイント解説
実機で動作確認

1. QRコード→.pattファイルの作成

1-1. QRコード生成

Web上の「QRコード生成ツール」（例：QRのススメ、QRコード.jpなど）で任意のURLをコード化
出力されたPNG／JPGを qr-code.jpg として保存
このファイルの役割：後でマーカー用データに変換する元画像として使います。

1-2. マーカートレーニング

AR.js公式の「Marker Training Tool」を利用
URL: https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
qr-code.jpg をアップロードすると、マーカー認識用の qr-code.patt が生成されまず。
qr-code.patt の役割：マーカーのパターン情報をブラウザに伝え、カメラ映像中のQRコードをトラッキングします。

Marker Training Tool使用方法

STEP

画像をアップロード

STEP

「DOWNLOAD MARKER」からマーカーを作成

2. 開発環境の準備（XAMPP）

初心者でも簡単に始められるXAMPPを例に解説します。

2-1. XAMPPのダウンロードとインストール

公式サイト（https://www.apachefriends.org/index.html）からOS対応版をダウンロード
インストーラーを実行し、ApacheとPHPにチェックを入れてインストール

2-2. XAMPPの起動と設定

XAMPPコントロールパネルを起動
Apache を「Start」ボタンで起動
ポート（デフォルト80）が競合する場合は、Config → httpd.conf を開き、Listen 80 を別ポートに変更

2-3. プロジェクトフォルダの配置

C:\xampp\htdocs 内に arqr フォルダを作成
以下のようにファイルを配置：
C:\xampp\htdocs\arqr\
├─ index.html ← ARシーン構築のメインHTML
└─ qr-code.patt ← マーカー定義ファイル

index.html の役割：A-FrameとAR.jsを読み込み、マーカー検出および3Dモデル表示のロジックを記述します。

2-4. 動作確認

ブラウザで http://localhost/arqr/index.html にアクセス
カメラアクセス許可を与え、QRコードをかざして3Dモデルが表示されることを確認

3. index.html の設置と解説

下記のコードを index.html に貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QRコードARデモ</title>
  <!-- A-Frame と AR.js の読み込み -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.4.2/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
  <a-scene embedded
           arjs="sourceType: webcam;
                 debugUIEnabled: false;
                 sourceParameters: {
                   video: {
                     width: { ideal: 4096, max: 4096 },
                     height: { ideal: 2160, max: 2160 },
                     facingMode: { ideal: 'environment' }
                   }
                 }">
    <!-- マーカー（qr-code.patt）検出エリア -->
    <a-marker type="pattern" url="qr-code.patt">
      <!-- 3Dモデル表示エンティティ -->
      <a-entity gltf-model="https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Models@master/2.0/Duck/glTF/Duck.gltf"
                scale="1 1 1"
                rotation="0 180 0">
      </a-entity>
    </a-marker>

    <!-- ARカメラエンティティ -->
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>