表の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行~
「表更新」で「word-break」の設定が無効化する問題
前ページの「ver.3.6」の修正点と同様の問題が、「ver.4.0」でもありました。「表更新」の際に「セル幅の設定パネル」を開かなかった場合、更新対象の「word-break」の設定を読込まないままになります。 その状態で「表更新」を行うと、更新元に設定されていた「word-break」の設定が「undefined」に変えられて設定されます。
この問題を修正するために、以下の関数を追加しました。
「Blog Table ⭐」 ver.4.1 750行~
この関数は、更新対象の「表」の「word-break」の設定を読込む関数です。 更新対象の各種設定を読込む際に、同時に実際に実行される様に、以下の部分で指定しています。
「Blog Table ⭐」 ver.4.1 1156行~
これで、「word-break」の設定が正しく継承される様になりました。
「Blog Table ⭐」の使い方
以下のページのマニュアルに、詳しい操作方法を纏めています。
「Blog Table ⭐」を利用するには
「Blog Table ⭐」のコードは「Github」で配布しています。
このリンク先は下の様な画面で、ここでコードのコピーが可能です。
❶ 赤枠のところに、コピー用のボタンがあります。 これをクリックします。
これで、ページ上のコードがクリップボードにコピーされます。
❷「Tampermonkey」の管理画面で「+」マークの「新規スクリプト」を開きます。
❸「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠にしてください。
❹ 編集枠内をクリックして「Ctrl+V」を押すか、右クリックして「貼り付け」を選択します。
➎ コードの先頭までスクロールして、最初の行から正しく貼り付けられたかを確認してください。
❻ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
「Blog Table ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Blog Table ⭐」の最新バージョンのリンクは、以下のページのリンクリストから探せます。