表作成ツール「Blog Table ⭐」ID重複を警告する / JavaScript

表のIDの重複について

「Blog Table ⭐」ver.4.0 から、「table要素」に付帯した「styleタグ」で表デザインを指定する仕様になりました。この方式は表の文字数が節約できますが、「styleタグ」の修飾はページ全体に影響するので、制御を確実にする必要があります。

表がページ内に1個の場合は無問題ですが、2個以上になると注意が要ります。アメーバブログは、「ブログ設定」の「ブログ記事の表示数」で、ブラウザの1画面に最大10件の記事を表示出来るため、「表」が1ページに複数ある状態が起こり得ます。

IDの重複（table要素のID名の重複）があると、重複した表の間で「配色」「枠線幅」「padding」などの指定が、誤適用される状態が生じます。その結果、設定したはずの表のデザインが、想定外の異なる表示になる場合が出て来ます。

ID重複が生じる場合

1つの記事に複数の表を掲載する事を考慮して、表を生成する際は「ambt0」から連番のID名を付けて生成しています。「table要素」と対の「styleタグ」は、修飾対象の「ID」をセレクタで指定するので、同ページ内の他の表には影響がありません。

しかし、以下の場合にIDの制御が崩れます。

① 他の記事から「HTMLコピー」によって「表」を持ち込んだ場合。これは、多くの場合にID重複が生じます。また、記事編集中に「表」を同じ記事内でコピーして貼付けた時。これは確実に ID重複となります。

➁ 1画面に複数の記事の表示を設定したブログで、複数記事間でID重複が生じる場合。これは、ブログ設定で「1画面1記事」を指定すれば、改善できます。ただし、どうしても「1画面に複数記事」を変えたくない場合は、「ver.4.0」以前の「Blog Table ⭐」を使う回避策があります。「style属性」は、修飾対象の要素ごとに指定されるので、ID重複の問題は生じません。

ID重複の対策を強化しました

➁ の複数記事間の ID重複は、「Blog Table ⭐」のユーザーに扱い方をゆだるねしかありません。スマホでは無問題で、個別記事の参照時は問題が出ないのですが...

① の記事内での問題は、「styleタグ」仕様の問題を解決する「table_keeper」を、更に高度化して、コピーによる問題に対応する事にしました。

先ず、コピーによるID重複を監視して、生じた場合に「警告」を表示する機能を追加しました。表全体のコピー操作はユーザーが意図的に行い、重複が生じない場合もある事や、重複を後で修復するつもりでコピーする場合があります。従って、コピーの拒否や重複した表を削除する処理をせず、ユーザーが重複に気付く様にしました。

この「警告」は、「IDが重複する表」を貼り付けた直後から、編集枠内で何かの操作をすると直ぐに出ます。

監視は、「Blog Table ⭐」を編集画面で「Ctrl+F1」で一度は起動しないと、実行されませんが、「Ctrl+F1」でパネルを閉じても監視機能は継続して働きます。

◎「同じ記事内のコピー」「他の記事からHTMLコピー」などに区別はありません。

◎ 貼り付けた表が重複を生じない IDの場合は、警告は出ません。

◎ ID名・Class名の修正を前提にコピーする場合が有り得るので、「警告」で「OK」を押すと 1分間はこの警告が停止する様にしました。

更新した「table_keeper」のコード

下は、「ver.4.1」の「table_keeper」です。中央から下の部分が ID重複をチェックするコードです。

「Blog Table ⭐」 ver.4.1　　1601行～

function table_keeper(){ // 🟢
    if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始
        let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
        if(editor_iframe){
            let iframe_doc=editor_iframe.contentWindow.document;
            if(iframe_doc){
                let iframe_body=iframe_doc.body;
                if(iframe_body){

                    let style=iframe_body.querySelectorAll('style');
                    for(let k=0; k<style.length; k++){
                        let class_name=style[k].className;
                        if(class_name && class_name.indexOf('ambt')!=-1){
                            if(style[k].nextElementSibling){
                                let id=style[k].nextElementSibling.id;
                                if(!id || id.indexOf('ambt')==-1){
                                    style[k].remove(); }}
                            else{
                                style[k].remove(); }}}

                    let table_list=[]; // 重複チェック用配列
                    let tables=iframe_body.querySelectorAll('table');
                    for(let k=0; k<tables.length; k++){
                        let id_name=tables[k].id;
                        if(id_name && id_name.indexOf('ambt')!=-1){
                            table_list.push(id_name); }}

                    let set_name=new Set(table_list);
                    if(set_name.size!==table_list.length){
                        if(t_alert==1){
                            let yes=window.confirm(
                                "　⛔  この記事内に 表のIDの重複があります\n"+
                                "　　　この警告を暫く停止するには OKを押してください");
                            if(yes){
                                t_alert=0;
                                setTimeout(()=>{
                                    t_alert=1;
                                }, 60000 ); } // 60sec停止
                        }}

                }}}}
} // table_keeper();

「表更新」で「word-break」の設定が無効化する問題

前ページの「ver.3.6」の修正点と同様の問題が、「ver.4.0」でもありました。「表更新」の際に「セル幅の設定パネル」を開かなかった場合、更新対象の「word-break」の設定を読込まないままになります。その状態で「表更新」を行うと、更新元に設定されていた「word-break」の設定が「undefined」に変えられて設定されます。

この問題を修正するために、以下の関数を追加しました。

「Blog Table ⭐」 ver.4.1　　750行～

function call_style_wb(r_table){
    let style_tag=r_table.previousElementSibling;
    let wb;
    if(style_tag){
        let t_style=style_tag.textContent;
        wb=t_style.match(/word-break: .*?;/);
        if(wb){
            wb=wb.toString().replace('word-break: ', '').replace(';', '');
            if(wb=='break-all' || wb=='break-word'){
                return wb; }
            else{
                return 'unset'; }}
        else{
            return 'unset'; }}}

この関数は、更新対象の「表」の「word-break」の設定を読込む関数です。更新対象の各種設定を読込む際に、同時に実際に実行される様に、以下の部分で指定しています。

「Blog Table ⭐」 ver.4.1　　1156行～