2019年3月29日

VS CodeとMJMLでレスポンシブなHTMLメールを作成する

UI開発者板垣

さまざまなデバイスに合わせたHTMLメールの作成って大変ですよね。デバイスの幅、メーラー固有のバグ、OS別のバグなど、考えることが多くて作成する前から気がめいってしまうものです。ですが安心してください。レスポンシブHTMLメール用のフレームワーク「MJML」を使えば、そういった悩みから解放されるかもしれません。当社のレスポンシブ Eメールデザインサービスでもこのフレームワークを使用しています。

ということで、今回はMJMLを使用したレスポンシブHTMLメールの作り方をご紹介します。

MJMLとは

MJMLとはレスポンシブEメールデザインを作成するためのフレームワークです。MJMLという独自のマークアップ言語で記述し、コンパイルするとHTMLファイルが出力されます。
現在プレリリースされているv4.4.0では、リンク付きのボタンを簡単に設置できるmj-buttonというコンポーネントが追加されています。

フォルダー構成

今回は下記のフォルダー構成で解説を行っていきます。

template
    ├ dist  // コンパイル後のファイルが出力されるディレクトリ
    └ src  // コンパイル前のファイルを格納しておくディレクトリ
        ├ components  // 各コンポーネントを格納するディレクトリ
        |    ├ button
        |    |    └ button01.mjml
        |    |
        |    └ structure
        |         ├ header.mjml
        |         └ footer.mjml
        |
        └ index.mjml  // ベースとなるmjmlファイル

使用するエディター

Visual Studio Code(以下、VS Code)

インストール

VS Codeの拡張機能

VS Codeで「MJML」（以下、MJML＠ext）という拡張機能をインストールしましょう。

MJML＠extでは主に以下のことができます。

ライブプレビュー
構文解析
メールの送信
mjmlファイルのコンパイル

などなど...ただし、必ずしもこの拡張機能が最新バージョンのMJMLに対応しているとは限りませんので、今回はこの拡張機能のライブプレビューとメールの送信機能のみを使用し、別途npmでMJMLのパッケージをインストールしておきます。

npmパッケージ

MJMLのnpmパッケージをインストールします。
templateフォルダーでコマンドプロンプトを開き、下記のコマンドを順に実行します。

プロジェクトの初期化

npm init -y

MJMLのインストール

npm install mjml

コマンドの登録

package.jsonにmjmlファイルをコンパイルするためのコマンドを登録しておきます。

    "scripts": {
      "build": "mjml ./src/index.mjml -o ./dist/index.html",
    },

これで環境構築は終了です。

ライブプレビュー

コードを書き始める前にMJML＠extのライブプレビューを表示させておきましょう。
VS Codeでindex.mjmlファイルを開き、右上にあるmjmlマークをクリックしてみてください。

すると右カラムにライブプレビューが表示されると思います。
この機能を使用することによって表示確認のためにコンパイルする手間が省け、実装時間を短縮できます。

ライブプレビューの様子

コードの記述

以下の通り各ファイルにコードを記述して、HTMLメールの作成をしましょう。

src/index.mjml

     <mjml>
      <mj-body background-color="#fff">
        <mj-include path="./components/structure/header.mjml" />
        <mj-section padding="0 10px">
          <mj-column border-bottom="2px solid #f2f2f2">
            <mj-text font-size="14px" padding="0"><h2>ミツエーリンクスとは<h2></mj-text>
          </mj-column>
        </mj-section> 
        <mj-section padding="20px 10px">
          <mj-column>
            <mj-image width="100px" src="https://www.mitsue.co.jp/company/img/about_mitsue-links/building.jpg" />
            <mj-text padding="0"><p>ミツエーリンクスは1990年というIT分野の幕開けともいえる時期から、デジタルコンテンツを中心に、数々のユニークなサービスを提供してきました。</p></mj-text>
            <mj-text padding="0"><p>顧客企業さまのマーケティングやブランディングをデジタルメディアで実現し、また継続的に改善し続けるべく、コンテンツ（映像・音声を含む）およびUIの企画・設計・実装、Webサイトの構築・運用を中心に、システム開発、アプリケーション開発、アクセシビリティ/ユーザビリティの向上、アクセス解析に至るまで、さまざまなサービスを包括的に提供しています。</p></mj-text>
            <mj-text padding="0"><p>ミツエーリンクスは、高い技術品質、プロセス品質、サービス品質と共に一連のサービスを有機的に統合し、機能的価値と情緒的価値に変換することで、企業・社会活動に貢献します。</p></mj-text>
            <mj-include path="./components/button/button01.mjml">
          </mj-column>
        </mj-section>
        <mj-include path="./components/structure/footer.mjml" />
      </mj-body>
    </mjml>

src/components/button/button01.mjml

     <mj-button href="https://www.mitsue.co.jp/company/about_mitsue-links.html" width="100px" height="40px" border-radius="20px" background-color="#216aad" color="white" padding-top="20px" inner-padding="0">more</mj-button>

src/components/structure/header.mjml

     <mj-section>
      <mj-column>
        <mj-text padding="0">2019/03/30</mj-text>
        <mj-text padding="0"><h1>ミツエーリンクスニュース<h1></mj-text>
      </mj-column>
    </mj-section>

src/components/structure/footer.mjml

     <mj-section>
      <mj-column>
        <mj-text align="center">&copy; 2019 dummy inc.</mj-text>
      </mj-column>
    </mj-section>

メールのテスト送信

コードを書き終えたらMJML@extの機能を使って実際のメーラーで表示を確認してみます。
まずは、VS Codeのsetting.jsonを開き、下記の記述を加えます。

    "mjml.mailer": "nodemailer",
    "mjml.mailSubject": "TEST_",
    "mjml.mailRecipients": "送信先のメールアドレス, カンマで区切ることによって複数可能",
    "mjml.nodemailer": {
        "auth": {
            "user": "メーラーのユーザーID",
            "pass": "メーラーのパスワード"
        },
        "host": "メールホスト",
        "secureConnection": false,
        "port": "ポート番号",
        "tls": {
            "rejectUnauthorized": false
        }
    }

その後、index.mjmlファイルを開きながらCtrl + Shift + Pでコマンドパレットを開き、コマンドパレットに「MJML:Send Email」と記述してEnterを押します。すると、メールの件名記入欄と送信先のメールアドレス記入欄が順番に出てくるので適当に記述しEnterを押しましょう。
正常にメールが送信された場合は右下に「Mail has been sent successfully.」というアラートが表示されます。
（エラーが出てしまう場合はNodemailerのドキュメントを確認して設定を見直しみてください）

Office 365版 Outlookで閲覧した場合

コンパイル

メーラーでの表示確認ができたら最後にファイルのコンパイルをしましょう。
templateフォルダーでコマンドプロンプトを開き、下記のコマンドを実行します。

npm run build

実行後、distディレクトリにindex.htmlとしてファイルが保存されていれば成功です。

おわりに

MJMLを使えばコードの統一はもちろん作業時間の短縮ができます。
これを機に皆さんもHTMLメールをMJMLで作成してみてはいかがでしょうか？

2019年の記事一覧に戻る