更新日: 2022 / 07 / 20

HTMLメールのフレームワーク、MJMLの使い方

カテゴリー: HTML&CSS 入門ガイド

HTMLメールを簡単に作成できるMJMLの使い方を解説します。

HTMLメールは直接HTMLコードを書くとメールアプリごとの動作の違いなどを考慮する必要がありますが、フレームワークを使えばそういったことを気にせずHTMLメールの作成ができるようになります。

  1. MJMLとは?

  2. MJMLの使い方

    1. MJMLのインストール
    2. メールテンプレートの制作
    3. HTMLメールのビルド
  3. MJMLのリソース一覧

    1. Getting started
    2. MJMLドキュメント
    3. メールテンプレート
    4. プラグイン
  4. まとめ

MJMLとは?

MJMLはレスポンシブ対応のHTMLメールを作成できるフレームワークです。

MJML MJMLとは?

<mj-section><mj-column>のような独自のタグを使ってレイアウトを作ることができます。

フレームワークを使用するにはnode.jsが必要なのであらかじめ環境を用意しておく必要があります。

MJMLの使い方

MJMLはnode.jsで使用できます。node.js環境がない場合はそちらを先にインストールしておいてください。

ここではMJMLの使い方を次の3つのステップで簡単に解説します。

  • MJMLのインストール
  • メールテンプレートの制作
  • HTMLメールのビルド

MJMLのインストール

MJMLをインストールするにはnpmコマンドを入力するだけです。

npm install mjml -g

これでmjmlがインストールされました。適当なフォルダを作ってその中にmjmlファイルを作成します。

mkdir mjml-sample
cd mjml-sample
touch input.mjml

メールテンプレートの制作

input.mjmlを開いて以下のコードを作成します。

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>
          Hello World!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

HTMLメールのビルド

mjmlファイルをHTMLファイルにするには以下のコマンドを入力します。

mjml input.mjml -o output.html

すると同じフォルダ階層に指定したファイル名(ここではoutput.html)でファイルが出力されます。

HTMLファイルを開いてHello World!と表示されていれば完了です。

MJMLのリソース一覧

MJMLのリソースを集めてみました。MJMLを使って本格的なHTMLメールの開発をする場合は以下のドキュメントやテンプレートが役に立ちます。

Getting started

MJMLのリソース一覧 Getting started

MJMLを使ったHTMLメールのコーディング方法をわかりやすく解説してくれています。

-> Getting startedのページはこちら

MJMLドキュメント

MJMLのリソース一覧 MJMLドキュメント

MJMLのドキュメントではフレームワークで使えるタグ一覧やmjmlコマンドについて詳しく解説されています。

-> MJMLドキュメントのページはこちら

メールテンプレート

MJMLのリソース一覧 メールテンプレート

MJMLで作られたHTMLメールのテンプレートがたくさん掲載されています。

コードも見ることができるのでコピペしてすぐに使用することができます。

-> メールテンプレートページはこちら

プラグイン

MJMLのリソース一覧 プラグイン

コミュニティページではMJMLのVSCode向け拡張機能やRubyで使えるようにするなど便利なプラグインがあります。

-> コミュニティページはこちら

まとめ

HTMLメールはコーディングできる人なら自分で作ることもできますが、ツールごとの制限があったりして対応するのが結構めんどくさいです。

このフレームワークを使えばそのあたりの問題を気にせずコーディングできるのですごく楽になります。

フレームワーク使える環境なら積極的に使っていきたいですね。