コンピュータ

COMPUTER

公開：2024-06-13

Chrome126リリース、View Transitions APIやCloseWatcher APIなど機能が充実

text: XEXEQ編集部

Chrome126の新機能に関する記事の要約

• View Transitions APIでクロスドキュメント遷移がサポート
• CloseWatcher APIが再度使用可能に

Chrome126でView Transitions APIがクロスドキュメント遷移をサポート

Chrome 126ではView Transitions APIがアップデートされ、クロスドキュメント遷移がデフォルトでサポートされるようになった。これまではシングルページアプリケーションアーキテクチャでのみ利用可能だったが、同一オリジンのナビゲーション間でシームレスなビジュアルトランジションを作成できるようになった。^[1]

クロスドキュメントビュートランジションを実装するには、両端でオプトインする必要がある。@view-transitionアットルールを使用し、navigationディスクリプタをautoに設定することで実現できる。

クロスドキュメントビュートランジションは、同一ドキュメントビュートランジションと同じ構成要素と原則を使用する。詳細やサンプルについては、「Smooth transitions with the View Transition API」を参照するとよいだろう。

CloseWatcher APIが再有効化、ポップアップのクローズ処理が簡単に

要素やpopover属性を持つ要素に対し、CloseWatcher APIを使用することでクローズリクエストの処理が容易になる。デスクトッププラットフォームではESCキー、Androidではバックジェスチャーなどに対応できるようになった。

本機能はChrome 120で一度リリースされたが、dialog要素との予期せぬ相互作用により無効化されていた。Chrome 126では改善が行われ、以前の問題を最小限に抑えた上で再び有効化された。

CloseWatcherの使用方法についてはデモを参照するとよい。ポップアップのクローズ処理が直感的に実装できるようになるため、ユーザビリティ向上に役立つはずだ。

Chrome126の新機能に関する考察

Chrome 126のアップデートにより、ウェブアプリの遷移やインタラクションがよりスムーズになることが期待できる。一方でView Transitions APIの複雑さから開発者の学習コストが増す可能性もあるため、ドキュメントの整備と平易なサンプルの提供が求められるだろう。

CloseWatcher APIの再有効化は朗報だが、dialog要素との相互作用については引き続き注視が必要だ。仕様の安定化とブラウザ間の一貫した挙動の確保が望まれる。

参考サイト

1. ^ 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で確認しておりますが、間違い等ある場合はコメントよりご連絡いただけますと幸いです。

「コンピュータ」に関するコラム一覧「コンピュータ」に関するニュース一覧