元商社マンによるシドニーでの戦い

シドニーでの生活、転職、仕事のことなどなど。海運業 => 総合商社 => プログラマー(Sydney)。

mjml

Email notificationを高速で作成できるフレームワークmjml 導入

2016/09/06

仕事で、Email notificationのために、mjmlを導入することになりました。

シドニーに住んでいながらも、未だに英語のドキュメンテーションを読むのがすごく億劫なので、よく日本語で検索してます。ダメですねー。でも、やはり公式のドキュメンテーションを読むのが一番効率的であったりするので、今回は、公式サイトを参考に導入に必要な部分を日本語で書いておきます。私のボスは、日給1,000ドルのスーパーディヴェロッパーです。そんな、ボスに色々聞いてますので、あまり間違いないかなと思います。

(参考:mjml公式ページ

インストール

CLI(コマンドライン)で、

$ npm i(install) -g mjml

 

だけです。

 

ファイルの作成と実行

input.html というファイルを作成します。

$ touch input.mjml

 

input.mjmlに、mjmlマークアップで、何か書いてみましょう。公式から、コピペしても良いですね。そして、下記のコマンドを実行すれば、input.htmlが生成されます。

$ mjml input.mjml

この .mjml と .htmlファイルを比較すれば、mjmlを使用すれば、どれだけ少ないコードで済むかわかります。まあ、私、生でemail notification 書いた経験は、ほぼ0ですけど。

 

それから、mjmlファイルの変更を自動でhtmlファイルに反映させたいときには、下記のコマンドを実行しましょう。

$ mjml -w input.mjml

or

$ mjml --watch input.mjml

 

mjmlの基本

emailのすべてのコンテントを

mj-container tagで囲いましょう。

 

スクリーンショット 2016-08-18 16.07.58

container

 

下記のように、mj-section tagで、どのようにセクションを分けるか決めましょう。

 

スクリーンショット 2016-08-18 16.08.12

sections

 

次に、このセクションの中に、columnを配置していきます。columnにより、mjmlはレスポンシブを実現しています。イメージとしては、bootstrapのような感じですね。

注意:現在のところ、セクションの最大column数は4です。

 

スクリーンショット 2016-08-18 16.08.28

columns

 

columnのサイジング

オートサイジング

デフォルトでは、セクションスペースは、max 600pxとなり、columnを追加していくと、幅が均等に分割されていくようになています。簡単ですね。

  • 1 column; 600px
  • 2 columns; 300px 300px
  • 3 columns; 200px 200px 200px
  • 4 columns(max); 150px 150px 150px 150px

という感じですね。

 

マニュアルサイジング

実は、4つ以上のcolumnや、columnのサイズを指定することもできます。しかし、これをやると、上記のオートサイジングは機能しなくなるので、注意です。そして、あまり使うことはないだろうなというのが感想です。

下記のように、ブラウザ フルサイズではあまりわかりませんが。

スクリーンショット 2016-08-18 17.22.50

 

ブラウザを小さくしていくと、

スクリーンショット 2016-08-18 17.23.19
と、このような動作の違いが出てきます。

 

Nesting

下記のように、ネストしていきます。columnタグの間に、基本的なすべてのコンポネントをいれることができますが、section tag とcolumn tagを入れることはできません。


<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<!-- Column content -->
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>

 

タグのスタイリング

このドキュメンテーションの後半で説明してあるように、それぞれのMJMLタグ(component)は、使用できるattributesが制限されています。その理由は、一つのMJMLタグは、複数のHTMLタグを生成するので、あなたの使用したい全てのCSS rulesをマッチさせることは、簡単ではありません。この理由により、mjmlタグは使用できるビジュアルを変更するためのattributesを制限しております。(つまり全てのCSS propertiesが使えるわけではありません。)

Don’t Repeat Yourself DRY を意識すれば, スタイリングタグを繰り返したくないでしょう。 しかし、今の所は、それぞれのタグに対して、スタイルをそれぞれ定義していく必要があります。

別の方法としては、自分でスタイルを定義したコンポネント自体をつくることです。

まとめると、現段階では、みなさんがCSSで行っているようにidを定義し、そのidに対し定義したcssをその全てのidに適用していくというようなことは、mjmlでは、できません。

 

補足;

エディター上で、シンタックスハイライトが欲しくなったら、既にプラグインがありますので、インストールしましょう。
Atomの場合:

  1. Atom 起動
  2. Preferenceへ
  3. + install クリック
  4. language-mjml をinstall

追記:

2016/8/26時点では、gmailとの互換性に少々問題があり、複数のフォントを設定すると、テキストが表示されなくなりました。フォントを一つのみ設定すると、問題なく動きました。

-mjml
-