WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Optimize for the spatial web

Optimize for the spatial web

WWDC 2024
元の動画を見る

ハイライト

visionOS 上の Safari は「空間ウェブ」のインタラクション様式を定義しつつあります。この Session は、インタラクション、没入型コンテンツ、デバッグツールの3つの層で構成されています。

主要内容

従来のデバイスでは、Web の操作様式は「マウスクリック」か「指タップ」です。visionOS では、中核となる入力は「視線 + 指のピンチ」です。そこで問題になるのは、ブラウザがユーザーがどの要素を見ているかをどう知るかという点です。visionOS 1 では Interaction Region のハイライト機構が導入され、注視している要素の周囲に半透明の枠が描画されます。しかしデフォルトの矩形ハイライトは、複雑な図形（自転車の部品図のように）にはまったく足りません。

visionOS 2 では2つの重要な改善が加わりました。第一に、SVG path でインタラクション領域の形状をカスタマイズでき、不規則な輪郭にハイライトをぴったり合わせられます。第二に、リンク内に大きなメディア（動画サムネイルなど）が含まれる場合、ハイライトは数秒後に自動的に薄くなり、コンテンツを遮りません。Session では Vision Pro 上の WebSpeech API の独自の価値も示されます。音声認識と音声合成はすべてデバイス上で動作し、API キーもバックエンドも不要で、ハンズフリーのゲームやツールに向いています。

没入型コンテンツでは、Web ページに空間写真やパノラマ（Element Fullscreen API で独占ビューに入る）、3D モデル（rel=ar の USDZ リンクで Quick Look を起動）、空間オーディオ（Web Audio API の PannerNode）、完全な WebXR VR 体験を埋め込めるようになりました。デバッグでは、Safari の Web Inspector が visionOS 実機やシミュレータに接続でき、WebXR シーンの空間レイアウトをデバッグする XR Inspector も提供されます。

詳細

インタラクション領域の形状カスタマイズ（03:48）

visionOS 2 では SVG path でインタラクション領域を定義できます。Session では自転車部品の図をデモに使います。Mac では部品にホバーすると輪郭ハイライトが表示され、Vision Pro では同じ SVG path が視線ハイライトの描画に使われます。効果は控えめに見えますが、注視している位置に正確に現れるため、画面録画より実機での体感がはるかに強いです。

通常のリンクについて、Apple の推奨はシンプルです。padding でクリック可能領域を広げ、角丸でハイライト形状をサイトのビジュアルに合わせます。この padding と角丸は DOM 上で見える必要はありません。システムのハイライト描画へのヒントです。

WebSpeech API：音声認識と音声合成（05:00）

Session では WebSpeech を使った「Bike! Color! Shout!」という小さなゲームをデモします。プレイヤーは画面を見つめ、推測した色の並びを声に出して叫びます。タップも入力も不要です。コアコードは次のとおりです。

// 音声認識オブジェクトを作成（Safari は webkit プレフィックスを使用）
const recognizer = new webkitSpeechRecognition();

// 結果イベントを監視
recognizer.onresult = (event) => {
  // 最新の認識結果を取得
  const result = event.results[event.results.length - 1];
  // 最初の候補のテキストを取得
  const transcript = result[0].transcript;
  // シンプルな文字列マッチで色を判定
  checkColorGuess(transcript);
};

// ユーザーイベント（クリックなど）の中で開始する必要がある
button.addEventListener("click", () => {
  recognizer.start(); // 初回はマイク権限リクエストが表示される
});

キーポイント:

  • webkitSpeechRecognition は Safari のプレフィックス付き API で、標準実装に沿っています
  • event.results はすべての認識セグメントの累積リストで、最後の要素が最新結果です
  • 各 result には複数の候補があり、[0] が最も信頼度の高い候補です
  • start() はユーザイベントから呼ぶ必要があり、初回はマイク権限ダイアログが表示されます

音声合成はもっとシンプルです。

// 音声オブジェクトを作成して再生
const utterance = new SpeechSynthesisUtterance("Game over! Your score is 42.");
speechSynthesis.speak(utterance);

キーポイント:

  • 読み上げるテキストを SpeechSynthesisUtterance に渡します
  • speechSynthesis.speak() で再生します
  • 認識と合成はデバイス上で完結し、データは外部に出ず、API キーも不要です

空間写真とパノラマ：Element Fullscreen API（08:51）

Apple の調査では、空間写真はページ内に埋め込むと表示が悪くなります。Safari ウィンドウの位置とサイズは制御できず、空間写真は中央・実寸・独占ビューでないと正しい奥行きが出ません。解決策は Element Fullscreen API で、空間写真を Safari ウィンドウから Photos アプリと同じ独占ビューに「ポップアウト」させることです。

<img
  src="bike-spatial.heic"
  srcset="bike-fallback.jpg"
  onclick="this.requestFullscreen()"
/>

キーポイント:

  • srcset で空間写真形式（HEIC）を指定し、非対応ブラウザ用のフォールバック画像も用意します
  • requestFullscreen() はユーザイベントから呼ぶ必要があります
  • 全画面に入ると visionOS は羽根付きエッジのポータルビューを表示し、没入ボタンで実寸の独占ビューに入れます
  • パノラマも同じパターンで、十分大きな画像ならパノラマモードを起動できます
  • Home ジェスチャやデジタルクラウンでいつでも全画面を終了できます

3D モデル：Quick Look（12:42）

Web で 3D モデルを表示するには HTML 属性が1つだけ必要です。rel=ar で、iOS/iPadOS の AR Quick Look と同じ構文です。

<a href="bike.usdz" rel="ar">View in 3D</a>

キーポイント:

  • rel=ar で visionOS 上の Quick Look ビューアが開きます
  • ユーザーは物理空間の任意の位置にモデルを配置できます
  • Safari ウィンドウは開いたまま、3D モデルがシーン内に存在します
  • anchor.relList.supports("ar") で AR Quick Look の対応可否を検出できます
  • USDZ は Reality Composer の Object Capture や Mac のプレビューで変換できます

空間オーディオ：Web Audio API PannerNode（14:27）

Web Audio API は visionOS で空間化能力を獲得しました。中核は PannerNode で、3D 空間での位置・方向・コーン角度・参照距離を制御します。

const audioCtx = new AudioContext();
const source = audioCtx.createBufferSource();
const panner = audioCtx.createPannerNode();

// 音源位置を設定
panner.positionX.value = 2;
panner.positionY.value = 0;
panner.positionZ.value = -1;

source.buffer = myAudioBuffer;
source.connect(panner);
panner.connect(audioCtx.destination);
source.start();

キーポイント:

  • AudioContext から PannerNode を作成します
  • positionX/Y/Z で空間内の音源位置を設定します
  • 位置値は動的に更新して移動音源を表現できます
  • 複数の PannerNode と音源で完全なサウンドスケープを構築できます

デバッグ：visionOS への Web Inspector 接続（17:19）

接続手順：Mac と Vision Pro を同一ネットワークに接続 → Vision Pro の Settings > Apps > Safari > Advanced で Web Inspector を有効化 → Settings > General > Remote Devices → Mac の Safari Develop メニューで Vision Pro を選択 → ペアリングコードを入力。その後、同一ネットワークでは Vision Pro が Develop メニューに自動表示されます。仮想 Mac 画面で Web Inspector を同時に表示し、並行デバッグできます。

重要ポイント

  • やること：既存サイトのリンクに padding と角丸を追加する。価値：最も低コストの visionOS 適応で、視線ハイライトのトリガー領域を広げ、角丸でサイトのスタイルと調和させます。始め方：グローバルスタイルで a に padding: 8px と border-radius: 12px を追加するだけ。条件分岐は不要です。

  • やること：テキスト入力を WebSpeech API に置き換える。価値：Vision Pro では両手が塞がっていることが多く、音声が最も自然な入力です。Safari の実装は完全にデバイス上で動き、バックエンド依存はゼロです。始め方：webkitSpeechRecognition で onresult を監視し、transcript を単純マッチング。SpeechSynthesisUtterance で音声フィードバック。

  • やること：Element Fullscreen API で空間写真とパノラマを表示する。価値：埋め込み表示では空間写真の効果が悪く、全画面独占ビューで初めて正しい奥行きと実寸が出ます。ダウンロードや追加権限も不要です。始め方：<img> に onclick で requestFullscreen() を追加し、srcset で空間形式とフォールバックを指定。

  • やること：商品ページに USDZ の Quick Look リンクを追加する。価値：ユーザーは実空間に 3D モデルを配置でき、2D 画像を大きく上回る体験になります。HTML 1行で実現できます。始め方：USDZ を指す <a rel=ar> を使い、relList.supports("ar") で機能検出。

関連セッション

コメント

GitHub Issues · utterances