表作成ツール「Blog Table ⭐」先頭列の追加とバグ修正 / JavaScript

先頭列の追加する機能について

コード更新は 2024年3月以来で、ほぼ1年ぶりです。複雑な表を作る時は最初から表の構成を考えて作るので、先頭列を後から追加できない事を甘く考えていました。実際にその必要に迫られ、これは対応すべき問題だと考えを改めました。

「Blog Table ⭐」の「Trim機能」は、表の任意の場所に行や列を追加できます。既にデータを書き込んだ表に、行・列の追加や削除が行えるのは大変に便利です。ただしこれまでは、最上行と左端列の追加が出来ませんでした。

ネット上の表は幅が制限され、通常は列数はたいした量になりませんが、行数は大変に多くなる可能性があります。

行数が多い表の左端に新しい列を追加するのは、従来の「Blog Table ⭐」では大変な作業になります。方法は、左端列の右側に新しい列を作り、左端列のデータをそこへコピー移動して、左端列を空けるしかなかったのです。

今回、このデータ移動なしで左端行が追加できる様になりました。最上行の追加は、現在の所は困難で必要性が少ないので、無理をしない事にしています。

「Trim」機能の「列」の追加・削除は、「最上行のセル」を「Alt+左Click」する事で開始できます。

下は追加操作の様子です。「Alt+左Click」をした時に、編集枠の上部に表示されるメニューで「追加」の状態を選択した上で「実行」を指定しています。

「B列」「C列」の間に新しい列を追加する事は可能でしたが、「A列」（左端行）の左側に新しい列を追加するのは、これまでは出来なかった事です。

表の右端に列を追加するのは、列数指定を変更して「表更新」をすれば可能なので、今回の改善で「列」に関する追加・削除の機能は完全になったと言えます。

「Blog Table ⭐」の「表」デザインの基本仕様で、左端列の背景色が新しい左端列に移動し、追加前の左端列の背景色が無くなります。

上図でも、左端列の追加で「A列」のグリーンの背景色が無くなり、代わりに新しい左端列が緑の背景色になっています。これは表の左端列の背景色の仕様です。

この背景色の移動が都合が悪い場合は、以下のサブツールで、列の各セルの背景色を再指定する事ができます。ただし、任意の列の全ての配色を変更する機能はないので、行数が多い場合は手間な作業になります。

CSSを扱える方は、列指定の「td:nth-child(2)」等を使って、styleタグで設定した方が楽です。

「セル結合」機能をチェックしていて、入力操作に問題がある事が判りました。

「結合するセルの範囲」を指定する「入力枠」の挙動で、「⇧」「⇩」キーを使って指定する場合は無問題ですが、「スピナー」を使った場合に、設定可能な範囲を超えた値が入力出来てしまいます。

上図では、結合が設定可能な範囲は「gセル」までの「3」です。しかし「スピナー」を押し続ける操作で、「4」以上の表外の位置を指定する入力になります。そのまま「実行」を押すと、結合セルの幅に異常値が設定され、場合によってはこの行幅の崩れに繋がります。

下のアニメーションは、異常値が入力される様子です。

この結合幅の入力枠のコードで、以下の入力値の手得コードを使っていました。

「Blog Table ⭐」 ver.5.4　　465行と503行

join_area.onchange=function(){ ～ }

「onchange」は、入力値が設定変更されて、かつ入力枠からフォーカスが外れた段階で、スクリプトが値を受取るとされています。スピナーを押し続けると異常値をツールが判定しない間に入力が出来てしまう様です。

これと置き換え可能なメソッドの「oninput」は、入力内容が変更されるたびに即座にスクリプトが値を受け取ります。これを使うと、異常値が入力された最初でスクリプトの判定コードが機能して、問題を生じない事が判りました。「ver.5.5」では、このメソッドを修正しました。

以下のページのマニュアルに、詳しい操作方法を纏めています。

このツールは Chrome・Edge・Firefox版の拡張機能「Tampermonkey」上で動作します。以下に、このツールの導入・更新の手順を説明します。

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

「Blog Table ⭐」のコードは「GitHub」で配布しています。

● 以下のリンクを押すと「Blog Table ⭐」を初めて利用される場合は「インストール」、既に利用されている場合は「上書き」（更新）ができます。

● 下の様な確認画面が表示されたら、「スクリプト名（ツール名）」「バージョン」を確認して、「インストール」または「上書き」のボタンを押します。

以上の操作で、「Tampermonkey」の「インストール済み UserScript」のリストに「Blog Table ⭐」の最新バージョンが登録・更新されます。

▪ ダッシュボードのリストは「リロード」すると、新しい登録が反映します。

スクリプトツールは、動作対象ページのHTML変更などで正常動作が不能になる場合があります。「自動更新」や手動による「更新」で、最新バージョンを利用することをお勧めします。

「Blog Table ⭐」の最新バージョンに関する記事は、以下のページのリンクリストから探せます。