ネット上の掲載コードのコピー支援ツール / JavaScript

ニーズは少ないツールかも

私自身が必要なのですが、ネット上に公開されているコードをコピーし易くする簡単なツールを作りました。このブログのサイドバーに設置しているボタンのコードを、一般のサイトで使用できる様に拡張したものです。

ネットの色々なサイトで紹介されているコードは、すぐにコードと判るデザインになっている場合が殆どです。枠線で囲んだり、背景を黒にしたり、1行置きにグレー背景色の縞にしたり、行頭に行番号を振ったり... 等々。

その多くは、コードをコピーし易く作ってありますが、中には見栄えが良いが、コピーが大変にし難い表示形式の場合もあります。作ったツールは、余り変な表示形式の場合には使えませんが、以下の2種の表示形式の場合に、右クリックでコード全体を選択できる様にします。

➀「pre枠」に入れられて表示されている場合

➁「CodeMirror」を使って表示をしている場合

実際に各種のサンプルコードのあるページでこのツールを試すと、想像より良い確率でコピー支援機能が働きました。テストの範囲が少ないので、正確にはなんとも言えませんが。

この様なツールが必要な人は少ないかも知れません。「Tampermonkey」に登録しておくと、たまに必要な場合があるかも知れませんが。ただし、適用先を「あらゆるページ」としているので、常時ONは避け、必要な場合のみONにするツールです。

実際に使っている様子

既にコピーしたいページを開いている場合は、「Tampermonkey」のこのスクリプトをONにしてから、ページをリロードします。

目的のコード枠内で、コードの文字上で右クリックすると、「pre枠」の場合は、コードの文字部分だけが選択されて反転表示になります。一般にブルー反転ですが、ページの設定により異なる色になる場合もあります。

同時に上の様なブラウザのコンテキストメニューが表示されるので、「コピー」をクリックします。後は、必要な場所にペーストするだけです。

以下は別のサイトでデザインが異なりますが、やはり「pre枠」形式です。

「Codepen」を使ったページ

「Codepen」は、良く使われている高機能なプラグインです。ページ上でコードを表示するだけでなく、その場で書換えてテスト実行という事もできる様です。

ここで使われているコード表示枠は「CodeMirror」という、やはり定番の高機能なエディタで、アメブロのHTML表示の編集画面もこれです。このプラグイン上のコードが、先と同様に右クリックで全選択できます。

右クリックすると、コードの文字色が全て白になります。ダイアログの「コピー」を押すと、コード全体がクリップボードにコピーされます。

ツールのコード

「Tampermonkey」の「新規スクリプト」のタブを開き、コード編集画面を全てクリアした上で、以下のスクリプトコードを貼り付けて「保存」してください。この操作で、ツールが有効になります。

◎ このスクリプトは Chrome / 新Edge 上の「Tampermonkey」で動作します。 Firefoxでは「pre枠」のみ正常に動作します。

◎ このツールはネット上の「全てのページ」で実行可能な適用先指定にしています。実際に使用する時のみツールをONにする使い方が適当です。

◎ コードの掲載形式はサイトによって様々なので、右クリックでコードの選択が機能しない場合があります。

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

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

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

〔 ▢ PRE枠・CodeMirror の右クリック選択〕 ver.0.1

// ==UserScript==
// @name         ▢ PRE枠・CodeMirror の右クリック選択
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  コード表示の右クリック全選択
// @author       You
// @match       http*://*/*
// @grant        none
// ==/UserScript==

window.addEventListener('load', function(){
    let selection=document.getSelection();
    let range=document.createRange();
    let pre_code=document.querySelectorAll('pre');
    let CodeMirror=document.querySelectorAll('.CodeMirror');


    if(pre_code.length!=0 && CodeMirror.length==0){
        for(let i=0; i<=pre_code.length; i++){
            set_pre(i); }

        function set_pre(i){
            pre_code[i].oncontextmenu=function(){
                range.selectNodeContents(pre_code[i]);
                selection.removeAllRanges();
                selection.addRange(range); }}; }


    if(CodeMirror.length!=0){
        for(let i=0; i<CodeMirror.length; i++){
            set_CodeMirror(i); }

        function set_CodeMirror(i){
            CodeMirror[i].addEventListener('contextmenu', function(event){
                event.stopImmediatePropagation();

                selection.removeAllRanges();
                range.selectNodeContents(CodeMirror[i]);
                selection.addRange(range);

                let code_span=CodeMirror[i].querySelectorAll('span');
                for(let m=0; m<code_span.length; m++){
                    code_span[m].style.color='#fff'; }
            }, true ); }}

});

ネット上の掲載コードのコピー支援ツール / JavaScript

ニーズは少ないツール かも

実際に使っている様子

「Codepen」を使ったページ

ツールのコード

ニーズは少ないツールかも