このページは 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: プライバシーに配慮した方法でインタレストベースの広告配信を可能にします。
Shared Storage: 安全な環境でパーティショニングされていないクロスサイトデータにアクセスできます。

プライバシーを保護するため、これらの API の一部では、コンテンツを埋め込む新しい方法が必要になります。このソリューションはフェンスドフレームと呼ばれます。

フェンス付きフレームは、他のプライバシーサンドボックスの提案と組み合わせて使用することで、異なるストレージパーティションのドキュメントを 1 つのページ内に表示できます。

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

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

特集	`iframe`	`fencedframe`
コンテンツを埋め込む	はい	はい
埋め込みコンテンツが埋め込みコンテキストの DOM にアクセスできる	はい	いいえ
埋め込みコンテキストが埋め込みコンテンツの DOM にアクセスできる	はい	いいえ
オブザーバブル属性（`name` など）	はい	いいえ
URL（`http://example.com`）	はい	○（ユースケースによって異なる）
ブラウザ管理のオパックソース（`urn:uuid`）	いいえ	はい
クロスサイトデータへのアクセス	いいえ	○（ユースケースによって異なる）

たとえば、news.example（エンベディングコンテキスト）が shoes.example からの広告をフェンスで囲まれたフレームに埋め込んだとします。news.example は shoes.example 広告からデータを漏洩できず、shoes.example は news.example からファーストパーティデータを学習できません。

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

Fenced Frames、Protected Audience API、Shared Storage などのドキュメントについては、こちらの記事をご覧ください。

Topics API

これまで、サードパーティ Cookie などのメカニズムを使用して、サイト間でユーザーのブラウジングアクティビティをトラッキングし、関心のあるトピックを推測してきました。こうしたメカニズムは、プライバシーサンドボックスイニシアチブの一環として段階的に廃止されています。

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

Topics API を使用すると、ユーザーがアクセスしたサイトをトラッキングすることなく、インタレストベース広告（IBA）を掲載できます。ブラウザは、ユーザーの閲覧アクティビティに基づいて、ユーザーの関心を引くと思われるトピックを観察して記録します。この情報はユーザーのデバイスに記録されます。

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

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

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

その他

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

メインスレッドの WebAssembly.Module の最大サイズを 8 MB に増やしました
CSS display プロパティが、従来のプリコンポーズキーワードに加えて、複数のキーワードを値として受け入れるようになりました。
Compute Pressure API にはオリジントライアルがあり、デバイスハードウェアの現在の状態に関する概要情報を提供します。

Chrome 115 の新機能

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

フェンス付きフレーム

Topics API

その他

関連情報

登録

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