Safariにおける空間コンピューティングについて

♪ メロウ インストゥルメンタル ヒップホップ ♪ ♪ Etienne Segonzac: こんにちは 私たちのセッションへようこそ Safari Teamのエンジニア Etienne Segonzacです チームメイトの Tim Hortonと一緒にお届けします 空間コンピューティングに 対応した 新しいSafariをご紹介します まったく新しいプラットフォームで Webを使えるようになるのは めったに無い貴重な機会です 私たちは細心の注意を払って ベストなブラウザを構築しました この新しいデバイスで見るWebは格別です ではさっそくSafariを動かしてみましょう Tim Horton: ありがとう Etienne では始めましょう xrOSで初めてSafariを開くと iPadやMacで慣れ親しんだ Safariと同じデザインだと お気づきになるでしょう 似ているのは見た目だけではありません Safariと同じ WebKitエンジンを搭載し 新プラットフォームのために 考え抜かれた機能が追加されています Web標準を幅広くサポートしており すべてのWebサイトがそのままで 美しく動作します Webブラウジングも簡単です リンクをたどるには 手でページをタッチするか リンクを見て指と指を合わせます リンクを見ている間は Safariがリンクをハイライトするため 自信をもってナビゲーションできます Safariを使っていると プラットフォームのパワーを最大限に 活用する方法がすぐに分かります 例えば タブの概要は 広大なディスプレイに合わせて 完全に再設計され タブの切り替えが楽しく行えます

このプラットフォームは マルチウインドウに対応しており Webサイトや他のアプリを自由に配置して これまでにないマルチタスクが可能です 私が特に気に入っているのは Mac Virtual Displayを使った 究極のWeb開発体験です また お気に入りのWebビデオを フルスクリーンにすると非常に見やすいです ♪ メロー インストゥルメンタル ヒップホップ ♪ こんにちは Kendall Bagleyです Safari Teamのソフトウェアエンジニアです このプラットフォームでも 同じようなWeb体験が可能ですが 留意すべきベストプラクティスもあります Etienneがそのいくつかを紹介します Etienne: ありがとうTim タブの概要はいいですね！ そして驚きなのは これらのWebサイトが すぐに使えることです レスポンシブデザインのおかげで iPhoneの手のひらサイズから 部屋全体のサイズまで対応できます Webサイトの改良を続けるために お使いのテクニックは このプラットフォームでも適用可能です CSSのビューポイント単位で レイアウトをデザインし メディアクエリとコンテナクエリで ウインドウのサイズ変更に対応させましょう グラフィックは 特にUI要素についてはSVGが望ましいです そうすることでウインドウが近くにあっても 可能な限り 最高のレンダリングが可能になります ビットマップアセットを 使う必要がある場合 devicePixelRatioとレスポンシブ画像は 画像の読み込みとキャンバスの レンダリングに対して 推奨解像度が反映されます 本日は この新しい エクスペリエンスの核となる 自然なインタラクションについて学び このプラットフォーム用に Webサイトを最適化し Web上の3Dコンテンツの ユニークな可能性について考えてみましょう ここで 直接ジェスチャーと 間接ジェスチャーについて 掘り下げてみましょう このデバイス上のメインの入力モデルは 視線と手のジェスチャーを 融合して動作します Timが実演した通り とても自然です 対象を見て 指と指を合わせ つまむ動作をします 指を合わせると 視線を基にHTMLターゲットが選ばれ pointerdownイベントが発生します ジェスチャー中 pointermoveイベントが 手の動きをフォローし 指を離すと pointerupが発生します 人差し指で直接ページに 触れることもできます 指がウインドウと交差すると 指の位置に応じて pointerdownイベントが発生します 先ほどと同じように pointermoveイベントが動きを追跡し 指がウインドウから離れると pointerupが発生します もちろん 簡単なインタラクションであれば ローレベルのポインタイベントを 気にする必要はありません Safariは従来通りクリックイベントを トリガーし スクロールと スクロールスナップも同様に動作します メディアクエリについては 主要な入力モデルは タッチスクリーンに似ています ポインタはcoarseで ホバーは未対応です しかし トラックパッドやキーボードが Bluetoothで接続されている 可能性にも注意が必要です ページをブラウズしている最中に ホバーが発生せず 疑問に思うかもしれません それは このデバイスが 新しい方式で視覚的な フィードバックを得ているからです ユーザーが要素を見ると タップせずともハイライトされます 従って WebサイトもSafari自体も ユーザーの視線を気にする必要はありません システムはインタラクティブ領域に よって動作しています これはアクセシブルマークアップと CSSスタイリングに基づき SafariのWebKitエンジンが 自動的に生成します ボタン リンク メニューや ARIAロールに対応する要素は 自動的にハイライトされます 入力フィールドやフォーム要素も同様で カスタムスタイルでも同じく動作します ただし インタラクティブな HTML要素の場合は cursor: pointer; を使うようにしてください 実際に見てみましょう ここではファイル一覧UIを作成しています リスト内のアイテム用に カスタム要素を設定しています cursor: pointer を追加して ハイライト出来るようにします このカスタム要素は 内部でdivを使用しており カーソルプロパティが継承されます そのためアイコンとラベルに 別の領域が設定され 別々にハイライトされます 内部のdivにpointer-events: noneを 設定することで これを解決できます WebKitがこれらを個別に ハイライトする必要が無いと認識します また 常に同じイベントターゲットを 取得するためイベントハンドリングコードも 簡略化されます また CSSのborder-radius プロパティを使うことで 要素のすべての角に角丸を追加したり 一部に角丸を追加して ハイライトの形を 整えることもできます 完全な円形にもできますが 各要素のビジュアルスタイルに 合わせることが大切です Tim 僕たちが作っている Webサイトだけど インタラクティブ領域を 改善した方が良いかな？ Tim: じゃあ見てみようか

デバイスが無くても xrOSシミュレータを使って ハイライト領域をデバッグできます ウインドウ周辺でマウスカーソルを 動かすと視線がシミュレートされ クリックはタップをシミュレートします シミュレータでSafariを開いて Webサイトのハイライトを 改善してみましょう このページを見てまず気づいたのは ナビゲーションバーのボタンが ハイライトしないことです 先ほど Etienneが SafariはカーソルCSSプロパティを使って インタラクティブ性を 判断すると言っていました これらのボタンは macOS版Safariでもハンドカーソルが 表示されないので それが原因かもしれません Web Inspectorで確認しましょう 詳細については “Safariのデベロッパ機能の再発見”を ご覧ください Web Inspectorを使って カーソルスタイルの誤りを見つけました 削除して リンクは デフォルトのcursor: pointer スタイルにしましょう

良いですね ハイライトされましたが 場所がおかしいようです 実際は Webサイトのミスのようです macOSでも テキストだけが反応しています ボタンをクリックしても リンク先に飛びません Webサイトのミスを修正することで このプラットフォームでの 見た目も改善されます これですべてが解決できそうです テキストだけでなく ボタン全体をリンクにします

では見てみましょう

良くなりましたね ボタン全体が反応し ハイライトされています 良く見てみると 角が そろっていません Safariのハイライト半径は デフォルトで小さいので インタラクティブ要素に ボーダー半径がある場合は それを考慮しましょう 直してみます

インタラクティブ要素に 同じボーダー半径を追加します

完璧です 思った通りにハイライトされました ではタップしてみます

iPadに比べてスコアの アニメーションが速いですね まだ修正点はありそうですが これについては後ほど直しましょう まずはEtienneが Webサイトの最適化について解説します Etienne: ありがとう Tim このプラットフォームに最適化する際に いくつかのことを念頭に置く必要があります 以前 Retinaディスプレイを紹介した時 ピクセルの概念が少し抽象的になりました Webデベロッパやデザイナーは CSSピクセルで作業し 必要な数のデバイスピクセルを使うことで ユーザーエージェントを ハードウェアに適応させてきました 今日 スクリーンという 概念は抽象的になりつつあります フルスクリーンを要求するのは 一つの要素に集中するためです ページの残りの部分はフェードアウトし 同時にウインドウは デフォルトサイズにリサイズされます このデフォルトサイズもJavaScriptに 画面サイズとして伝えられるため ウインドウと画面サイズが 一致することを前提とした Webサイトは引き続き動作します しかし このプラットフォームでは フルスクリーンのサイズが変更できます そして 伝えられた 画面サイズより 大きくなることがあり得るのです スクロールとアニメーションに関して 特にこのデバイスでは すべての アニメーションを可能な限り 最高のフレームレートで 動作しようとするため パフォーマンスが鍵となります パッシブスクロールイベントリスナー を使うと アニメーションがスクロールに干渉しません また requestAnimationFrameを使う場合は 常に各フレーム間の 経過時間を測定してください Web Inspector Timelinesは パフォーマンスの問題を 特定するのに役立ちます 詳しくはWeb Inspectorの Tech Talkを参考にしてください

requestAnimationFrameについて言うと 私のアニメーションは少し粗いです 実行時間はanimate()を 呼び出す頻度に依存しています そしてこの頻度は デバイスによって上下します 代わりに それぞれの更新時間を測定し それを使って アニメーションの進行を 計算することにします シンプルな方法で requestAnimationFrameの リフレッシュレートから アニメーションを切り離せます これがスコアの アニメーションの問題点でした Tim: そうだね もう直したよ デバイスで動かしてみます

良くなりました これでどんなデバイスの フレームレートにも 対応できるようになりました ティーウェアはどれも素敵に見えますが さらに改善できそうです Quick Lookを活用すれば 実際にテーブルに 置いた様子を簡単に実現できます iOSのAR Quick Lookと同様に 画像の周りに USDZファイルを参照するアンカーを 追加するだけで シンプルな画像が 魔法のようなQuick Look体験に変わります これでどれが合うかが分かりますね Etienne どれがいいかな？ Etienne: 自分のキッチンで 試さないと分からないけど これは良くできてるね 素晴らしいデモです スピード感があって楽しかったです そしてQuick Lookは まったく別の次元をサイトにもたらしました Webサイトに3Dコンテンツを 組み込む方法を見てみましょう AR Quick Lookはもともと iOS 12で導入されました 必要なのは 特別な属性を持つUSDZファイルを 示すリンクと 3Dモデルのプレビューを 表示するためのイメージタグだけです この設定はxrOSで動作し 3Dオブジェクトを簡単に 空間に置くことができます さらに RealityKitの高度な レンダリングとライティングの 恩恵も受けられます 詳細については “USDエコシステムの詳細”を ご覧ください さらに HTMLのmodel要素も W3C標準の候補として提案されています ページ内のAR Quick Look あるいは 3Dオブジェクトの イメージタグのようなものと思ってください これにより 完全な立体視や 環境ライティングに至るまで あらゆるデバイスで可能な限り 最高のレンダリングが実現します まったく新しい要素を 導入することは大きなステップです そこで 3Dオブジェクトのソースを指定する 簡単な方法と ユーザーインタラクションを 有効または無効にする 属性から始めていきましょう JavaScript APIはさらにリッチです カメラやアニメーションにアクセスできます 面白そうですね 最新のSafariを使えば どのプラットフォームでも モデル要素機能フラグを有効にできます さらに詳しく知りたい方は WebXRの開発者プレビューを チェックしましょう 完全没入型のシーンをWebで 構築するためのW3C標準です WebXRはWebGLをベースにしており 多くの一般的なWebGLライブラリは すでにビルトインでサポートされています 3Dシーンのコードがあれば WebXRセッションをリクエストして フルイマーシブにできます マウスやトラックパッドで 操作するのとは全く違った体験です 文字通り シーンの中に入り込む感覚です これは実際にやってみないと分かりません xrOSでは Safariの詳細設定で WebXR機能のフラグを見ることができます そしてこれはほんの始まりです イマーシブなWebに関しては 探求の余地がまだたくさんあります CSSトランスフォームや ポインタイベントのような テクノロジーは この新しい プラットフォームで進化していくでしょう だからこそAppleは W3CWeb標準の 定義と開発に積極的に参加しています そして 皆さんにも意見を 提供する機会があります ご意見ご感想 今後の期待についてお聞かせください 今日から新しい3D体験を試すことができます インタラクティブな領域は xrOSシミュレータで簡単に確認できます バグがありましたら Feedback Assistantが すべてのプラットフォームで利用可能です HTML JavaScript CSSに関しては WebKitのバグトラッカー bugs.webkit.orgをご利用ください CSSと言えば 今年はSafariに 多くの新機能が追加されます “CSSの新機能”をお見逃しなく 皆さんありがとうございました Tim: イマーシブなWebでお会いしましょう！ ♪