AtomでMJMLを使った
メールマガジンのテンプレートをレスポンシブデザインで作れるMJML( https://mjml.io/ )を使ってみた。
mjmlとは
mjmlとは、レスポンシブ対応のHTMLメールマガジンを作成できる メルマガテンプレートライブラリ。
mjml
https://mjml.io/
htmlに似たmjmlというマークアップ言語で記述し、コンパイルするとhtmlが発行される。
例えば、 <mj-head> と <mj-body> タグはhtmlにすると <head> と <body> タグと同じ目的を持つ。
htmlと完全に同じというわけではなく、<mj-column> タグはネストできないなど独自ルールがあるが、Gmail、Outlook、Thunderbird、iOS Mailなど主要なメールクライアント＆レスポンシブに対応した、画像つきメールの雛形を作れるとのこと。
イチから作ろうとするとそれぞれのメールクライアントのサービスにあわせた記述方法の知識が必要だが、mjmlを使えば簡単にナウなメールテンプレートが作れる。
さらに、自動でIE9以下用の条件付きコメントがついてくれる。
どんな感じか試すだけなら、公式サイトのブラウザエディタ( https://mjml.io/try-it-live )を使えば、インストールせずともリアルタイム編集が可能。
自分のPCで作業する場合
まずはPCに以下コマンドでmjmlをインストール。
mjmlはnode.jsで作られているので、npmのパッケージで提供されている。
npm install -g mjml
次に、コンパイル。
適当にmjmlファイルを作るか、テンプレート( https://mjml.io/templates )からコピペして.mjmlで保存。
以下コマンドでコンパイル
# test.mjmlをコンパイルしてtest.htmlにアウトプット
mjml -r input.mjml -o output.html
オプション
| argument | description | default value |
|---|---|---|
| mjml -m [input] | Migrates a v3 MJML file to the v4 syntax | NA |
| mjml [input] -o [o | utput] | Writes the output to [output] |NA |
| mjml [input] -s | Writes the output to stdout | NA |
| mjml -w [input] | Watches the changes made to input | NA |
| mjml [input] –config.beautify | Beautifies the output (true or false) | true |
| mjml [input] –config.minify | Minifies the output (true or false) | false |
そのほか使い方の詳細はMJMLの公式ガイド参照（英語）
https://mjml.io/documentation/#mjml-guides
Atomでmjmlを編集する時は、以下パッケージをインストールしておくと良い。
Atomのパッケージ
- language-mjml ( https://atom.io/packages/language-mjml
)mjml言語がサポートされる
パッケージをインストールしたら念のためAtomを再起動。
おわりに
mjmlの独自ルールを覚えれば、面倒くさいtableタグを使わずに記述できたり様々なメールクライアントに対応できるのでとても楽。
汎用的なメールマガジンのテンプレートを作ろうと思っていたら是非。
参考
- MJML – The Responsive Email Framework
https://mjml.io/
