表作成ツール「Blog Table ⭐」ID重複を解決する自動処理 / JavaScript

IDの重複を自動で解決する

「styleタグ」を採用した事による「表IDの重複」問題に、「table_keeper」は大変に有効に機能するので、更に改善する事にしました。

ID重複が一番生じ易いのは記事内の表のまるごとコピーです。他の記事の表のコピーは「HTMLコピー」が必要ですが、同じ記事内でのコピーは、表全体をキャレット操作で「反転選択してコピー&ペースト」で可能です。この操作は、表のIDも同じ表が貼付けられるので、確実にID重複になります。

これを避ける最善策として「表コピー機能」を用意していますが、表に書き込んだ内容もコピーしたい場合は「表全体のコピー」をしたくなります。これは重複を判ってのコピーです。しかし、前ページの「table_keeper」は「重複を警告」するだけで、不親切です。

そこで、ID重複の発生時に、自動で重複したIDを書き換える機能を追加しました。重複が生じたら「IDの書換えを確認」して、「OK」した場合にのみ書換を実行する様にしています。殆どの場合この自動処理で解決するので、前ページで使った「1分間の警告が停止」は設けないことにしました。

ID重複が生じた場合の動作

下は、ID重複が生じた場合の「table_keeper」の動作です。

◎ 記事内にIDが「ambt5」「ambt7」の表があり、「ambt5」の表を全コピーした場合です。

◎ 貼付けた段階で、記事内に「ambt5」のIDの表が2個になり、何かの操作（例えば編集枠内をクリックする）をすると、下の「警告」が表示されます。同時に、重複した表の後方の側が修正対象として「反転表示」されます。

◎「キャンセル」を押すと何も処理されず、一旦「警告」は消えますが、すぐにまた同じ警告がでます。

◎「OK」を押すと「自動のID変更処理」が実行されます。

「ID変更処理」は一瞬で終わり、変更したIDを示す表示になります。

◎ 上の変更IDの確認表示で「OK」を押すと、ID重複が解決したので「警告」は出なくなります。

唯一の注意点

今回の「table_keeper」の更新で、「表のID」に関しての問題をユーザーが意識する必要が殆どなくなると思います。

但し「table_keeper」は、編集画面を開いて「Blog Table ⭐」を「Ctrl+F1」で1回は起動しないと、動作をしません。 1回だけ起動すると、後は「Blog Table ⭐」を閉じても機能し続け、記事の「下書き保存」「投稿」の段階でも「表のID」を管理を見届けます。

従って、ID重複が発生する条件は、「表の全コピー操作」を「Blog Table ⭐」を起動しない状態で行った場合です。全コピーした表を再編集しない場合は少ないと思いますが、これだけは留意して欲しいと思います。

更新した「table_keeper」のコード

下は、今回に更新した「ver.4.2」の「table_keeper」の後半部です。

「Blog Table ⭐」 ver.4.2　　1620行～

let table_list=[]; // 重複チェック用配列
let ovlap; // 重複id名
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){
        if(table_list.indexOf(id_name)==-1){
            table_list.push(id_name); }
        else{
            ovlap=id_name;
            break; }}}

if(ovlap){
    let new_id=new_table_id();
    let ovlap_table=iframe_body.querySelectorAll('#'+ovlap);
    if(ovlap_table[1]){
        ovlap_table[1].style.filter='invert(1)';

        setTimeout(()=>{
            let yes=window.confirm("　🔴 重複した表のIDを変更して良いですか？");
            if(yes){
                ovlap_table[1].id=new_id;
                let style_tag=ovlap_table[1].previousElementSibling;
                if(style_tag && style_tag.classList.contains(ovlap)){
                    style_tag.className=new_id;
                    let style_text=style_tag.textContent;
                    style_tag.textContent=style_text.replaceAll(ovlap, new_id); }
                alert("表のID変更処理をしました\n\n"+
                      ovlap +" ➔ "+ new_id); }

            ovlap_table[1].style.filter='';
        }, 600 ); }}