シンプルなレスポンシブE-mailを簡単に作るためのmjml

HTML, mjml

新しいサービスを作っていてE-mailはカッコいいHTMLメールにしたいなと思ったのですが、
レスポンシブE-mailと言って全てのブラウザやスタイルが効かない場合も表示できるようにHTMLメールを作るにはすごく手間がかかるみたいです。
http://responsiveemailpatterns.com/
いろいろ調べるとメールクライアントやブラウザの違いなど色々を吸収しないといけないのである意味Webより大変な気もします。。

そのため、レスポンシブE-mailを作るには一般的なHTML(Webページ)と基本は一緒ですが専門の知識が必要で、
有名なCSS Frameworkの「Foundation」もE-mail用のフレームワークはWeb用フレームワークと別で用意されています。
http://foundation.zurb.com/emails.html

Foundation for Emailsは色々なレイアウトにも対応していて良いのですが、
Foundationユーザ以外には初期学習コストがあり少し敷居が高いのとレスポンシブE-mailのソースはHTMLで
コンテンツに関係ない記述が多いため読みづらく結構メンテナンスが大変そうだったので、
簡単に作れるものを探したらmjmlというのが良かったので紹介です。
mjmlを使用したメールのサンプルはこちら

mjmlはReactのコンポーネントのセットでReactのコンポーネント(タグ)を組み合わせてHTMLを生成します。
となっている部分がReactのコンポーネントです。

mjmlにはmjml-cliというコマンドラインツールが用意されていて、これがmjml-coreを呼び出すことで
mjmlタグを使用して書かれたHTMLをメールクライアントやブラウザの解釈できるHTML(レスポンシブE-mail)に変換してくれます。

仕組みとしては以下のようになっているようです。

生成したHTMLを最終的に送信するときは
私はPythonを使用しているので生成後のHTMLをJinja2のテンプレートとして使用していますが、
node.jsであれば mjml-core をサーバーサイドに組み込むのも容易かと思います。

ちなみに上のHTMLをmjmlコマンドで変換すると以下のようになります。(メンテしたくないですね)

Foundationも試したのですが綺麗に作るにはやはり多少学習コストがかかるので、
用意されているコンポーネントを覚えるだけのmjmlを使用した方が低コストでカッコいいHTMLメールが作れます。

細かいデザインの調整を行ったりレスポンシブE-mailについての知識が豊富な場合は良いと思いますが、
複雑なHTMLメールを作ったりする要件は少ないと思いますし、シンプルなレイアウトで済むのであれば
このようなツールを使って生成する方がメリットは大きいかなと思います。

HTML, mjml