今回、紹介するのは「ページ内の好きな位置」へ移動できるリンクを作成してくれる拡張機能「Link to Text Fragment」の使い方だ。Chromeの拡張機能として、それなりに有名な存在であったが、この拡張機能には意外なオチがある。よって、必ず最後まで読み進めるようにして頂きたい。

  • ページ内の好きな位置にリンクを作成「Link to Text Fragment」

URLだけでは伝わりにくい!?

「役に立つ情報が記されているWebページ」を他人に伝えたり、自分用のメモとして残しておいたりするケースもあるだろう。今回は、こういった場合に活用できる拡張機能「Link to Text Fragment」の使い方と、補足事項について紹介していこう。

たとえば、電子メールの認証技術であるDKIM(Domain Keys Identified Mail)について調べていたとしよう。そして、わかりやすい記述のあるWebページを発見したとする。このWebページを他人に伝えるときは、そのURLをメールやSNSで送信するのが一般的だ。現在、閲覧しているページのURLは、アドレス欄を「Ctrl」＋「C」キーでコピーすると取得できる。

  • WebページのURLをコピー

以下の図は、先ほどコピーしたURLをメールの本文に貼り付けて送信した様子だ。

  • 相手に届いたメール

このメールを受信した人がURLを開くと、そのWebページがブラウザに表示される。ただし、「DKIMについて記載されている部分」ではなく、「Webページの冒頭部分」が画面に表示される。当たり前といえば、当たり前の話だ。

  • 記載されているURLのWebページを開いた様子

DKIMの仕組みを学ぶには、本文を読み進めながら「DKIMについて記載されている部分」まで画面を下へスクロールしなければならない。簡単に見つかればよいが、そこにたどり着くまでに手間取ってしまう可能性も十分に考えられる。

  • 「DKIMの仕組み」が記載されている部分

このようにURLだけでは「教えたいこと」が伝わりにくいケースもある。

Webページに目次などが用意されていれば、「ページ内リンク」を活用して該当箇所を伝える方法もある。念のため、その手順を紹介しておこう。該当者所へ移動するリンクを右クリックし、「新しいウィンドウで開く」を選択する。

  • ページ内リンクを「新しいウィンドウ」で表示

すると、最後に「#(ID名)」の記述を追加したURLが表示される。このURLをコピーして送信することで、その「見出し」の位置まで自動スクロールしてくれるリンクにすることも可能だ。

  • ページ内リンクを含むURL

とはいえ、これも完璧な手法とはいえない。上図に示した例の場合、画面に表示されているのは「SPFの説明」になる。「DKIMの説明」はその下に記載されているため、本文を読み進めながら画面を下へスクロールしていく必要がある。よって、この場合も「目的の箇所を探す」という手間が発生してしまう。

自分用のメモとしてURLを記録しておく場合も状況は同じだ。後ほど、そのURLを開いたときに、「求めている情報」が記されている部分までスクロールしながら探していく手間が発生する。

「Link to Text Fragment」を使ったURLの作成

こういった余計な手間を解消してくれる拡張機能が「Link to Text Fragment」だ。この拡張機能を使うと、目的の箇所を即座に表示するリンク(URL)を作成できるようになる。

拡張機能の追加手順はいつもと同じ。「Link to Text Fragment」の紹介ページを開き、右上にある「Chromeに追加」ボタンをクリックする。続いて、「拡張機能を追加」ボタンをクリックするとインストールが完了する。

  • 「Link to Text Fragment」の紹介ページ

これで「Link to Text Fragment」を使えるようになる。使い方はとても簡単で、目的の箇所にあるテキストを選択し、右クリックメニューから「Copy Link to Selected Text」を選択するだけ。

  • 位置指定リンクをコピーする操作

これで目的の箇所を自動表示するURLをクリップボードにコピーできる。さらに、先ほど選択したテキストがマーカーで強調表示されるようになる。

  • マーカーで強調されたテキスト

あとは、コピーしたURLをメールなどに貼り付けて送信するだけ。

  • 位置指定リンクを貼り付けたメール

参考までに、情報を受け取った人の様子も紹介しておこう。受信したURLをクリックして開くと、「Webページの冒頭部分」ではなく、「目的の箇所まで自動スクロールしたWebページ」が表示される。さらに、URLの作成時に「選択したテキスト」がマーカーで強調表示されるため、目的の箇所を即座に発見できるようになる。

  • 位置指定リンクを開いた様子

もちろん、相手が「Link to Text Fragment」の拡張機能を導入していなくても、自動スクロール ＆ マーカー表示は正しく機能してくれる。

このように、目的の箇所を指定したURLを作成できる拡張機能が「Link to Text Fragment」となる。本稿を最初から読み進めていれば、その便利さは十分に理解できるはずだ。

ひとつだけ注意点を挙げるとすると、リンク先が会員制のWebサイトの場合は「あらかじめログインしておく必要がある」ということ。会員しか読めないページを紹介するときは、ログインが必要になることも伝えておくとよいだろう。

実は役目を終えている「Link to Text Fragment」

さて、これまで「Link to Text Fragment」の利点について色々と紹介してきたが、実は拡張機能を使わなくても同様の処理を実現することが可能である。その手順は、目的の箇所にあるテキストを選択し、右クリックメニューから「選択箇所へのリンクをコピー」を選ぶだけ。

  • Chromeに標準装備されている「選択箇所へのリンクをコピー」

これで「目的の箇所の情報を含むリンク」をクリップボードにコピーできる。あとは、コピーしたURLを貼り付けて送信するだけだ。

URLを受信した人の挙動も先ほどと同じになる。URLをクリックして開くと、自動スクロール ＆ マーカー表示の状態でWebページが表示される。

  • リンクを開いた様子

よって、拡張機能「Link to Text Fragment」をChromeに追加する必要はない。同様の機能はChrome本体に標準装備されているので、「この拡張機能の役目はすでに終わっている」というのが実情だ。

参考までに、現在に至るまでの経緯を紹介しておこう。Chrome ウェブストアの紹介ページをよく見ると、「Link to Text Fragment」の作成者(デベロッパー)はGoogleであることがわかる。つまり、Chromeの開発元であるGoogleが拡張機能「Link to Text Fragment」も作成していた、ということになる。

ひと昔前のChromeは「選択箇所へのリンクをコピー」が装備されていなかったため、拡張機能「Link to Text Fragment」は非常に便利な存在であった。しかし現在では、同じ機能がChrome本体に吸収(実装)されているので、あえて拡張機能を追加する意味はない。

Chromeはひんぱんにバージョンアップされており、今回の例のように、昔は便利に使えたが、現在では必要なくなった拡張機能もいくつか存在する。今後、Chrome本体に追加されていく機能も多々あると思われるので、Chromeがバージョンアップされた際には、その内容にも目を通しておくとよいだろう。

テキストフラグメントの書式

今回、紹介した機能は「テキストフラグメント」と呼ばれるもので、現在では多くのブラウザが対応する仕様となっている。その仕組みを簡単に紹介しておこう。

テキストフラグメントでは、URLの最後に「#:‾:text=(キーワード)」という記述を追加することで、自動スクロール ＆ マーカー表示を実現している。つまり、キーワードに指定した文字の部分までスクロールし、マーカー表示する、という処理をブラウザが自動的に行ってくれる訳だ。

ただし、これだけでは上手く機能しないケースもある。たとえば、以下の図に示したWebページで「DMARC導入」の文字をキーワードに指定したとしよう。

  • 各手法でリンクをコピー

このWebページには「DMARC導入」という文字が何回も登場しているため、これだけでは位置を特定できない。そこで、プレフィックスとサフィックスにより目的の箇所の情報を補完するようにしている。

具体的な例で見ていこう。先ほど作成したURLを適当な文書に貼り付けると、以下の図のようになる。上が拡張機能「Link to Text Fragment」で作成したURL、下がChrome本体で作成したURLだ。

  • 作成されたリンク

日本語がエンコードされている状態では読みづらいので、デコードした状態で紹介していこう。

  • 作成されたリンク(デコード済み)

両者の違いはアルファベットの大文字/小文字のみ。「Link to Text Fragment」で作成したURLは「DMARC」が小文字に変換されている。一方、Chrome本体で作成したURLは、原文のまま大文字で「DMARC」と表記されている。

肝心のキーワードは「-,」と「,-」の間に記述されている。その前にある記述はプレフィックス、その後にある記述はサフィックスとなる。どちらもキーワードの位置を特定するために、キーワードの前後の文字を何文字が抜き出す形でURLが作成されている。

念のため、テキストフラグメントの書式も紹介しておこう。

◆テキストフラグメントの書式
https://(WebページのURL)#:‾:text=[prefix-,]textStart[,textEnd][,-suffix]

[ ]の部分は省略することも可能だ。キーワードだけで位置を特定できる場合は、[prefix-,]（プレフィックス）と[,-suffix]（サフィックス）を省略しても構わない。肝心のキーワードはtextStartの部分に記述する。なお、キーワードの文字数が多い場合は、キーワードの「始まり」と「終わり」の数文字をtextStartと[,textEnd]に記述してキーワードを指定することも可能となっている。

ということで、今回は拡張機能の使い方というより、Chromeに標準装備されている「選択箇所へのリンクをコピー」の機能紹介のような内容になってしまった。とても便利な機能なので、まだ使ったことがない人は、この機会に覚えておくとよいだろう。

次回は「マーカー表示つながり」ということで、指定したテキストをハイライト表示してくれる拡張機能を紹介していこう。