ウェブページの掲載コードをコピーする「PreBox Button」（2）/ JavaScript

かなり根本的な改善

前ページは、クリックした「pre枠」の取得がオーソドックスな手法でした。本文中の全ての「pre枠」を先ず取得し、「for」ループでそれぞれの「pre枠」に対してボタンを表示しています。

この手法は、本文の全ての「pre枠」を取得しないとボタンが表示出来ないので、ページ読込み時に1～2sec待機して処理を開始する必要がありました。それでもボタンが表示出来ない時があり、最後は「MutationObserver」を使う修正をしています。

この修正中に、「アレ」をつかわなあかんと思ったのです。それは、遅延読込みされるimg要素の取得に大変有効な方法の応用です。

「PreBox Button」ver.0.2 43行～

document.addEventListener('click', function(event){
    let pbop_sw=document.querySelector('.pbop_sw');
    if(pbop_sw){
        let elem=document.elementFromPoint(event.clientX, event.clientY);
        if(elem && elem.tagName=='PRE'){
            if(event.ctrlKey){
                pbop_sw.style.display='block';
                pbop_sw.style.left=event.pageX+"px";
                pbop_sw.style.top=(event.pageY-34) +"px";

                pbop_sw.onclick=function(e){
                    e.stopImmediatePropagation();
                    get_copy(elem, pbop_sw); }}
            else{
                pbop_sw.style.display='none'; }}
        else{
            pbop_sw.style.display='none'; }}
});

このコードは、目的要素の取得が非常に確実に出来る優れた手法です。

「elementFromPoint()」のメソッドで、クリックした場所の要素を取得し、その要素が「pre要素」であるかどうかで、処理をして行きます。

「pre枠」をクリックした場合は、それまで隠していた「pbop_sw」（ボタン）をマウスポインタの位置に表示します。そして、ボタンをクリックしたら「pre枠」のコードをコピーする関数「get_copy()」に処理を渡します。

今回も、これは良い結果になりました。

（注）

ブログスキンの文字サイズの均一化するツール「RemPage For Chrome」は便利ですが、「zoom」プロパティでページ全体を拡大表示するので、少し気難しい側面があります。ブラウザ拡大は問題が生じないのですが、「zoom」拡大はボタン位置の計算がズレます。 ver.0.2は、実際は上記コードにその補正コードを追加しています。

「pre枠」の指定とコードコピーの様子

下は、新しいデザインのコビーボタンです。このバージョンでは、「pre枠」をクリックするまでこのボタンは表示されません。従って、ページ上に複数の「pre枠」があっても、ボタンは1個以上は表示されないわけです。

●「pre枠」の内部を「Ctrl+左Click」すると、青い「Copy code 」ボタンが表示されます。

▪ CSSコード等では、実際の「pre枠」は表示上の枠の左隅に寄っている場合があります。コードの文字上でクリックするのが確実です。

● ボタンを「左Click」すると「pre枠」内のコードが全てコピーされます。

　　➔ ボタンの表示が「Copied 」に変わり、1.5secでボタンが消えます。

▪ ボタン以外の場所（枠外でもかまいません）を「左Click」すると、ボタンを消す事ができます。

適用範囲

このツールのコードは、アメーバブログに限らず、一般のウェブページ等でも動作します。ただし、以下の条件が必要です。

▪「@match」パラメータにユーザーが目的サイトを追加している事。

▪「preタグ」でプログラムコードを表示している事。

　（コードを「textarea」「div」などで表示している場合は対応できません）

▪ 特殊なプラグインを使っていない事、ページ自体が特殊な構成でない事。

ver.0.2 は「https://ameblo.jp/*」「https://developer.mozilla.org/*」を「@match」パラメータに指定しています。下は「mozilla」サイトの例です。

Document: elementFromPoint() method - Web APIs | MDNThe elementFromPoint() method, available on the Document object, returns the topmost Element at the specified coordinates (relative to the viewport).∽developer.mozilla.org

下はこの「mozilla」サイトのページで「PreBox Button」を操作する様子です。

「PreBox Button」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

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

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

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

⭕「Tampermonkey」の導入方法拡張機能「Tampermonkey」は定評あるブラウザ拡張機能です。これをブラウザに導入する事で、ユーザーライクで有効な JavaScriptツールを制作し、利用することができます。∽ameblo.jp

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

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

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

〔コピー方法〕右サイドバーのマークのボタンを1度押してください。

　コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作が可能になります。

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

〔 PreBox Button 〕 ver. 0.2

// ==UserScript==
// @name         PreBox Button
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  ウェブページ掲載の「preタグ」内のコードをコピーする
// @author       Ameblo User
// @match       https://ameblo.jp/*
// @match       https://developer.mozilla.org/*
// @icon          https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @noframes
// @grant        none
// ==/UserScript==


menu_set();

function menu_set(){
    let SVG_cp=
        '<svg class="svg_cp" viewBox="0 0 16 16">'+
        '<path d="M0 6.8C0 5.8 .8 5 1.8 5h1.5a0.8 .8 0 0 1 0 1.5h-1.5a0.3 .3 0 0 '+
        '0-0.3 .3v7.5c0 .138.112.25.25.25h7.5a0.3 .3 0 0 0 0.3-0.3v-1.5a0.8 .8 0 '+
        '0 1 1.5 0v1.5A1.8 1.8 0 0 1 9.3 16h-7.5A1.8 1.8 0 0 1 0 14.3Z"></path>'+
        '<path d="M5 1.8C5 0.8 5.8 0 6.8 0h7.5C15.2 0 16 0.8 16 1.8v7.5A1.8 1.8 0'+
        ' 0 1 14.3 11h-7.5A1.8 1.8 0 0 1 5 9.3Zm1.8-0.3a0.3 .3 0 0 0-0.3 .3v7.5c0'+
        ' .138.112.25.25.25h7.5a0.3 .3 0 0 0 0.3-0.3v-7.5a0.3 .3 0 0 0-0.3-0.3Z">'+
        '</path></svg>';

    let sw=
        '<div class="pbop_sw"><span>Copy code </span>'+ SVG_cp +'</div>'+
        '<style>'+
        '.pbop_sw { font: bold 16px Meiryo; position: absolute; display: none; '+
        'padding: 3px 8px 1px; text-align: right; '+
        'border: 1px solid #fff; border-radius: 4px; color: #fff; background: #0288d1; '+
        'box-shadow: 4px 4px 2px -2px rgba(0, 0, 0, 0.5); cursor: pointer; } '+
        '.pbop_sw:hover { background: #1565c0; } '+
        '.svg_cp { width: 20px; height: 16px; vertical-align: -2px; fill: #fff; }'+
        '</style>';

    if(!document.querySelector('.pbop_sw')){
        document.body.insertAdjacentHTML('beforeend', sw); }}



document.addEventListener('click', function(event){
    let body=document.body;
    let zoom_f=window.getComputedStyle(body).getPropertyValue('zoom');
    if(!zoom_f){
        zoom_f=1; } // 拡大ツールがない環境の場合

    let pbop_sw=document.querySelector('.pbop_sw');
    if(pbop_sw){
        let elem=document.elementFromPoint(event.clientX, event.clientY);
        if(elem && elem.tagName=='PRE'){
            if(event.ctrlKey){
                pbop_sw.style.display='block';
                pbop_sw.style.left=(event.pageX)/zoom_f +"px";
                pbop_sw.style.top=((event.pageY)/zoom_f -34) +"px";

                pbop_sw.onclick=function(e){
                    e.stopImmediatePropagation();
                    get_copy(elem, pbop_sw); }}
            else{
                pbop_sw.style.display='none'; }}
        else{
            pbop_sw.style.display='none'; }}
});



function get_copy(preb, sw){
    let sw_span=sw.querySelector('span');
    if (navigator.clipboard){
        navigator.clipboard.writeText(preb.textContent)
            .then( function(){
            sw_span.textContent='Copied　　';
            setTimeout(()=>{
                sw.style.display='none';
            }, 1500 );
            setTimeout(()=>{
                sw_span.textContent='Copy code ';
            }, 1500 );
        })}} // get_copy()

〔2024.01.02〕

「@noframes」を追加しました。

「PreBox Button」最新版について

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

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