【時間がない人向け】記事の3行要約
- Chrome 126でView Transitions APIがオリジン間ナビゲーションをサポート
- CloseWatcher APIが再度利用可能に、Gamepad APIにtrigger-rumble機能追加
- DevToolsでストレージバケットの専用ツリーを追加、ChromeOSでタブ付きウェブアプリをサポート
Chrome 126、View Transitions APIのオリジン間ナビゲーションサポートを導入
Google ChromeチームはChrome 126において、View Transitions APIのオリジン間ナビゲーションサポートを導入した。これにより、シングルページアプリケーション以外でもシームレスな画面遷移が可能になる。オリジン間ビュートランジションを実装するには、双方のページで@view-transitionルールにnavigation: autoを指定する必要がある。[1]
同APIは以前からシングルページアプリケーション向けに提供されていたが、今回の拡張によりマルチページサイトでも活用できるようになった。ただし、遷移元と遷移先のオリジンが異なる場合は、双方のページでView Transitionsを有効化しておく必要があるため注意が必要だ。
また、View Transitionsを使用する際は、ページ間で共通するコンテンツの配置やスタイルを揃えておくことが重要だ。こうすることで、ユーザーに違和感のない滑らかな遷移を提供できる。オリジン間での導入ハードルは高くなるが、没入感の高いWebサイトを実現する上で強力な手段になりそうだ。
Chrome 126、CloseWatcher APIの再有効化とGamepad APIの拡張を実施
Chrome 126では、一時無効化されていたCloseWatcher APIが再度利用可能になった。同APIは、
またGamepad APIにも、trigger-rumble機能が追加された。これは、対応するゲームコントローラーのトリガーを振動させることで、よりリッチなゲーム体験をWebにもたらす。GamepadHapticActuatorインターフェースを拡張したもので、vibrationActuator.playEffect()メソッドに'trigger-rumble'を指定することで利用できる。
GeolocationCoordinatesとGeolocationPositionにも、.toJSON()メソッドが追加された。これにより、位置情報オブジェクトのJSONシリアライズが容易になる。DevToolsでは、Application > Storageセクションにストレージバケット用の専用ツリーが追加され、PWAのデータ管理が強化された。ChromeOSでは、ウェブアプリのタブ付きモードがサポートされた。
trends編集部「K」の一言
Chrome 126のアップデートは、Webアプリケーションのユーザーエクスペリエンスを大きく改善する可能性を秘めている。View Transitions APIのオリジン間ナビゲーションサポートにより、サイト全体を通じたシームレスな画面遷移が実現できるようになるだろう。ただし、遷移元と遷移先の両方でView Transitionsを有効化し、共通するコンテンツのレイアウトを揃える必要があるため、導入にはある程度の工数がかかることが予想される。
CloseWatcher APIの再有効化とGamepad APIのtrigger-rumble機能追加も見逃せない。前者はモーダルダイアログやポップオーバーの操作性を向上させ、後者はWebゲームにおける没入感を高めることができる。ChromeはWebプラットフォームの機能拡張を着実に進めており、ネイティブアプリに迫る表現力をWebに付与しつつある。
PWAの開発者にとっては、DevToolsのストレージ管理機能強化が嬉しいところだ。データの保存先や容量が一目で把握でき、問題の特定が容易になるはずだ。またChromeOSでタブ付きウェブアプリのサポートが始まったことで、より高度なマルチタスク機能を持つPWAの登場が期待される。プラットフォームの垣根を越えたアプリ体験の実現に向け、Chromeはその可能性を広げ続けている印象だ。
今後のChromeに期待したいのは、WebAssemblyのさらなる活用だ。RustやC++で記述された高速なWebAssemblyモジュールと、JavaScriptで構築された柔軟なフロントエンドを組み合わせることで、Webアプリケーションのパフォーマンスと表現力を飛躍的に高められるはずだ。WebGPUのような次世代Web APIとの連携も視野に入れつつ、WebAssemblyエコシステムの発展にも注力してほしい。
References
- ^ Chrome for Developers. 「New in Chrome 126 | Blog | Chrome for Developers」. https://developer.chrome.com/blog/new-in-chrome-126?hl=en, (参照 24-06-13).
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
- 研究・リサーチに役立つGPTsのおすすめ10選|人気のあるGPTをランキング形式で紹介
- 製造業のDX推進に役立つツール一覧|活用する重要性とメリットも解説
- テキストを図式化できるAIツール「Eraser」の使い方を料金プランと併せて解説。
- Gemini搭載のAIノートブック「NotebookLM」の使い方。具体的な特徴とできることを詳しく解説
- 【プログラミング学習】スクールの挫折率は3.5%で独学中心の挫折率は86%|スクールの利用が挫折率を下げる理由とは