「Tampermonkey」ダッシュボードのスキン（7）/ JavaScript

コードの行幅

「Tampermonkey」は、JavaScriptのコードを制作するための編集画面を用意しています。これは「Stylus」と同じ「CodeMirror」のEditorを利用している様で、これだけで通常のコード編集に困る事はありません。

新規の「コード編集画面」は「ダッシュボード」の「➕」タブを開くと、最初からメタデータの雛形付きで表示されます。

この編集画面の幅に関する指定を調べると、以下のCSSが設定されていました。

.head_container {
    min-width: 1000px; }

.tv_container_fit {
    min-width: 1000px; }

.tv_table {
    min-width: 1000px; }

これらの「min-width値」を変更する事で、もっとコンパクトなウインドウ幅でもスクロールバーが表示されなくなります。しかし、コード編集時にこの「1000px」の指定は、私は適当だと感じています。

それ以上にウインドウを拡げて1行の長いコードでも、もちろん構いません。しかし後でコードをメンテする場合に、他のウインドウを開いているかも知れません。つまり、やたらと長い行のコードは、そんな場合に横スクロールが必要になります。「適当な幅」にコードを収めた方が、結局は後々で扱い易いのです。

そういう値の「1000px」の指定は、尊重して良いでしょう。上記の指定によって、「Tampermonkey」で編集画面を開いてブラウザウインドウの幅を狭めて行くと、「1002px」以下から横スクロールバーが表示されます。

上記の境界の時の1行の最大幅は、およそ 920pxです。 1000pxから 80pxほど少ないのは、編集枠に行数表示の列があるからです。また、通常は縦スクロールバーが表示され、そのバー幅で実際は 1行が「906px」を超えるコード行が1行でもあれば、横スクロールバーが表示されます。

私はコード行を、編集枠に横スクロールバーが出ない幅になるべく収めています。これで、自然に適当な横幅のコードになるわけです。（色々な理由で、少しオーバーした行になる事がありますが）

で、最初から横スクロールバーが出ない最小幅に編集枠をセットしておくと、幅が超える行で横スクロールバーが出て気付けます。これが最も効率の良い方法なのですが、つい後回しになります。（後から長い行を整理する事が多い）

これまで少し適当にやって来ましたが、編集枠に推奨幅の印を表示しました。マークよりウインドウ幅を狭くすると横スクロールバーが出るという印です。これが無くても横スクロールバーの出る直前の幅にすれば良いのですが、あれば少し便利です。

ウインドウ幅を少しずつ狭めて行くと、マークの位置を超えた所で、横スクロールバーが出ます。

編集枠内に境界を示す線を表示しても良いのですが、凝り過ぎると合わない人も出て来そうなので、おとなしいアレンジにしています。

この表示は、以下のコードによります。

.editormenu::before {
    content: "▶";
    position: fixed;
    top: 120px;
    left: 990px;
    color: #888; }

このアレンジコードも「2023.03.07」の更新コード に追加しました。