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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueは配列とオブジェクトの値をレスポンシブに追加および変更します
  • Vue.jsは内部の応答性の原則を探求するために毎日学習する必要があります
  • Vueのレスポンシブ原則についての簡単な説明
  • Vue レスポンシブデータ更新の誤解について
  • Vue.set() メソッドを使用して、配列データステップのレスポンシブな変更を実装します。
  • Vue のイベント対応プログレスバーコンポーネントの詳細な例
  • Vueでレスポンシブシステムを実装する方法
  • Vue のデータ応答性の原理についての簡単な説明

<<:  Windows 上の MySQL バージョン 5.7 でエンコードを UTF-8 に変更する方法

>>:  Linux で ARM 開発ボード用のファイルシステムを作成する

推薦する

値の転送を実現するために、2つの同じレベルのコンポーネントをVueで作成します。

Vue コンポーネントは接続されているため、コンポーネント間で値を渡す必要があるのは避けられません...

ボタンをEnterキーに関連付けるjsコード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...

CentOS 7.0 (mysql-5.7.21) で複数の MySQL インスタンスを起動する方法

設定手順Linux システム: CentOS-7.0 MySQL バージョン: 5.7.21 Lin...

HTML テーブル マークアップ チュートリアル (1): テーブルの作成

<br />これは 123WORDPRESS.COM が提供する一連のチュートリアルです...

Linux でハードディスクのサイズを確認し、ハードディスクをマウントする方法

Linux には、マウントされたハードディスクとマウントされていないハードディスクの 2 種類のハー...

Vue3でelement-plusを使用する方法の詳細な説明

目次1. インストール2. main.jsにインポートする3. 使用Vue3がリリースされてからしば...

MySQL 基本チュートリアル: DML ステートメントの詳細な説明

目次DMLステートメント1. レコードを挿入する2. 記録を更新する3. シンプルなクエリレコード4...

JavaScriptのモジュール性を理解する方法

目次1. ブラウザのサポート2.エクスポートモジュールのエクスポート3. モジュールをインポートする...

アイデア展開Tomcatサービス実装プロセス図

まずプロジェクトの成果物を構成するスタートアップ項目の設定 Tomcatサービスを作成する開始したい...

js QRコードスキャンログインの原理についての簡単な説明

目次QRコードログインの真髄QRコードを理解するシステム認証メカニズムQRコードをスキャンしてログイ...

JavaScriptカルーセルの実装について

今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね?今日はカルーセル画像の真髄を簡...

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

ポップアップはすべて不正なものではありません。ウェブサイトのポップアップをデザインするためのヒント

ポップアップニュースは国内のインターネットサービスでは一般的であり、リアルタイムプッシュ方式はウェブ...

CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明

--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...

Vue プロジェクトで Baidu Map API を使用する方法

目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...