きり丸の技術日記

技術検証したり、資格等をここに残していきます。

トップ > 技術 > リンク先の目的の段落を開いたり、強調した状態のURLのパーツ（URIフラグメント）

リンク先の目的の段落を開いたり、強調した状態のURLのパーツ（URIフラグメント）

技術

URLに記述していてもサーバにデータは送らない箇所があり、それをURIフラグメントと呼びます。具体的には次のURLのうち、#以降の#:~:text=nainaistarを指します。

https://nainaistar.hatenablog.com/#:~:text=nainaistar

URIフラグメントは、リンク先のWebページの特定情報の場所を指定するために用いられます。さきほどのURLをChrome80以降のバージョンで開くと、「nainaistar」という文字列がハイライトされている状態で開くことが分かります。

今回の記事では、自分なりにURIフラグメントについて調べたことを残します。

環境

  • Chrome
    • 80以降

ユースケース

  • 巨大なヘルプページから目的の段落を開いた状態で遷移させる

母国語で書かれたページなら巨大なヘルプページでもすぐに調べられるのですが、基本的には英語で記載されていることが多いです。参考資料として共有されたリンクを渡されても、それが英語の場合に大事な箇所を即座に把握することは難しいです。

そのような時に、目的の記述を記載した状態でページを開ければ、共有後のコストが大きく減らせます。

前提

リンクを開いたタイミングでのリソースを検索しているようです。そのため、Twitterのタイムライン・SPA等々のリンクを開いてから後でレンダリングをするページでは、URIフラグメントがうまく効かないようです。

IDやName属性

HTMLのID属性を指定できます。こちらについては、RFC 5147に定義されています。

そのまま#の後にそのままID属性を付与してください。

※ 例示として適切なページが見つからなかったのでイメージです。
#kirimaru
#{ID属性}

一応、RFC 5147にはName属性も識別するとは記載されているのですが、ブラウザ側が対応しているかどうかまでは確認できませんでした。

テキスト（Chrome80以降）

Chrome80以降であれば#の後に:~:text=と記述すると、特に属性がついていない状態でもハイライトを付与した状態で目的の項目を開かせることができます。ただし、一番初めにヒットしたものだけです。複数ヒットするような文言で作成しないようにしましょう。

次のリンクを開くと、RFC 5147のどこにURIフラグメントの識別対象が記載しているかが分かるでしょう。

https://datatracker.ietf.org/doc/html/rfc5147#:~:text=identified%20by%20the%20value%20of%20a%20

prefixやsuffix等を使用して、さらに絞り込めるようにできるようです。

# 定義？
:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Chrome拡張

この機能は便利ですが、毎回#の後に:~:text=と記述する手間があります。

「Link to Text Fragment」というChrome拡張があります。こちらを導入し、共有したいテキストを選択した状態で右クリックすると「Copy Link To Selected Text」のメニューが出現します。このメニューを選択すると自動で#:~:text={選択した文字}のリンクが付与できるので、非常に便利です。

その他

  • YouTubeでは#t=3m25sと付与すると、動画が3分25秒経過した状態で再生できます。
  • Google スプレッドシートでは、フィルタ設定でgidを設定したったり、セルに対してのリンクでrangeを付与できます。

その他でも便利になるようにURIフラグメントを拡張しているページはあるでしょうが、調査できておりませんので、コメントで教えていただけるとうれしいです。

終わりに

URIフラグメントは「フラグメント識別子」「アンカー」とも呼ばれるようです。

サーバにURIフラグメントが送られていないことはソースコードでも確認していたのですが、リダイレクトの際に無くなったりするんですかね…。はてなブログでhttpsからhttpにリダイレクトされているときには、URIフラグメントが無くなったりしていないので、この辺はブラウザ側でいい感じに保持しているのかもしれません。

かなり浅い知識で記載していますので、この記事をフックに詳細な内容を調べていただければと思います。

参考情報