TWSNMP FC:通知メールのHTML化が楽しくなってきた
昨日から始めたTWSNMP FCの通知メールをHTML化する開発が気になって今朝は４時に起きました。
まずは、昨日見つけたサンプルコード
を調べました。このサンプルからGO言語のhtml/templateパッケージを使えばメールの文面を自由に変更できそうです。標準で組み込んでおくテンプレートが嫌いな人は自分で作ったテンプレートを使える仕組みにしようと思っています。このアイデアを思いついた瞬間から、かなり開発が面白くなってきました。やる気が出てきました。MIBブラウザーの猫アニメ、パネル、ホストリソースに続いて大作になりそうです。
まずは、標準で組み込むメールのデザインから作ることにしました。
昨日作ったHTMLメールを送信するテストプログラムのテンプレートを編集して通知メールに必要な表示を作ってみました。
メールのタイトル
項目のタイトル
情報を表形式で表示する
状態に応じて色を変える
通知メールを送信してきたTWSNMP FCへのリンクボタン
フッターにTWSNMPのサイトへのリンクを表示
のような項目です。
ブラウザーで
のようにデバックできるので開発は楽です。
できたところで、変数に適当な値を埋め込んで、メールで送信してみました。
のようにいい感じでHTML化できました。
仕組みは出来たので実際にTWSNMP FCに組み込んで行こうと思います。
明日に続く
今朝作ったメールのテンプレートは
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{{.Title}}</title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
min-width: 100%;
font-family: sans-serif;
}
table {
margin: 50px 0 50px 0;
}
.header {
height: 40px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
.content {
height: 100px;
font-size: 18px;
}
.totwsnmp {
height: 70px;
text-align: center;
}
.button {
text-align: center;
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
padding: 0 30px 0 30px;
}
.button a {
color: #FFFFFF;
text-decoration: none;
}
.buttonwrapper {
margin: 0 auto;
}
.buttonwrapper td:hover {
background-color: #2196F3 !important;
}
.buttonwrapper a:hover {
background-color: #2196F3 !important;
border-color: #333 !important;
}
.footer {
text-transform: uppercase;
text-align: center;
height: 40px;
font-size: 14px;
font-style: italic;
}
.footer a {
color: #000000;
text-decoration: none;
font-style: normal;
}
table.infoTable {
margin: 5px 0 5px 0;
width: 90%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
font-size: 12px;
}
table.infoTable th {
padding: 2px;
background: #ccc;
border: solid 1px #333;
}
table.infoTable td {
padding: 2px;
border: solid 1px #7333;
}
td.high {
color: #FFFFFF;
background-color: #e31a1c;
}
td.low {
background-color: #fb9a99;
}
td.warn {
background-color: #dfdf22;
}
td.normal {
background-color: #33a02c;
}
td.repair,
td.info {
color: #FFFFFF;
background-color: #1f78b4;
}
td.unkown {
background-color: #777;
}
</style>
</head>
<body bgcolor="#eee">
<table bgcolor="#eee" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="header">
<td style="padding: 40px;">
{{ .Title }}
</td>
</tr>
<tr class="content">
<td style="padding:5px 20px;">
<h3>【現在のマップ情報】</h3>
<table class="infoTable">
<tr>
<th width="30%">項目</th>
<th>値</th>
</tr>
<tr>
<td>マップ名</td>
<td>{{.MapName}}</td>
</tr>
<tr>
<td>マップ状態</td>
<td class="high">{{.MapState}}</td>
</tr>
<tr>
<td>ノード状態別の数</td>
<td>{{.NodeCount}}</td>
</tr>
</table>
</td>
</tr>
<tr class="totwsnmp">
<td style="padding: 10px 0 10px 0;">
<table bgcolor="#1565C0" border="0" cellspacing="0" cellpadding="0" class="buttonwrapper">
<tr>
<td class="button" height="45">
<a href="{{ .URL }}" target="_blank">TWSNMP FCへ</a>
</td>
</tr>
</table>
</td>
</tr>
<tr class="footer">
<td style="padding: 40px;">
Powered by <a href="https://lhx98.linkclub.jp/twise.co.jp/" target="_blank">TWSNMP FC</a>
</td>
</tr>
</table>
</body>
</html>です。
いいなと思ったら応援しよう！
