こんにちは！オブザーバビリティ・監視アーキテクトの先輩です。
日々のインフラ監視、本当にお疲れ様です。夜中に鳴り響くアラート音に悩まされたり、監視画面の味気ないデフォルトデザインを何時間も見つめたりしていませんか？
「Zabbixの標準UI、機能は最高なんだけど、どうしても見た目が硬すぎる……」
「社内ニッチな認証基盤や、他の業務ダッシュボードとシームレスに統合できたら、毎日のオペレーションがどれほど楽になるか……」
そんな現場の切実な願いを叶える魔法が、実はZabbixには隠されています。今回は、Zabbixのフロントエンドを限界までハックし、「自分たちの使いやすい最高の監視画面」へと生まれ変わらせるカスタム手法を、基礎から優しく、そしてディープに解説していきましょう。
これをマスターすれば、毎日の運用作業が劇的に快適になりますよ。さあ、一緒に扉を開けましょう！
—
1. そもそもZabbixフロントエンドの構造はどうなっているのか？
Zabbixの管理画面は、PHP（MVCに近い独自フレームワーク）とJavaScript、そしてCSSで構築されています。標準では `styles/` や `js/` といったディレクトリにアセットが格納されており、画面を描画しています。
「じゃあ、ソースコードを直接書き換えればいいや！」と思ったそこのあなた。ちょっと待ってください。それをやると、Zabbixのバージョンアップを行った瞬間に、すべての変更が吹き飛ぶ（コンフリクトの嵐）という悲劇が訪れます。
したがって、私たちプロが目指すべきアプローチは「本体のコードを汚さず、外部から安全に拡張・上書きする仕組み（レイヤード・インジェクション）」です。
—
2. 第一歩：カスタムテーマ（CSS）でUIを美しく染め上げる
まずは、一番安全かつ効果が高い「カスタムCSSテーマの追加」から始めましょう。Zabbixには元々「Dark」や「Blue」などのテーマがありますが、ここに社内ニッチなコーポレートカラーや、目に優しい「真のダークモード」を追加します。
ステップ1: テーマ定義ファイルへの登録
Zabbixのテーマは `zabbix/include/locales.inc.php` や `zabbix/include/classes/setup/CView.php` などで管理されていますが、バージョン5.x/6.x以降では、CSSファイルを追加し、テーマリストに登録することで認識させることができます。
まず、CSSファイルを格納するディレクトリ（通常は `/usr/share/zabbix/styles/`）に、新しいテーマ用のCSSを作成します。
/ /usr/share/zabbix/assets/styles/custom-midnight.css /
/ 現場のエンジニアの目を守る、完全なミッドナイト・ダークテーマ /
:root {
–background-color: #0f172a;
–panel-background: #1e293b;
–text-color: #f8fafc;
–accent-color: #38bdf8;
–border-color: #334155;
}
body {
background-color: var(–background-color) !important;
color: var(–text-color) !important;
font-family: ‘Inter’, sans-serif, -apple-system;
}
/ メインのダッシュボードパネルをモダンなカード風に刷新 /
.dashboard-grid-widget {
background-color: var(–panel-background) !important;
border: 1px solid var(–border-color) !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/ ステータスカラーの視認性向上（障害時にしっかりと注意を惹きつける） /
.problem-name, .severity-bg-5 {
background-color: #ef4444 !important;
color: #ffffff !important;
font-weight: bold;
animation: pulse-alert 2s infinite;
}
@keyframes pulse-alert {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
ステップ2: Zabbixに新しいテーマを認識させる
Zabbixのデータベース、または設定ファイル群にこのテーマを教え込む必要があります。PHPの設定ファイル（例: `/usr/share/zabbix/include/classes/core/ZBase.php` や関連するテーマ定義配列）にカスタムテーマを追加します。
// テーマ定義の配列に追加するイメージ（バージョンによりパスは微調整してください）
// 例: include/classes/setup/CView.php やグローバル定義内
‘custom-midnight’ => [
‘name’ => _(‘Midnight Operations (Custom)’),
‘stylesheet’ => ‘custom-midnight.css’
],
これで、Zabbixの「ユーザー設定」画面から「Midnight Operations」が選択できるようになります。これだけでも、監視画面を見つめるストレスが激減します！
—
3. 奥義：JavaScriptインジェクションによるUI拡張
ここからが本番です。CSSだけではできない「機能の追加」や「外部システムとの連携（例えば、障害検知時にワンクリックで社内ChatOpsツールへ飛ばすボタンの追加など）」を行うために、JavaScriptインジェクションを用います。
Zabbixの全ページ共通のフッター（あるいはヘッダーテンプレート）に、任意のJavaScriptを読み込ませることで、UIをダイナミックに拡張できます。
実装例：すべての画面に「緊急チャットへのリンクボタン」を強制常駐させる
Zabbixのレイアウトテンプレートファイル（通常は `/usr/share/zabbix/include/views/` あたり、またはレイアウトPHPファイル）を探します。多くのバージョンでは `/usr/share/zabbix/app/views/layout.html.php` や類似のファイルにHTMLの骨組みがあります。
ここに、自作のカスタムJSを読み込ませる一行を差し込みます。
そして、実際のJavaScriptを書きます。これが「HelloWorld」ならぬ「Hello UI拡張」です！
/ /usr/share/zabbix/js/custom_inject.js /
document.addEventListener(‘DOMContentLoaded’, () => {
console.log(‘[Zabbix Customizer] フロントエンド拡張スクリプトがロードされました。’);
// 1. 画面の右上に「社内運用ヘルプデスク」へのクイックリンクを追加する
const topNav = document.querySelector(‘.top-nav-container’);
if (topNav) {
const helpButton = document.createElement(‘a’);
helpButton.href = ‘https://chat.internal.company.com/channels/infra-alert’;
helpButton.target = ‘_blank’;
helpButton.innerText = ‘🚨 運用チャット’;
helpButton.style.cssText = `
display: inline-block;
padding: 4px 12px;
margin-right: 15px;
background-color: #0284c7;
color: white;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
font-size: 12px;
vertical-align: middle;
`;
topNav.insertBefore(helpButton, topNav.firstChild);
}
// 2. 障害一覧画面（問題トリガー一覧）で、特定のキーワードが含まれる場合に自動で注意喚起をハイライトする
const problemRows = document.querySelectorAll(‘.list-table tbody tr’);
problemRows.forEach(row => {
const text = row.innerText;
if (text.includes(‘Database down’) || text.includes(‘Disk full’)) {
row.style.borderLeft = ‘5px solid #ef4444’;
}
});
});
このスクリプトがロードされると、Zabbixのすべての画面のナビゲーションバーに真新しい「運用チャットボタン」が出現し、重大な障害行には視覚的なアクセントが加わります。ユーザーはZabbixから一歩も出ることなく、迅速に次のアクションへ移れるのです。
—
4. バージョンアップの荒波を乗り越える！「メンテナンス性維持」のベストプラクティス
先ほど「本体のコードを汚さない」と言いましたが、PHPファイルを直接編集する方法では、ZabbixのRPM/APTパッケージアップデート時に差分が消えたり、コンフリクトを起こしたりします。
プロのインフラエンジニアとして、以下の鉄則を守ってください。
1. 変更管理のGit化（Infrastructure as Codeならぬ UI as Code）
`/usr/share/zabbix/` ディレクトリ自体をGitで管理するか、あるいは変更したカスタムファイル（CSS/JS）とパッチファイルだけを別リポジトリで管理し、デプロイメントスクリプト（Ansible等）でZabbixサーバーに適用する仕組みを作りましょう。
2. パッチ適用の自動化（`patch` コマンドの活用）
もしPHPファイルの数行を書き換える必要がある場合は、直接ファイルを上書きするのではなく、`git diff` から生成したパッチファイル（.patch）を保管しておき、Zabbixアップデート後にワンタッチで当てられるようにします。
# アップデート後にパッチを自動適用する例
patch -p1 /usr/share/zabbix/app/views/layout.html.php < /opt/zabbix-custom/patches/layout_inject.patch
3. アップデート前の検証ステージング環境の用意
Zabbixのメジャーバージョンアップ（例: 6.0から6.4、あるいは7.0へ）の際は、必ず同等のステージング環境を用意し、カスタムJS/CSSがDOM構造の変更によって壊れないかを事前にテストしてください。ZabbixはバージョンごとにCSSクラス名が微変更されることがあるため、セレクタはなるべく頑健（Robust）なものを書いておきましょう。
—
おわりに：監視画面は、エンジニアの相棒である
監視画面は、システムが発する悲鳴を受け止める、私たちインフラエンジニアの「コックピット」です。毎日のように見つめる場所だからこそ、自分たちの手で使いやすく、心地よい空間にカスタマイズする価値があります。
「標準機能だから諦める」のではなく、「オブザーバビリティの体験（User Experience）をもデザインする」。そのマインドセットこそが、優れた監視設計者への第一歩です。
ぜひ今回のテクニックをあなたの環境で試してみてください。あなたの毎日の運用の景色が、今日からガラリと変わるはずです。それでは、また次の深淵な技術でお会いしましょう！