ウェブブラウザ「Google Chrome」の最新安定版であるバージョン116.0.5845.97がリリースされました。ムービーに限らずさまざまな要素をピクチャーインピクチャーで表示する機能や、複雑な2Dアニメーションを簡単に行えるモーションパスの機能などが追加されています。

New in Chrome 116: Document Picture-in-Picture API, notRestoredReasons property, and more! - YouTube

◆ムービー以外でもピクチャーインピクチャー機能を利用可能に

以前より、再生中のムービーをポップアウトして再生するピクチャーインピクチャー機能が存在していましたが、Chrome 116からはムービーに限らず任意の要素をピクチャーインピクチャーで利用することが可能になります。



例えば、ボタンをクリックするとIDが「player」の要素をピクチャーインピクチャーで表示する場合を考えてみます。



下記の通り「documentPictureInPicture.requestWindow()」を利用してピクチャーインピクチャーを開き、そのウィンドウオブジェクトに表示したい要素を当てはめればOKです。



ムービー再生以外に、タスク管理のタイマーやストップウォッチなどで利用することが考えられそうです。



◆バック／フォワードキャッシュでキャッシュされなかった理由を通知可能に

ウェブサイトのリンクをクリックした直後に目的のページではないと気付いて「戻る」をクリックした経験がある人は多いはず。一度開いていたページの完全なスナップショットをメモリに保存しておくことで、ページを再訪する際の表示速度を向上させる技術が「バック／フォワードキャッシュ」です。

バック／フォワードキャッシュ自体はChrome 96で導入が完了済みですが、Chrome 116にてバック／フォワードキャッシュの利用がブロックされた時にその理由を通知する仕組みが導入されました。ブロックされた理由はPerformanceNavigationTimingインターフェースを通して確認することができ、通知される理由の詳細な説明についてはスプレッドシートで確認可能です。



◆CSSのインポート失敗時にエラーメッセージが出現するように

CSSにおいて、「@import」文でエラーが発生した場合に赤い波線や「×」マークでエラーが通知されるようになりました。



開発者ツールの「ソース」画面のほか、コンソールにもエラーの内容と発生箇所が表示されます。



また、開発者ツールの「問題」タブにもエラー内容が表示されるとのこと。



◆その他の変更点

・ReadableStreamの実装がBYOBリーダーをサポート

Response.bodyの中身が標準のReadableStreamからreadable byte streamになることで、Fetch APIでBYOBリーダーを使用できるようになったほか、ガベージコレクションのオーバーヘッドとコピーが削減されてユーザーの応答性が向上しています。

・CSSのモーションパスで多数の関数をサポート

モーションパスを利用すると、オブジェクトのアニメーションの経路を指定することが可能になります。Chrome 116からは従来の座標での指定に加えて、「ray()」「circle()」「ellipse()」「rect()」「inset()」「xywh()」「polygon()」「url()」などの関数を利用した指定が可能になり、複雑な2Dアニメーションを簡単に設定できるようになっています。

・アニメーションで「display」と「content-visibility」を変化可能に

アニメーション終了後に「display: none」や「content-visibility: hidden」になるようなアニメーションをJavaScriptを使用せずに実現できるようになりました。

また、Google Chrome 116には26件のセキュリティバグフィックスが含まれています。

なお、次期安定版の「Google Chrome 117」は現地時間の2023年9月12日にリリース予定です。