WordPressで作るラック搭載図

あなたはどのようなツールを使ってラックの搭載図を作っていますか？

資料として残すのであれば、ドローアプリやExcel等を使っている人も多いでしょう。

でも、検索性やメンテナンス性はどうかと言えば、ファイルやペーパーでの管理になるので優れているとは言い難い。

だからNeo隊長は、WordPressでナレッジサイトを作り、ラック搭載図はテーブルを使って管理しています。

ラック搭載図（サンプル）

ラック搭載図の一例です。

Uホスト名IPアドレス機種名機種型番シリアル番号備考
48
47
46swu00110.0.10.252Cisco Catalyst 1300 24FP 4GC1300-24FP-4GSN3815706492ホスティングサービス用 L2 アップリンクスイッチ1
45swu00210.0.10.253Cisco Catalyst 1300 24FP 4GC1300-24FP-4GSN3815706493ホスティングサービス用 L2 アップリンクスイッチ2
44
43
42srv01010.0.10.19HPE Proliant DL360Gen10 PlusP28948-B21SN9507623147ホスティングサービス用 仮想サーバ10
41srv01110.0.10.20HPE Proliant DL360Gen10 PlusP28948-B21SN9507623148ホスティングサービス用 仮想サーバ11
40srv01210.0.10.21HPE Proliant DL360Gen10 PlusP28948-B21SN9507623149ホスティングサービス用 仮想サーバ12
39sws00710.0.10.22HPE FlexFabric 5710 48XGT 6QSFPJL586ASN9873014526ホスティングサービス用 L3 サーバ - ストレージ6
38sw00810.0.10.23HPE FlexFabric 5710 48XGT 6QSFPJL586ASN9873014527ホスティングサービス用 L3 サーバ - ストレージ7
37str00410.0.10.24HPE Alletra 5010HR4U33ASN2109876543ホスティングサービス用 STaaS4
36
35
34
33ブランクパネル
32srv00710.0.10.13HPE Proliant DL360Gen10 PlusP28948-B21SN7654321098ホスティングサービス用 仮想サーバ7
31srv00810.0.10.14HPE Proliant DL360Gen10 PlusP28948-B21SN6543210987ホスティングサービス用 仮想サーバ8
30srv00910.0.10.15HPE Proliant DL360Gen10 PlusP28948-B21SN5432109876ホスティングサービス用 仮想サーバ9
29sws00510.0.10.16HPE FlexFabric 5710 48XGT 6QSFPJL586ASN4321098765ホスティングサービス用 L3 サーバ - ストレージ5
28sws00610.0.10.17HPE FlexFabric 5710 48XGT 6QSFPJL586ASN3210987654ホスティングサービス用 L3 サーバ - ストレージ6
27str00310.0.10.18HPE Alletra 5010HR4U33ASN2109876543ホスティングサービス用 STaaS3
26
25
24
23ブランクパネル
22srv00410.0.10.7HPE Proliant DL360Gen10 PlusP28948-B21SN7890123456ホスティングサービス用 仮想サーバ4
21srv00510.0.10.8HPE Proliant DL360Gen10 PlusP28948-B21SN8901234567ホスティングサービス用 仮想サーバ5
20srv00610.0.10.9HPE Proliant DL360Gen10 PlusP28948-B21SN9012345678ホスティングサービス用 仮想サーバ6
19sws00310.0.10.10HPE FlexFabric 5710 48XGT 6QSFPJL586ASN0123456789ホスティングサービス用 L3 サーバ - ストレージ3
18sws00410.0.10.11HPE FlexFabric 5710 48XGT 6QSFPJL586ASN9876543210ホスティングサービス用 L3 サーバ - ストレージ4
17str00210.0.10.12HPE Alletra 5010HR4U33ASN8765432109ホスティングサービス用 STaaS2
16
15
14
13ブランクパネル
12srv00110.0.10.1HPE Proliant DL360Gen10 PlusP28948-B21SN1234567890ホスティングサービス用 仮想サーバ1
11srv00210.0.10.2HPE Proliant DL360Gen10 PlusP28948-B21SN2345678901ホスティングサービス用 仮想サーバ2
10srv00310.0.10.3HPE Proliant DL360Gen10 PlusP28948-B21SN3456789012ホスティングサービス用 仮想サーバ3
9sws00110.0.10.4HPE FlexFabric 5710 24XGT 6QSFPJL586ASN4567890123ホスティングサービス用 L3 サーバ - ストレージ1
8sws00210.0.10.5HPE FlexFabric 5710 24XGT 6QSFPJL586ASN5678901234ホスティングサービス用 L3 サーバ - ストレージ2
7str00110.0.10.6HPE Alletra 5010HR4U33ASN6789012345ホスティングサービス用 STaaS1
6
5
4
3電源スペース（15A * 4）
2
1

資産管理システムで資産管理番号を発行しているのであれば、列を減らすことで視認性が上がります。

横スクロール対応マウス

ちょっと宣伝になってしまうのですが、このような表を閲覧する際、サム（親指）ホイール付きのマウスだと横スクロールが簡単にできるので便利です。

自宅ではロジクールのMX MASTER3s、外出時はコンパクトなAppleのMagic Mouseを使っています。

ロジクール MX MASTER3s アドバンスド ワイヤレス マウス 静音 MX2300GR Logi Bolt Bluetooth Unifying非対応 8000dpi 高速スクロールホイール USB-C 充電式 無線 MX2300 グラファイト 国内正規品
created by Rinker
Logicool(ロジクール)
¥15,000 (2025/02/07 00:26:16時点 Amazon調べ-詳細)

ユニット番号に識別子を割り当て

表の1列目の「U（ユニット番号）」には、idにより識別子を割り当てています。

このことにより、サーバやスイッチの詳細情報を別ページに作成しておき、収容ラック構成図のページにジャンプさせることができるようになります。

例えば、U12にジャンプさせたい場合は、以下のURLを指定することで実現できます。

https://www.superusers.jp/engineer_work/rack_layout_table.html#u12

Flexible Table Block

WordPressブロックエディタ標準のテーブル（表）はカスタマイズがし辛いので、Flexible Table Blockというプラグインを使ってラック搭載図を編集しています。

Flexible Table Blockの特徴

Flexible Table Blockは、複雑な表形式データを視覚的に見やすくまとめることができ、ラック搭載の一覧化に適したプラグインです。

  • 列の追加や削除、結合が簡単
  • カラムの幅やセル内のテキストスタイルの調整
  • レスポンシブ対応、スマホやタブレットでの視認性も高い
Flexible Table Block 48U テンプレート 
<!-- wp:flexible-table-block/table {"isScrollOnPc":true,"isScrollOnMobile":true,"className":"is-style-stripes"} -->
<figure class="wp-block-flexible-table-block-table is-scroll-on-pc is-scroll-on-mobile is-style-stripes">
  <table class="has-fixed-layout" style="max-width:none;min-width:1840px">
    <thead>
      <tr>
        <th style="text-align:center;width:40px;color:#ffffff;background-color:#000000;border-color:#ffffff">U</th>
        <th style="text-align:center;width:200px;color:#ffffff;background-color:#000000;border-color:#ffffff">ホスト名</th>
        <th style="text-align:center;width:200px;color:#ffffff;background-color:#000000;border-color:#ffffff">IPアドレス</th>
        <th style="text-align:center;width:300px;color:#ffffff;background-color:#000000;border-color:#ffffff">機種名</th>
        <th style="text-align:center;width:300px;color:#ffffff;background-color:#000000;border-color:#ffffff">機種型番</th>
        <th style="text-align:center;width:300px;color:#ffffff;background-color:#000000;border-color:#ffffff">シリアル番号</th>
        <th style="text-align:center;width:500px;color:#ffffff;background-color:#000000;border-color:#ffffff">備考</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="u48" style="text-align:center;width:40px">48</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u47" style="text-align:center;width:40px">47</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u46" style="text-align:center;width:40px">46</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u45" style="text-align:center;width:40px">45</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u44" style="text-align:center;width:40px">44</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u43" style="text-align:center;width:40px">43</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u42" style="text-align:center;width:40px">42</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u41" style="text-align:center;width:40px">41</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u40" style="text-align:center;width:40px">40</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u38" style="text-align:center;width:40px">39</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u38" style="text-align:center;width:40px">38</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u37" style="text-align:center;width:40px">37</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u36" style="text-align:center;width:40px">36</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u35" style="text-align:center;width:40px">35</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u34" style="text-align:center;width:40px">34</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u33" style="text-align:center;width:40px">33</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u32" style="text-align:center;width:40px">32</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u31" style="text-align:center;width:40px">31</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u30" style="text-align:center;width:40px">30</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u29" style="text-align:center;width:40px">29</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u28" style="text-align:center;width:40px">28</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u27" style="text-align:center;width:40px">27</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u26" style="text-align:center;width:40px">26</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u25" style="text-align:center;width:40px">25</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u24" style="text-align:center;width:40px">24</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u23" style="text-align:center;width:40px">23</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u22" style="text-align:center;width:40px">22</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u21" style="text-align:center;width:40px">21</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u20" style="text-align:center;width:40px">20</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u19" style="text-align:center;width:40px">19</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u18" style="text-align:center;width:40px">18</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u17" style="text-align:center;width:40px">17</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u16" style="text-align:center;width:40px">16</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u15" style="text-align:center;width:40px">15</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u14" style="text-align:center;width:40px">14</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u13" style="text-align:center;width:40px">13</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u12" style="text-align:center;width:40px">12</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u11" style="text-align:center;width:40px">11</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u10" style="text-align:center;width:40px">10</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u9" style="text-align:center;width:40px">9</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u8" style="text-align:center;width:40px">8</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u7" style="text-align:center;width:40px">7</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u6" style="text-align:center;width:40px">6</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u5" style="text-align:center;width:40px">5</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u4" style="text-align:center;width:40px">4</th>
        <td style="width:200px">
        </td>
        <td style="width:200px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:300px">
        </td>
        <td style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u3" style="text-align:center;width:40px">3</th>
        <td rowspan="3" style="width:200px">
        </td>
        <td rowspan="3" style="width:200px">
        </td>
        <td rowspan="3" style="width:300px">電源スペース(15AX4)</td>
        <td rowspan="3" style="width:300px">
        </td>
        <td rowspan="3" style="width:300px">
        </td>
        <td rowspan="3" style="width:500px">
        </td>
      </tr>
      <tr>
        <th id="u2" style="text-align:center;width:40px">2</th>
      </tr>
      <tr>
        <th id="u1" style="text-align:center;width:40px">1</th>
      </tr>
    </tbody>
  </table>
</figure>
<!-- /wp:flexible-table-block/table -->

関連記事

コメント

この記事へのコメントはありません。

ランキング

  1. 1位

    サーバー引越し前に行う必須のDNS設定

  2. 2位

    SSHでUnable to negotiate with xxx.xxx.xxx.xxxと表示されて接続できない時の対処法

  3. 3位

    CentOSとUbuntuの違い

  4. 4位

    インターネットに繋いだサーバーで最初にやらなければならない設定

  5. 5位

    Basic認証用パスワードファイルの作り方

カテゴリー

おすすめ記事

  1. 【多段SSH】公開鍵認証で中継サーバー経由のログインが簡単！

  2. インターネットに繋いだサーバーで最初にやらなければならない設定

  3. Swapアウトしているプロセスを特定する方法

  4. Linuxを極めるならコマンドよりも〇〇が先だ!!

  5. お名前ドットコムのDNS設定方法

目次