Vue.js と MJML でレスポンシブなメールを作成する

MJML は、開発者が美しく、応答性に優れ、あらゆるデバイスやメールクライアントで動作する魅力的な電子メールを作成できる最新の電子メールツールです。このマークアップ言語は、レスポンシブな電子メールの作成の手間を軽減するために設計されました。

セマンティック構文により、簡単に使用できます。また、開発時間を短縮する機能豊富な標準コンポーネントも備えています。このチュートリアルでは、MJML を使用して美しいレスポンシブな電子メールを作成し、複数の電子メールクライアントでテストします。

MJML を開始

npm を使用して MJML をインストールし、Node.js または CLI で使用することができます。

$ npm インストール -g mjml

メールの構成

まず、email.mjml というファイルを作成しますが、他の名前を選択することもできます。ファイルが作成されると、レスポンシブメールは次のセクションに分割されます。

会社ヘッダー
画像ヘッダー
メール紹介
列セクション
アイコン
ソーシャルアイコン

コラム

これらのセクションは、レスポンシブな電子メールのフレームワークです。上記のように、メールは email.mjml ファイル内で 6 つのセクションに分割されます。

<mjml>
 <mj-本文>
  <!-- 会社ヘッダー -->
  <mj-section 背景色="#f0f0f0"></mj-section>
  <!-- 画像ヘッダー -->
  <mj-section 背景色="#f0f0f0"></mj-section>
  <!-- メール紹介-->
  <mj-section 背景色="#fafafa"></mj-section>
  <!-- 列セクション-->
  <mj-section 背景色="白"></mj-section>
  <!-- アイコン -->
  <mj-section 背景色="#fbfbfb"></mj-section>
  <!-- ソーシャル アイコン -->
  <mj-section 背景色="#f0f0f0"></mj-section>
 </mj-body>
</mjml>

上記のように、2 つの MJML コンポーネント (mj-body と mj-section) を使用しています。 mj-body は電子メールの開始点を定義し、mj-section は他のコンポーネントを含むセクションを定義します。

定義されたセクションごとに、それぞれの 16 進数値を持つ background-color プロパティも定義されます。

会社ヘッダー

当社の電子メールのこのセクションには、中央のバナー位置に当社の会社名/ブランド名のみが記載されています。

<!-- 会社ヘッダー -->
<mj-section 背景色="#f0f0f0">
 <mj-コラム>
  <mj-text フォントスタイル="太字"
    フォントサイズ="20px"
    align="center"
    カラー="#626262">
  セントラルパーククルーズ
  </mj-text>
 </mj-column>
</mj-section>

mj-column コンポーネントは列を定義するために使用されます。 mj-text コンポーネントはテキストコンテンツに使用され、フォントスタイル、フォントサイズ、色などのスタイルプロパティを取得します。

画像ヘッダー

このセクションでは、背景画像と会社のスローガンを表すテキストを入力します。さらに詳しい情報が記載されたページへ誘導する CTA ボタンも用意します。

画像のタイトルを追加するには、そのセクションの背景色を background-url に置き換える必要があります。最初の見出しと同様に、パディングをそのままにして、テキストを垂直方向と水平方向の両方で中央に配置する必要があります。

ボタンの href はボタンの位置を設定します。背景を列全体の幅で表示するには、列の幅を 600 ピクセル ( width="600px" ) に設定します。

当社の電子メールのこのセクションには、当社の会社名/ブランド名の中央バナー配置のみが含まれます。

<!-- 画像ヘッダー -->
<mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
      背景サイズ="カバー"
      背景繰り返し="繰り返しなし">
 <mj-column 幅="600px">
  <mj-text align="center"
       カラー="#fff"
       フォントサイズ="40px"
       クリスマス割引
  <mj-button background-color="#F63A4D" href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" >
   プロモーションを見る
  </mj-button>
 </mj-column>
</mj-section>

画像ヘッダーを使用するには、jms-section コンポーネントに background-url プロパティを追加し、background-size プロパティと background-repeat プロパティを使用して画像のスタイルを設定します。

スローガンテキストブロックでは、align プロパティを使用して、テキストを水平方向と垂直方向の両方で中央揃えにします。必要に応じて、テキストの色、フォントサイズ、フォントファミリなどを設定することもできます。

CTA ボタンは、mj-button コンポーネントを使用して実装されます。 background-color プロパティを使用すると、ボタンの背景色を指定できます。次に、href を使用してリンクまたはページの場所を指定します。

メール紹介

紹介テキストは、タイトル、本文、行動喚起で構成されます。

<!-- 紹介テキスト -->
<mj-section 背景色="#fafafa">
 <mj-column 幅="400px">
  <mj-text フォントスタイル="太字"
       フォントサイズ="20px"
       フォントファミリー="Helvetica Neue"
       究極のクリスマス体験
  <mj-text color="#525252">
   水分が蒸発せず、皮膚が腫れてしまうのではないかと心配です。樹液は強いので、簡単に吸収されてしまいます。樹液は強いので、簡単に吸収されてしまいます。
  </mj-text>
  <mj-button background-color="#F45E43" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >詳細はこちら</mj-button>
 </mj-column>
</mj-section>

列セクション

この電子メールセクションには 2 つの列があります。1 つは説明画像で、もう 1 つは最初のセクションの画像を補足するテキストブロックです。

<!-- サイドイメージ -->
<mj-section 背景色="白">
 <!-- 左の画像 -->
 <mj-コラム>
  <mj-image 幅="200px"
       src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/>
 </mj-column>
 <!-- 右段落 -->
 <mj-コラム>
  <mj-text フォントスタイル="太字"
       フォントサイズ="20px"
       フォントファミリー="Helvetica Neue"
       カラー="#626262">
   素晴らしい体験
  </mj-text>
  <mj-text color="#525252">
   Lorem ipsum dolor sit amet、consectetur adipiscing elit。 
   わだち掘れは非常に効率的なので、非常に効果的です。 
   アリクアムはヴォルトパット。クラース・イド・デュイ・レクタス。ヴェスティブルム・セッド・フィニバス 
   レクタス。
  </mj-text>
 </mj-column>
</mj-section>

左側の最初の列では、mj-image コンポーネントを使用して、使用する画像を指定します。イメージはローカルファイルでも、この場合はリモートでホストされているイメージでもかまいません。

右側の 2 番目の列には、タイトル用と本文テキスト用の 2 つのテキストブロックが含まれています。

アイコン

アイコンセクションは 3 つの列に分かれています。メールの見た目に応じて、さらにコンテンツを追加することもできます。

<!-- アイコン -->
<mj-section 背景色="#fbfbfb">
 <mj-コラム>
  <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" />
 </mj-column>
 <mj-コラム>
  <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
 </mj-column>
 <mj-コラム>
  <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" />
 </mj-column>
</mj-section>

各列には独自の mj-image コンポーネントがあり、アイコン画像をレンダリングするために使用されます。

ソーシャルアイコン

このセクションには、当社のソーシャルメディアアカウントを指すアイコンが含まれます。

<mj-セクションの背景色="#e7e7e7">
 <mj-コラム>
  <mj-ソーシャル>
   <mj-social-element name="インスタグラム" />
  </mj-social>
 </mj-column>
</mj-section>

MJML には、ソーシャルメディアアイコンを簡単に表示できる mj-social コンポーネントが付属しています。私たちの電子メールでは、Twitter の mj-social-element を使用しました。

すべてをまとめると

この時点で、すべての部分が実装されており、完成した email.mjml は次のようになります。

<mjml>
 <mj-本文>
  <!-- 会社ヘッダー -->
  <mj-section 背景色="#f0f0f0">
   <mj-コラム>
    <mj-text フォントスタイル="太字"
         フォントサイズ="20px"
         align="center"
         カラー="#626262">
     セントラルパーククルーズ
    </mj-text>
   </mj-column>
  </mj-section>
  <!-- 画像ヘッダー -->
  <mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
        背景サイズ="カバー"
        背景繰り返し="繰り返しなし">
   <mj-column 幅="600px">
    <mj-text align="center"
         カラー="#fff"
         フォントサイズ="40px"
         クリスマス割引
    <mj-button background-color="#F63A4D" href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" >
     プロモーションを見る
    </mj-button>
   </mj-column>
  </mj-section>
  <!-- メール紹介 -->
  <mj-section 背景色="#fafafa">
   <mj-column 幅="400px">
    <mj-text フォントスタイル="太字"
         フォントサイズ="20px"
         フォントファミリー="Helvetica Neue"
         究極のクリスマス体験
    <mj-text color="#525252">
     水分が蒸発せず、皮膚が腫れてしまうのではないかと心配です。樹液は強いので、簡単に吸収されてしまいます。樹液は強いので、簡単に吸収されてしまいます。
    </mj-text>
    <mj-button background-color="#F45E43" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >詳細はこちら</mj-button>
   </mj-column>
  </mj-section>
  <!-- 列セクション -->
  <mj-section 背景色="白">
   <!-- 左の画像 -->
   <mj-コラム>
    <mj-image 幅="200px"
         src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/>
   </mj-column>
   <!-- 右段落 -->
   <mj-コラム>
    <mj-text フォントスタイル="太字"
         フォントサイズ="20px"
         フォントファミリー="Helvetica Neue"
         カラー="#626262">
     素晴らしい体験
    </mj-text>
    <mj-text color="#525252">
     Lorem ipsum dolor sit amet、consectetur adipiscing elit。 
     わだち掘れは非常に効率的なので、非常に効果的です。 
     アリクアムはヴォルトパット。クラース・イド・デュイ・レクタス。ヴェスティブルム・セッド・フィニバス 
     レクタス。
    </mj-text>
   </mj-column>
  </mj-section>
  <!-- アイコン -->
  <mj-section 背景色="#fbfbfb">
   <mj-コラム>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" />
   </mj-column>
   <mj-コラム>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
   </mj-column>
   <mj-コラム>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" />
   </mj-column>
  </mj-section>
  <!-- ソーシャル アイコン -->
  <mj-セクションの背景色="#e7e7e7">
   <mj-コラム>
    <mj-ソーシャル>
     <mj-social-element name="インスタグラム" />
    </mj-social>
   </mj-column>
  </mj-section>
 </mj-body>
</mjml>

アプリケーションの実行

電子メールの作成が完了したので、コンパイルしてどのように見えるか確認してみましょう。これを行うには、ターミナルに次のように入力します。

mjml -r email.mjml -o .

-r: MJML が mjml ファイルを読み込んでコンパイルできるようにします
-o .: コンパイルされたmjml出力を同じディレクトリに保存するようにMJMLに指示します

MJML のコンパイルが完了すると、同じディレクトリに email.html ファイルが表示されます。お気に入りのメールクライアントまたはブラウザーで開くと、次の画像のようになります。

要約する

先ほど見たように、MJML は、複数のブラウザーやクライアントで応答する高品質で美しい HTML メールを生成するのに役立ちます。

Vue.js と MJML を使用してレスポンシブなメールを作成する方法についての記事はこれで終わりです。Vue.js と MJML を使用してレスポンシブなメールを作成する方法の詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: