編集画面には「置換え」 機能がない
ブラウザには「検索」機能がありますが「置換え」機能がありません。 ブログ記事中の特定の文字列を纏めて「置換え」や「削除」をしたい時には、「検索」で探しながらチマチマと書換える必要があります。
下は Chromeで「Ctrl+F」を押して「検索」を実行した所です。 ブラウザによって検索窓のデザインが異なり、Firefoxは画面の下方に検索窓が出ます。
時々この「検索」機能に助けられますが、そのたびに「置換え」機能が欲しいと思います。
HTMLコードの「置換え」も必要
編集画面の自動編集補助機能の働きや、下手なコピペ、中央配置・左右配置の変更、その他の理由で、HTML中に無駄なタグが大量に生成される事があります。
下は、画像配置につられて前後の文字列が中央寄せになり、それを「左寄せ」に修正したら、本来は不要な「style="text-align: left;"」が大量に着いた状態です。
「改行」の「<p> </p>」にまで着いてます。 文字数超過に無関係なユーザーはおそらく気にしないし、私自身もHTMLを見ていない時もありますが、無駄が無いHTMLは色々と良い事があります。
他の方のブログを調べると、「<font color="#000000">」が全ての段落に入っている記事がありました。 意図して文字色を指定したなら当然ですが、私自身も何かの手違いで文字色リセットのタグが大量に入ってしまう事があり、おそらく同じ事が生じたのでしょう。 こういうの、HTMLを見て初めて「えっ」と思うのですが、長い記事で文字数限界が近いと致命的です。
で、こういうのは「一括置換え」を使えたら一瞬で清書できます。 余談ですが、不要な頭側のタグを削除すると、終結タグの「</style>」は自動編集機能が働いて勝手に削除されます。 こういう場合の終結タグ削除は自動編集に任せて問題はない様です。
「置換え」に関する編集画面の制約
先ず「HTML表示」の編集枠で、「置換え」のテストコードを試作してみたのですが、これはみごとに失敗しました。 一旦は「置換え」が実行されますが、編集枠内の表示はコード実体ではなく、「通常表示」に移動すると元に戻ってしまいます。 これを攻略するのは困難と思われ、「通常表示」で「置換え」をする事にしました。
◎「通常表示」からのコードは、編集枠に表示されている「文字列」も、そのソースの「HTMLコード」にもアクセス出来て、「検索」→「置換え」が出来ます。
◎「一括置換え」のコードは作れましたが、ひとつずつ「置換え」るコードは作れていません。 これは今後の課題です。
◎ 置換え対象となるヒットした「文字列」をハイライトする事も未実装です。 可視の「文字列」のハイライトは可能としても、「HTMLのタグ」や「タグ内の文字列」などは「通常表示」では非表示で、それらの場所を示すのは難しそうです。
「検索文字列」「置換え文字列」を受け取る方法
これは「window.prompt();」という便利なダイアログが使えました。
最初に「検索文字列」、次に「置換え文字列」の入力ダイアログを表示し、最後に確認のダイアログで、「一括置換え」を実行します。
「Elements Palette」ver. 2.7
「Elements Palette」は、最新版エディタの「通常表示」で、ブログの構成に必要な各種パーツを自動記入するツールです。 入力される要素のデザインは、ユーザーの必要に合わせてカスタマイズが可能です。
（カスタマイズについては各ツール制作記事を参照ください）
●「Elements Palette」は、以下のショートカットで入力するパーツを選択します。
「Pause」→「F1」: 「Font Awesome」のリンクアイコン自動記入
「Pause」→「F2」: デザインされた「h2タグ」の自動記入
「Pause」→「F3」: デザインされた「h3タグ」の自動記入
「Pause」→「F4」: 装飾線のインライン指定の自動記入
「Pause」→「F5」: （ F5 はショートカット無効が推奨）
「Pause」→「F6」: 「囲み枠」の自動記入
「Pause」→「F7」: コード掲載用「pre」枠の自動記入
「Pause」→「F8」: コード掲載用「pre」枠（縦スクロールタイプ）自動記入
「Pause」→「F9」: 文書末尾に空白行を自動記入
「Pause」→「F10」: リブログカードを縮小アレンジするツール
「Pause」→「F11」: 選択範囲の「全角カギ括弧⇄半角カギ括弧」を変換
「Pause」→「F12」: 「通常表示」画面での「一括置換え」
▪ 各ツールの詳細は、上のリストのリンク先のブログ記事を参照ください。
▪「Font Awesome」の表示は、ブログページに「@import」指定が必要です。
▪「Pause + F12」などの設定で、ツールのバリエーションを追加出来ます。
▪ 各ツールのコードの先頭に、各要素のデザイン指定を纏めています。 その部分を書き換えることで、ツールの配色・サイズ等の内容を変更できます。
▪ 各ツールは記事本文フォントがメイリオである事を前提にデザインされています。 使用フォントが異なり、表示要素のpadding値などの細かなレイアウトを修正したい場合は、各コードの先頭部分を修正してください。
● 以下は今回の更新をしたコードです。コードを「Tampermonkey」にコピー&ペーストする事で、このツールを利用出来ます。 動作は Chrome版 / Firefox版 で確認していますが、Edge版でも「リブログカードアレンジ」以外は動作します。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Elements Palette 〕ver. 2.7
// ==UserScript==
// @name Elements Palette
// @namespace http://tampermonkey.net/
// @version 2.7
// @description 編集枠に各種要素を自動記入するツール
// @author Ameba Blog User
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @grant none
// ==/UserScript==
window.addEventListener('load', function(){
let target=document.getElementById('cke_1_contents'); // 監視 target
let monitor=new MutationObserver(catch_key);
monitor.observe(target, {childList: true}); // ショートカット待受け開始
catch_key();
function catch_key(){
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){ // iframe読込みが実行条件
let iframe_doc=editor_iframe.contentWindow.document;
iframe_doc.addEventListener("keydown", check_key);
let gate;
function check_key(event){
let send=-1;
if(event.keyCode==19){ gate=1; } // 「Pause」キー入力
if(event.keyCode==112){
if(gate==1){ event.preventDefault(); send=112; }}
if(event.keyCode==113){
if(gate==1){ event.preventDefault(); send=113; }}
if(event.keyCode==114){
if(gate==1){ event.preventDefault(); send=114; }}
if(event.keyCode==115){
if(gate==1){ event.preventDefault(); send=115; }}
if(event.keyCode==116){
if(gate==1){ event.preventDefault(); send=116; }}
if(event.keyCode==117){
if(gate==1){ event.preventDefault(); send=117; }}
if(event.keyCode==118){
if(gate==1){ event.preventDefault(); send=118; }}
if(event.keyCode==119){
if(gate==1){ event.preventDefault(); send=119; }}
if(event.keyCode==120){
if(gate==1){ event.preventDefault(); send=120; }}
if(event.keyCode==121){
if(gate==1){ event.preventDefault(); send=121; }}
if(event.keyCode==122){
if(gate==1){ event.preventDefault(); send=122; }}
if(event.keyCode==123){
if(gate==1){ event.preventDefault(); send=123; }}
if(event.keyCode !=19){ gate=-1; }
if(send !=-1){
event.stopImmediatePropagation();
set_mark(send); }
} // check_key
}} // catch_key
function set_mark(sender){
let editor_iframe;
let iframe_doc;
let iframe_html;
let iframe_body;
let selection;
let range;
let ac_node;
let insert_node;
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
iframe_doc=editor_iframe.contentWindow.document;
iframe_html=iframe_doc.querySelector('html');
iframe_body=iframe_doc.querySelector('body.cke_editable');
selection=iframe_doc.getSelection();
range=selection.getRangeAt(0);
ac_node=selection.anchorNode;
if(sender==112){ // F1 Font Awesomeアイコンの自動記入
let insert_node_z;
insert_node=iframe_doc.createElement('i');
insert_node.appendChild(iframe_doc.createTextNode('\u00A0'));
insert_node.setAttribute('class', 'fas fa-external-link-alt fa-sm');
insert_node.setAttribute('style', 'margin-left: .5em');
range.insertNode(insert_node);
insert_node_z=iframe_doc.createTextNode('\u200A');
insert_node.parentNode.insertBefore(insert_node_z, insert_node.nextSibling);
range.setEnd(insert_node_z.nextSibling, 0);
range.collapse(); // フォーカスを失わないでrangeを閉じる
}
if(sender==113){ // F2 h2 見出しの自動記入
let style_text='background: #b0e0e6; padding: .32em 1em .2em'; // h2のデザイン
let font_size='font-size: 1em'; // h2のフォントサイズ
let insert_node_h;
insert_node_h=iframe_doc.createElement('h2');
insert_node_h.setAttribute('style', font_size);
insert_node_h.appendChild(iframe_doc.createElement('span'));
insert_node_h.lastChild.setAttribute('style', style_text);
insert_node_h.lastChild.appendChild(iframe_doc.createTextNode('\u200A'));
if(ac_node.nodeType==3 &&
ac_node.parentNode.tagName=='P' && ac_node.parentNode.parentNode.tagName=='BODY'){
ac_node.parentNode.parentNode.insertBefore(insert_node_h, ac_node.parentNode);
h_before_after();
when_end();
} // h要素生成の条件 通常のP要素のテキストノードから作成
if(ac_node.tagName=='P' &&
ac_node.firstChild.tagName=="BR" && ac_node.parentNode.tagName=='BODY'){
ac_node.parentNode.insertBefore(insert_node_h, ac_node);
h_before_after();
when_end();
} // h要素生成の条件 空白行から作成
function h_before_after(){
if(insert_node_h.previousElementSibling !=null &&
insert_node_h.previousElementSibling.firstChild.tagName !='BR'){
insert_node_h.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>');}
if(insert_node_h.nextElementSibling.firstChild.tagName !='BR'){
insert_node_h.insertAdjacentHTML('afterend', '<p>\u00A0</p>');}
range.setEnd(insert_node_h.lastChild, 0);} // 生成したh要素の前後の空白行処理
function when_end(){
if(insert_node_h.nextElementSibling==insert_node_h.parentNode.lastChild){
insert_node_h.insertAdjacentHTML('afterend', '<p>\u00A0</p>');
iframe_html.scrollTop=iframe_html.scrollHeight;}} // 文末処理
}
if(sender==114){ // F3 h3 見出しの自動記入
let style_text='background: #ddd; padding: .32em 1em .2em'; // h3のデザイン
let font_size='font-size: 1em'; // h3のフォントサイズ
let insert_node_h;
insert_node_h=iframe_doc.createElement('h3');
insert_node_h.setAttribute('style', font_size);
insert_node_h.appendChild(iframe_doc.createElement('span'));
insert_node_h.lastChild.setAttribute('style', style_text);
insert_node_h.lastChild.appendChild(iframe_doc.createTextNode('\u200A'));
if(ac_node.nodeType==3 &&
ac_node.parentNode.tagName=='P' && ac_node.parentNode.parentNode.tagName=='BODY'){
ac_node.parentNode.parentNode.insertBefore(insert_node_h, ac_node.parentNode);
h_before_after();
when_end();
} // h要素生成の条件 通常のP要素のテキストノードから作成
if(ac_node.tagName=='P' &&
ac_node.firstChild.tagName=='BR' && ac_node.parentNode.tagName=='BODY'){
ac_node.parentNode.insertBefore(insert_node_h, ac_node);
h_before_after();
when_end();
} // h要素生成の条件 空白行から作成
function h_before_after(){
if(insert_node_h.previousElementSibling !=null &&
insert_node_h.previousElementSibling.firstChild.tagName !='BR'){
insert_node_h.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>');}
if(insert_node_h.nextElementSibling.firstChild.tagName !='BR'){
insert_node_h.insertAdjacentHTML('afterend', '<p>\u00A0</p>');}
range.setEnd(insert_node_h.lastChild, 0);} // 生成したh要素の前後の空白行処理
function when_end(){
if(insert_node_h.nextElementSibling==insert_node_h.parentNode.lastChild){
insert_node_h.insertAdjacentHTML('afterend', '<p>\u00A0</p>');
iframe_html.scrollTop=iframe_html.scrollHeight;}} // 文末処理
}
if(sender==115){ // F4 修飾線の自動記入
// 文字アンダーライン・マーカー線のデザイン
let style_text='linear-gradient(transparent 1.22em, #27d 0, #27d calc(1.22em + 1px), transparent 0)';
insert_node=document.createElement('span');
insert_node.style.background=style_text;
try{
range.surroundContents(insert_node); }
catch(e){;}
}
if(sender==116){ // F5
alert('【 F5 】 はショートカット無効です \n⛔ページリロードに注意してください'); }
if(sender==117){ // F6 囲み枠の自動生成
// 囲み枠のデザイン
let style_text='background: #f2faf8; border: 1px solid #aaa; border-radius: 4px; '+
'padding: .62em 2em .5em; max-width: 660px;';
let insert_node_d;
insert_node_d=iframe_doc.createElement('div');
insert_node_d.setAttribute('style', style_text);
insert_node_d.appendChild(iframe_doc.createElement('br'));
if(ac_node.nodeType==3 &&
ac_node.parentNode.tagName=='P' && ac_node.parentNode.parentNode.tagName=='BODY'){
ac_node.parentNode.parentNode.insertBefore(insert_node_d, ac_node.parentNode.nextSibling);
d_before_after();
when_end();
} // d要素生成の条件 通常のP要素のテキストノードから作成
if(ac_node.tagName=='P' &&
ac_node.firstChild.tagName=='BR' && ac_node.parentNode.tagName=='BODY'){
ac_node.parentNode.insertBefore(insert_node_d, ac_node);
d_before_after();
when_end();
} // div要素生成の条件 空白行から作成
function d_before_after(){
if(insert_node_d==insert_node_d.parentNode.firstChild ||
insert_node_d.previousElementSibling.firstChild.tagName !='BR'){
insert_node_d.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>');}
if(insert_node_d.nextElementSibling==null ||
insert_node_d.nextElementSibling.firstChild.tagName !='BR'){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');}
range.setEnd(insert_node_d, 0);
range.collapse();} // 生成したdiv要素の前後の空白行処理
function when_end(){
if(insert_node_d.nextElementSibling==insert_node_d.parentNode.lastChild){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');
iframe_html.scrollTop=iframe_html.scrollHeight;}} // 文末処理
}
if(sender==118){ // F7 PRE枠の自動生成
// PRE枠のデザイン 縦スクロールしないタイプ
let style_text_div=' max-width: 620px;overflow-y: hidden; margin: 0 auto; '+
'background: #fafafa; border: 1px solid #aaa;';
let style_text_pre='white-space: pre; display: inline-block; padding: 0 2em;';
let insert_node_d;
insert_node_d=iframe_doc.createElement('div');
insert_node_d.setAttribute('style', style_text_div);
insert_node_d.appendChild(iframe_doc.createElement('pre'));
insert_node_d.lastChild.setAttribute('style', style_text_pre);
insert_node_d.lastChild.appendChild(iframe_doc.createElement('br'));
if(ac_node.nodeType==3 &&
ac_node.parentNode.tagName=='P' && ac_node.parentNode.parentNode.tagName=='BODY'){
ac_node.parentNode.parentNode.insertBefore(insert_node_d, ac_node.parentNode.nextSibling);
d_before_after();
when_end();
} // div要素生成の条件 通常のP要素のテキストノードから作成
if(ac_node.tagName=='P' &&
ac_node.firstChild.tagName=='BR' && ac_node.parentNode.tagName=='BODY'){
ac_node.parentNode.insertBefore(insert_node_d, ac_node);
d_before_after();
when_end();
} // div要素生成の条件 空白行から作成
function d_before_after(){
if(insert_node_d==insert_node_d.parentNode.firstChild ||
insert_node_d.previousElementSibling.firstChild.tagName !='BR'){
insert_node_d.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>');}
if(insert_node_d.nextElementSibling==null ||
insert_node_d.nextElementSibling.firstChild.tagName !='BR'){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');}
range.setEnd(insert_node_d.lastChild, 0);
range.collapse();} // 生成したdiv要素の前後の空白行処理
function when_end(){
if(insert_node_d.nextElementSibling==insert_node_d.parentNode.lastChild){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');
iframe_html.scrollTop=iframe_html.scrollHeight;}} // 文末処理
}
if(sender==119){ // F8 PRE枠の自動生成
// PRE枠のデザイン 縦スクロールするタイプ
let style_text_div=' max-width: 620px; overflow: auto; height: 50vh; margin: 0 auto; '+
'background: #fafafa; border: 1px solid #aaa;';
let style_text_pre='white-space: pre; display: inline-block; padding: 0 2em;';
let insert_node_d;
insert_node_d=iframe_doc.createElement('div');
insert_node_d.setAttribute('style', style_text_div);
insert_node_d.appendChild(iframe_doc.createElement('pre'));
insert_node_d.lastChild.setAttribute('style', style_text_pre);
insert_node_d.lastChild.appendChild(iframe_doc.createElement('br'));
if(ac_node.nodeType==3 &&
ac_node.parentNode.tagName=='P' && ac_node.parentNode.parentNode.tagName=='BODY'){
ac_node.parentNode.parentNode.insertBefore(insert_node_d, ac_node.parentNode.nextSibling);
d_before_after();
when_end();
} // div要素生成の条件 通常のP要素のテキストノードから作成
if(ac_node.tagName=='P' &&
ac_node.firstChild.tagName=='BR' && ac_node.parentNode.tagName=='BODY'){
ac_node.parentNode.insertBefore(insert_node_d, ac_node);
d_before_after();
when_end();
} // div要素生成の条件 空白行から作成
function d_before_after(){
if(insert_node_d==insert_node_d.parentNode.firstChild ||
insert_node_d.previousElementSibling.firstChild.tagName !='BR'){
insert_node_d.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>');}
if(insert_node_d.nextElementSibling==null ||
insert_node_d.nextElementSibling.firstChild.tagName !='BR'){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');}
range.setEnd(insert_node_d.lastChild, 0);
range.collapse();} // 生成したdiv要素の前後の空白行処理
function when_end(){
if(insert_node_d.nextElementSibling==insert_node_d.parentNode.lastChild){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');
iframe_html.scrollTop=iframe_html.scrollHeight;}} // 文末処理
}
if(sender==120){ // F9 文書末尾に空白行を追加
if(iframe_body.lastChild.tagName !='P' && iframe_body.lastChild.tagName !='STYLE'){
add_nextline();
add_nextline(); }
else if(iframe_body.lastChild.tagName=='P'){
if(iframe_body.lastChild.style.textAlign=='center' || iframe_body.lastChild.style.textAlign=='right'){
add_nextline();
add_nextline(); }}
else if(iframe_body.lastChild.tagName=='STYLE'){
if(iframe_body.lastChild.className=='asa'){
add_preline();
add_preline(); }}
range.collapse(); // rangeを始点で閉じる
iframe_html.scrollTop=iframe_html.scrollHeight;
function add_nextline(){
insert_node=iframe_doc.createElement('p');
insert_node.appendChild(iframe_doc.createTextNode('\u00A0'));
iframe_body.appendChild(insert_node);
range.setEnd(insert_node.lastChild, 0); } // 追加した空白行にrange終点を移動
function add_preline(){
insert_node=iframe_doc.createElement('p');
insert_node.appendChild(iframe_doc.createTextNode('\u00A0'));
iframe_body.insertBefore(insert_node, iframe_body.lastChild);
range.setEnd(insert_node.lastChild, 0); } // 追加した空白行にrange終点を移動
}
if(sender==121){ // F10 リブログカードをデザイン
// リブログカードのデザイン
let style_dtext='max-width: 500px; height: 140px; margin: 0 auto; border: 1px solid #009688; '+
'border-radius: 4px; overflow: hidden; transition: .5s;';
let style_itext='max-width: unset; width: calc(100% + 30px); '+
'margin: -45px -15px 0; background: #f0f7fb;';
let rebrog;
let insert_node_d;
rebrog=iframe_doc.querySelector('.reblogCard');
insert_node_d=iframe_doc.createElement('div');
if(rebrog.parentNode.tagName=='P'){
iframe_body.insertBefore(insert_node_d, rebrog.parentNode);
insert_node_d.appendChild(rebrog); }
if(rebrog.parentNode.tagName=='DIV'){
rebrog.parentNode.setAttribute('style', style_dtext);
rebrog.parentNode.setAttribute('class', 'rlink');
rebrog.setAttribute('style', style_itext); }
if(rebrog.parentNode.previousElementSibling==null){ //ページ最上部なら上に余白行追加
insert_node_d.insertAdjacentHTML('beforebegin', '<p>\u00A0</p><p>\u00A0</p>');}
if(rebrog.parentNode.nextElementSibling==rebrog.parentNode.parentNode.lastChild){
rebrog.parentNode.insertAdjacentHTML('afterend', '<p>\u00A0</p>');} //文末処理
}
if(sender==122){ // F11 選択範囲の「カギ括弧」⇄「半角カギ括弧」の変換
// '｢' (\uFF62) '｣' (\uFF63) の文字へ置換え
let r_text=range.toString();
if(r_text.match( /「|」/ ) !=null){
r_text=r_text.replace(/「/g, '\u2006｢').replace(/」/g, '｣\u2006');
let insert_node=document.createTextNode(r_text);
try{
range.surroundContents(insert_node); }
catch(e){;}}
else{
if(r_text.match( /\u2006｢|｣\u2006|｢|｣/ ) !=null){
r_text=r_text.replace(/\u2006｢/g, '「').replace(/｣\u2006/g, '」').replace(/｣/g, '」').replace(/｢/g, '「');
let insert_node=document.createTextNode(r_text);
try{
range.surroundContents(insert_node); }
catch(e){;}}}
}
if(sender==123){ // F12 「通常表示」の検索置換え機能
let search_word=window.prompt('検索する文字列を入力', ''); // 検索語入力ダイアログを表示
if(search_word){
let replace_word=window.prompt('置換える文字列を入力', search_word); // 検索語入力ダイアログを表示
if(replace_word || replace_word=='' ){
let conf_str='🔴 以下の文字列の一括置換えを実行します\n'+
' ' + search_word + ' ➜ ' + replace_word;
let ok=confirm(conf_str);
if(ok){
let editable=iframe_doc.querySelector('.cke_editable');
editable.innerHTML=editable.innerHTML.replace(new RegExp(search_word, 'g'), replace_word); }}}
}
} // set_mark
})
「Elements Palette ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Elements Palette ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
