e-mail用のhtmlテンプレートが作成出来るフレームワーク「mjml」

以前ほど多くはなくなりましたが、
html形式のメールを送る場面も まだまだあると思います。

メルマガから始まり、Webサービスだと会員登録後の承認でしょうか。

テキスト形式だと気にする必要がないのですが、
html形式だとメーラー & メールサービスによって挙動が違ってきます。

例えば Gmailだとスタイル属性をインラインで書く必要があったり、
outlook用に対応するのであれば" [if mso] "と記述したり等、
各サービス、ソフトウェアの知識も必要になってきます。

個々のメーラーのことも意識しつつ、レスポンシブデザインに対応しようものなら
どれぐらいの手間がかかるでしょうか ...

そんな面倒なe-mail用のテンプレートを作成するライブラリが「mjml」です。

mjmlはnode.jsで作られており、
レスポンシブデザインのe-mailテンプレートを作成するライブラリです。

xmlに似たmjmlというマークアップ言語で記述し、コンパイルするとhtmlが発行されれます。
( lessはCSSにコンパイル、mjmlはHTMLにコンパイルぐらいで考えるとイメージし易いと思います )

mjmlを使うと下の画像のようなスタイリッシュなe-mailテンプレートも
綺麗に簡潔に書くことが出来ます！

ということで、mjmlを少し試してみましょう！

mjmlはnpmのパッケージで提供されており、インストールはコマンドライン上で行っていきます。

下記のコマンドを叩けばmjmlがインストールされます。

# node.js 4.2以上が必要です

# install command
npm install -g mjml

# お使いの環境によってはsudoをつけてください
# sudo install -g mjml

正しくインストールされていると" mjml "コマンドが使えるようになります。

* 下記のコマンドでmjmlファイルをコンパイルし、htmlへアウトプット

# input.mjmlをコンパイル、output.htmlへ発行
mjml -r input.mjml -o output.html

冒頭でも少し書きましたが、mjmlはxmlに似たマークアップ言語で記述します。
...がXML寄りの自由な独自定義タグというより、HTMLにルールが似ています。

htmlのコンテンツがbodyタグで始まるようにmjmlも下記のように定義します。

<mj-body>
  <!--
    your content
    ....  -->
  
</mj-body>

bodyタグの下にコンテンツが入り、htmlのようにsectionが入ります。
ここではわかりやすくheaderの役割をさせてみました。

<mj-body>
  
  <!-- Begin: Header スタイルはタグ上で行います  -->
  <mj-section full-width="full-width" background-color="#DF4F3E">
      
    <!-- your content  -->
      
  </mj-section>
<!-- End: Header  -->
  
</mj-body>

bootstrapのようにcolumnも定義でき、
コンテンツのテキストはtextタグ、その他imgタグも用意されています。

<mj-column>
  <mj-text color="#EEE" font-size='30px' align="center">
      <!-- mj-text内は "h1" 等のタグが使用可能  -->
    MJMLのTest!
</mj-text>

<!-- imageタグ -->
<mj-image src="http://yourImage.jpg"></mj-image>

mj-body -> mj-section、
その他 mj-text, mj-imageさへ抑えれば基本的なe-mailテンプレートが作成できます。

上記のことを応用して、作ったテンプレートが下の画像になります。

<mj-body >
  
  <!-- Begin: Header  -->
  <mj-section full-width="full-width"  background-color="#DF4F3E">
      
    <mj-column>
      <mj-text color="#EEE" font-size='30px' align="center">
          <!-- mj-text内は "h1" 等のタグが使用可能  -->
        MJMLのTest!
      </mj-text>
    </mj-column>
      
  </mj-section>
  <!-- End: Header  -->
  
  <!-- Begin: Body  -->
  <mj-section>
    
    <mj-column>
      
      <mj-text font-size="16px">Linuxサーバーの運用をしている人にはお馴染みのシステムモニターツール" htop "が約5年ぶりにメジャーアップデートがされ「2.0」になりました。
      </mj-text>
      
      <!-- 画像 -->
      <mj-image width="250" src="http://i.imgur.com/nINK1Ft.jpg"></mj-image>
      
      <mj-text font-size="16px">
      今までネイティブに対応していたのはLinuxのみでしたが、
        2.0になり新たに<strong>" Free BSD ", " Open BSD ", " Mac OS "</strong>でもサポートされます。
      </mj-text>
      
    </mj-column>
    
  </mj-section>
  
  <!--　Link Button  -->
  <mj-section>
    <mj-column>
       <!-- リンクボタン -->
       <mj-button font-family="Helvetica"　href="http://co.bsnws.net/article/104"
         　　　　　background-color="#F45E43" color="white">
                  続きを読む
       </mj-button>
    </mj-column>
  </mj-section>

  <!-- shareボタン -->
  <mj-section>
  <mj-column>
      <mj-social
        pinterest="false"
        linkedin="false"
        google="false"
        instagram="false" />
  </mj-column>
　</mj-section>
  
  <!-- End: Body  -->
  
  <!-- Begin: Footer  -->
  <mj-section full-width="full-width"  background-color="#2C3E50">
    
    <mj-column>
      <mj-text color="#EEE" font-size='30px' align="center">
        <!-- mj-text内は "h1" 等のタグが使用可能  -->
        Footer
      </mj-text>
    </mj-column>
    
  </mj-section>
  <!-- End: Footer  -->
  
  
</mj-body>

コンパイルされたhtmlは下記のような感じに！outlookにも対応されていますね。
( *長いので一部分です )

<div style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;" class="mj-column-per-100" aria-labelledby="mj-column-per-100"><table width="100%"><tbody><tr><td style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="center"><div class="mj-content" style="cursor:auto;color:#EEE;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:30px;line-height:22px;"><!-- mj-text内は "h1" 等のタグが使用可能  -->
        MJMLのTest!</div></td></tr></tbody></table></div><!--[if mso]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div></td></tr></tbody></table><!--[if mso]>
      </td></tr></table>
  		<![endif]-->
  		<!--[if mso]>
  		<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
  		<![endif]-->

mjmlを軽く使ってみましたが、普段からhtmlを書いている人であれば
2 , 3個 テンプレートを作れば 使いこなすことが容易だと思われます。

テンプレートエンジンではなく、コンパイルするマークアップ言語なので
現時点では変数などをmjmlに直接渡すことは出来ませんが
e-mail用のテンプレートのひな形を作ると考えると 使い勝手は良い印象を受けました。

特に大きなサービスを複数運用していて、
メルマガ等を発行しているのであれば恩恵が大きいと思われます。
( コード単体の見通しがだいぶよくなりメンテナンスし易そうです )

Web上のライブエディタの他、Sublime text, Atom, Gulp用のプラグインも用意されており
プロジェクトで使う環境は既に揃っています。

” e-mail用のテンプレートを作るの苦痛だな〜 "っとお困りの人は是非チェックしてみてください！

mjml (公式サイト)

GitHub: mjml