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

これまで誰もリンクしたことがない場所に大胆なリンクをする: テキストフラグメント

テキストフラグメントを使用すると、URL フラグメントにテキストスニペットを指定できます。そのようなテキストフラグメントを含む URL に移動すると、ブラウザはユーザーの注意を引くことができます

Thomas Steiner

フラグメント識別子

Chrome 80 は大きなリリースでした。待望の機能が数多く含まれていました。たとえば、ウェブワーカーの ECMAScript モジュール null 結合、オプションチェーンなど。リリースは通常どおり発表されたブログ投稿（英語） Chromium ブログ次のスクリーンショットは、ブログ投稿の抜粋です。

赤いボックスがどのような意味を持つのか疑問に思われているかもしれません。これらは次のスニペットを作成します。id 属性を持つすべての要素がハイライト表示されます。

document.querySelectorAll('[id]').forEach((el) => {
  el.style.border = 'solid 2px red';
});

赤いボックスでハイライト表示された要素へのディープリンクを配置できます。フラグメント識別子これを、データセットの hash で使用します。できます。たとえば、[フィードバックを送信する [プロダクトフォーラム] ボックス（これは URL を手作業で作成して https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1。デベロッパーツールの [Elements] パネルを見るとわかるように、該当する要素には id が付いています。値を HTML1 に設定します。

JavaScript の URL() コンストラクタでこの URL を解析すると、さまざまなコンポーネントが表示されます。 hash プロパティの値が #HTML1 になっていることに注意してください。

new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
  hash: "#HTML1"
  host: "blog.chromium.org"
  hostname: "blog.chromium.org"
  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
  origin: "https://blog.chromium.org"
  password: ""
  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
  port: ""
  protocol: "https:"
  search: ""
  searchParams: URLSearchParams {}
  username: ""
}
*/

要素の id を見つけるためにデベロッパーツールを開く必要があったことは確かですが、ページの特定のセクションが作成者によってリンクされるはずだった確率ブログ投稿をご覧ください。

id のないものにリンクする場合はどうすればよいですか？たとえば、ECMAScript モジュールウェブワーカーの見出しで確認します。以下のスクリーンショットからわかるように、問題の <h1> は id 属性があるため、この見出しにリンクする方法はありません。これが、テキストフラグメントが解決します。

テキストフラグメント

テキストフラグメントの提案では、 URL ハッシュでテキストスニペットを指定する。このようなテキストを含む URL に移動すると、ユーザーの注意を引くことができます。

ブラウザの互換性

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

セキュリティ上の理由から、この機能を使用するには noopener コンテキスト。そのため rel="noopener": <a> アンカーマークアップまたは追加 noopener を Window.open() ウィンドウ機能機能のリスト。

`start`

テキストフラグメントの構文を最も簡単な形式で表すと、ハッシュ記号 # の後に :~:text=、最後は start がデータを表すパーセントエンコードテキストを入力します。

#:~:text=start

たとえば、「Web Workers の ECMAScript モジュール」という見出しを Chrome 80 の機能をお知らせするブログ投稿、この場合の URL は次のようになります。

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers

テキストフラグメントはこのように強調されます。 Chrome などの対応ブラウザでリンクをクリックすると、テキストフラグメントがハイライト表示され、ビューにスクロールします。

`start`、`end`

次に、「Web Workers の ECMAScript モジュール」というタイトルのセクション全体にリンクする場合は、どうすればよいでしょうか。セクションのテキスト全体をパーセントでエンコードすると、URL になります。非常に長くなります。

幸いなことに、もっと良い方法があります。テキスト全体ではなく、 start,end 構文。そのため、先頭にパーセントでエンコードされた単語をいくつか指定します。目的のテキストの後に、パーセントでエンコードされた単語を数個で区切って指定します。カンマ , で区切って入力します。

次のようになります。

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.。

start の場合は、ECMAScript%20Modules%20in%20Web%20Workers の後にカンマ , を続けます。作成者: ES%20Modules%20in%20Web%20Workers.（end として）。対応ブラウザをクリックするとセクション全体が強調表示され、スクロールすると表示されます。

ここで、start と end のどちらを選ぶべきか迷うかもしれません。実際には、URL が少し短く、 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. 単語が 2 つしかない場合もうまくいくでしょう。start と end を使用します。

さらに一歩進めて、start と end の両方に 1 つの単語だけを使用すると、次のようになります。苦労していることがわかる。URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. 短くなりましたが、ハイライト表示されたテキストフラグメントは元々目的のものではなくなりました。「「Workers.」という単語が最初に出現したときにハイライト表示が停止します。これは正しいのですが、取り上げます問題は、目的のセクションが特定のフィールドで一意に識別されないことです。現在の 1 単語の start と end の値:

意図しないテキストフラグメントがスクロールされて表示され、ハイライト表示される。

`prefix-`、`-suffix`

一意のリンクを取得するための解決策の 1 つは、start と end に十分な長さの値を使用することです。ただし、場合によっては不可能なこともあります。ちなみに、私は Google Cloud の Chrome 80 リリースのブログ投稿を例にとりましょう。その答えは、このリリースの Text Fragment が、導入されました。

ブログ投稿のテキスト: テキスト URL フラグメント。ユーザーや作成者は、URL で提供されたテキストフラグメントを使用して、ページの特定の部分にリンクできるようになりました。ページが読み込まれると、ブラウザはテキストをハイライト表示し、フラグメントが表示されるようにスクロールします。たとえば、次の URL は「Cat」の Wiki ページを読み込みます。`text` パラメータにリストされているコンテンツまでスクロールします。 — テキストフラグメントに関するお知らせのブログ投稿の抜粋

上のスクリーンショットの「text」という単語の4 回出現します。4 回目は緑色のコードフォントで書かれています。この単語にリンクする場合は、start にします。宛先: text単語「text」は単語が 1 つだけの場合、end は指定できません。その場合、何をすべきでしょうか。「 URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text 単語 "Text" が最初に出現した箇所に一致します。次の見出しにすでに含まれています。

で確認できます。

幸いなことに、解決策があります。このような場合は、prefix- と -suffix を指定します。「緑色のコードフォントの「text」の前にある単語「the」の後に続く単語は「parameter」です。該当なし他の 3 つの単語「text」が含まれる前後に同じ単語が来ています。これを装備前の URL を微調整して、prefix- と -suffix を追加できます。同じパラメータもパーセントでエンコードする必要があり、複数の単語を含めることができます。 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter。パーサーが prefix- と -suffix を明確に識別できるようにするには、これらを分離する必要があります。 start とオプションの end から - ダッシュを付けます。

完全な構文

テキストフラグメントの完全な構文を以下に示します。（角かっこは省略可能なパラメータを示します）。すべてのパラメータの値はパーセントでエンコードする必要があります。特にダッシュボードでは -、アンパサンド &、カンマ , 文字。これらの文字はテキストの一部として解釈されません。ディレクティブの構文を使用します。

#:~:text=[prefix-,]start[,end][,-suffix]

prefix-、start、end、-suffix は、それぞれ 1 つのブロックレベルの要素ただし、完全な start,end 範囲は複数のブロックにまたがることはできます。たとえば次の例では、:~:text=The quick,lazy dog は一致に失敗します。これは、最初の文字列「The Quick」連続する単一のブロックレベルの要素内には出現しません。

<div>
  The
  <div></div>
  quick brown fox
</div>
<div>jumped over the lazy dog</div>

ただし、この例では一致しています。

<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>

ブラウザ拡張機能を使用してテキストフラグメント URL を作成する

手作業でテキストフラグメントの URL を作成するのは面倒です（特に、URL が確実に作成されているかを確認する場合）一意です。どうしても必要な場合は、仕様にヒントや具体的な手順が記載されているので、テキストフラグメント URL を生成する手順をご覧ください。 Google が提供するオープンソースのブラウザ拡張機能です。テキストフラグメントへのリンク。次のことができます。任意のテキストへのリンクを選択してから、[選択したテキストにリンクをコピー] をクリックします。コンテキストで選択します。この拡張機能は、次のブラウザでご利用いただけます。

で確認できます。 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph> テキストフラグメントへのリンクできます。

1 つの URL に複数のテキストフラグメントが含まれている

1 つの URL に複数のテキストフラグメントが含まれる場合があることにご注意ください。特定のテキストフラグメントは、アンパサンド文字 & で区切ります。3 つのテキストフラグメントを含むリンクの例を次に示します。 https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet。

要素フラグメントとテキストフラグメントの混在

従来の要素フラグメントは、テキストフラグメントと組み合わせることができます。両方があってもかまいません。たとえば、ページの元のテキストが続く場合に、意味のある代替テキストとして一致するテキストフラグメントがなくなるようにする必要があります。URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. [フィードバックをお寄せください] セクションへのリンクプロダクトフォーラム セクション要素フラグメント（HTML1）とテキストフラグメントの両方が含まれている (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

フラグメントディレクティブ

この構文には、まだ説明していない要素が 1 つあります。フラグメントディレクティブ :~: です。避けるべきこと既存の URL 要素フラグメントとの互換性の問題がある場合、テキストフラグメント仕様にフラグメントが導入されています。指定します。フラグメントディレクティブは、URL フラグメントの一部であり、コードシーケンスで区切られます :~:。text= などのユーザーエージェントの手順用に予約されており、URL から削除されます。直接やり取りできないようにする必要があります。ユーザーエージェントの手順は ディレクティブとも呼ばれます。したがって、具体例の場合、text= はテキストディレクティブと呼ばれます。

機能検出

サポートを検出するには、document で読み取り専用の fragmentDirective プロパティをテストします。フラグメントディレクティブは、ドキュメントをご覧くださいこれは、将来のユーザーエージェントがスクリプトとの直接のやり取りを既存のコンテンツに互換性を破る変更が加えられることを恐れることなく、指示を追加できます。1 本今後追加される可能性がある例として、翻訳ヒントがあります。

if ('fragmentDirective' in document) {
  // Text Fragments is supported.
}

注: Chrome 80 から Chrome 85 まで、fragmentDirective プロパティは Location.prototype に定義されていました。この変更の詳細については、WICG/scroll-to-text-fragment#130 をご覧ください。

機能検出は主に、リンクが動的に生成される場合（例: （検索エンジンなど）を使用してテキストフラグメントリンクをテキストフラグメントでサポートしていないブラウザには配信しないようにします。

テキストフラグメントのスタイルを設定する

デフォルトでは、ブラウザによるテキストフラグメントのスタイル設定方法は、ブラウザでのデフォルトの設定と同じ方法と同じです。 mark（通常は黄色地に黒色、 CSS のシステムカラー（mark の場合）。user-agent スタイルシートには、次のような CSS が含まれています。

:root::target-text {
  color: MarkText;
  background: Mark;
}

ご覧のとおり、ブラウザには疑似セレクタが表示されます。 ::target-text: 適用されたハイライトをカスタマイズします。たとえば、テキストフラグメントを黒色に設計できます。背景にテキストを配置しています。忘れずに色のコントラストを確認スタイル設定のオーバーライドによってユーザー補助の問題が発生することがないよう、目立たせることが重要です

:root::target-text {
  color: black;
  background-color: red;
}

ポリフィル性

テキストフラグメント機能は、ある程度のポリフィルが可能です。Google の polyfill: コンテナが内部的に使用されますこの拡張機能: 機能が JavaScript で実装されているテキストフラグメントの組み込みサポートを提供します。

プログラムによるテキストフラグメントリンクの生成

polyfill にはファイルが含まれる fragment-generation-utils.js は、テキストフラグメントのリンクをインポートして生成するために使用できます。これは、以下のコードサンプルで概要を示します。

const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
  let url = `${location.origin}${location.pathname}${location.search}`;
  const fragment = result.fragment;
  const prefix = fragment.prefix ?
    `${encodeURIComponent(fragment.prefix)}-,` :
    '';
  const suffix = fragment.suffix ?
    `,-${encodeURIComponent(fragment.suffix)}` :
    '';
  const start = encodeURIComponent(fragment.textStart);
  const end = fragment.textEnd ?
    `,${encodeURIComponent(fragment.textEnd)}` :
    '';
  url += `#:~:text=${prefix}${start}${end}${suffix}`;
  console.log(url);
}

分析目的でテキストフラグメントを取得する

多くのサイトはルーティングにフラグメントを使用しているため、ブラウザではテキストフラグメントが除去されます。それらのページが壊れないようにする必要がありますこちらのテキストフラグメントのリンクをページに公開します。たとえば、分析を目的として、提案したソリューションはまだ実装されていません現時点では、回避策として、以下のコードを使用して提供します。

new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;

セキュリティ

テキストフラグメントディレクティブは、ユーザーのアクティベーション。さらに、デスティネーションとは異なるオリジンからナビゲーションを開始する場合は、ナビゲーションを noopener コンテキスト（リンク先ページが十分に分離されていることが確認されます。テキストフラグメントディレクティブは、適用できます。つまり、iframe および iframe 内ではテキストが検索されないテキストフラグメントは呼び出されません。

プライバシー

Text Fragments の仕様の実装では、テキストがレンダリングされた場合でも、フラグメントがページ上で見つかったかどうかを示します。要素のフラグメントは完全にテキストフラグメントは誰でも作成できます。上の例で、 Web Workers の ECMAScript モジュールの見出しにリンクする方法はありませんでした。これは、<h1> が id はありませんが、私を含め誰でも簡単に URL を作成することで、どこかにどうすればよいでしょうか。

たとえば、私が悪意のある広告ネットワーク evil-ads.example.com を運営していたとします。ある広告で iframes テキストを使用して、dating.example.com に非表示のクロスオリジン iframe を動的に作成したフラグメント URL dating.example.com#:~:text=Log%20Out ユーザーが広告を操作したときに記録されます[Log Out]（ログアウト）というテキストが検出された場合、その被害者は dating.example.com にログインしました。これをユーザープロファイリングに使用できます。単純なテキストはフラグメントの実装により、一致が成功するとフォーカススイッチがオンであると判断される場合があります。 evil-ads.example.comblur イベントをリッスンすることで、一致がいつ発生したかを把握できます。イン Chrome では、上記のシナリオが起こらないような方法でテキストフラグメントを実装しています。

スクロール位置に基づくネットワークトラフィックの悪用という攻撃もあります。以下にアクセスできると仮定する: 会社のイントラネットの管理者など、被害者のネットワーク・トラフィック・ログを記録できます。ここで想像してみてください長文の人事ドキュメント「...に苦しむ人にどう対処すべきか」と、「燃え尽き症候群」や「不安」などといった状態を考慮して、選択します。ドキュメントの読み込みが「燃え尽き症候群」といった項目の横にトラッキングピクセルが表示されている場合、イントラネット管理者は従業員が、:~:text=burn%20out を含むテキストフラグメントリンクをクリックし、機密情報とみなされ、誰にも公開されない可能性があります。この例ではややそもそも、その脆弱性を悪用するには非常に特定の前提条件を満たす必要があるため、 Chrome セキュリティチームは、ナビゲーション上のスクロールを実装するリスクを管理しやすくすることのリスクを評価しました。他のユーザーエージェントは、代わりに手動スクロール UI 要素を表示する場合もあります。

オプトアウトを希望するサイトのために、Chromium ではドキュメントポリシーヘッダー値を返します。これにより、ユーザーエージェントはテキストフラグメント URL を処理できなくなります。

Document-Policy: force-load-at-top

テキストフラグメントを無効にする

この機能を無効にする最も簡単な方法は、HTTP レスポンスを挿入できる拡張機能を使用することです。たとえば、 ModHeader （Google プロダクトではなく）を使用して、次のようにレスポンス（リクエストではなく）ヘッダーを挿入します。

Document-Policy: force-load-at-top

さらに複雑なオプトアウト方法は、エンタープライズ設定を使用することです。 ScrollToTextFragmentEnabled。 macOS の場合は、以下のコマンドをターミナルに貼り付けます。

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Windows では、 Google Chrome Enterprise ヘルプのサポートサイトをご覧ください。

ウェブ検索のテキストフラグメント

一部の検索では、検索エンジンがコンテンツ付きのクイック回答または要約を提供するスニペット。これらの強調スニペットは、検索時に表示される可能性が最も高いものです。質問の形式です。ユーザーが強調スニペットをクリックすると、強調スニペットに直接移動するソースウェブページのスニペットテキスト。これは、自動的に作成されたテキストフラグメント URL によって機能します。

強調スニペットが表示された Google 検索エンジンの検索結果ページ。ステータスバーに Text Fragments の URL が表示されます。

で確認できます。 <ph type="x-smartling-placeholder">

まとめ

Text Fragments URL は、ウェブページ上の任意のテキストにリンクできる強力な機能です。学者コミュニティはこれを使用して、精度の高い引用や参照リンクを提供できます。検索エンジンはページのテキスト検索結果にディープリンクを設定しますソーシャルネットワークサイトでは、この URL を使ってユーザーがウェブページの特定部分のスライドを表示することもできます最初のモジュールはテキストフラグメント URL を使用するどれも役に立つものだと思います必ずコンテナイメージにテキストフラグメントへのリンクブラウザあります。

謝辞

Text Fragment は、Nick Burris と David Bokan 氏（協力: Grant Wang。Joe Medley に感謝します。確認します。ヒーロー画像（Greg Rakozy）スプラッシュを解除。

これまで誰もリンクしたことがない場所に大胆なリンクをする: テキスト フラグメント

フラグメント識別子

テキスト フラグメント

ブラウザの互換性

start

start、end

prefix-、-suffix

完全な構文

ブラウザ拡張機能を使用してテキスト フラグメント URL を作成する

1 つの URL に複数のテキスト フラグメントが含まれている

要素フラグメントとテキスト フラグメントの混在

フラグメント ディレクティブ