コンパクトな「選択箇所へのリンク」
Chromeが生成する「選択箇所へのリンク」は大変に有効な機能ですが、リンクコードが冗長になる傾向があります。 大量にリンクを並べた一覧表を作った際に、リンクに要する文字数を節約する必要が出て来ました。
1箇所のリンクなら、メモ帳に Chromeが生成したリンクコードをペーストして、それを簡素化して清書し、そのコードをブログ編集画面の「リンク」作成で貼り付ける操作でOKです。
しかし、その操作を何十回も繰り返すのは、どう考えても能率が悪すぎます。 そこで、コンパクトな「選択箇所へのリンク」をChromeに頼らずに生成するツールを作りました。 とりあえず、実際に必要なアメーバブログのブログ記事上でリンクを生成するツールとして制作しましたが、上手く機能すればどんなウェブページでも使える様に拡張できると思います。
「選択箇所へのリンク」の書式について
この進化型リンクを生成するには、その書式について知っておかねばならないのですが、詳細は以下のページを参照ください。
実際にプロトタイプのコードを作って運用したのですが、上手くリンクが働かない場合が出て来ました。 どうやらリンク先の「テキスト」の中に「-」があると不具合が出ます。 このリンクは、リンク先ページの「URL」と、そこで目標とする「テキスト」を繋いだ書式です。「テキスト」は「URL」を扱うシステムが問題を生じない様に「%」を沢山着けた変形をします。 このエンコード処理が問題になっていそうと調べて、以下のページに行き着きました。
最初は「encodeURI()」を使っていましたが、「encodeURIComponent()」というエンコード関数もあり、それによってリンクのコードが異なります。 ややこしいのですが、「;,/?:@&=+$」と「-_.!~*'()」の特殊文字に対する処理が異なる様です。
で、Chromeのデフォルトの「選択箇所へのリンク」のコードと、私が制作している「Short Frag Link」の生成するリンクコードを、これらの文字を含むテキストでリンクを作って、総当たりで比較しました。
この作業で、Chromeの生成するコードは「encodeURIComponent()」の関数を使った場合とほぼ似た結果になる事が判りました。
以下はエンコード結果を比較した一覧です。
| 特殊文字 | Chromeのデフォルトの エンコードの結果 |
encodeURIComponent() による エンコードと結果が異なる場合 |
| space | %20 | |
| ; | %3B | |
| , | %2C | |
| / | / （無処理） | %2F を出力 結果はOK ❶ |
| ? | %3F | |
| : | %3A | |
| @ | %40 | |
| & | %26 | |
| = | %3D | |
| + | %2B | |
| $ | %24 | |
| # | %23 | |
| - | %2D | - 無処理で出力 置換えが必要 ❷ |
| _ | _ （無処理） | |
| . | . （無処理） | |
| ! | ! （無処理） | |
| ~ | ~ （無処理） | |
| * | * （無処理） | |
| ' | %27 | ' 無処理で出力 結果はOK ❸ |
| ( | ( （無処理） | |
| ) | ) （無処理） |
殆どの特殊文字に間して、「encodeURIComponent()」を使えば、Chromeの出力と同じコードが得られます。 ただし、❶～❸ の文字だけ出力が異なります。
❶ 「/」の文字は Chromeは処理せずに「/」をそのまま出力しますが、「%2F」に置き換えた出力でも、ページ上の検索は正しく動作します。 何か他のOSや環境を勘案して無処理としたのかも知れませんが、ツール上では「%2F」の出力を選びました。
❷「-」の文字は「%2D」が必須でした。 これは「選択箇所へのリンク」のパラメーターを「-,」「,-」で区切っているためです。「テキスト」内に「-」が含まれていると、それを「区切り」と誤判断してしまうので、ページ内の「テキスト」へのリンクが働きません。 従って、ツール制作時は別処理で「%2D」に置換えます。
❸「'」も、Chromeは意図的に「%27」に置換えます。 理由は不明で、無処理のままでもリンクは働きます。 ただし、こちらは Chromeに合わせて「%27」に置換える事にしました。
下は「Short Frag Link」が選択箇所とした「文字列」をエンコードする部分です。
「select_text」は選択箇所の「テキスト」で、最初に「encodeURIComponent」でエンコードしています。 更にこの関数では「-」「'」が無処理のままになるので、「replace()」メソッドで文字の置換えを行っています。
この処理をした「テキスト部」とページの「URL」を「#:~:text=」で繋いで、クリップボードに送り込むまでが、このツールの仕事です。
「Short Frag Link」の扱い方
「Short Frag Link」は常駐型のツールです。 現在のバージョンは「アメーバブログ」の記事本文のみを、リンクを生成する対象としています。
● リンクとする記事本文の「テキスト」をキャレットで反転選択します。
● 選択した「テキスト」の上で「Alt+右Click」します。
● 選択範囲の背景色が消えたら、リンクがクリップボードにコピーされています。
〔注〕選択範囲以外の所を「Alt+右Click」した場合も背景色が消えますが、その場合はリンク生成が失敗（キャンセル）になります。
● 編集画面の 
のボタンでリンク作成ダイアログを開き、「URL入力枠」にペーストします。
下は、この様にして作った実際のリンク（リンクカード）です。
〔注意〕
Chromeのデフォルトのリンクコードは冗長ですが、選択箇所の前後の文字列をリンク箇所を特定するために付帯しています。 これにより、「選択箇所」と全く同じ文字列がページ上にあっても、確実にその箇所をハイライト表示できます。
「Short Frag Link」は「選択箇所」の文字列のみをリンクコードとして、軽量化を図っています。 そのため、全く同じ文字列がページ上にある場合は、最初の方をハイライト表示します。 もし、後方の文字列を「選択箇所」にしたい時は、「選択箇所」の文字列の範囲を拡げるか、Chromeのデフォルトの機能を使ってください。
「Short Frag Link」を利用するには
このツールは Chrome / Edge 版の拡張機能「Tampermonkey」上で動作します。
Firefoxでこのツールはリンクを生成できますが、Firefoxは「選択箇所へのリンク」に対応していないので、生成したリンクは通常のリンクとして機能するだけです。
以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 右サイドバーの マークのボタンを1度押してください。
コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Short Frag Link 〕 ver. 0.1
// ==UserScript==
// @name Short Frag Link
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 選択箇所へのリンクのコンパクトなリンクを生成する
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant none
// ==/UserScript==
let user_id;
let page_id;
let frag_link;
let entrybody=document.querySelector('#entryBody');
if(entrybody){
entrybody.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 entry=document.querySelector('.js-entryWrapper');
if(entry){
user_id=entry.getAttribute('data-unique-ameba-id');
page_id=entry.getAttribute('data-unique-entry-id'); }
if(user_id && page_id){
select_text=encodeURIComponent(select_text); // URLエンコード
select_text=select_text.replace(/-/g, '%2D').replace(/'/g, '%27'); //「-」「'」は置換
frag_link=
'https://ameblo.jp/'+ user_id +'/entry-'+ page_id +'.html#:~:text='+ select_text;
if (navigator.clipboard){ // Clipboardへコピー
navigator.clipboard.writeText(frag_link); }}}
}}}
「Short Frag Link」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Short Frag Link」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
