ZabbixでMerry Christmasの準備をする (3.0 でオリジナルテーマを作ろう)

残すところ、カレンダーも私を含め2日となりました。
今更ですが、AdventCalendarについておさらいしてみましょう。

本来のAdventCalendarとは

wikiより

アドベントカレンダー（Advent calendar）は、クリスマスまでの期間に日数を数えるために使用されるカレンダーである。アドベントの期間（イエス・キリストの降誕を待ち望む期間）に窓を毎日ひとつずつ開けていくカレンダーである。すべての窓を開け終わるとクリスマスを迎えたことになる。
但し毎年変化するアドベントの期間に関わらず、実際には12月1日から開始し24個の「窓」がある場合が多い。アドベントカレンダーは、窓を開くと写真やイラスト、詩や物語の一編、チョコレートなどのお菓子、小さなプレゼント等が入っていることが多い。宗教色の強いものもあれば、単に娯楽用のものもある。

という、クリスマスまでの日数を数えるカレンダーです。
私、大事な事を忘れていました。
今日がクリスマスイブだという事を。
Zabbixカレンダーでもクリスマスを楽しまなければいけないのではないでしょうか。

今回の目的

Zabbix 3.0 の クリスマステーマを作成する

どういったものが出来るか

今回紹介させていただく内容で、このイメージテーマが出来ます。

背景の雪も、CSS3で降り続く仕様となっています。

2.2 や 2.4では使えないのか？

Zabbix 3.0ではUIがフラットデザインに変更されており、それに伴いテーマのCSSも大きく変更されています。
試しに3.0用に作成したテーマを同じ手順でおいてみると

んー、残念な感じです。

テーマ作成の仕様が少し変わったようです

2.xまでの仕様だと、zabbix-webディレクトリ(デフォルトだと /usr/share/zabbix)のstylesにテーマを配置するのですが、この中の構成としてオリジナルテンプレートを置く場合はthemesディレクトリの中に任意でディレクトリを作成し、その中に"main.css"を配置させるというものでした。

ex) /usr/share/zabbix/styles/themes/christmas/main.css

ですが、3.0からはどうやら仕様がかわりstylesの中に直接テーマに沿ったCSSを配置させる事で導入が可能なようです。

ex) /usr/share/zabbix/styles/christmas.css

では実際に私がカスタムしたテーマを使用してみましょう。

Christmas themeの導入

事前注意

• 本テーマを導入した事でのZabbix障害については、_BSmile_は一切の責任を負いません事ご承知おきください。
• 本番環境へ導入する際は、必ず管理者の許可を得て使用してください。

構築した環境

• DigitalOcean CentOS 7.1 x64
• 1 CPU
• 512MB memory
• 20GB SSD
• pre-zabbix-3.0.0 alpha5-57087

導入手順

• git からのクローン

$ git clone https://github.com/bsmile/zabbix-christmas-theme.git

• ファイルのコピー

過去にZ.phpを変更した事が無い方が下記を実行

$ cd zabbix-christmas-theme/frontends
$ cp -rp ./* /usr/share/zabbix/  #インストール方法によってディレクトリは異なります。

Z.phpを変更したことがある方は

$ cd zabbix-christmas-theme/frontends
$ cp -rp ./styles /usr/share/zabbix/  #インストール方法によってディレクトリは異なります。
$ vi /usr/share/zabbix/include/classes/core/Z.php

Z.phpを変更したことがある方は、続いてclass Z extends ZBase 内に下記を追記してください。

/**
 * A wrapper for the ZBase class.
 *
 * Feel free to modify and extend it to change the functionality of ZBase.
 */
class Z extends ZBase {
  public static function getThemes() {
    return array_merge(parent::getThemes(), array(
      'christmas' => _('Christmas theme')
    ));
  }
}

以上で導入完了です。

どのようにして作成したか

基本的には、既存で存在していた[blue-theme.css]をコピーして作成しています。
これをクリスマスカラーのカラーチャートを参考にしながら色の調整を行っただけです。

調整後は見た目が寂しいのでSnow Effect を組み込んでみました。
URLは下部の[参照したSnow Effect]をご確認下さい。

参照したSnow Effect

いよいよ

明日は最終日です。
qryuuさんどうぞよろしくお願いします！