これは人類最初の試みとして、驚異に満ちたリンクの物語である: テキストフラグメント
テキストフラグメントを使用すると、URLフラグメントでテキストスニペットを指定できます。
このようなテキストフラグメントを含むURLに移動する場合、ブラウザはそれを強調したりユーザーの注意を引いたりすることができます。
フラグメント識別子 #
Chrome80は大きなリリースでした。これには、WebワーカーのECMAScriptモジュール、 Null合体、オプションのチェーンなど、非常に期待されている機能が多数含まれていました。このリリースは、いつものように、Chromiumブログのブログ記事を通じて発表されました。下のスクリーンショットはそのブログ記事の抜粋です。

id
属性を持つ要素の周りに赤いボックスが付いたChromiumのブログ記事。すべての赤いボックスが何を意味するのかを考えているのではないでしょうか。これらは、DevToolsで次のスニペットを実行した結果です。id
属性を持つすべての要素が強調表示されています。
document.querySelectorAll('[id]').forEach((el) => {
el.style.border = 'solid 2px red';
});
フラグメント識別子のお陰で、赤いボックスで強調表示された要素にディープリンクを作成することができます。これは、後で、ページのURLのハッシュで使用できるようになります。横にある「プロダクトフォーラムにフィードバックを送信」ボックスにディープリンクを作成するとした場合、手動でURL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1
とすることで作成することができます。DevToolsの要素パネルに表示されているとおり、対象の要素にはid
属性と値HTML1
があります。

id
を表示するDevTools。このURLをJavaScriptのURL()
コンストラクターで解析すると、さまざまなコンポーネントが表示されます。値が#HTML1
を持つhash
プロパティに注目してください。
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: ""
}
*/
ただし、DevToolsを開かなければ要素のid
を見つけられないということは、ブログ記事の作成者がページのこの特定のセクションにリンクする必要があることを示す可能性があります。
id
を使わずに何かにリンクしたい場合はどうなるでしょうか。ECMAScript Modules in Web Workersヘッダーにリンクするとしましょう。下のスクリーンショットでわかるように、問題の<h1>
にはid
属性がありません。つまり、この見出しにリンクする方法はないということです。テキストフラグメントを使用すると、この問題を解決できます。
id
のない見出しを表示するDevTools。テキストフラグメント #
テキストフラグメントの提案は、URLハッシュにテキストスニペットを指定するためのサポートを追加します。このようなテキストフラグメントを含むURLに移動する場合、ユーザーエージェントはそれを強調したり、ユーザーの注意を引くことができます。
ブラウザの互換性 #
テキストフラグメント機能は、バージョン80以降のChromiumベースのブラウザでサポートされています。これを書いている時点では、SafariとFirefoxはこの機能を実装する意図を公に示していません。SafariとFirefoxのディスカッションへのポインタは、関連リンクを参照してください。
セキュリティ上の理由から、この機能ではリンクをnoopener
コンテキストで開く必要があります。したがって、 <a>
アンカーマークアップにrel="noopener"
を含めるか、ウィンドウ機能フィーチャーのWindow.open()
リストにnoopener
を追加してください。
textStart
#
テキストフラグメントの構文、最も単純な形式では次のようになります。ハッシュ記号#
の後に:~:text=
が続き、最後にtextStart
という、リンクするパーセントエンコードされたテキストを表すコードを入力します。
#:~:text=textStart
たとえば、Chrome 80の機能を発表するブログ記事のなかで、「ECMAScript Modules in Web Workers」という見出しにリンクするとした場合、このURLは次のようになります。
テキストフラグメントはこのようにが強調されます。Chromeなどのサポートブラウザでこのリンクをクリックすると、テキストフラグメントが強調表示され、スクロールして表示されます。

textStart
とtextEnd
#
では、「ECMAScript Modules in Web Workers」というタイトルの見出しだけでなく、セクション全体にリンクするにはどうすればよいでしょうか?セクションのテキスト全体をパーセントエンコードすると、URLがありえないほど長くなります。
幸いなことに、もっと良い方法があります。テキスト全体ではなく、textStart,textEnd
構文を使用して目的のテキストをフレーム化する方法です。したがって、目的のテキストの先頭にパーセントエンコードされた単語と目的のテキストの終わりにパーセントエンコードされた単語をカンマ(,
)区切りで指定します。
これは次のようになります。
textStart
のECMAScript%20Modules%20in%20Web%20Workers
、コンマ(,
)、そしてtextEnd
としてES%20Modules%20in%20Web%20Workers.
となっています。Chromeなどのサポートされているブラウザでクリックすると、セクション全体が強調表示され、スクロールして表示されます。

textStart
とtextEnd
の選択について疑問に思うかもしれません。実際には、わずかに短いURL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers.
で、両側に2つの単語しか使用しなくてもよいでしょう。textStart
とtextEnd
を以前の値と比較してください。
textStart
とtextEnd
の両方に1つの単語しか使用しない場合、問題が発生していることがわかります。URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers.
はさらに短くなりましたが、強調表示されたテキストフラグメントは本来求めていたものではなくなりました。強調表示は、最初に出現するWorkers.
で停止し、これは正しい動作ではありますが、私が強調しようとしたものではありません。問題は、目的のセクションは、現在の一単語のみのtextStart
とtextEnd
の値では一意に識別されていないということです。

prefix-
と-suffix
#
textStart
とtextEnd
で十分な長さの値を使用することが、一意のリンクを取得するための1つのソリューションです。ただし、状況によっては、これが不可能な場合もあります。ちなみに、なぜChrome 80リリースのブログ記事を例として選んだのでしょうか?このリリースでテキストフラグメントが導入されたからです。

上のスクリーンショットで「テキスト」という単語が4回表示されていることに注目してください。 4番目の出現は緑色のコードフォントで書かれています。この特定の単語にリンクする場合は、 textStart
をtext
に設定します。「テキスト」という単語は1つの単語だけなので、 textEnd
は存在できません。どうすればよいでしょうか?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
をはっきりと識別できるようにするに 、textStart
から分離し、オプションのtextEnd
にはダッシュ-
を使用します。

完全な構文 #
テキストフラグメントの完全な構文を以下に示します。(角括弧はオプションのパラメーターを示します。)すべてのパラメーターの値はパーセントエンコードする必要があります。これは特に、ダッシュ-
、アンパサンド&
、およびコンマ,
文字の場合に特に重要であるため、テキストディレクティブ構文の一部として解釈されていません。
#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
prefix-
、textStart
、textEnd
、および-suffix
はそれぞれ、単一のブロックレベル要素内のテキストに一致しますが、完全なtextStart,textEnd
の範囲は複数のブロックにまたがることができます。たとえば、 :~: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を生成するための正確な手順がリストされています。 Link to Text Fragmentと呼ばれるオープンソースのブラウザ拡張機能を提供しています。この拡張機能を使用すると、テキストを選択し、コンテキストメニューの[選択したテキストにリンクをコピー]をクリックして任意のテキストにリンクできます。この拡張機能は、次のブラウザで使用できます。
- Google Chrome用Link to Text Fragment
- Microsoft Edge用Link to Text Fragment
- Mozilla Firefox用Link to Text Fragment
- Apple Safari用Link to Text Fragment

1つのURLに複数のテキストフラグメント #
1つのURLに複数のテキストフラグメントが表示される可能性があることに注意してください。特定のテキストフラグメントは、アンパサンド文字で 従来の要素フラグメントをテキストフラグメントと組み合わせることができます。同一のURLに両方のフラグメントを含めることにまったく問題はないため、たとえばページの元のテキストが変更したことでテキストフラグメントが一致しなくなった場合の意味のあるフォールバックを提供することができます。「Give us feedback in our Product Forums」セクションにリンクするURL まだ説明していない構文の要素が1つあります。それは、フラグメントディレクティブ サポートを検出するには、 機能検出は主に、リンクが動的に生成され(たとえば、検索エンジンによって)、それらをサポートしていないブラウザへのテキストフラグメントリンクの提供を回避する場合を対象としています。 デフォルトでは、ブラウザは ご覧のとおり、ブラウザは、適用された強調表示をカスタマイズするために使用できる テキストフラグメント機能は、ある程度ポリフィルすることができます。機能がJavaScriptで実装されているテキストフラグメントの組み込みサポートを提供しないブラウザ用に、拡張機能によって内部的に使用されるポリフィルを提供します。 ポリフィルには、インポートしてテキストフラグメントリンクを生成するために使用できる 多くのサイトがルーティングにフラグメントを使用しているため、ブラウザはそれらのページを壊さないようにテキストフラグメントを取り除きます。分析目的などでテキストフラグメントのリンクをページに公開する必要があることは認められていますが、提案されたソリューションはまだ実装されていません。今のところ回避策として、以下のコードを使用して必要な情報を抽出できます。 テキストフラグメントディレクティブは、ユーザーのアクティブ化の結果である完全な(同じページではない)ナビゲーションでのみ呼び出されます。さらに、宛先とは異なるオリジンから発信されたナビゲーションでは、宛先のページが十分に分離されていることがわかるように テキストフラグメントがページで見つかったかどうかに関係なく、テキストフラグメント仕様の実装がリークしないことが重要です。要素フラグメントは元のページ作成者の完全な制御下にありますが、テキストフラグメントは誰でも作成できます。上記の 例では、 悪意のある 他には、スクロールの位置に応じてネットワークトラフィックを悪用する攻撃があります。会社のイントラネットの管理者のように、被害者のネットワークトラフィックログにアクセスできたとしましょう。次に、人事関連の「What to Do If You Suffer From…(次のような症状への対策)」という長いドキュメントがあり、burn out(燃え尽き)、anxiety(不安)などの症状のリストがあるとします。各項目の横に追跡用のピクセルを配置し、ドキュメントの読み込みが、たとえば「burn out」項目の追跡ピクセルの読み込みと一時的に同時に発生することがわかったなら、イントラネット管理者として、機密情報であり、誰にも表示されないと社員が思い込んでいる「 オプトアウトを希望するサイトの場合、Chromiumは送信可能なドキュメントポリシーヘッダー値をサポートしているため、ユーザーエージェントはテキストフラグメントURLを処理しません。 この機能を無効にする最も簡単な方法は、HTTPレスポンスヘッダーを注入できる拡張機能を使用することです。たとえば、ModHeader(非Google製品)を使用すると、次のようにレスポンス(リクエストではありません)ヘッダーを挿入することができます。 オプトアウトするもう1つの方法は、より複雑ではありますが、エンタープライズ設定の Windowsの場合は、Google Chrome Enterpriseヘルプサポートサイトのドキュメントに従ってください。 一部の検索では、Google検索エンジンは、関連するWebサイトのコンテンツスニペットによってクイックアンサーまたは要約を提供します。これらの注目のスニペットは、検索が質問の形式である場合に表示される可能性が最も高くなります。注目のスニペットをクリックすると、ユーザーはソースWebページの注目のスニペットテキストに直接移動します。この動作は、自動的に作成されたテキストフラグメントURLによるものです。 テキストフラグメントURLは、Webページ上の任意のテキストにリンクするための強力な機能です。これを使用すると、学術コミュニティは非常に正確な引用または参照リンクを提供でき、検索エンジンはページ上のテキスト結果にディープリンクを作成できます。また、ソーシャルネットワーキングサイトは、アクセスできないスクリーンショットではなく、ユーザーがWebページの特定の一節を共有できるようにすることができます。テキストフラグメントURLを使用し、便利であることに気づいていただければと思います。Link to Text Fragmentブラウザ拡張機能をぜひインストールしてください。 テキストフラグメントは、Grant Wangの貢献とともに、Nick BurrisとDavid Bokanによって実装され、仕様に含まれました。この記事を徹底的にレビューしてくれたJoe Medleyに感謝しています。ヒーロー画像提供: Greg Rakozy(Unsplash)。&
区切る必要があります。ここに、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
。
要素とテキストフラグメントの混合 #
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.
)の両方が含まれています。フラグメントディレクティブ #
:~:
です。上記のような既存のURL要素フラグメントとの互換性の問題を回避するために、 Text Fragments仕様にはフラグメントディレクティブが導入されています。:~:
というコードシーケンスで区切られたURLフラグメントの一部です。text=
などのユーザーエージェント命令用に予約されており、作成者のスクリプトが直接対話できないように、読み込み中にURLから削除されます。ユーザーエージェント命令は、ディレクティブとも呼ばれます。そのため、具体的なケースでは、 text=
はテキストディレクティブと呼ばれます。機能の検出 #
document
にfragmentDirective
プロパティがあるかをテストします。フラグメントディレクティブは、URLがドキュメントではなくブラウザに向けられた命令を指定するためのメカニズムです。これは、作成者スクリプトとの直接の対話を回避することを目的としているため、既存のコンテンツに重大な変更を加える心配なく、将来のユーザーエージェント命令を追加できます。たとえば、翻訳のヒントを追加する可能性があります。if ('fragmentDirective' in document) {
// Text Fragments is supported.
}テキストフラグメントのスタイル付け #
mark
のスタイル(通常、mark
のCSSシステムカラーである黄色に黒)と同じスタイルをテキストフラフメントにも設定します。ユーザーエージェントのスタイルシートには、次のようなCSSが含まれています。:root::target-text {
color: MarkText;
background: Mark;
}::target-text
という疑似セレクターを公開します。たとえば、テキストフラグメントを赤い背景に黒いテキストになるようにデザインできます。いつものように、オーバーライドのスタイルがアクセシビリティの問題を引き起こさないように色のコントラストを確認し、ハイライトが実際に他のコンテンツから視覚的に目立つようにしてください。:root::target-text {
color: black;
background-color: red;
}ポリフィル可能性 #
プログラムによるテキストフラグメントリンクの生成 #
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 textStart = encodeURIComponent(fragment.textStart);
const textEnd = fragment.textEnd ?
`,${encodeURIComponent(fragment.textEnd)}` :
'';
url += `#:~:text=${prefix}${textStart}${textEnd}${suffix}`;
console.log(url);
}分析目的でのテキストフラグメントの取得 #
new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
セキュリティ #
noopener
コンテキストで発生する必要があります。テキストフラグメントディレクティブは、メインフレームにのみ適用されます。つまり、テキストはiframe内で検索されず、iframeナビゲーションでテキストフラグメントを呼び出すことはできません。プライバシー #
<h1>
にid
がなかったために、「ECMAScript Modules in Web Workers 」という見出しにリンクできなかったことを思い出してください。それでは、どうすれば、テキストフラグメントを慎重に作成することで、誰もがどこにでもリンクできるというのでしょうか。evil-ads.example.com
という広告ネットワークを運営しているとしましょう。さらに、広告用のiframeの1つでは、ユーザーが広告と対話したら、テキストフラグメントURL dating.example.com#:~:text=Log%20Out
を使って、dating.example.com
への隠しクロスオリジンiframeを動的に作成したことを想像してください。「Log Out」というテキストがあれば、犠牲者は現在dating.example.com
にログイン中であることになるため、プロファイリングに使用することができます。テキストフラグメントの実装は悪意があるなどを認識しないことから、正しく一致するとフォーカスが切り替わるようにできるため、evil-ads.example.com
で、blur
イベントをリスンして一致が発生したことを知ることができます。Chromeでは、このようなシナリオを実現できないようにテキストフラグメントが実装されています。:~:text=burn%20out
」を使ったテキストフラグメントのリンクを社員がクリックしたと判定することができます。この例は、多少工夫されており、非常に具体的な前提条件が満たされることで悪用が成り立つため、Chromeのセキュリティチームはナビゲーションにスクロールを実装するリスクを管理可能と評価しました。他のユーザーエージェントは、代わりに手動のスクロールUI要素を表示するように決定している場合があります。Document-Policy: force-load-at-top
テキストフラグメントの無効化 #
Document-Policy: force-load-at-top
ScrollToTextFragmentEnabled
を使用することです。macOSでこれを行うには、以下のコマンドをターミナルに貼り付けます。defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
Web検索のテキストフラグメント #
まとめ #
関連リンク #
謝辞 #