「選択箇所へのリンク」の仕様は謎が多い
現在、Chrome / Edge のみで機能する「選択箇所へのリンク」ですが、リンク機能としては大変に有効です。 説明のためのリンク引用に手間取ると、却って読み手を惑わします。 リンク先の肝心な部分をさっと提示できるのは有難い。
この機能の前身の「ページ内アンカー」は、昔からあります。 しかし、それは「ページ内アンカー」を設置できる、自分の文書やブログでしか使えません。 他の方のブログ記事や、一般の外部サイトの記事には、こちらの都合でアンカーを設置出来ないわけで、「某サイトの某記事内のこの箇所」にリンクを作る様な事は出来ません。
そこを工夫したのが「選択箇所へのリンク」で、何の印もない「テキスト」の場所を適確に表示するために、ページ内検索を使っています。 ただそれだけでは、複数回出て来る「テキスト」の場合は、対象を特定できません。 そのため、ユーザーが「選択箇所」に指定した「テキスト」の前後のテキスト情報をリンクの情報として含める事で、使える「場所指定」の機能に仕立てています。
ただし、ウェブ上のページには、様々な形で埋め込まれた「テキスト」があるので、この「場所指定」の機能も絶対ではない様です。
アメブロ内でのテストでも、「選択箇所へのリンク」の機能が万能ではない場合に気付きます。 それは「Short Frag Link」の能力ではなく、ブラウザの「選択箇所へのリンク」自体の制限を含んでいます。
「選択箇所へのリンク」が作れない事があります
この項は、Chromeデフォルトの「選択箇所へのリンク」の作成時のテストです。
その挙動は「Short Frag Link」の場合と少し違います。「Short Frag Link」のリンク生成は失敗を気にせず生成しますが、Chromeデフォルトは確実に動作するリンクを生成する様に複雑な判断をしていると思われます。
以下はサンプルのスタッフブログのページです。
リンク先を開くと、下の様な表示になると思います。（Chrome/Edgeの場合）
画像が選択範囲にある場合
この下の方の所で、以下の範囲を選択してデフォルトの「選択箇所へのリンク」を生成するために「右クリック」したところです。
「選択箇所へのリンク」がメニューに表示されますが押せません。 この理由は、選択範囲の最後に画像（アメーバ絵文字）があるからです。
選択範囲を画像の手前までとすると、問題なくリンクが作れます。
選択範囲の境界を「単語」にする必要がある
下は、ちょっと意地悪な部分を選択してリンクを作っています。 この場合は「選択箇所へのリンク」のメニューを押せます。
しかし、生成されたリンクはハイライトの範囲が勝手に拡げられています。
選択範囲の境界を「単語」を区切りとするアルゴリズムが働いている様です。 言語が英語の場合は「単語の区切りが明瞭」で、それを選択範囲の区切りとして文書内を検索していると推測されます。 しかし、日本語で同等の検索を行うため、日本語の「単語」を選択範囲の区切りにしたのでしょう。
Html構成が複雑な箇所は生成できない場合がある
下は別ページですが、選択範囲が悪くて「選択箇所へのリンク」が押せません。
これは、「見出しの記事デザイン」を使った部分で、選択範囲の最初にあるのは画像ではなく「span要素」ですが、少し変わったhtml構成の部分は選択範囲として受付けない様です。（テキスト部分だけならリンクが作れます）
テストしていると、適当な選択範囲の決め方がなんとなく判って来ます。 リンクが作れない場合の傾向を知っておくに越したことはありません。
「Short Frag Link」の生成するリンクが無効になる場合
前項の例の様に、Chromeは、無効な選択範囲に対してリンク生成メニューを押せなくなりますが、「Short Frag Link」は無効な選択範囲のリンクも作ってしまいます。 前項と同じ範囲を指定してみます。
「Short Frag Link」が生成するリンクコードの末尾は、選択した範囲そのままです。
しかし、このコードでは Chromeは「選択箇所」を表示できません。
Chromeが「選択箇所」を検索する「選択範囲の指定」を、「Short Frag Link」を使ってテストすると、以下の場合でした。（"化粧崩れ"の手前までのテストです）
◎「赤線の範囲」を選択すると「選択箇所」の検索が動作しますが、それ以外の「範囲選択」はページ内の検索動作が行われません。
◎ 上側は 1文字の場合です。
▪漢字の「日」はOKですが、「焼」は検索しません。 1文字単独で意味を成す漢字は検索するという事でしょうか。
▪カタカナの「タ」❶ はOK。 この場合、ひらがなの「た」も検索する様です。
▪記号の「、」❷ は、単独で検索しますが、「つき、」「ベタつき、」の様に、その手前が検索OKの場合は、それに付いた場合も検索OKになります。
◎ 下側は 2文字以上の場合です。
▪「日焼け」「ベタ」「つき」等は、意味がある単語で検索OKとする様です。
▪「日焼けや」の様に、意味のある単語＋助詞の場合は検索OK。
▪「ベタつき」は、意味のある単語の組み合わせ、あるいはひとつの単語と判定されるのか、検索対象としてOKです。
▪ 意味のある単語が連続して繋がっている限り、検索対象としてOKです。
要は、人が読み上げて中途半端な所を境界とすると「選択箇所へのリンク」の検索機能が働きません。 そんな場合、境界の1文字変えるとリンクが動作したりします。
「Short Frag Link」を使う場合は、この点が選択範囲を指定する要領です。
「Short Frag Link」を大幅に更新
生成したリンクのテスト機能
hromeの「選択箇所へのリンク」は、リンクが作れない場合はメニューを押せなくなりますが、「Short Frag Link」は不適当なリンクを生成した場合や、生成できなかった場合は、すぐにはユーザーに判りません。
そこで、「Short Frag Link」が出力したリンクコードをテストする様にしました。 クリップボードに生成したリンクを送ると同時に、そのリンクで別タブを開きます。 これは、リンクが押された結果を確認できるので、間違いがありません。
ネット上の全ページを動作範囲に変更
ツール先頭のメタデータを変更しました。
▪「ver. 0.1」は「@match https://ameblo.jp/*」
▪「ver. 0.2」は「@match https://*/*」「@match http://*/*」です。
「ver. 0.1」はアメーバブログページが動作範囲ですが、「ver. 0.2」はウェブ上の全ページの「テキスト」を対象にリンクを生成できます。 もちろん、ネット上には色々な構成のページがあり、JavaScriptを機能し難くしたページもあります。 また、ユーザーのアクセス方法で変化する、Google検索や天気予報のページ等では、リンク生成が出来ない場合があります。
「Short Frag Link」の 操作方法
「Short Frag Link」は常駐型ツールです。 ウェブ上のあらゆるページで動作し、適切な選択範囲を指定する事で、選択箇所へのコンパクトなリンクを生成します。
◎「選択箇所へリンク」は、現在は Chrome / Edge でのみサポートされています。
従って、このツールはこれらのブラウザでの使用を前提としています。
◎ 選択箇所の「テキスト」のみを使った最もコンパクトなコードを出力します。 このため、同ページに複数の同じ「テキスト」がある場合、最初の「テキスト」をハイライトします。 後方にヒットさせたい場合は、Chromeの本来の機能を使用ください。
● リンクとするページ上の「テキスト」をキャレットで反転選択します。
● 選択して背景色が着いた「テキスト」の上で「Alt+右Click」します。
● 選択範囲の背景色が消えたら、リンクがクリップボードにコピーされています。
● この操作と同時に、生成したリンクで別タブが開きます。
▪別タブは、実際に生成したリンクをテストした結果ですから、選択箇所がハイライトされます。
▪期待した結果でない場合は、元の画面でリンク生成を再度試みてください。 ハイライト表示がされないのは、多くの場合、選択した範囲が不適当だからです。
● ブログ編集画面の 
のボタンでリンク作成ダイアログを開き、「URL入力枠」にリンクコードをペーストします。
下は、この様にして作った実際のリンク（リンクカード）です。
「Short Frag Link」を利用するには
このツールは Chrome / Edge 版の拡張機能「Tampermonkey」上で動作します。
Firefoxでこのツールはリンクを生成できますが、Firefoxは「選択箇所へのリンク」に対応していないので、生成したリンクは通常のリンクとして機能します。
以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Short Frag Link 〕 ver. 0.2
// ==UserScript==
// @name Short Frag Link
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 選択箇所へのリンクのコンパクトなリンクを生成する
// @author Ameba Blog User
// @match https://*/*
// @match http://*/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant none
// ==/UserScript==
let frag_link;
let page_body=document.body;
if(page_body){
page_body.oncontextmenu=function(event){
if(event.altKey){ // 反転選択した「テキスト」を「Alt+右Click」
let range;
let selection=document.getSelection();
if(selection && selection.rangeCount>0){
range=selection.getRangeAt(0); }
let select_text=document.createElement('div');
select_text.appendChild(range.cloneContents());
select_text=select_text.textContent;
if(select_text){
event.preventDefault();
event.stopImmediatePropagation();
document.getSelection().removeAllRanges(); // 選択範囲をクリア
let url=location.href.split('?')[0].split('#')[0];
if(url){
select_text=encodeURIComponent(select_text); // URLエンコード
select_text=select_text.replace(/-/g, '%2D').replace(/'/g, '%27'); //「-」「'」置換
frag_link=
url +'#:~:text='+ select_text;
if(navigator.clipboard){
navigator.clipboard.writeText(frag_link); // Clipboardへコピー
setTimeout(()=>{
window.open(frag_link, '_blank'); // リンクの動作をテスト
}, 20); }
}}
}}}
「Short Frag Link」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Short Frag Link」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
