2024年4月8日

Webページの文字にマーカーを付けて誰かに送れる、強調表示するリンク

こんにちはあるいはこんばんは、ソフトコムのディレクター陣の末席に身を置く元デザイナーの藤村です。デザインの専門学校を卒業後、紙媒体のデザインの修行をしながらプライベートではクラブイベントのフライヤーをせっせと作っていました。気が付いたらホームページを作るようになり、気が付いたらデザインやらコーディングやらドメイン取得（当時は法人登記簿原本をドメイン屋さんに送る式）やらサーバ設定やらコーディングやらやっていて、ワンストップというかワンオペというかそんな感じになってました。企業サイトやECサイトやモールへの出店や出品のお手伝いをしてて、気づいたらここに座ってました。

『強調表示するリンク』はこんな方におすすめ

オンライン経由でwebページの特定の場所のテキストを指して伝えたい
一時的にページ内にマーカー（強調表示）で色を付けてリンクを送りたい

実際にマーカーして送りつける方法

ところで誰かのブログやニュース記事を読んでいて、文章の一部を誰かに送りたい時ってありますよね？はい、ありますよね、そんなときに使えるアイデアを今回はお伝えしようと思います。

アイデアといっても今どきはすでにブラウザに備わっている機能を使うだけなので、めんどくさい機能拡張をインストールする必要はありません。文字を選択して右クリックして
Edgeなら『強調表示するリンクをコピー』
Chromeなら『選択箇所へのリンクをコピー』
を選ぶだけ。

もうすでにURLがコピーされた状態なのであとはメールやSNSにペーストして送りつけるだけ。
受け取った側はリンクを押したらマーカーされた箇所が強調（ハイライト）表示された箇所が表示されます。
ページの一番上ではなく『強調表示された箇所』が表示されるので、相手側に「ページの真ん中へんにあるやつ」とか無駄に説明しなくてもすみます。すばらしい！

そしてこの機能を『Text Fragment』と呼びます。
はい、さっそくどういう意味なのか調べてみました。
https://www.google.com/search?q=Text+Fragment+%E6%84%8F%E5%91%B3
雰囲気的には『文章の一部』みたいな感じですね。そのままでしたね。

このマーカーの仕組みどうなっているの？

右クリックで簡単にリンクがコピー出来るので、もはや手動で作る意味は全くないのですが。
むしろそこはソフトコムがweb制作をやっているという意味も含めて、どういう仕組みになっているのか調べてみたことを報告します。

URL　＋　#:~:text=　＋　強調する文字

はい、簡単ですね、基本の形としてはこれだけです。

詳しいことは窓の杜さんに書いてありました汗（丸投げ）
https://forest.watch.impress.co.jp/docs/review/1438812.html

このText Fragment機能を使えば「htmlをいじらなくてもアンカーリンクを付けられる」と思ったコーダーさんが出てくるかもですが、色が付いちゃいますのであきらめてください。手抜きをせずにちゃんと要素にIDを付けてアンカーリンクを貼ってくださいね。ちなみにfirefoxはまだ非対応です。

実際はすでに使っている、かもしれない！

このマーカー機能ですが、あなたはすでに知らず知らずに使っているかもしれません。
最近、Googleで何かを検索すると質問形式で答えを教えてくれることがありますよね。

そのことが書かれているであろうページに行かなくても解決することができるのでスグレモノすぎるのですが、web制作側（というかコンテンツ制作側）からすると、それ以外にも付随する事柄や由来などをいろいろ書いているので読んでほしい気持ちや、あわよくばそれを解決する商品を買ってほしかったりするのですが、サイトへ訪問すらしてもらえないので、複雑な気持ちになる機能です。

Google的には『人類の発展に寄与するコンテンツは高く評価する（意訳）』感じの姿勢なのである意味ではよい評価を得られている証でもある、と言えるかもしれません。しらんけど。

話しが少し逸れましたが、この『関連する質問』のリンクを押すと引用されている箇所を表示してくれます。この機能に関するアルゴリズムは公開されていないものの、同じようなことを検索した人がどこを参考にブラウジングしていたのかを統計的に判断して抜粋しているようです。