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では、ウェブアプリのタブ付きモードがサポートされた。

おすすめのPython研修一覧

Python研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Python研修の一覧を見る

おすすめのDX研修一覧

DX研修を提供しているおすすめの企業・法人を一覧で掲載しております。

DX研修の一覧を見る

おすすめのJava研修一覧

Java研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Java研修の一覧を見る

おすすめのJavaScript研修一覧

JavaScript研修を提供しているおすすめの企業・法人を一覧で掲載しております。

JavaScript研修の一覧を見る

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で確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。