＜br＞タグをチェックするツール「BR Checker」（改善版）/ JavaScript

こんなの使う人はいるのかと思うが、私には必要

コード表記の「pre枠」では「Shift + Enter」の改行が必要で、やたらとこれを打つ癖がついて、後で調べると記事中に <br>タグが紛れ込んでいました。アメブロの最新版エディタ（標準）は「Enter」では <p> </p> という pタグを生成するのですが、こういうの統一しておかないと、ちょこちょこ後で問題になったりする？という疑念にかられるのです。

で、作ったのが「BR Checker」で、詳細は以下を参照ください。

このスクリプトは常駐でしばらく使っているのですが、次の2点が問題でした。

　▪カウント表示が小さい

　▪編集枠内にカーソルがないと働かないので不便

これを少し改善しました。

カウント表示のコードを改める

カウント表示部のコードは以下でした。

disp=document.createElement("span");
disp.appendChild(document.createTextNode("▼ BR Checker"));
disp.setAttribute("style", "display: inline-block; margin: 0 0 4px 8px; padding: 3px 15px 0; \
                       font-size: 16px; color: #fff; background: red");
disp.appendChild(document.createTextNode("　count : " + c_br));
if(target.firstChild.tagName=="IFRAME"){
     target.insertBefore(disp, editor_iframe); }

太字の部分が、表示のデザインに関わる「style属性」を書き込む部分ですが、問題があったのはコードが長いので「\」で区切った事で、コードテストの段階で気付かなかったのですが、繋ぎ目の「font-size: 16px;」だけ壊れて書き込まれていました。

この「style属性」は、前ページで教わった方法を早速導入して改めました。

let css='';
css +=['display: inline-block; margin: 0 0 4px 8px; padding: 4px 15px 1px;',
            'font-size: 16px; color: #fff; background: red'].join(' ');
disp=document.createElement("span");
disp.appendChild(document.createTextNode("▼ BR Checker"));
disp.setAttribute("style", css);
disp.appendChild(document.createTextNode("　count : " + c_br));
if(target.firstChild.tagName=="IFRAME"){
    target.insertBefore(disp, editor_iframe); }

これで長い「style属性」が正確に書き込まれ、以下の様に改善しました。

キー入力を2つの範囲で受け取る

これまでのコードは「編集枠」内にカーソルがある場合にのみ、ショートカットキーを受け取るものでした。しかし、実際に使っているとカーソルが外れている時にショートカットを打つ事が頻発、つまり「編集枠」外でも動作して欲しいのです。

対策は少々荒業で、編集枠外の「document」に「addEventListener」を指定するコードを「単純に併記」することですませました。

function catch_key(){
    editor_iframe=document.querySelector('.cke_wysiwyg_frame');
    if(editor_iframe !=null){ // WYSIWYG表示が実行条件
        if(marked==1){ sign(); }

        iframe_doc=editor_iframe.contentWindow.document;
        iframe_doc.addEventListener("keydown", check_key);

        document.addEventListener("keydown", check_key);

        function check_key(event){
            if(event.which==17 || event.ctrlKey==true){
            if(event.which==120 || event.keyCode==120){ // ショートカット「Ctrl＋F9」
                event.stopImmediatePropagation();
                set_mark(); }}}}} // catch_key

黒太字が本来のコードで、赤文字のコードを無理やり付け加えた形ですが、これで「編集枠内」「編集枠外」のどちらでもショートカットが反応する様になりました。

「BR Checker」のコード

このページの改善をしたコードです。ずいぶん使い勝手が良くなりました。このスクリプトは Chrome版/Firefox版の「Tampermonkey」で動作を確認しています。

〔 BR Checker 〕ver. 0.3

// ==UserScript==
// @name         BR Checker
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  
タグによる改行をチェック表示する
// @author       Ameba blog User
// @match       https://blog.ameba.jp/ucs/entry/srventry*
// @grant        none
// ==/UserScript==

window.addEventListener('load', function(){
    'use strict';

    var marked=0; // マーク記入後・削除後の指標
    var disp;
    var editor_iframe;
    var iframe_doc;

    var target=document.getElementById('cke_1_contents'); // 監視 target
    var monitor=new MutationObserver(catch_key);
    monitor.observe(target, {childList: true}); // ショートカット待受け開始

    catch_key();


    function catch_key(){
        editor_iframe=document.querySelector('.cke_wysiwyg_frame');
        if(editor_iframe !=null){ // WYSIWYG表示が実行条件
            if(marked==1){ sign(); }

            iframe_doc=editor_iframe.contentWindow.document;
            iframe_doc.addEventListener("keydown", check_key);

            document.addEventListener("keydown", check_key);

            function check_key(event){
                if(event.which==17 || event.ctrlKey==true){
                    if(event.which==120 || event.keyCode==120){ // ショートカット「Ctrl＋F9」
                        event.stopImmediatePropagation();
                        set_mark(); }}}}} // catch_key


    var set_mark=function(){
        if(marked==0){
            marked=1;
            sign(); } // マークをセット
        else{
            marked=0;
            sign_clear(); } // マークのリセット
    } // set_mark


    function sign(){
        let br_tag;
        let br_mark;
        let i_tag;
        let c_br=0;
        let css='';

        editor_iframe=document.querySelector('.cke_wysiwyg_frame');
        editor_iframe.onload=function() {
            iframe_doc=editor_iframe.contentWindow.document; }

        i_tag=iframe_doc.querySelectorAll('.brmark');
        if(i_tag.length >=1){
            for(let i=0; i < i_tag.length; i++){ i_tag[i].remove(); }} // マーク削除

        br_tag=iframe_doc.querySelectorAll('br');
        for(let i=0; i < br_tag.length; i++){
            if(br_tag[i].parentNode.tagName=="P" && br_tag[i].parentNode.childNodes.length !=1){
                c_br +=1;
                br_mark=iframe_doc.createElement("i");
                br_mark.appendChild(iframe_doc.createTextNode("▼"));
                br_mark.setAttribute("class", "brmark");
                br_mark.setAttribute("style", "display: inline-block;width: 0;margin-left: -2px;color: red");
                br_tag[i].parentNode.insertBefore(br_mark, br_tag[i]); }
            else{ continue; }}

        css +=['display: inline-block; margin: 0 0 4px 8px; padding: 4px 15px 1px;',
               'font-size: 16px; color: #fff; background: red'].join(' ');
        disp=document.createElement("span");
        disp.appendChild(document.createTextNode("▼ BR Checker"));
        disp.setAttribute("style", css);
        disp.appendChild(document.createTextNode("　count : " + c_br));
        if(target.firstChild.tagName=="IFRAME"){
            target.insertBefore(disp, editor_iframe); }}


    function sign_clear(){
        let i_tag;

        editor_iframe=document.querySelector('.cke_wysiwyg_frame');
        iframe_doc=editor_iframe.contentWindow.document;

        if(target.firstChild.tagName !="IFRAME"){
            target.firstChild.remove(); }

        i_tag=iframe_doc.querySelectorAll('.brmark');
        if(i_tag.length >=1){
            for(let i=0; i < i_tag.length; i++){ i_tag[i].remove(); }}} // マーク削除

});

「BR Checker」最新版について

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。最新バージョンへのリンクは、以下のページのリンクリストから探せます。