最高のメール編集ツールのガイド-jsチュートリアル-php.cn

アイザック・オコロ著✏️

電子メールエディターは、高度な WYSIWYG (表示されたものがそのまま取得される) ツールとみなすことができ、ユーザーはコーディングスキルを持たずに電子メールテンプレートを作成できます。これらのエディタは、HTML と CSS を利用してさまざまなデバイス幅に応答するレスポンシブ電子メールを作成するために使用されます。

この記事では、オープンソースでほとんど無料のオプションに焦点を当て、利用可能な最も効果的なメール編集ツールとその独自の機能に焦点を当てます。次に、これらのエディターの 1 つである Unlayer を統合し、MailDev を使用してテストします。

アンレイヤー

Unlayer は、ユーザーが最小限の労力で電子メールを作成できるオープンソースのドラッグアンドドロップ電子メールエディターです。 React フレームワークと一緒に使用すると、Web アプリケーションに開発者にとって使いやすいビジュアル電子メールビルダーを提供するラッパーコンポーネントとして機能します。

React、Vue、Angular プロジェクトに簡単に統合できます。以下に主な機能をいくつか示します:

ドラッグアンドドロップエディター
既製のレスポンシブテンプレート
HTML および JSON エクスポートオプション
特殊なユースケース向けにカスタムツールを追加する機能

簡単メール

もう 1 つのオープンソースで無料で使用できるメールエディターは、レスポンシブメールを作成するためのマークアップ言語である MJML に基づいて開発された Easy email です。

Unlayer などに似たドラッグアンドドロップの電子メールエディターをユーザーに提供するさまざまな機能を備えたユーザーフレンドリーなインターフェイスを提供します。

Easy email はラッパーとして React と統合され、直感的なエディターレンディションを提供します。以下にその主な機能を示します:

ドラッグアンドドロップエディター
組み込みテンプレート
レスポンシブデザインのサポート

MJML

MJML は、レスポンシブ電子メールテンプレートを作成するマークアップ言語です。マークアップがあらゆるデバイスや電子メールクライアントの応答性の高い HTML にレンダリングされるという意味で、直感的です。

主な機能:

MJML 構文を使用した簡素化された電子メール開発
MJML をレスポンシブ HTML に変換します
一般的な電子メール構造のための広範なコンポーネントライブラリ

GrapesJS

GrapesJS は、応答性の高いプロフェッショナルな電子メールを作成するための無料の電子メールマーケティングツールです。電子メールテンプレートの構築ブロックを可能にするコンポーネントベースのインターフェイスを提供します。

以下は GrapesJS の主な機能の一部です:

電子メールを構築するためのモジュール式コンポーネント
デフォルトでレスポンシブデザイン
プラグインや追加機能で拡張可能

電子メールエディターとフロントエンド Web フレームワークの統合

最新の電子メールエディターの主な利点は、一般的なフロントエンド Web フレームワークと連携できることです。このような統合により、技術者以外のユーザーでも Web アプリケーション内で応答性の高いカスタマイズされた電子メールを作成できるようになります。

このセクションでは、Unlayer を React アプリケーションに統合する方法を検討します。

まず、以下のコマンドを実行して、新しい React アプリケーションを作成し、そこに移動します。

npx create-react-app email-editor && cd email-editor

ログイン後にコピー

次に、react-email-editor パッケージを新しく作成した React アプリケーションにインストールします。

npm install react-email-editor

ログイン後にコピー

インストール後、app.js を更新し、以下のコードブロックで App.css を更新します。

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 32px;
  margin-top: 20px;
  margin-left: 20px;
  cursor: pointer;
}

ログイン後にコピー

次に、以下のコードを使用して App.js ファイルを更新します。

import axios from "axios";
import React, { useRef } from "react";
import EmailEditor from "react-email-editor";
import "./App.css";

const App = () => {
  const emailEditorRef = useRef(null);
  const exportHtml = () => {
    emailEditorRef.current.editor.exportHtml((data) => {
      const { html } = data;
      sendTestEmail(html);
    });
  };

  const sendTestEmail = async (html) => {
    try {
      const response = await axios.post("http://localhost:8080/send-email", {
        html,
      });
      alert(response.data);
    } catch (error) {
      console.error("Error sending email:", error);
    }
  };

  return (
    <div className="App">
      <h1>React Email Editor</h1>
      <EmailEditor ref={emailEditorRef} />
      <button className="button" onClick={exportHtml}>
        Send Email
      </button>
    </div>
  );
};

export default App;

ログイン後にコピー

上記のコードブロックでは、コンポーネントは useRef を使用して電子メールエディター (emailEditorRef) を参照し、設計された電子メールコンテンツをエクスポートします。 [電子メールの送信] ボタンをクリックすると、exportHtml 関数がトリガーされ、HTML 要素が sendTestEmail 関数に抽出され、ポストリクエストがバックエンドの localhost API に送信されます。

電子メールテスト用の MailDev

MailDev は、ユーザーのマシン上でローカルに実行される、開発段階でプロジェクトで生成された電子メールをテストするためのオープンソース SMTP (Simple Mail Transfer Protocol) サーバーです。

実際の電子メールアドレスに何も送信せずにバックエンドからテスト電子メールを送受信するための Web インターフェイスとローカルサーバーを提供します。

MailDev アプリケーションは、アプリケーションの SMTP 設定と統合するためにバックエンドサーバーを使用します。つまり、MailDev は、開発中にアプリから送信される電子メールの中間ストレージとして機能する、シミュレートされた SMTP サーバーです。

MailDev サーバーを使用して、前のセクションで生成したテスト電子メールを実行してみましょう。まず、Node.js を使用してバックエンドサーバーを作成してみます。任意のディレクトリでターミナルを開き、以下のコマンドを実行してノードプロジェクト構造を作成します。

mkdir my-node-backend && cd my-node-backend && npm init -y

ログイン後にコピー

上記のコマンドは、ノードモジュールがダウンロードされたフォルダーを作成します。次のステップは、Express.js と Nodemailer をインストールすることです。これを行うには、以下のコマンドを実行します。

npm install express nodemailer cors

ログイン後にコピー

次に、プロジェクトディレクトリにserver.js ファイルを作成し、以下のコードをそこに貼り付けます。

const express = require("express");
const nodemailer = require("nodemailer");
const cors = require("cors");
const app = express();

app.use(express.json());
app.use(cors());

//Set up Nodemailer to connect to Maildev's SMTP server
const transporter = nodemailer.createTransport({
  host: "127.0.0.1",
  port: 1025, // Maildev's default SMTP port
  secure: false, // Maildev does not require SSL
  tls: {
    rejectUnauthorized: false,
  },
});

// API endpoint to send the email
app.post("/send-email", (req, res) => {
  const { html } = req.body;
  const mailOptions = {
    from: "IsaaacTheTester@example.com",
    to: "recipient@example.com",
    subject: "Test Email from React Email Editor",
    html: html,
  };

  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error("Error sending email:", error);
      return res.status(500).send("Failed to send email");
    }
    console.log("Email sent:", info.response);
    res.status(200).send("Email sent successfully");
  });
});

app.listen(8080, () => {
  console.log("Server is running on port 8080");
});

ログイン後にコピー

上記のコードブロックでは、Nodemailer を使用して MailDev の SMTP サーバー経由で電子メールを送信する Express を使用して Node サーバーをセットアップしています。サーバーはポート 8080 をリッスンし、/send-email エンドポイントへの POST リクエストを受け入れます。

次に、ターミナルで以下のコマンドを実行してノードサーバーを起動します。