ニーズは少ないツール かも
私自身が必要なのですが、ネット上に公開されているコードをコピーし易くする簡単なツールを作りました。 このブログのサイドバーに設置しているボタンのコードを、一般のサイトで使用できる様に拡張したものです。
ネットの色々なサイトで紹介されているコードは、すぐにコードと判るデザインになっている場合が殆どです。 枠線で囲んだり、背景を黒にしたり、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