コード掲載をするアメーバブログは少ないが
「JavaScript」「CSS」「HTML」等のコードをブログ記事上に掲載するには、「preタグ」が一般的に使われます。 これはアメーバの「禁止タグ」には含まれず、私自身も昔から使って来ました。
その掲載コードが短い場合は、通常のテキストと同様の方法でコピーが出来ます。 しかし、コードが長くなるに従って操作は困難になり、コード全体の正確な取得が怪しくなります。
ウェブページ上でコードを掲載するサイトでは、コード掲載用のプラグインを使って掲載しているのを良く見かけます。 プラグインを使う目的のひとつは、「コードをコピーするボタン」が、着いて来るからでしょう。
しかし、アメーバブログではそういったプラグインは使えません。 そこで以下の機能をサイドバーに用意して、コードのコピーを出来る様にしています。
〔コピー方法〕 右サイドバーの マークのボタンを1度押してください。
コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。
これは、本文中に「JavaScript」を記述出来ない（禁止タグ）ので、フリースペースを使って、なんとかその代用としたものです。 しかし本当は、掲載コードの枠側近に「コピーボタン」を置きたいのです。
「Tampermonkey」を使ったユーザーだけに可能
どんなユーザーにも、掲載コードの簡単なコピー手段を提供したいので、先の様な工夫をしていますが、「Tampermonkey」で、掲載コードのコピー専用ツールを常駐させれば、「コピーボタン」を生成する事は簡単です。
これは、比較的多い頻度で「掲載コードのコピー」をするユーザー用のツールで、一般的ではありません。 私自身も、長く作らずに済ませて来たツールです。^^;
でも、先月末の大量のコード修正時に、やはりあれば便利かと思ったので、今回初めて作ってみました。 誰かの何かの参考になるかも知れないので、紹介します。
「PreBox Button」の操作と仕様について
編集画面で動作する「PreBox Tools ⭐」は、「pre枠」を編集画面で扱うのに必要不可欠のツールです。 ブログページで動作するこのツールも「PreBox」に関連させて、プログラム名を「PreBox Button」としました。
このツールは常駐型ですが、プログラムコードを扱わない人には不要なツールです。 デフォルトはアメーバのブログページ画面でのみ動作する設定ですが、「@match」パラメータの追加で、他のウエブページでも機能するかも知れません。
● ブログページ上の「pre枠」に「コピーボタン」を表示します。
●「Copy code 」ボタン「左Click」すると、pre枠内のコードがクリップボードにコピーされます。
▪ コピーされた事を示すために、一瞬だけボタンの表示が「Copied」になります。
▪ このボタンは、それが着いた枠のコードのみをコピー指定するものです。
「PreBox Button」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 PreBox Button 〕 ver. 0.1
// ==UserScript==
// @name PreBox Button
// @namespace http://tampermonkey.net/
// @version 0.1
// @description ブログ記事掲載のコードをコピーする
// @author Ameblo User
// @match https://ameblo.jp/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant none
// ==/UserScript==
main();
let target=document.querySelector('head');
let monitor=new MutationObserver(main);
monitor.observe(target, { childList: true });
function main(){
let pre_box=document.querySelectorAll('pre');
for(let k=0; k<pre_box.length; k++){
get_copy(pre_box[k]); }}
function get_copy(pbx){
let box=pbx.parentNode;
box.style.position='relative';
if(box.clientHeight>200){ // 高さ200px以上の PreBoxにのみ適用
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">Copy code '+ SVG_cp +'</div>'+
'<style>'+
'.pbop_sw { font: normal 16px Meiryo; position: absolute; top: 4px; right: 6px; '+
'padding: 3px 8px 1px; width: 108px; color: #333; border: 1px solid #aaa; '+
'cursor: pointer; } '+
'.pbop_sw:hover { background: #eee; } '+
'.svg_cp { width: 20px; height: 16px; vertical-align: -2px; fill="#666"; }'+
'</style>';
if(!box.querySelector('.pbop_sw')){
box.insertAdjacentHTML('beforeend', sw); }
let prebox_sw=box.querySelector('.pbop_sw')
if(prebox_sw){
prebox_sw.onclick=function(){
if (navigator.clipboard){
navigator.clipboard.writeText(pbx.textContent)
.then( function(){
prebox_sw.textContent='Copied';
setTimeout(()=>{
prebox_sw.innerHTML='Copy code '+ SVG_cp;
}, 800 ); })}}}
}
} // get_copy()
「PreBox Button」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「PreBox Button」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
