Edited at
ZabbixDay 24

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

More than 3 years have passed since last update.

残すところ、カレンダーも私を含め2日となりました。

今更ですが、AdventCalendarについておさらいしてみましょう。


本来のAdventCalendarとは

wikiより

アドベントカレンダー(Advent calendar)は、クリスマスまでの期間に日数を数えるために使用されるカレンダーである。アドベントの期間(イエス・キリストの降誕を待ち望む期間)に窓を毎日ひとつずつ開けていくカレンダーである。すべての窓を開け終わるとクリスマスを迎えたことになる。

但し毎年変化するアドベントの期間に関わらず、実際には12月1日から開始し24個の「窓」がある場合が多い。アドベントカレンダーは、窓を開くと写真やイラスト、詩や物語の一編、チョコレートなどのお菓子、小さなプレゼント等が入っていることが多い。宗教色の強いものもあれば、単に娯楽用のものもある。

という、クリスマスまでの日数を数えるカレンダーです。

私、大事な事を忘れていました。

今日がクリスマスイブだという事を。

Zabbixカレンダーでもクリスマスを楽しまなければいけないのではないでしょうか。


今回の目的

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


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

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

christmas.png

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


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

Zabbix 3.0ではUIがフラットデザインに変更されており、それに伴いテーマのCSSも大きく変更されています。

試しに3.0用に作成したテーマを同じ手順でおいてみると

christmas2.png

んー、残念な感じです。


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

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

http://bradsknutson.com/blog/css-snow-effect/


いよいよ

明日は最終日です。

qryuuさんどうぞよろしくお願いします!