良いリンクを作るには
飛ばしたいところにめがけて飛ぶような、リンクのほうがいいと思いませんか😮
今回はそんな良いリンクを作る方法を2パターン紹介します🤯
👆 Chrome の標準機能で
まず、1番簡単な方法で取得してみましょう！
ここに飛ばしたい！と思うテキストに右クリックしてみましょう。
すると「選択箇所へのリンクをコピー」という項目が出てくるので、そこからコピーしてください。
コピーしたリンクから飛ぶと、飛ばしたい場所に飛んだと思います🕊️
🤔 なぜ飛ぶのか
こうやって作ったリンクは、Chrome でも他のブラウザでも汎用的に使えるので仕組みがあります。
上の写真でコピーしたリンクは、https://wired.jp/special/2017/apple-park/#:~:text=%E6%9C%887%E6%97%A5%E3%80%82-,%E3%82%AB%E3%83%AA%E3%83%95%E3%82%A9%E3%83%AB%E3%83%8B%E3%82%A2,-%E5%B7%9E%E3%82%AF%E3%83%91%E3%83%81%E3%83%BC%E3%83%8E%E3%81%AE
になります。
アクセスしていたサイトは、https://wired.jp/special/2017/apple-park/ です。
つまり#:~:text=%E6%9C%887%E6%97%A5%E3%80%82-,%E3%82%AB%E3%83%AA%E3%83%95%E3%82%A9%E3%83%AB%E3%83%8B%E3%82%A2,-%E5%B7%9E%E3%82%AF%E3%83%91%E3%83%81%E3%83%BC%E3%83%8E%E3%81%AE分だけ増えています。
この# 以降を増やせば、そこまで飛ぶということです。
そしてこの# 以降は、URL フラグメントと呼ばれています。
🚩 URL フラグメント
まず、%E6%~ みたいなのはなんでしょうか。
これはエンコードされた日本語です。
#:~:text=%E6%9C%887%E6%97%A5%E3%80%82-,%E3%82%AB%E3%83%AA%E3%83%95%E3%82%A9%E3%83%AB%E3%83%8B%E3%82%A2,-%E5%B7%9E%E3%82%AF%E3%83%91%E3%83%81%E3%83%BC%E3%83%8E%E3%81%AEをデコードすると、#:~:text=月7日。-,カリフォルニア,-州クパチーノのとなります。
このタイプのURL フラグメントはテキストフラグメントと呼ばれ、:~:text=prefix-,textStart,textEnd,-suffix という型で作成できます。
ちなみに、prefix-,textEnd,-suffix は省略可能です。
つまり、#:~:text=月7日。-,カリフォルニア,-州クパチーノのは、「月7日。」という文字列と「州クパチーノの」という文字列に挟まれている「カリフォルニア」という文字列があるところにフラグを立てようということです。
👇ツールでエンコード、デコードができます
🆔 HTML のid 属性で
実はURL フラグメントを作成する方法がテキストフラグメント以外にもあり、HTML のid 属性を使って作成することができるんです！
型は、https://example.com/#idです。
しかしながら日常的に使用するには不便で、例えば先ほどのニュースサイトはclass 属性で区別しておりid 属性の特性上、一つのHTML の中で同名のid を振ることができず、id 属性が都合良く振られていることは少なく実用的ではありません。
しかしプログラマーの皆さんは、このフラグメントを開発で有効的に使用できます。
URL フラグメントはテキストフラグメントも含めて、URL の中で唯一サーバーサイドで処理されない要素であり、実際に認証やセキュリティ性の向上のために使用されています。
JavaScript ではlocation.hash プロパティを使い、URL フラグメントを操作できます。
ぜひこの技術を使い、セキュアで使いやすいアプリケーションを開発してください！
🙂 おわりに
いかがだったでしょうか？
この記事でURL フラグメントへの理解、より良いリンクの共有方法を知っていただけたら嬉しいです！
読んでいただきありがとうございました🫡
Discussion