Splunkクラシックxmlを用いたオリジナルチャートのデザイン入門　～ステップバイステップで作り方を学ぼう！編～

メモ

Posted at 2026-01-18

【Splunk入門】ネットワーク構成図を作ってみよう - ダッシュボードで学ぶHTML/CSS実装

はじめに

今回は、Splunkのダッシュボードでかっこいいネットワーク構成図を作る方法を、新人エンジニア向けに徹底解説します。

「Splunkってログ分析ツールでしょ？図なんて描けるの？」と思ったあなた。実はSplunkのHTMLパネル機能を使えば、自由にビジュアライゼーションが作れるんです！

完成イメージ

今回作るのは、こんな感じのサイバー風ネットワーク構成図です：

🌐 ルーター、スイッチ、サーバーを配置
🔥 ファイアウォール、ロードバランサーも表示
⚡ デバイス間を線で接続
🎨 ブラック背景にネオンカラーで視認性抜群

1. 最小構成から始める

まずは、Splunkダッシュボードの最小構成を見てみましょう。

<dashboard version="1.1">
  <label>完成版：ネットワーク構成図</label>
  <description>すべての要素を組み合わせた完全版</description>
  <row>
    <panel>
      <html>
        <style>
          /* === 1. コンテナ設定 === */
          .network-diagram {
            width: 100%;
            height: 600px;
            background: #000;
            position: relative;
            overflow: hidden;
          }
          
          /* === 2. ノードの共通スタイル === */
          .node {
            position: absolute;
            border: 2px solid #0ff;
            background: rgba(0, 20, 20, 0.8);
            color: #0ff;
            padding: 15px;
            font-family: monospace;
            font-weight: bold;
            text-align: center;
            font-size: 12px;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
          }
          
          /* === 3. デバイスタイプ別サイズ === */
          .router {
            width: 80px;
            height: 80px;
            line-height: 50px;
          }
          
          .switch {
            width: 70px;
            height: 70px;
            line-height: 40px;
          }
          
          .server {
            width: 100px;
            height: 100px;
            line-height: 35px;
          }
          
          .endpoint {
            width: 50px;
            height: 50px;
            line-height: 20px;
            font-size: 10px;
          }
          
          /* === 4. 役割別カラーリング === */
          .firewall {
            border-color: #f0f;
            color: #f0f;
            box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
          }
          
          .main-server {
            border-color: #f80;
            color: #f80;
            box-shadow: 0 0 15px rgba(255, 136, 0, 0.6);
          }
          
          .load-balancer {
            border-color: #ff0;
            color: #ff0;
            box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
          }
          
          /* === 5. 個別ノード配置（上段） === */
          #r1 { top: 20px; left: 60px; }
          #r2 { top: 20px; left: 250px; }
          #core-sw { top: 10px; left: 420px; }
          #r3 { top: 20px; left: 620px; }
          #r4 { top: 20px; left: 810px; }
          
          /* === 6. 個別ノード配置（中段） === */
          #n7 { top: 130px; left: 10px; }
          #n1 { top: 130px; left: 130px; }
          #n2 { top: 130px; left: 760px; }
          
          #firewall-a { top: 180px; left: 260px; width: 140px; }
          #main-server { top: 170px; left: 420px; }
          #firewall-b { top: 180px; left: 540px; width: 140px; }
          
          /* === 7. 個別ノード配置（下段） === */
          #sw1 { top: 340px; left: 60px; }
          #sw2 { top: 340px; left: 250px; }
          #n3 { top: 340px; left: 330px; }
          #load-bal { top: 310px; left: 420px; height: 130px; }
          #n4 { top: 340px; left: 560px; }
          #sw3 { top: 340px; left: 620px; }
          #sw4 { top: 340px; left: 810px; }
          
          /* === 8. SVG接続線設定 === */
          svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }
          
          .connection {
            stroke-width: 2;
            fill: none;
          }
          
          .cyan { stroke: #0ff; }
          .yellow { stroke: #ff0; }
          .magenta { stroke: #f0f; }
        </style>
        
        <div class="network-diagram">
          <!-- === SVGレイヤー（接続線） === -->
          <svg>
            <!-- 上段の横方向接続 -->
            <line class="connection cyan" x1="140" y1="60" x2="250" y2="60"/>
            <line class="connection cyan" x1="330" y1="60" x2="420" y2="60"/>
            <line class="connection cyan" x1="520" y1="60" x2="620" y2="60"/>
            <line class="connection cyan" x1="700" y1="60" x2="810" y2="60"/>
            
            <!-- 上段から中段への接続 -->
            <line class="connection yellow" x1="100" y1="100" x2="155" y2="130"/>
            <line class="connection cyan" x1="60" y1="100" x2="35" y2="130"/>
            
            <line class="connection yellow" x1="290" y1="100" x2="300" y2="180"/>
            <line class="connection cyan" x1="250" y1="100" x2="180" y2="130"/>
            
            <line class="connection magenta" x1="470" y1="110" x2="400" y2="180"/>
            <line class="connection magenta" x1="470" y1="110" x2="580" y2="180"/>
            
            <line class="connection yellow" x1="660" y1="100" x2="600" y2="180"/>
            <line class="connection cyan" x1="700" y1="100" x2="760" y2="130"/>
            
            <line class="connection yellow" x1="850" y1="100" x2="850" y2="340"/>
            
            <!-- 中段の接続 -->
            <line class="connection magenta" x1="400" y1="215" x2="420" y2="215"/>
            <line class="connection magenta" x1="520" y1="215" x2="540" y2="215"/>
            <line class="connection magenta" x1="470" y1="270" x2="470" y2="310"/>
            
            <!-- 中段から下段への接続 -->
            <line class="connection magenta" x1="300" y1="240" x2="290" y2="340"/>
            <line class="connection magenta" x1="600" y1="240" x2="660" y2="340"/>
            
            <!-- 下段の横方向接続 -->
            <line class="connection cyan" x1="130" y1="380" x2="250" y2="380"/>
            <line class="connection cyan" x1="320" y1="380" x2="330" y2="380"/>
            <line class="connection magenta" x1="360" y1="380" x2="420" y2="380"/>
            <line class="connection magenta" x1="520" y1="380" x2="560" y2="380"/>
            <line class="connection cyan" x1="590" y1="380" x2="620" y2="380"/>
            <line class="connection cyan" x1="690" y1="380" x2="810" y2="380"/>
            
            <!-- 縦方向の長距離接続 -->
            <line class="connection yellow" x1="100" y1="100" x2="100" y2="340"/>
            <line class="connection yellow" x1="660" y1="100" x2="720" y2="340"/>
            <line class="connection yellow" x1="575" y1="340" x2="700" y2="100"/>
          </svg>
          
          <!-- === ノードレイヤー（上段） === -->
          <div id="r1" class="node router">R1</div>
          <div id="r2" class="node router">R2</div>
          <div id="core-sw" class="node server">CORE<br/>SW</div>
          <div id="r3" class="node router">R3</div>
          <div id="r4" class="node router">R4</div>
          
          <!-- === ノードレイヤー（中段） === -->
          <div id="n7" class="node endpoint">N7</div>
          <div id="n1" class="node endpoint">N1</div>
          <div id="n2" class="node endpoint">N2</div>
          
          <div id="firewall-a" class="node server firewall">FIREWALL_A</div>
          <div id="main-server" class="node server main-server">MAIN<br/>SERVER</div>
          <div id="firewall-b" class="node server firewall">FIREWALL_B</div>
          
          <!-- === ノードレイヤー（下段） === -->
          <div id="sw1" class="node switch">SW1</div>
          <div id="sw2" class="node switch">SW2</div>
          <div id="n3" class="node endpoint">N3</div>
          <div id="load-bal" class="node server load-balancer">LOAD<br/>BAL</div>
          <div id="n4" class="node endpoint">N4</div>
          <div id="sw3" class="node switch">SW3</div>
          <div id="sw4" class="node switch">SW4</div>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>ネットワークステータス</title>
      <table>
        <search>
          <query>| makeresults | eval device="All Systems", status="Operational" | table device status</query>
        </search>
      </table>
    </panel>
  </row>
</dashboard>

1.1 デフォルトのHTMLパネルポイント：

<dashboard version="1.1">: ダッシュボードのルート要素
<row>: 行を定義（横方向のレイアウト）
<panel>: パネルを定義（ウィジェットの単位）
<html>: HTMLコンテンツを記述できる

2. 要素を分解して理解する

ネットワーク構成図を構成する要素を分解してみましょう。

2.1 構成要素の全体像

ネットワーク構成図
├── コンテナ（.network-diagram）
│   ├── ノード（デバイス）
│   │   ├── ルーター（.router）
│   │   ├── スイッチ（.switch）
│   │   ├── サーバー（.server）
│   │   ├── ファイアウォール（.firewall）
│   │   ├── ロードバランサー（.load-balancer）
│   │   └── エンドポイント（.endpoint）
│   └── 接続線（SVG）
│       ├── シアン線（.cyan）
│       ├── イエロー線（.yellow）
│       └── マゼンタ線（.magenta）

2.2 CSS設計の構造

ベースクラス: .node - すべてのデバイスの共通スタイル
タイプクラス: .router, .switch, .server - デバイスタイプ別のサイズ
役割クラス: .firewall, .main-server - 特定の役割による色分け
配置クラス: #r1, #sw1 - 個別の位置指定

3. ステップバイステップで実装

それでは、段階的に実装していきます！

Step 1: 黒背景のコンテナを作る実装のコツ：

position: relative でコンテナを位置の基準点にする
overflow: hidden で枠外にはみ出した要素を隠す

<dashboard version="1.1">
  <label>ステップ1：黒背景コンテナ</label>
  <description>まずは描画エリアを作る</description>
  <row>
    <panel>
      <html>
        <style>
          .network-diagram {
            width: 100%;
            height: 600px;
            background: #000;
            position: relative;
            overflow: hidden;
          }
        </style>
        
        <div class="network-diagram">
          <!-- ここにノードと線を追加していく -->
        </div>
      </html>
    </panel>
  </row>
</dashboard>

Step 2: 1つ目のノードを配置実装のコツ：

position: absolute で自由な位置に配置
rgba(0, 20, 20, 0.8) で半透明の背景
box-shadow でネオン効果を演出

<dashboard version="1.1">
  <label>ステップ2：最初のノード配置</label>
  <description>ルーターを1つ配置してみる</description>
  <row>
    <panel>
      <html>
        <style>
          .network-diagram {
            width: 100%;
            height: 600px;
            background: #000;
            position: relative;
            overflow: hidden;
          }
          
          /* ノードの基本スタイル */
          .node {
            position: absolute;
            border: 2px solid #0ff;
            background: rgba(0, 20, 20, 0.8);
            color: #0ff;
            padding: 15px;
            font-family: monospace;
            font-weight: bold;
            text-align: center;
            font-size: 12px;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
          }
          
          /* ルーターサイズ */
          .router {
            width: 80px;
            height: 80px;
            line-height: 50px;
          }
          
          /* 個別配置 */
          #r1 { top: 20px; left: 60px; }
        </style>
        
        <div class="network-diagram">
          <div id="r1" class="node router">R1</div>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

Step 3: 複数のノードタイプを追加実装のコツ：

クラスを複数指定: class="node server firewall"
後から指定したクラスで色を上書き
<br/> でテキストを改行

<dashboard version="1.1">
  <label>ステップ3：複数ノードタイプ</label>
  <description>ルーター、スイッチ、サーバーを配置</description>
  <row>
    <panel>
      <html>
        <style>
          .network-diagram {
            width: 100%;
            height: 600px;
            background: #000;
            position: relative;
            overflow: hidden;
          }
          
          .node {
            position: absolute;
            border: 2px solid #0ff;
            background: rgba(0, 20, 20, 0.8);
            color: #0ff;
            padding: 15px;
            font-family: monospace;
            font-weight: bold;
            text-align: center;
            font-size: 12px;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
          }
          
          /* サイズバリエーション */
          .router {
            width: 80px;
            height: 80px;
            line-height: 50px;
          }
          
          .switch {
            width: 70px;
            height: 70px;
            line-height: 40px;
          }
          
          .server {
            width: 100px;
            height: 100px;
            line-height: 35px;
          }
          
          /* 役割による色分け */
          .firewall {
            border-color: #f0f;
            color: #f0f;
            box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
          }
          
          .main-server {
            border-color: #f80;
            color: #f80;
            box-shadow: 0 0 15px rgba(255, 136, 0, 0.6);
          }
          
          /* 配置 */
          #r1 { top: 20px; left: 60px; }
          #sw1 { top: 150px; left: 60px; }
          #main-server { top: 170px; left: 420px; }
          #firewall-a { top: 180px; left: 260px; width: 140px; }
        </style>
        
        <div class="network-diagram">
          <div id="r1" class="node router">R1</div>
          <div id="sw1" class="node switch">SW1</div>
          <div id="firewall-a" class="node server firewall">FIREWALL_A</div>
          <div id="main-server" class="node server main-server">MAIN<br/>SERVER</div>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

Step 4: SVGで接続線を描く実装のコツ：

SVGの<line>要素で線を描画
x1, y1: 始点座標、x2, y2: 終点座標
ノードの中心を計算して接続点を決める
- 例: R1の中心 = left(60) + width(80)/2 = 100px

<dashboard version="1.1">
  <label>ステップ4：接続線を追加</label>
  <description>SVGで線を描く</description>
  <row>
    <panel>
      <html>
        <style>
          .network-diagram {
            width: 100%;
            height: 600px;
            background: #000;
            position: relative;
            overflow: hidden;
          }
          
          .node {
            position: absolute;
            border: 2px solid #0ff;
            background: rgba(0, 20, 20, 0.8);
            color: #0ff;
            padding: 15px;
            font-family: monospace;
            font-weight: bold;
            text-align: center;
            font-size: 12px;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
          }
          
          .router {
            width: 80px;
            height: 80px;
            line-height: 50px;
          }
          
          .switch {
            width: 70px;
            height: 70px;
            line-height: 40px;
          }
          
          /* SVG設定 */
          svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* クリックイベントを無効化 */
          }
          
          .connection {
            stroke-width: 2;
            fill: none;
          }
          
          .cyan { stroke: #0ff; }
          .yellow { stroke: #ff0; }
          .magenta { stroke: #f0f; }
          
          #r1 { top: 20px; left: 60px; }
          #r2 { top: 20px; left: 250px; }
          #sw1 { top: 150px; left: 60px; }
        </style>
        
        <div class="network-diagram">
          <!-- SVGは最初に配置（背景として） -->
          <svg>
            <!-- R1とR2を接続（x1,y1からx2,y2へ線を引く） -->
            <line class="connection cyan" x1="140" y1="60" x2="250" y2="60"/>
            <!-- R1とSW1を接続 -->
            <line class="connection yellow" x1="100" y1="100" x2="100" y2="150"/>
          </svg>
          
          <!-- ノードはSVGの上に配置 -->
          <div id="r1" class="node router">R1</div>
          <div id="r2" class="node router">R2</div>
          <div id="sw1" class="node switch">SW1</div>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

Step 5: 完全版を組み立てる---

<dashboard version="1.1">
  <label>完成版：ネットワーク構成図</label>
  <description>すべての要素を組み合わせた完全版</description>
  <row>
    <panel>
      <html>
        <style>
          /* === 1. コンテナ設定 === */
          .network-diagram {
            width: 100%;
            height: 600px;
            background: #000;
            position: relative;
            overflow: hidden;
          }
          
          /* === 2. ノードの共通スタイル === */
          .node {
            position: absolute;
            border: 2px solid #0ff;
            background: rgba(0, 20, 20, 0.8);
            color: #0ff;
            padding: 15px;
            font-family: monospace;
            font-weight: bold;
            text-align: center;
            font-size: 12px;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
          }
          
          /* === 3. デバイスタイプ別サイズ === */
          .router {
            width: 80px;
            height: 80px;
            line-height: 50px;
          }
          
          .switch {
            width: 70px;
            height: 70px;
            line-height: 40px;
          }
          
          .server {
            width: 100px;
            height: 100px;
            line-height: 35px;
          }
          
          .endpoint {
            width: 50px;
            height: 50px;
            line-height: 20px;
            font-size: 10px;
          }
          
          /* === 4. 役割別カラーリング === */
          .firewall {
            border-color: #f0f;
            color: #f0f;
            box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
          }
          
          .main-server {
            border-color: #f80;
            color: #f80;
            box-shadow: 0 0 15px rgba(255, 136, 0, 0.6);
          }
          
          .load-balancer {
            border-color: #ff0;
            color: #ff0;
            box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
          }
          
          /* === 5. 個別ノード配置（上段） === */
          #r1 { top: 20px; left: 60px; }
          #r2 { top: 20px; left: 250px; }
          #core-sw { top: 10px; left: 420px; }
          #r3 { top: 20px; left: 620px; }
          #r4 { top: 20px; left: 810px; }
          
          /* === 6. 個別ノード配置（中段） === */
          #n7 { top: 130px; left: 10px; }
          #n1 { top: 130px; left: 130px; }
          #n2 { top: 130px; left: 760px; }
          
          #firewall-a { top: 180px; left: 260px; width: 140px; }
          #main-server { top: 170px; left: 420px; }
          #firewall-b { top: 180px; left: 540px; width: 140px; }
          
          /* === 7. 個別ノード配置（下段） === */
          #sw1 { top: 340px; left: 60px; }
          #sw2 { top: 340px; left: 250px; }
          #n3 { top: 340px; left: 330px; }
          #load-bal { top: 310px; left: 420px; height: 130px; }
          #n4 { top: 340px; left: 560px; }
          #sw3 { top: 340px; left: 620px; }
          #sw4 { top: 340px; left: 810px; }
          
          /* === 8. SVG接続線設定 === */
          svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }
          
          .connection {
            stroke-width: 2;
            fill: none;
          }
          
          .cyan { stroke: #0ff; }
          .yellow { stroke: #ff0; }
          .magenta { stroke: #f0f; }
        </style>
        
        <div class="network-diagram">
          <!-- === SVGレイヤー（接続線） === -->
          <svg>
            <!-- 上段の横方向接続 -->
            <line class="connection cyan" x1="140" y1="60" x2="250" y2="60"/>
            <line class="connection cyan" x1="330" y1="60" x2="420" y2="60"/>
            <line class="connection cyan" x1="520" y1="60" x2="620" y2="60"/>
            <line class="connection cyan" x1="700" y1="60" x2="810" y2="60"/>
            
            <!-- 上段から中段への接続 -->
            <line class="connection yellow" x1="100" y1="100" x2="155" y2="130"/>
            <line class="connection cyan" x1="60" y1="100" x2="35" y2="130"/>
            
            <line class="connection yellow" x1="290" y1="100" x2="300" y2="180"/>
            <line class="connection cyan" x1="250" y1="100" x2="180" y2="130"/>
            
            <line class="connection magenta" x1="470" y1="110" x2="400" y2="180"/>
            <line class="connection magenta" x1="470" y1="110" x2="580" y2="180"/>
            
            <line class="connection yellow" x1="660" y1="100" x2="600" y2="180"/>
            <line class="connection cyan" x1="700" y1="100" x2="760" y2="130"/>
            
            <line class="connection yellow" x1="850" y1="100" x2="850" y2="340"/>
            
            <!-- 中段の接続 -->
            <line class="connection magenta" x1="400" y1="215" x2="420" y2="215"/>
            <line class="connection magenta" x1="520" y1="215" x2="540" y2="215"/>
            <line class="connection magenta" x1="470" y1="270" x2="470" y2="310"/>
            
            <!-- 中段から下段への接続 -->
            <line class="connection magenta" x1="300" y1="240" x2="290" y2="340"/>
            <line class="connection magenta" x1="600" y1="240" x2="660" y2="340"/>
            
            <!-- 下段の横方向接続 -->
            <line class="connection cyan" x1="130" y1="380" x2="250" y2="380"/>
            <line class="connection cyan" x1="320" y1="380" x2="330" y2="380"/>
            <line class="connection magenta" x1="360" y1="380" x2="420" y2="380"/>
            <line class="connection magenta" x1="520" y1="380" x2="560" y2="380"/>
            <line class="connection cyan" x1="590" y1="380" x2="620" y2="380"/>
            <line class="connection cyan" x1="690" y1="380" x2="810" y2="380"/>
            
            <!-- 縦方向の長距離接続 -->
            <line class="connection yellow" x1="100" y1="100" x2="100" y2="340"/>
            <line class="connection yellow" x1="660" y1="100" x2="720" y2="340"/>
            <line class="connection yellow" x1="575" y1="340" x2="700" y2="100"/>
          </svg>
          
          <!-- === ノードレイヤー（上段） === -->
          <div id="r1" class="node router">R1</div>
          <div id="r2" class="node router">R2</div>
          <div id="core-sw" class="node server">CORE<br/>SW</div>
          <div id="r3" class="node router">R3</div>
          <div id="r4" class="node router">R4</div>
          
          <!-- === ノードレイヤー（中段） === -->
          <div id="n7" class="node endpoint">N7</div>
          <div id="n1" class="node endpoint">N1</div>
          <div id="n2" class="node endpoint">N2</div>
          
          <div id="firewall-a" class="node server firewall">FIREWALL_A</div>
          <div id="main-server" class="node server main-server">MAIN<br/>SERVER</div>
          <div id="firewall-b" class="node server firewall">FIREWALL_B</div>
          
          <!-- === ノードレイヤー（下段） === -->
          <div id="sw1" class="node switch">SW1</div>
          <div id="sw2" class="node switch">SW2</div>
          <div id="n3" class="node endpoint">N3</div>
          <div id="load-bal" class="node server load-balancer">LOAD<br/>BAL</div>
          <div id="n4" class="node endpoint">N4</div>
          <div id="sw3" class="node switch">SW3</div>
          <div id="sw4" class="node switch">SW4</div>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>ネットワークステータス</title>
      <table>
        <search>
          <query>| makeresults | eval device="All Systems", status="Operational" | table device status</query>
        </search>
      </table>
    </panel>
  </row>
</dashboard>

4. 実装のコツとTips

4.1 座標の計算方法

ノードの中心座標は以下のように計算します：

中心X = left + (width / 2)
中心Y = top + (height / 2)

例：R1ルーターの場合

#r1 { top: 20px; left: 60px; }  /* 位置 */
.router { width: 80px; height: 80px; }  /* サイズ */

中心座標:
X = 60 + (80 / 2) = 100px
Y = 20 + (80 / 2) = 60px

4.2 色の使い分け戦略

色	用途	RGB値
シアン (#0ff)	通常のネットワーク接続	rgb(0, 255, 255)
イエロー (#ff0)	冗長化/バックアップ経路	rgb(255, 255, 0)
マゼンタ (#f0f)	セキュリティ関連	rgb(255, 0, 255)
オレンジ (#f80)	重要サーバー	rgb(255, 136, 0)

4.3 レイヤー構造の理解

重ね順（下から上）:
1. SVG（接続線） ← 最背面
2. ノード（デバイス） ← 前面

これにより、線がノードの下に隠れて見やすくなります。

4.4 レスポンシブ対応のヒント

固定サイズで作っていますが、レスポンシブにする場合は：

/* パーセント指定に変更 */
#r1 { top: 3%; left: 6%; }

/* ビューポート単位を使用 */
.router { width: 8vw; height: 8vw; }

4.5 動的データとの連携

Splunkのサーチ結果と連携する場合：

<search>
  <query>
    index=network sourcetype=device_status
    | stats latest(status) as status by device_name
  </query>
  <done>
    <condition match="'job.resultCount' > 0">
      <eval token="device_status">$result.status$</eval>
    </condition>
  </done>
</search>

JavaScriptでノードの色を動的に変更できます。

4.6 トラブルシューティング

問題1: 線が表示されない

SVGがノードの上に配置されていないか確認
pointer-events: none を設定

問題2: ノードの位置がずれる

パディングやボーダーを含めたサイズを計算
box-sizing: border-box の使用を検討

問題3: ネオン効果が弱い

box-shadow のぼかし半径を増やす
複数のシャドウを重ねる

box-shadow: 
  0 0 10px rgba(0, 255, 255, 0.5),
  0 0 20px rgba(0, 255, 255, 0.3),
  0 0 30px rgba(0, 255, 255, 0.1);

5. 応用編：カスタマイズのアイデア

5.1 アニメーション追加

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.connection {
  animation: pulse 2s infinite;
}

5.2 ホバーエフェクト

.node:hover {
  transform: scale(1.1);
  transition: transform 0.2s;
  box-shadow: 0 0 20px currentColor;
}

5.3 状態による色変更

.node[data-status="error"] {
  border-color: #f00;
  color: #f00;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

まとめ

今回は、Splunkダッシュボードで本格的なネットワーク構成図を作る方法を学びました。

学んだポイント：

✅ HTMLパネルでの自由なビジュアライゼーション
✅ CSSによる柔軟なデザイン設定
✅ SVGでの線描画テクニック
✅ レイヤー構造の理解
✅ 座標計算の基本

この技術は、ネットワーク図だけでなく、組織図やフローチャート、データフロー図など、様々な可視化に応用できます。

次のステップ：

JavaScriptでインタラクティブな機能を追加
Splunkサーチ結果と連動した動的更新
アニメーションでトラフィックを可視化

ぜひ自分のネットワーク環境に合わせてカスタマイズしてみてください！

参考リンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Splunkクラシックxmlを用いたオリジナルチャートのデザイン入門 ～ステップバイステップで作り方を学ぼう！編～