このページは 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

その他

関連情報

登録