Topics
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
警告: この機能は現在2つのブラウザーベンダーによって反対されています。反対の詳細については下記の標準の位置づけの節を参照してください。
メモ: アプリケーションでこの機能を使用するには、登録プロセスが要求されます。
browsingTopics() は Document インターフェイスのメソッドで、ユーザーのトップトピックを表すオブジェクトの配列で履行されるプロミスを返します。これらのトピックは、その後のフェッチリクエストで広告技術プラットフォームに返すことができます。既定では、このメソッドは呼び出し側が監視する現在のページ訪問をブラウザーに記録するので、ページのホスト名を後でトピックの計算に使用することができます。
詳しくはトピック API の使用を参照してください。
メモ: browsingTopics() は他のトピック API を有効にする機能のように HTTP ヘッダーに頼ってトピックを送信したり、トピックを監視対象としてマークしたりすることはしませんが、パフォーマンスは少し落ちます。HTTP ヘッダーを使用する機能を使用し、ヘッダーを変更できない場合にのみ browsingTopics() で代替することをお勧めします。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.Document.browsingTopics 非推奨 非標準 | 126 | 126 | | | 126 | |
| HTML 属性 | ||||||
browsingtopics 非推奨 非標準 | 126 | 126 | | | 126 | |
| DOM API | ||||||
init_browsingTopics_parameter 非推奨 非標準 init.browsingTopics`パラメータ | 126 | 126 | | | 126 | |
browsingTopics 非推奨 非標準 browsingTopics は HTMLIFrameElement インターフェイスのプロパティで、関連付けられた iframe のソースに対するリクエストとともに、現在のユーザーが選択したトピックを Sec-Browsing-Topics ヘッダーで送信すべきであることを指定する論理値です。これは、HTML の browsingtopics 属性を反映しています。 | 126 | 126 | | | 126 | |
Request (init browsingTopics parameter) 非推奨 非標準 init.browsingTopics`パラメータ | 126 | 126 | | | 126 | |
| その他 | ||||||
html.elements.iframe.allow.browsing-topics 非推奨 非標準 | 115 | 115 | | | 115 | |
| HTTP Observe-Browsing-Topics 応答ヘッダーは、Topics API を有効にする機能によって生成されたリクエストへの応答で観察される、呼び出し元サイトの URL (つまり、広告技術 iframe が埋め込まれているサイト) から推測される関心のあるトピックをマークするために使用されます。 その後、ブラウザーはこれらのトピックを使用して、現在のユーザーのトップ トピックを計算します。 | 115 | 115 | | | 115 | |
| HTTP の Permissions-Policy ヘッダーの browsing-topics ディレクティブは、トピック API へのアクセスを制御します。 | 115 | 115 | | | 115 | |
http.headers.Sec-Browsing-Topics 非推奨 非標準 HTTP Sec-Browsing-Topics リクエスト ヘッダーは、現在のユーザーに対して選択されたトピックを関連リクエストとともに送信します。これは、表示するパーソナライズされた広告を選択するために広告テクノロジー プラットフォームによって使用されます。 | 115 | 115 | | | 115 | |
基本構文
const topics = await document.browsingTopics();
for (const topic of topics) {
console.log('Topic:', topic.topic, 'Version:', topic.version);
}実務での使いどころ
-
Topics の活用
Experimental: これは実験的な機能です。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。