河野哲治のコラム「 LANマップの表示をカスタマイズしてみよう」

みなさんこんにちは。テックデザインの河野です。
今回は CSS をカスタマイズして、LAN マップをより便利に使うアイデアを紹介したいと思います。

本記事で紹介するカスタマイズはページを再読込すれば元の表示に戻る永続性のない変更ですので、安心してお試しいただけます。動作確認は RTX1210 Rev.14.01.34、Windows 10 / MacOS 10.14.6、Google Chrome 78.0.3904.108 にて行っていますが、仕様変更等により将来的に使えなくなる可能性があることを予めご承知おき下さい。

1．｢端末一覧」のリストを画面の幅いっぱいに広げる

下の写真は解像度1920×1080のディスプレイで「端末一覧」のウィンドウを最大化した状態です。

横スクロールをしないと全ての情報を確認することができないので、左右の余白部分まで端末一覧のリストを広げて表示部分を増やすことにします。まずは、右クリックして、コンテキストメニューから「検証」を選択し「DevTools」を起動します（図2）。

DevTools が起動したら、左ペインに表示されている HTML からカスタマイズしたい部分を探します。body タグにマウスカーソルを乗せると左右の余白部分がオレンジ色にハイライトするので、余白を変更するには body タグの CSS をカスタマイズすれば良さそうです（図3）。

body タグをクリックすると、DevTools 右側のペインに body タグの CSS 情報が表示されるので、「max-width: 1200px;」のチェックを外します。最大幅を1200ピクセルとする表示設定が解除されて左右の余白がなくなり、機器一覧のリストが画面一杯に広がります（図5）。横スクロールせずに全体が確認できるので、端末を探しながら機器情報を入力する作業が格段にラクになります。

ページを閉じて再表示したり再読込をしたりするとカスタマイズされた表示は元に戻るので、再度余白をなくしたい場合は TevTools からもう一度同じ操作をする必要があります。

2．CSSを追記して目印をつける

端末一覧のMACアドレスで端末を特定する場合など、端末一覧のページでは表示項目を見比べたいシーンが結構あります。行番号をメモしておいてもいいのですが一目で分かった方が何かと便利なので、今回はテーブルセルの背景色を目立つ色に変更して目印代わりにしてみます。

背景色を変更したいセルを特定するのは、DevTools の左上にあるアイコンを使うと簡単です（図6）。アイコンをクリックして青色になったら、背景色を変えたい場所をマウスカーソルでポイントします（図7）。そのままクリックすると DevTools 上で対応するHTMLが自動的に選択されます（図8）。タグをダブルクリックするとタグが編集ができるようになるので「␣style=”background-color:red;”」（style の前に半角スペースが入ります）を追記すると（図9）、セルの背景色が赤に変わります（図10）。

任意のCSSを適用することができるので、自由度が高い表示カスタマイズ方法になります。

3．jQueryで複数要素のCSSを一括変更する

LANマップでは jQuery が利用されているので、DevTools のコンソールから下記書式のコマンドを投入することで、複数要素の CSS を一括してまとめて変更することができます。

jQuery 書式： $(‘CSSセレクタ’).css(‘CSSプロパティ’,’値’);

今度は複数要素のCSSを一括変更して、LANマップのマップ表示を画面の幅一杯に表示すると同時に、接続機器の情報をフル表示の状態にしてみます。

DevTools の画面上部にある「Console」をクリックして、プロンプトに下記の3行をコピー＆ペーストします（図12）。

$(‘body’).css(‘max-width’,’100%’);
$(‘#terminal-list’).css(‘display’,’none’);
$(‘#terminal-full-list’).css(‘display’,’block’);

Enter を押下して実行するとLANマップ左右の余白がなくなり、接続機器の情報もフル表示になります（図13）。

4．ブックマークレットにして繰り返し使えるようにしておく

図13のフル表示状態は便利なので何度も使いたいのですが、毎回 DevTools を起動して jQuery のコマンドをコピー＆ペーストするのは面倒なので、ブックマークレットにしてワンクリックで使えるようにします。
ブックマークのURL欄には、javascript: に続けて先ほどの jQuery コマンドを改行なしの1行で記述します（図14）。

javascript:$(‘body’).css(‘max-width’,’100%’);$(‘#terminal-list’).css(‘display’,’none’);$(‘#terminal-full-list’).css(‘display’,’block’);

登録したブックマークをクリックすると1発でこのフル表示画面に切り替えることができます。

工夫次第でさらに便利に使えるLANマップ。
みなさんも自分用の表示を作ってみてはいかがでしょうか？

著者の記事一覧

著者

河野 哲治

株式会社テックデザイン 代表取締役