HTMLメールのコーディングが難しいという声を聞く。わたしも同感だ。

Webコンテンツであれば、Webブラウザで表示されるようにコーディングをする。ところがHTMLメールのターゲットであるメールクライアントには、Webブラウザほど優れたレンダリングエンジンを積んでいないものもある。

つまりWebコンテンツのようにCSSコーディングができない。HTMLメール作成においては、だいたいはテーブルコーディングを行う。このような条件でメーラー依存を吸収してコーディングするというのは、骨が折れる。

このエントリーでは、メールクライアント間の依存を解消できるHTMLメールフレームワーク「MJML」を紹介したい。

MJMLについて

MJMLは、HTMLメールを作成するHTMLメールフレームワークである。カスタムタグでコンポーネントベースに構成されていて、<mj-body>、<mj-section>、<mj-row>、<mj-column>などのセクショニング・コンテンツの要領で簡単にセマンティックコーディングできる。これらカスタムタグは公開用ビルドをすることでHTMLに変換される。

【MJML】

https://mjml.io/

特徴

• 簡単構成で学習コストが低く簡単実装できる
• コンポーネントベースで再利用性に優れている
• 高品質でベストプラクティスなHTMLを生成してくれる
• tableタグを意識しない

MJMLに触れてみる

まずはMJMLを導入してみよう。

初期化

任意のプロジェクトフォルダにpackage.jsonがなければ以下コマンドで初期化すること。

$ npm init -y

導入

つづいて以下コマンドで、mjmlパッケージモジュールをインストールする。この時点でプロジェクトフォルダには、node_modulesとpackage.jsonが生成される。

$ npm install mjml

作成

つづいてmjmlファイルを用意する。このサンプルではinput.mjmlとしたが、ファイル名は任意で構わない。

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>
          My Company
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

レンダリング

つづいてHTMLにレンダリングする。

そもそも導入時のnodeパッケージは、ローカルのプロジェクトフォルダにインストールしたものだった。したがって、実行コマンドは./node_modules/mjml/bin/mjmlを参照しなければならない。

パスを設定すれば、プロジェクトフォルダ内でmjmlが可能になるとのことだが、わたしの理解が曖昧なため触れないでおきたい。

気になる場合は、mjml-cliのREADME.mdを参考にするとよい。

$ ./node_modules/mjml/bin/mjml input.mjml

果たして、ターミナルにHTMLソースコードがレンダリングされただろうか。

アウトプット

アウトプット方法についても触れておこう。以下コマンドでinput.mjmlをoutput.htmlにアウトプットしている。

$ ./node_modules/mjml/bin/mjml input.mjml -o output.html
# or
$ ./node_modules/mjml/bin/mjml input.mjml -output output.html

まとめ

レスポンシブ対応のHTMLメールフレームワーク「MJML」の紹介だった。

プログレッシブ・エンハンスメントが叫ばれて久しい昨今でもテーブルコーディングを行わざるを得ないHTMLメールであるが、MJMLを使うことでわざわざ煩わされることもない。

コンポーネントベースに構成されたカスタムタグは、その名称からおよその使い所を推測することが可能だろう。<mj-button>ならばボタンを担うタグという具合に、セマンティックコーディングの要領で記述することができる。

日頃HTMLに慣れ親しんでいるならば、ほとんど学習コストがかからず楽に導入できるはずだ。HTMLメール作成することがあればMJMLを使ってみてはいかがだろうか。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。