掲載コードを右クリックで選択可能にするスクリプト / JavaScript

〔追記〕 2024.06.22

「フリープラグイン」で「JavaScript」コードの使用が不許可になったため、このページで紹介したコードは使用ができなくなりました。 同等の機能が必要な場合は、「PreBox Button」の使用をお勧めします。

 

 

このツールを常駐すると、コード枠内の「Ctrl+左Click」で「Copy code 」ボタンが表示され、それを押して掲載コードのコピーができる様になります。

 

 

 

掲載コードは選択し易い方が便利

ウェブページ掲載したコードをコピーする場合、少しテクニックが要ります。 慣れていてもコード行数が多い場合は、確実なのか不安になりますね。 コードを提示するウェブページの多くは、コード掲載用のライブラリを設置して、コード全体を閲覧者が簡単にコピーできる様にしています。

 

しかし、アメブロのブログページではそういうライブラリが使えません。 なにか良い方法はないかと工夫してみました。 訪れた人が、掲載コードを簡単にコピー出来る様にするには、やはりスクリプトを使うしか思い着きません。

 

しかし注意して欲しいのは、訪問しただけの人に拡張機能の「Tampermonkey」などのインストールを求める事は出来ません。 訪問者がページを開いたその場で、スクリプトを実行可能な状態にしなければならないのです。

 

これはアメブロでは「フリープラグイン」を使うしかありません。 そしてスクリプトの実装は、「a href="javascript:(function)();"」のリンクボタンにして、訪問者に押してもらうしか起動の手段がありません。

 

訪問者にとっては遠回りですが、掲載コードをコピーしたい時は「サイドバーのボタンを押してもらう」方法を採りました。 また、コード掲載枠はページ内に複数ある場合が普通で、右クリックしたコードだけが全選択されるスクリプトを考えました。

 

 

基本のスクリプトコード

以下は「Tampermonkey」上で動作するユーザースクリプトです。 これを訪問ユーザーが使うのではなく、この後の「フリープラグイン」に実装するスクリプトを作る過程で、実験的に作ったものです。

 

// ==UserScript==
// @name         右クリックによるコード全選択
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  PRE枠コードの右クリック全選択
// @author       You
// @match       https://ameblo.jp/*
// @grant        none
// ==/UserScript==

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

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

for( var i=0 ; i<=pre_code.length; i++){
    set_pre(i); }

});

 

コードの中心部は「set_pre(i)」という関数です。 これは掲載コードを右クリックしたら、そのコード枠内のコード全部を選択するというコードです。 

 

ページ上には複数のコード枠があり、「set_pre(i)」はどのコード枠を右クリックしても実行される書き方になっています。 しかし、全てのコード枠を総あたりにして、実際に右クリックしたコード枠で、初めてコードが実行される仕掛けです。

 

 

ブログページへの実装

サイドメニューには、「＋フォロー」や「一覧を見る」の定型のボタンがあります。 このデザインは、新タイプのスキンでは「data-uranus-component="button"」という属性で統一されています。 このボタンデザインのキャプションに手を加えて、スクリプト起動用のボタンとして利用しました。

 

以下は、このブログの「フリープラグイン」に実際に登録したコードです。 この登録で、サイドバーの「フリープラグイン」の位置に「スクリプト起動用のボタン」が表示されます。 加工はそれだけです。 記事中に <pre>タグによって掲載したコードがあれば、コード上で右クリックするとコード行の全選択が可能になります。 もちろん、訪問したユーザーがこの起動用ボタンに気付かない場合は、本来の方法でコピーしなければなりません。

 

◎「フリープラグイン」に以下のコードをコピー&ペーストしますが、途中で改行するとコードが無効になる場合があります。

 

◎ スキンが異なるとボタンデザインが異なり、キャプションの文字溢れなども生じるかも知れません。 以下のコード中の太字の「style="～"」の部分を調整して、ボタンデザインを修正出来ます。

 

◎ 下の枠は掲載上の都合でPER枠ではないので、このスクリプトが働きません。

 

〔 フリープラグイン実装用コード 〕


<a data-uranus-component="button" style="margin-left: 40px; font-size: 14px; line-height: 1.4; padding: 5px 10px 0" href="javascript:(function(){var pre_code=document.querySelectorAll('pre'); var selection=document.getSelection(); var range=document.createRange(); function set_pre(i){pre_code[i].oncontextmenu=function(){range.selectNodeContents(pre_code[i]); selection.removeAllRanges(); selection.addRange(range);}}; for(var i=0;i<=pre_code.length;i++){set_pre(i);}})();">掲載コード上の右クリックを
全行の選択にするボタンです</a>
 

 

 

実装の結果

このブログの右サイドバーに、実際に起動ボタンを表示しています。 これを押した後は、このページの上側のコード枠内を右クリックすると、コードが全選択される効果が試せます。 一方、下方の「フリープラグイン実装用コード」は PRE枠でないので全選択されません。

 

 

長いコードだと、コピー操作がとても楽に確実になります。 訪問者がわざわざ起動ボタンを押すデザインは残念ですが、これはアメブロがせちべいだからです。