GUIDE

iPhoneでWebXRを動かす方法 - App Clipの仕組みと活用ガイド

iOSのSafariはWebXRを直接サポートしていませんが、App Clipという仕組みを使えばiPhoneでもWebXR ARを体験できます。EyeJack、Variant Launchなどのソリューションと、その技術的な仕組み、さらには自作への挑戦方法まで詳しく解説します。

著者: BANGEO Team
iPhoneでWebXRを動かす方法 - App Clipの仕組みと活用ガイド

はじめに - iOSとWebXRの現状

WebXR Device APIは、ウェブブラウザ上でVR/AR体験を提供するための標準技術です。しかし、iOSのSafariブラウザはWebXR(特にimmersive-arモード)を直接サポートしていません

これはAppleがARKitというネイティブフレームワークを推進しているためと考えられていますが、Web開発者にとっては大きな課題でした。しかし、App Clipという仕組みを活用することで、この制約を回避できることが判明しています。

App Clipとは?

App Clipは、Appleが提供する**「インストール不要のミニアプリ」**機能です。

  • App Storeからフルインストール不要
  • QRコードやNFCタグ、ウェブリンクをタップするだけで素早く起動
  • 容量は15MB以下に制限されているため、ほぼ「一瞬」で利用開始可能
  • ネイティブアプリの一部として動作するため、ARKitなどのDevice APIにアクセス可能

この特性を利用して、App ClipをWebXRの**「シム(Shim)」「ポリフィル(Polyfill)」**として活用する手法が生まれました。

なぜApp ClipでWebXRが動くのか - 技術的な仕組み

App Clipを使ったWebXR実現の基本的なアーキテクチャは以下の通りです:

App ClipによるWebXRアーキテクチャ

  1. ARKit(ネイティブAR機能)が背景で動作 - カメラ映像の取得、平面検出、ヒットテストなどを担当
  2. その上に透明なWKWebView(ブラウザ画面)を重ねる - WebXRコンテンツを表示
  3. window.xrにポリフィルを注入 - カメラ画像、ヒットテスト結果、デバイスの位置情報などをJavaScriptから利用可能に

つまり、App Clip自体は非常に軽量なままで、実質的にWebXRコンテンツをARKit上で動かすことができます。

「後ろにSwiftのARKit、前にSafari WebViewを表示しているだけのiOSアプリ」というシンプルな構成です。

実際に試してみた

まずは「本当に動くのか?」をお見せします!実際にiPhoneでEyeJackを使ってWebXRを体験してみました。

Step 1: EyeJackのリンクにアクセス

iPhoneのSafariで以下のURLにアクセスします:

デモURL:https://play.eyejack.xyz/link/?url=https://threejs.org/examples/webxr_ar_hittest.html

QRコード - EyeJack Three.js Hit-Testデモ

EyeJack App Clipの起動バナー

リンクをタップすると、App Clipのバナーが表示される。「開く」をタップ!

Step 2: App Clipが起動・カメラ権限を許可

「開く」をタップすると、App Clipが自動的にダウンロードされ、数秒で起動します。

EyeJack App Clip起動中

App Clipが起動中。インストール不要で数秒で立ち上がる!

カメラ権限を許可すると、ARモードが開始されます。

Step 3: Three.js Hit-Testデモを体験

カメラ権限を許可すると、Three.jsのHit-Testデモが起動します。「START AR」ボタンをタップしてARモードを開始します。

Three.js Hit-Testデモ起動画面

画面をタップすると、検出された平面上にオブジェクトが配置されます。ちゃんと動いた!

Three.js Hit-Test動作中

試した感想

  • App Clipは本当に一瞬で起動する(インストール不要の恩恵)

利用可能なソリューション

EyeJack以外にも、iOSでWebXRを動かすためのソリューションがいくつかあります。

1. EyeJack(Play AR)- 無料で試せる

EyeJackは、上で試したApp Clipを利用してWebXRをiOSで起動させるためのサービスです。

Three.jsのhit-testデモや、XR Dinosaurs(GLBモデルとアニメーション)など、様々なWebXRコンテンツが動作確認されています。

※ ロゴとアイコン(目のマーク)が少し不気味という声もありますが、機能面では問題なく動作します。

2. Variant Launch - 商用向け

Variant Launchは、商用向けのApp Clipソリューションです。

  • PlayCanvasなどの開発環境との連携が可能
  • 企業向けのサポートとカスタマイズ
  • ブランドに合わせたApp Clipのカスタマイズ

まとめ

iOSでWebXRを動かすためのApp Clip技術のポイントをまとめます:

  • Safari単体ではWebXR ARは動かない - Appleの方針
  • App Clipがポリフィルとして機能 - ARKit + WebViewの組み合わせ
  • EyeJackで今すぐ無料体験可能 - 商用にはVariant Launchなども
  • 自作も技術的には可能 - ただしApp Store登録が必要

WebXR開発者にとって、iOSは長らく「鬼門」でしたが、App Clipの活用により道が開けています。ぜひ試してみてください!

関連リンク

BANGEO Team

この記事を書いた人

BANGEO Team

WebXRの最新技術を発信するチーム。実験的なデモやガイドを通じて、没入型ウェブ体験の可能性を探求しています。

この記事をXでシェア

デモを実際に試してみる

この技術を使用した実例を、ブラウザですぐに体験できます。

デモを見る →