「選択箇所へのリンク」生成ツール「Short Frag Link」（5）/ JavaScript

選択範囲の読込みコードを変更

ここは、本当は難しい所だと思います。 私の知識が浅いだけなのかも知れませんが。

以下は、「ver.0.4」まで使っていたコードです。

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){ ～～～

このコード、「range.cloneContents()」を使い、選択範囲のコピーを作った上で、そこからテキストを取り出しているのですが、そんな回りくどい事をせずに、下のコード「selection.toString()」であっさりとテキストが得られました。

let selection=document.getSelection();
let select_text=selection.toString();

if(select_text){ ～～～

詳しくは、以下を参考に。

Javascriptで選択範囲の文字列・DOMを取得、操作する方法

で、私は良く説明できないのですが、「ver.0.4」のコードでは、上手くテキストを取得できない場合があります。

「テキスト」の取得コードの差 

この問題に気付いたのは、Edgeの初期画面で「MSNニュース」が表示されるので、そこで「Short Frag Link」をテストした時です。

MSNニュース 

上側のコードでは選択した範囲の「テキスト」が全く取得できず、下側のコードを使うと、「MSNニュース」でも「選択箇所へのリンク」のコードが得られます。

ただし、「MSNニュース」のページ構成は「続きを読む」を押さないと記事の後半が読み込まれず、Chromeデフォルトの「選択箇所へのリンク」が記事の後半では機能出来ません。「Short Frag Link」も、記事前半の「テキスト」を選択した場合のみ「選択箇所へのリンク」のコードが得られます。

いずれにせよ、後者のコードの方が有効なページ例が時々あるのは確かですから、「テキスト」の読込みコードを後者に改めました。

リンクテストの iframe表示を拡大 

「ver.0.4」まで、iframe表示の高さは「400px」でした。 しかし「MSNニュース」のテストでは、もう少し高さが無いとハイライト表示が出来ているのかいないのか、判断できないことがありました。 そこで、高さを「50vh」つまりウインドウの高さの半分まで拡大しました。 iframeはクリックすれば消えますから、邪魔で困る事はないでしょう。

テスト画面の中身が数秒で縮小する問題 

「ver.0.4」までのコードで、「選択箇所」がハイライト表示された状態が一旦は見えた後、リンクテストのiframeのサイズ指定がリセットされてしまうページが複数ありました。

原因は、アメーバのブログ記事だけではありませんが、遅れて読み込まれるAD等が影響しているのか、 ADブロックツールを導入するとこの現象が無くなります。

これは、iframeのサイズ指定に「!important」を付けることで、抑止できました。

.sfl_iframe { width: 100% !important; height: 100% !important; border: none; }

「Short Frag Link」を利用するには

このツールは Chrome / Edge 版の拡張機能「Tampermonkey」上で動作します。

Firefoxでこのツールはリンクを生成できますが、Firefoxは「選択箇所へのリンク」に対応していないので、生成したリンクは通常のリンクとして機能します。

以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 Short Frag Link 〕 ver. 0.5

// ==UserScript==
// @name         Short Frag Link
// @namespace    http://tampermonkey.net/
// @version      0.5
// @description  選択箇所へのリンクのコンパクトなリンクを生成する
// @author       Ameba Blog User
// @match        https://*/*
// @match        http://*/*
// @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 selection=document.getSelection();
            let select_text=selection.toString();

            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(()=>{
                            test(frag_link);
                        }, 20); }}}

        }}


    function test(test_url){
        let test_iframe=
            '<div class="sfl_test">'+
            '<iframe class="sfl_iframe" src="'+ test_url +'"></iframe>'+
            '<div class="sfl_cover"></div>'+
            '<style>'+
            '.sfl_test { position: fixed; left: 0; bottom: 0; z-index: 10000000000; '+
            'width: 100vw; height: 50vh; border-top: 8px solid #000; background: #fff; } '+
            '.sfl_iframe { width: 100% !important; height: 100% !important; border: none; } '+
            '.sfl_cover { position: absolute; top: 0; left: 0 ; width: 100%; height: 100%; } '+
            '</style></div>';

        if(document.querySelector('.sfl_test')){
            document.querySelector('.sfl_test').remove(); }
        document.body.insertAdjacentHTML('beforeend', test_iframe);


        let sfl_test=document.querySelector('.sfl_test');
        let sfl_cover=document.querySelector('.sfl_cover');
        if(sfl_test && sfl_cover){
            sfl_cover.onclick=function(event){
                event.stopImmediatePropagation();
                sfl_test.remove(); }}

    } //test()

}

「Short Frag Link」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Short Frag Link」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）