Chromeの直リン作成拡張機能 Link to Text Fragment が便利ですよ

# What is "Link to Text Fragment" ?

Google謹製のChrome拡張機能です。
特殊な構文のリンクを使って、ページの特定のテキストへの直接リンを作成できます。最近のGoogle検索で時々見かけるやつですね。[^aboutGgl]
Chrome限定の機能（バージョン80から）ですが、便利なので紹介しますね。

:arrow_upper_right: [Chrome ウェブストア - Link to Text Fragment](https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg)

## 使い方

- インストール後のChromeで、Webページの任意のテキストを選択し、コンテキストメニューから "Copy Link to Selected Text" を選択すると、クリップボードに直リンがコピーされます。
- クリックなどして実際にリンク先へ遷移すると$\style{background-color:yellow;}{黄色にハイライト}$されています。

<img width="640" alt="リンク作成時のキャプチャ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98745/daa349e4-a8fb-54b6-9d6d-70f1d52765d4.png">
（引用例）[RitoLab - 【PHP】PSR-12 Extended Coding Style（拡張コーディングスタイル）](https://www.ritolab.com/entry/208)

## 便利だなと思った活用シーンを紹介しますね

Wikipedia や Qiita などは、各章のパーマリンクが取得できるので良いですが、そうじゃないページへの特定の箇所へのリンクを貼るのに便利です。

#### 1. レビューの際のリンク

GitHubでレビューコメントに貼るリンクとして重宝しています。言語やフレームワークのマニュアル、コーディング規約解説へのピンポイントの直リンとかができて、レビューされた側も参照しやすくなりました。

#### 2. Slackのリンク

[Slackはテキストにリンクを貼れるようになったので](https://slack.com/intl/ja-jp/help/articles/202288908-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%AE%E6%9B%B8%E5%BC%8F%E8%A8%AD%E5%AE%9A#global_menu:~:text=%E3%83%8F%E3%82%A4%E3%83%91%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E3%81%99%E3%81%B0%E3%82%84%E3%81%8F%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%80%81%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%81%A6%20Slack%20%E3%81%AE%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8B%E3%82%89%E3%80%81%E2%8C%98V%20(Mac)%20%E3%81%BE%E3%81%9F%E3%81%AF%20CtrlV%20(Windows%2FLinux)%20%E3%82%92%E6%8A%BC%E3%81%99%E3%81%A8%E3%81%84%E3%81%86%E6%96%B9%E6%B3%95%E3%82%82%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)、長いURLでも気にせずに、直リンを引用できます。
<img width="640" alt="Slackのリンク貼り付け" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98745/ba74c6b1-85fc-161d-be90-ebb7cf886bc2.png">

#### 3. 仕様書

Confluence などを使って仕様書を書いているのですが、ピンポイントで技術仕様へのハイパーリンクを作りたいときとか便利でした。特にAWSドキュメントやMySQLとか、セクションへのパーマリンクでは範囲が大きい時などありましたので。

## 注意点

#### 1. リンク作成時のエラー

こういうリンクコピー時にこういうエラーが出てきた場合は、選択したテキストが短すぎでピンポイントなリンク作成が困難という場合です。もう少し長くテキストを選択してみましょう。

|<img width="400" alt="Slackのリンク貼り付け" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/98745/b0e96451-5a10-6e27-7b5b-e7c3d68d6102.png">|
|:-:|

#### 2. Chrome以外のブラウザでは単なるページへのリンク扱いになります。

現在（2020/8）のところ、Chromeだけの拡張機能になっています。

#### 3. ページのテキストが変更された場合

結果的にはこれも単なるページへのリンクになります。該当するテキスト箇所がなくなってしまうので。



## 参考資料

もともとは WICG[^aboutWICG]で作っていたText Fragmentsという機能仕様をGoogleが拡張機能として取り込んだようです。とはいえ、WICGでのこのドキュメントのエディターがGoogleの人のようですけどね。


なお、本記事では拡張機能を使った一続きのテキストの場合のリンク作成を紹介しましたが、リンクの書式からは始点文字列や終点文字列などを指定することも可能になっています。


- WICG - [Text Fragments](https://wicg.github.io/scroll-to-text-fragment/)
- GitHub - [WICG/scroll-to-text-fragment](https://github.com/WICG/scroll-to-text-fragment/)
- Google - [Scroll to Text Fragment](https://chromestatus.com/feature/4733392803332096)
- Qiita記事 - [URLの `#:~:text=` とは何か？（ Text Fragments ）](https://qiita.com/rithmety/items/3f302d5644c17167a967)


（以上）

[^aboutGgl]: [こういう検索とかです](https://www.google.com/search?sxsrf=ALeKk02HLz2-MMYophlFgQUbimtY7vTiWw%3A1597134367808&ei=H1YyX5XxMI6JoASZtYmgCw&q=mysql+varchar+%E3%83%90%E3%82%A4%E3%83%88%E6%95%B0&oq=mysql+varchar+%E3%83%90%E3%82%A4%E3%83%88%E6%95%B0&gs_lcp=CgZwc3ktYWIQAzIICAAQBBAlECAyCAgAEAQQJRAgMgYIABAHEB4yBggAEAcQHjIGCAAQBxAeMgYIABAHEB4yBggAEAcQHjIGCAAQBxAeOgQIABBHOggIABAHEAQQHjoECCMQJzoGCAAQBBAlOgUIABDNAjoICAAQzQIQiwNQ5zJYs1Fg5FJoBHABeACAAX2IAecNkgEEMS4xNZgBAKABAaoBB2d3cy13aXq4AQLAAQE&sclient=psy-ab&ved=0ahUKEwjV_JqV3ZLrAhWOBIgKHZlaArQQ4dUDCAw&uact=5)。

[^aboutWICG]: W3Cのコミュニティグループの1つ。標準団体ではなく、有志による活動体。https://www.w3.org/community/wicg/