Google Chrome しか実装していないということもあってか、現状では広く利用されているようには見えないですが、「Text Fragments」 という、簡単に言ってしまえば、Web ページ上の任意のテキストをフラグメント識別子として利用できるようにしようぜっていう機能があります。
参考までに仕様書は下記に W3C Draft Community Group Report という形で公開されています。
詳しい仕様は上記リンク先を見ていただくとして、要するに
example.html#:~:text=[ここにテキスト]
といった形でテキストをフラグメント識別子として指定することで、ページ内の該当テキストに対してアンカーリンクを設定できるほか、ブラウザは該当テキストをハイライト表示したりといった機能を提供できるようになります。
で、実際に Google Chrome は昨年の 4月に正式版としてリリースした Chrome 81 以降、この 「Text Fragments （Scroll to Text Fragment）」 を実装し、該当するテキストをハイライト表示するようになっています （実装自体は Chrome 80 でされたとアナウンスされていますけども、実際にハイライト表示などが機能しはじめたのは Chrome 81 からだったと記憶してます）。
Text fragments will soon be available in Chromium land. You can then use `#:~:text=` to highlight certain text.
Chrome status: https://t.co/e60xiQoQoT
Spec: https://t.co/t02TFfGO2X#devsheets
Video alt: Usage of text fragments to highlight text on wikipedia pic.twitter.com/W5tUYZk8NY— Stefan Judis (@stefanjudis) February 5, 2020
具体的な例を挙げると、
上記のようなリンク （フラグメント識別子にしたいテキストは URL エンコードします） を Chrome で開くと、下記のように、フラグメントとして指定されたテキストがハイライトした状態で表示されます。
ちなみに、Web ページ内に指定したテキストフラグメントとマッチするテキストが複数ある場合は最初に出現したものとマッチします。
ブックマークレット
さて前置きが長くなりましたけども、このテキストフラグメント付きのリンクをワンクリックでツイートできるように、閲覧している Web ページのテキストを選択した状態で実行すると、
- 選択したテキスト
- 閲覧中の Web ページの URL に、選択したテキストをテキストフラグメントとして付与した URL
の 2つを、Twitter Web 版をブラウザで開いて、ツイート投稿画面に入力するところまでを実行するブックマークレットを作ったので下記に共有します。
ブックマークレットを使い慣れている人には簡単だと思いますが、使い方としては、下記のリンクを、ブラウザのブックマークツールバーなどにドラッグ & ドロップ。
あとはツイートしたい Web ページ上でハイライト表示の対象にしたいテキストを選択してから保存したブックマークレットを実行すれば、ブラウザで Twitter の投稿画面が開いて、必要なテキストが入力されます。Twitter にログインした状態で使用してください。
なお、テキストフラグメント付きのリンクを生成したいだけでしたら、Google さんが公式に、Chrome 用の拡張機能 （下記リンク） もリリースしていますので、そちらを利用するとよいと思います。
私の場合は Chrome がメインブラウザじゃないのと、ワンクリックでツイート画面を開きたかったので今回のブックマークレットを作成しました。
また、上記の Chrome 拡張機能と同じ、リンクを生成する部分だけをブックマークレットでという場合は、Google の Paul Kinlan 氏が公開している下記のブックマークレットがよいと思います。
