このページは Cloud Translation API によって翻訳されました。

Chrome 115 の新機能

Adriana Jara

必知事項は次のとおりです。

ScrollTimeline と ViewTimeline を使用して、ユーザーエクスペリエンスを向上させるスクロールドリブンアニメーションを作成します。
フェンス付きフレームは他のプライバシーサンドボックス API と連携して、不要なコンテキスト共有を防止しながら関連コンテンツを埋め込みます。
Topics API により、ブラウザはプライバシーを保護しながら、ユーザーの興味や関心に関する情報をサードパーティと共有できます。
他にもさまざまな機能があります。

Adriana Jara です。Chrome 115 のデベロッパー向け新機能を詳しく見ていきましょう。

スクロールドリブンアニメーション

スクロールドリブンアニメーションは、ウェブ上で一般的な UX パターンです。スクロールドリブンアニメーションは、スクロールコンテナのスクロール位置にリンクされます。つまり、上下にスクロールすると、リンクされたアニメーションがダイレクトレスポンスで前または後に移動します。

次の例は、いくつかのユースケースを示しています。たとえば、スクロールに応じて移動する読書インジケーターを作成できます。

ドキュメントの上部に表示される、スクロールによって表示される読書インジケーター。

スクロールドリブンアニメーションでは、ビューに入ったときにフェードインする要素を作成することもできます。

このページの画像は、ビューに表示されるとフェードインします。

デフォルトでは、要素に適用されているアニメーションはドキュメントのタイムラインで実行されます。ページが読み込まれると、オリジンの時刻は 0 から始まり、時間の経過とともに進み始めます。これはアニメーションタイムラインのデフォルトですが、これまでは、この他に利用できるアニメーションタイムラインはありませんでした。

スクロールドリブンアニメーションの仕様では、使用できる次の 2 種類のタイムラインが定義されています。

スクロール進行状況タイムライン: 特定の軸に沿ったスクロールコンテナのスクロール位置にリンクされているタイムライン。
ビュー進行状況タイムライン: スクロールコンテナ内の特定の要素の相対位置にリンクされているタイムライン。

次のコードサンプルは、匿名のスクロール進行状況タイムラインを使用して、読書の進行状況インジケーターをビューポートの上部に固定するものです。

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

詳細とその他の例については、スクロールドライブアニメーションをご覧ください。

フェンス付きフレーム

プライバシーサンドボックスは、オンラインユーザーのプライバシーを保護するとともに、デベロッパーにデジタルビジネスで成功するためのツールを提供するテクノロジーの開発を目的とした取り組みです。

その提案の多くは、サードパーティ Cookie やその他のトラッキングメカニズムを使用せずに、クロスサイトのユースケースに対応することを目的としています。次に例を示します。

Protected Audience API: プライバシーに配慮した方法でインタレストベース広告を配信できます。
共有ストレージ: 安全な環境でパーティション分割されていないクロスサイトデータにアクセスできます。

プライバシー保護のため、一部の API ではコンテンツを埋め込む新しい方法が必要となります。この解決策はフェンス付きフレームと呼ばれます。

フェンス付きフレームは、プライバシーサンドボックスの他の提案と連携して機能し、異なるストレージパーティションのドキュメントを 1 ページに表示します。

フェンス付きフレームは埋め込みコンテンツ用の HTML 要素で、iframe と同様です。iframe とは異なり、フェンス付きフレームはエンベディングコンテキストとの通信を制限し、フレームがエンベディングコンテキストと共有することなくクロスサイトデータにアクセスできるようにします。

同様に、エンベディングコンテキストのファーストパーティデータをフェンス付きフレームと共有することはできません。

特集	`iframe`	`fencedframe`
コンテンツの埋め込み	○	○
埋め込みコンテンツは埋め込みコンテキスト DOM にアクセスできます	○	×
埋め込みコンテキストは埋め込みコンテンツの DOM にアクセスできます	○	×
監視可能な属性（`name` など）	○	×
URL（`http://example.com`）	○	○（ユースケースによって異なる）
ブラウザ管理の不透明ソース（`urn:uuid`）	×	○
クロスサイトデータへのアクセス	×	○（ユースケースによって異なる）

たとえば、news.example（エンベディングコンテキスト）によって、shoes.example の広告がフェンス付きフレームに埋め込まれているとします。news.example が shoes.example 広告からデータを抽出することはできません。また、shoes.example が news.example の自社データを学習することもありません。

ストレージパーティショニングの前後の状態の比較。

フェンス付きフレーム、Protected Audience API、共有ストレージなどに関するドキュメントについては、以下の記事をご覧ください。

Topics API

これまでは、サードパーティ Cookie やその他のメカニズムが、サイトをまたいでユーザーの閲覧行動を追跡して関心のあるトピックを推測するために使用されていました。これらのメカニズムは、プライバシーサンドボックスの取り組みの一環として段階的に廃止されています。

Topics API により、ブラウザはプライバシーを保護しながら、ユーザーの興味や関心に関する情報をサードパーティと共有できます。

Topics API により、ユーザーがアクセスしたサイトをトラッキングすることなく、インタレストベース広告（IBA）を実現できます。ブラウザでは、ユーザーの閲覧アクティビティに基づいて、ユーザーが興味を持ちそうなトピックをモニタリングして記録します。この情報はユーザーのデバイスに記録されます。

たとえば、ウェブサイト knitting.example にアクセスするユーザーに対して、トピック "Fiber & Textile Arts" が提案されます。

トピックは、広告テクノロジープラットフォームが関連性の高い広告を選択するためのシグナルです。サードパーティ Cookie とは異なり、この情報は、ユーザー自身やユーザーの閲覧アクティビティに関する詳細情報を開示することなく共有されます。

トピックの分類と Topics API の使用について詳しくは、プライバシーサンドボックスの概要をご覧ください。

など多数

他にもたくさんあります。

メインスレッドの WebAssembly.Module の最大サイズが 8 MB に引き上げられました
CSS の display プロパティでは、以前の事前作成済みキーワードのほかに、複数のキーワードを値として受け入れるようになりました。
Compute Pressure API のオリジントライアルがあり、デバイスハードウェアの現在の状態に関する大まかな情報が提供されます。

Chrome 115 の新機能

スクロールドリブン アニメーション

フェンス付きフレーム

Topics API

など多数

関連情報

登録

スクロールドリブンアニメーション