WebAR超入門：`&lt;model-viewer&gt;`タグで実現する、アプリ不要の拡張現実（AR）

WebARと`<model-viewer>`とは？

WebAR: スマートフォンアプリのインストールを必要とせず、Webブラウザ（ChromeやSafariなど）上でAR体験を提供する技術の総称です。ユーザーはURLにアクセスするだけで、すぐにARを体験できます。
<model-viewer>: 3Dモデルの表示とAR機能を、簡単なカスタムHTMLタグで実現するためのライブラリです。内部的にはThree.jsや、OS標準のAR機能（AndroidのARCore / iOSのARKit）を呼び出していますが、開発者はその複雑さを意識する必要がありません。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

エンジニアのためのWeb3開発入門　イーサリアム・NFT・DAOによるブロックチェーンWebアプリ開発

超簡単！`<model-viewer>`で3Dモデルを表示する

まずは、Webページに3Dモデルを表示させてみましょう。

Step 1: 3Dモデルの準備

<model-viewer>は、.gltfまたはそのバイナリ形式である.glbというフォーマットの3Dモデルを標準でサポートしています。今回は、無料で利用できるサンプルモデルを使うことにしましょう。

Step 2: HTMLファイルの作成

次に、index.htmlというファイルを作成し、以下のコードを記述します。これが<model-viewer>の最も基本的な形です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Model-Viewer入門</title>
  <!-- 1. <model-viewer>のスクリプトを読み込む -->
  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
</head>
<body>

  <!-- 2. <img>タグのように3Dモデルを表示 -->
  <model-viewer
    src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
    alt="A 3D model of an astronaut"
    camera-controls
    auto-rotate
    style="width: 100%; height: 500px;">
  </model-viewer>

</body>
</html>

このHTMLファイルをブラウザで開くだけで、宇宙飛行士の3Dモデルが表示され、マウスでぐりぐり動かせるはずです。

src: 表示したい.glbまたは.gltfファイルのURLを指定します。
camera-controls: ユーザーがマウスやタッチでモデルを操作（回転・ズーム）できるようにします。
auto-rotate: モデルが自動でゆっくりと回転します。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

超軽量フレームワークHono完全入門: シンプルなコードで高速Webアプリ開発

AR機能を有効にする

では、いよいよこの3Dモデルを現実世界に表示させてみましょう。驚くほど簡単です。

`ar`属性の追加

先ほどの<model-viewer>タグに、arという属性を追加するだけです。

<model-viewer
  src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  alt="A 3D model of an astronaut"
  ar
  camera-controls
  auto-rotate>
</model-viewer>

これだけで、対応しているAndroidデバイスでページを開くと、右下にARを起動するボタンが表示されます。ボタンをタップするとカメラが起動し、床や机を認識させてモデルを現実空間に配置できます。

iOSへの対応 (Quick Look)

iOSデバイス（iPhone, iPad）でARを有効にするには、もう一手間必要です。iOSはAR機能としてQuick Lookを使用し、それには.usdzというApple独自の3Dモデル形式が必要です。

.usdzファイルを用意し、ios-src属性で指定します。

<model-viewer
  src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
  alt="A 3D model of an astronaut"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate>
</model-viewer>

ios-src: iOSデバイスでARを起動する際に使用する.usdzファイルを指定します。
ar-modes: 使用するARのモードを指定します。quick-lookがiOS用です。

これで、AndroidとiOSの両方でAR体験が提供できるようになりました。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

［入門］Webフロントエンド E2E テストーーPlaywrightによるWebアプリの自動テストから良いテストの書き方まで [ 渋川よしき ]

よりリッチな表現のためのカスタマイズ

<model-viewer>には、表現を豊かにするための属性が多数用意されています。

poster: 3Dモデルが読み込まれるまでの間に表示されるプレースホルダー画像を指定します。
```
poster="loading-poster.png"
```
environment-image: 周囲の環境を映り込ませ、よりリアルな質感を表現するための環境マップ画像を指定します。「neutral」を指定すると、影付きの自然なライティングになります。
```
environment-image="neutral"
```
shadow-intensity: モデルの下に落ちる影の濃さを調整します。
```
shadow-intensity="1"
```

完成コードの例

これまでの属性をすべて盛り込んだ、コピペで試せる完成形のコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebAR with model-viewer</title>
  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
  <style>
    model-viewer {
      width: 100%;
      height: 500px;
      border-radius: 12px;
    }
  </style>
</head>
<body>

  <model-viewer
    src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
    ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
    alt="A 3D model of an astronaut"
    ar
    ar-modes="webxr scene-viewer quick-look"
    camera-controls
    auto-rotate
    poster="https://modelviewer.dev/shared-assets/models/poster-astronaut.webp"
    shadow-intensity="1"
    environment-image="neutral"
  >
  </model-viewer>

</body>
</html>

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Kubernetesで実践するクラウドネイティブDevOps

オライリージャパン

まとめ

<model-viewer>を使えば、これまで専門的な知識が必要だった3D/ARコンテンツのWeb実装が、驚くほど身近になります。数行のHTMLタグを追加するだけで、ユーザーに新しい体験を提供できるのです。

Eコマースサイトで家具やスニーカーを実物大で試着してもらったり、教育コンテンツで歴史的な遺物をインタラクティブに表示したりと、その活用方法は無限大です。ぜひ、あなたのWebサイトにも、<model-viewer>でARの魔法を加えてみてはいかがでしょうか。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内直人 ]