見出し画像

TWSNMP FC:通知メールのHTML化が楽しくなってきた

twsnmp

昨日から始めたTWSNMP　FCの通知メールをHTML化する開発が気になって今朝は４時に起きました。
まずは、昨日見つけたサンプルコード

を調べました。このサンプルからGO言語のhtml/templateパッケージを使えばメールの文面を自由に変更できそうです。標準で組み込んでおくテンプレートが嫌いな人は自分で作ったテンプレートを使える仕組みにしようと思っています。このアイデアを思いついた瞬間から、かなり開発が面白くなってきました。やる気が出てきました。MIBブラウザーの猫アニメ、パネル、ホストリソースに続いて大作になりそうです。
まずは、標準で組み込むメールのデザインから作ることにしました。
昨日作ったHTMLメールを送信するテストプログラムのテンプレートを編集して通知メールに必要な表示を作ってみました。

  • メールのタイトル

  • 項目のタイトル

  • 情報を表形式で表示する

  • 状態に応じて色を変える

  • 通知メールを送信してきたTWSNMP　FCへのリンクボタン

  • フッターにTWSNMPのサイトへのリンクを表示

のような項目です。
ブラウザーで

ブラウザーでHTMLメールをデバック

のようにデバックできるので開発は楽です。
できたところで、変数に適当な値を埋め込んで、メールで送信してみました。

のようにいい感じで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>

です。


開発のための諸経費（機材、Appleの開発者、サーバー運用）に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。