空間Webの最適化

こんにちは SafariチームのBrandelです ここでは visionOS 2.0で Safariの体験を 最大限魅力的なものにする 方法について説明します Webサイトは 皆さんがご存知の ほぼすべてのプラットフォーム またはデバイスで表示できます これは数十年にわたる取り組みの成果です 世界中の多くのグループが Web標準の理念を実践してきたおかげで どこでも実行できるコンテンツを 容易に作成できるようになりました しかし まったく新しい コンピューティング手法の登場に伴い 最新のプラットフォームがもたらす能力で 既存のWeb機能を拡張する 機会と責任が生じています Apple Vision Proも その瞬間が来たことを告げています 本日紹介する機能は 新しいものもあれば 以前からあったものもあります しかし どの機能も 空間コンピューティングの機能によって 新しい意義を与えられています まず visionOSでの 操作方法を説明します visionOSでは 目 手 声を使った自然入力が可能です 次に 実現できるイマーシブな 映像/音声コンテンツについて説明します いくつかの新しい方法を使用して 空間写真やパノラマ写真 リッチな3Dモデル 空間サウンドスケープ イマーシブな仮想現実を提供できます 最後に 検査とデバッグについて ひととおり説明します この新しいエキサイティングな プラットフォームで 希望どおりの成果を得るのに役立ちます 要点を理解しやすいように これらの機能を 私が管理しているファンサイト The Circular Cyclistに追加します これは 自転車全般およびApple Park周辺の 自転車道を紹介するサイトです 本日説明するすべての内容は 大規模な商用Webサイトにも 私のサイトのような 小規模なコミュニティWebサイトにも 取り入れることができます 早速 インタラクション機能の 説明に入りましょう 覚えているかもしれませんが visionOS 1で自然入力が導入されました アプリまたはWebページ内の インタラクション領域を視線で選択し 指をタップして それらを操作します 視線を向けると その領域が強調表示されます こうしたインタラクション領域は Webでは特に新しいものではありません ごく初期の段階から使用されていました リンクにカーソルを合わせた時 操作対象となるシェイプが インタラクション領域です これらの領域は重要であるものの 通常 それ自体は表示されません カーソルを合わせると 変化が生じることから ユーザーはそれが インタラクション領域だとわかります

対象を選択しやすくするため visionOSでは インタラクション領域の シェイプが直接的に表示されます ユーザーが特定の要素に視線を向けた時だけ ハイライトされます

しかし Apple Vision Proでは 全ユーザーのプライバシーを守るため どこを見ているかは他人にわかりません 強調表示はSafari外部の プロセスによって行われ ブラウザでさえ ユーザーが見ている場所を認識していません Webはその黎明期から 大きな発展を遂げてきました なので 最新の発展に話を合わせましょう 現在では ほとんどのWebコンテンツが モバイルデバイスで閲覧されており クリックよりタップの機会が増えています そのため タップターゲットや インタラクション領域を的確に選択できる 大きさにする必要があります 背景色を別の色にしないにしても リンクには内部に少しパディングを 加えることを検討してください

Vision Proでは サイトの見た目に合うように ハイライト部分の角を丸くしています これにより 視線を向ける 領域が大きくなり 鋭い角やその他の特徴に 気を取られることがありません これらは 背景色や太い枠線が付いていて DOMで見えるようになっている 必要はありません それらはコンテンツを操作する領域を 強調表示するためのヒントです これはWebでのケースの 大半をカバーするものの すべてには対応できません Circular Cyclistでは 少し変わったナビゲーション方式を 自転車安全チェックリストに 採用しています 自転車の各部にカーソルを合わせると 枠線が表示されて 注意点が表示されるようになっています

また visionOS 2では 複雑な インタラクション領域を構築できます これは同じSVGパスで指定するもので よりきめ細かい制御が可能です どのようなものか見てみましょう Macでホバーエフェクトを実行するSVGで 同様にvisionOSで インタラクション領域を設定して それを画面上に描画できます シミュレータのカーソルは visionOSでユーザーが 見ている場所を示しています これを自転車の部位に重ねても Safariではホバーエフェクトは出ません 他のOSで動作する プライバシー保護のハイライトが出ます 視覚効果は 微妙に見えるかもしれませんが 視線を向けている場所に表れるため はっきりと目に付きます 次に紹介する インタラクション領域の改善点は ビデオやギャラリーへのサムネイルなど 大きいメディアコンテンツも 含められるリンクです ハイライトが持続すると 目障りな場合があるため メディアコンテンツには 控えめなハイライトが適用されます これは数秒後に消えて コンテンツが意図したとおりに ユーザーに表示されます このギャラリーでは 大きな画像サムネイルが使用されています 視線を向けて少し経つと ハイライトが落ち着き コンテンツがはっきり見えるようになります

メディアのインタラクション領域を 最大限に活用するには アンカータグや その他のインタラクティブ要素に 必ずメディアを含めるようにして 万全の準備をしておきます 次に このプラットフォームでは いくつかの異なる方法で 音声による入力ができます iOSやiPadOSと同様に キーボードと一緒に表示される マイクのアイコンをタップするだけで すべてのテキストフィールドで 音声入力を使用できます さらに必要であれば WebSpeech APIを通じて もっと高い柔軟性が得られます

これはWeb標準として 提案されているもので SpeechRecognition インターフェイスを通じて リアルタイムで音声に応答できます また SpeechSynthesis インターフェイスを通じて 自分自身の音声で応答することもできます Safariはこの処理を ローカルで実行するため デバイスからデータを 送信する必要がありません Web Speechに詳しい方は Vision Proでも うまく活用できると思います これは私が作りたいと思っていた ゲームにぴったりの技術です タイトルは「Bike!Color!Shout!」です 8ビットで表現されたキャンパスを走る 自転車の最新カラートレンドについて プレーヤーは推測した答えを叫びます ループ周辺の自転車ファッションの 先取りを試みるゲームです 音声入力にテキストフィールドは使わず プレーヤーには 常にアクションに注目してもらいます SpeechRecognitionをまったく別個の 入力チャネルとして使用することができ 何かをタップしたり クリックしたりする必要は一切ありません コードを見てみましょう 最初に新しいSpeechRecognition オブジェクトを作成します Safariでは 先頭にwebkitが付きますが 実装自体は標準どおりです これが作業の大半を実行します

これから結果を読み取るために 結果イベントをリッスンする ハンドラを登録します イベントが返ってきたら リコグナイザがそれまでに収集した 全スニペットのresultListが得られます ここでは最新の結果を取得します その結果の中には 音声認識の選択肢がいくつか入っています 最初の1つを選択します 各選択肢には トランスクリプトが入っています これをゲームに使います

このゲームで複雑なロジックを 実行するつもりはありません 求める色の名前に対する 簡単な文字列検索で 十分に機能します

適切なイベントをリッスンしたら リコグナイザを開始します これはタップやクリックなどの ユーザーイベントで実行する必要があります 許可を求める画面が表示され ユーザーは同意する必要があります そのため マイク入力を求められている理由を ユーザーに知らせることが重要です その後 ゲームがスタートします 次はフィードバックを追加しましょう

ゲームが終了したら 大きな声でユーザーに最終スコアを 発表できるようにしようと思います これはSpeechSynthesis APIで 実現できます SpeechSynthesisUtterance オブジェクトを作成し 発話される文言を指定してから speechSynthesisオブジェクトに渡して それらの文言を発話させます 音声認識APIと同様に データはデバイス内に留まり すべての処理は無料で実行されます 管理すべきAPIキーや アカウントもありません では 実際に見てみましょう カウントダウンが行われ 自転車が通過する前に それらの色を推測する必要があります マイクの許可に同意したら推測を申告します ピンク オレンジ 緑 紫と 回答します おっと Apple Parkの自転車は すべてシルバーでした これはゲームが現実のキャンパスに 忠実であることを示していますが ゲームデザインの構想を 練り直す必要があるかもしれませんね これもSafariで動作し Mac、iPhone visionOSのいずれでもプレイできます しかし 音声を扱うのが非常に面白いのは このプラットフォームであり ここで紹介した2つのAPIは 後で確認する よりイマーシブな機能と 相性が非常に良くなっています Web Speechについては 他にも多くの発見がありますので MDNにある「Web Speech API」の ドキュメントをご覧ください 詳しい情報や着想が得られます ここまで 自然入力について 理解していただけた思います インタラクション領域は より柔軟で コンテンツ本位のものになっていて 音声入力は何らかの機能を 体験に追加するための優れた手段です それでは 次の話に移って Apple Vision Proのユーザーが Webで視聴できる イマーシブメディアを見ていきましょう Vision Proの詳細な表示と 空間の真実の間で イマーシブメディアはプラットフォームを 思考のためのツールに変えます 言ってみれば 精神にとっての自転車です まずは空間写真です 空間写真は 適切な設定では 素晴らしい見栄えになりますが 設定が不適切だと 方向感覚を失わせ 混乱させる可能性があります 私たちはこのプラットフォームの開発中に 空間写真がユーザーに対して 適切な効果を奏するには 注意深く配置する 必要があることに気づきました 理解を深めるために visionOSで 写真アプリを見てみましょう すべての写真をグリッド表示で見ているとき 空間写真も2Dとして表示されます 空間写真は1枚で中央に配置された場合のみ 空間ビューで表示されます 動いてみると 写真はポータルのやや後ろに表示されていて 写真コンテンツとシーンとの間には ぼかし付きの枠線があることもわかります 写真を全体表示にしても ぼかし効果は残ったままです 写真の細部をより詳しく 大きく見ることができます 空間写真は 撮影された実際のスケールで 表示して見るのが最善であり そしてそれは Vision Proで撮影したスケールです まとめると 空間写真は素晴らしい体験ですが ビューの中央に配置して 実際のサイズで単独で見ると さらに快適です ユーザーはSafariウインドウをどこにでも 好きなサイズと配置で置けるため それをページ内で 良い体験にするのは困難です 私たちが目指しているのは ユーザーにとって最も魅力的な方法で 空間写真やパノラマ写真を 共有できるようにすることです 幸い Webには既に この状況の解決に役立つ 標準ベースのソリューションがあります Element FullScreen APIです MacやiPhoneのように 表示をフルスクリーンにすると 画面に描画されるものが 皆さんのアプリだけになります Element FullScreenとは その要素だけが全体に表示される という意味です デベロッパはよく カスタムコントロールや ビデオ再生にこれを使用していますが 私たちは空間写真のニーズにも 適していると考えています Element FullScreenを使用すると メディアはSafariから ファイルアプリまたは写真アプリの 専用モードビューに移行します 写真をダウンロードして 別個に開く必要はありません visionOSでは空間全体を使えるため 写真にとって適切な視覚的スケールで ユーザーの画面の中心に配置して 画像を表示できます 最初は elementで requestFullScreenメソッドを使用します フルスクリーンはユーザーの環境を 大きく変化させるため タップやクリックといった ユーザーイベントで呼び出す必要があります ホームジェスチャを使用するか クラウンボタンを押すかして ユーザーはフルスクリーンを いつでも中止できます また 呼び出しには document.exitFullScreenメソッドを 使用することもできます これをページに組み込んで 結果をチェックしましょう ページで直接 空間画像ファイルを使用します このページでの表示は平面です srcsetを使用して適切な 種類のファイルを指定することで 形式をまだサポートしていない ブラウザ用の代替画像を サポートすることができます 次に 画像のクリックイベント入力を取得し そのイベントチェーンを使用して 要素のフルスクリーン表示を要求します エラーが発生した場合に 適切に処理できるようにします

見た目はこのようになります 目的の画像を見つけて タップしたら 写真アプリで見た ぼかし付きのポータルビューが表示されます イマーシブボタンをタップすると 写真を実物大で見られる 専用ビューに切り替わります 許可の承認や他のアプリの ダウンロードは不要です パノラマ写真でもプロセスは同様です 写真アプリで動作を見てみましょう パノラマがウインドウに 平面ビューで表示されています パノラマを1枚選択して拡大します イマーシブボタンをタップすると 実物大の表示になります

パノラマは 寸法が十分に大きい 任意のファイル形式から起動できます 方法は前と同様で クリックイベントを使用して 要素のフルスクリーン表示を要求すれば 準備完了です

プロセスは同じです タップしてフルスクリーン表示にします さらにタップするとイマーシブビューになり パノラマ写真が取り囲むように表示されます ダウンロードや追加のユーザー許可は 一切不要です そのため このコンテンツを可能な限り 広範なユーザーに届けられます

今見ているのは空間メディアですが フル3Dオブジェクトを Safariの外で直接ビジターに 見せることもできます Quick Lookを使用して 3Dモデルファイルを表示します 3Dアセットはそれぞれが独自のものですが いくつかの共通点があります 大きな予算をかけた映画であれ モバイルゲームであれ モデルは 多数のサーフェスの3D座標と それらの各サーフェス上のマテリアルを 定義します それにより 3Dアセットを必要なシーンに 描画またはレンダリングできます 3Dアセットの作成は 写真撮影よりも少し複雑ですが 3Dアセットを使用するのに エキスパートである必要はありません Reality Composerなどのアプリで オブジェクトのキャプチャを実行して スマートフォンだけで 美麗な3Dキャプチャを作成できます オンラインで購入または発見した モデルを使用することもできます モデルが別の形式の場合は Macに導入されたばかりの プレビュー版の変換ツールを使用できます Circular Cyclistには Appleの通勤用自転車の QuickLookモデルがあります 部屋に置いておくことで アクティブでいることを忘れずに済み これを実物大で見ると 外に出て運転したときの気持ちを はっきりと思い出せます 同僚に迷惑をかけたり つまずきの危険性があるものを オフィスに置く心配もありません visionOSでQuick Lookを使用して ユーザーにモデルを開かせるには 1コード行どころか 1属性だけで済みます 構文はiOSとiPadOSでAR Quick Lookに 使用するものとまったく同じです rel="ar"を使用して リンクでUSDZモデルファイルを指します Webサイトのビジターは それらのオブジェクトを開いて シーンのどこにでも配置できます 先ほど見たように visionOSでは WebサイトがSafariで開いたまま Quick Lookの3Dモデルも表示されます ユーザーが少し目を向けると リンクの表示前でも モデルを見られるようにしたい場合は アンカータグのrelListを見て ARに対応しているかを確認します 次は イマーシブオーディオです きっと気に入ってもらえると思います

Safariのイマーシブオーディオは Web Audio APIから始まります そして Web Audioでは最初に オーディオコンテキストを作成します

それにより ノードという 新しいコンポーネントを作成できます これはサウンドスケープを構築するための サウンドジェネレータとエフェクトを含む コンサートのギターペダルや オーディオミックス用ブースの エフェクトマシンのようなものです

ノードは自由に接続して エフェクトチェーンを構築できます このチェーンは最終的に オーディオコンテキストに接続されます これにより 作成するすべての ジェネレータとエフェクトに 調整可能なハンドルが付属する 音環境が実現します

オーディオを空間化する機能を持つ 特定のエフェクトまたはノードは PannerNodeと呼ばれます PannerNodeでは それを通じて送るオーディオの 位置 方向 円錐角 基準距離などの プロパティを制御できます

PannerNodeを さまざまな音源と共に使用することで 音源を空間内に配置したり 動的に移動させたりできます 体験内で実現する内容に応じて 最適なサウンドスケープを作成できます

仕組みは次のとおりです オーディオコンテキストから ノードを作成し

パラメータを設定します 他のノードからの出力によって ジェネレータの値を動すことで かなり高度なこともできますが ここでは値を直接 設定するだけにしておきます 最後に これらを接続して再生を開始します MDNでは「Web Audio API」についても 詳しく取り上げています これも 既存の強力なWeb標準を 新しいコンテキストで再利用して 優れた効果を上げられる例の1つです WebAudioに詳しい方でも visionOSで何ができるのかを 確認することをお勧めします

先ほど説明した音声機能と共に 空間オーディオは 次に説明する機能と 対をなす理想的な機能です その機能とは WebXRによる イマーシブな仮想現実です 仮想現実は奥が深いトピックです 個別にセッションを設けているのは そのためです しかし端的に言って Webでは WebXRを使用して 仮想現実を構築できます これは Safari内で直に動作する クロスプラットフォームの イマーシブな仮想現実体験を 作成するためのW3C標準です 事前のダウンロードは不要です 誰でもリンクで共有できる 真にイマーシブな体験のわずかな一瞬を 提供するのに最適です スマートフォンや高性能デスクトップ またはそれらの中間に位置する あらゆるデバイスに柔軟に対応する 体験を作成できます 私の対話式の 自転車安全チェックリストには WebXRを活用したVRモードがあります これは自転車の保守技術を学び直すのに ぴったりの手段です 準備作業も体験のうちです ただ ここでは実際に自転車に 乗ることはできませんが 以上がイマーシブメディアです Fullscreen APIによる 空間写真とパノラマ画像 WebAudio PannerNodeによる イマーシブオーディオ そしてWebXRと盛りだくさんです 何を開発するにしても その動作を確認したり うまく動作しない理由を 特定したりする作業が必要になります iOSやiPadOSと同様に Apple Vision ProをMacで Webインスペクタに接続して 詳細をすべて確認できます その手順を紹介します 最初に MacとApple Vision Proが 同一ネットワーク上にあることを確かめます ここでWebインスペクタも有効にする 必要があります これはシミュレータでは既定で有効です 物理デバイスでの場合 >で設定します 次に リモートデバイスに対して Apple Vision Proをオープンにします これは にあります 次に MacのSafariで メニューに移動します のラベルが付いた Apple Vision Proに 接続する項目が表示されます Vision Proによって 6桁の数字が生成されるので それをMacに入力します これで完了です この作業は2つのマシンを 初めて接続するときにのみ必要です その後は 2つのデバイスが 同一ネットワークに接続され 実行されていれば visionOSデバイスが Safariのメニューに現れます そこからDOMコンテンツやCSSルールを 調査できます JavaScriptコンソールで WebXRなど コードの記述が多い体験を調査できます また デバッグに必要な 1回限りの免除を適用できます これは ページのクロスオリジンポリシーの 緩和などです さらに Webインスペクタは仮想Macの 画面上に開いておくことができます すべてを一度に確認できて便利です 本当に今日は 内容が盛りだくさんでしたね 目 手 声によるインタラクションに始まり イマーシブメディアによる体験があり パノラマ写真と空間写真 Quick Look イマーシブオーディオ WebXRを紹介し visionOSでWebコンテンツの調査を 始める手順も確認しました これでコンテンツを思い通りにできます visionOSはジャーニーは開始した ばかりで 手探りの部分もあります これからさらに楽しみは増えてきます これらの機能の構築中に うまくいかないことがあるかもしれません 問題が発生した場合は bugs.webkit.orgまでご報告ください WebKitはオープンソースプロジェクトのため ごく小さなバグ報告からコード送信まで 皆さんからの貢献は それが実行されている すべての場所で プロジェクトに改善をもたらします SafariやvisionOSについて ご意見がありましたら いつもどおり フィードバックアシスタントを使って お知らせください このセッションが終わったら 今度は皆さんが自らのツアーに出る番です まだの方は Webインスペクタを有効にしましょう XcodeでvisionOSシミュレータを入手して 自分のWebコンテンツを見てみてください WebXRの詳細については 「Build Immersive Web Experiences with WebXR」をご覧ください AppleエコシステムとUSDを中心とした 3D作業の詳細については 「What's new in USD and Material X」をご覧ください ご視聴ありがとうございました またお会いしましょう