最高のメール編集ツールのガイド

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

電子メール エディターは、高度な 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 リクエストを受け入れます。

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

node server.js

最後に、以下のコマンドを実行して、MailDev をマシンにグローバルにインストールします。

npm install -g maildev

MailDev が正常にダウンロードされ、インストールされたら、以下のコマンドを実行して起動します。

maildev

すべての構成が完了したら、フロントエンド サーバーを起動して、クールな電子メール テンプレートを作成しましょう。フロントエンドのターミナルで以下のコマンドを実行して React プロジェクトを開始します:

npm start

次に、http://localhost:3000/ に移動して、電子メール エディターをプレビューします。

電子メール テンプレートは簡単に設計できたので、送信に進み、MailDev を使用したテスト メールでどのように表示されるかを確認してみましょう。

好みに合わせてメール テンプレートをデザインし、ボタンをクリックしてメールを送信し、http://127.0.0.1:1080/#/ に移動してメールをプレビューします。

かなり素敵に見えるはずです!やったね!

電子メールエディターに求められる主な機能

上記では、私が好む電子メール エディターをリストしましたが、電子メール エディターを追求する価値があるかどうかを判断する際に、私が注目する一般的な資質は次のとおりです。

• レスポンシブなテンプレート — メールをモバイルとデスクトップのビューに自動的に適応させます
• ドラッグ アンド ドロップのデザイン — コーディングなしで電子メール コンテンツの作成を簡素化します
• カスタマイズ オプション — カスタム HTML/CSS コードを挿入します
• 事前に構築された要素 — 必要に応じて、ボタンやソーシャル メディアなどのモジュールを埋め込みます
• フレームワークとの互換性 — React、Angular など、選択した Web フレームワークと統合します。
• プラットフォーム全体での応答性 — モバイルからタブレット、ブラウザーに至るまで、すべてのプラットフォームとデバイスで応答性があります

結論

すべての電子メール エディタの中で、Unlayer は簡単に埋め込める柔軟性があり、応答性の高い電子メール テンプレートを有効にするため、私のお気に入りの選択肢となっています。また、MailDev は、電子メールに間違いがなく、完全な状態であることを保証する点で優れた仕事をしていると信じています。

お勧めの電子メール エディターや、私が見逃している可能性のあるその他のツールがあれば教えてください。それまで、コーディングを楽しんでください!

---

LogRocket: コンテキストを理解することで JavaScript エラーをより簡単にデバッグします

コードのデバッグは常に面倒な作業です。しかし、間違いを理解すればするほど、修正が容易になります。

LogRocket を使用すると、これらのエラーを新しい独自の方法で理解できます。当社のフロントエンド監視ソリューションは、JavaScript フロントエンドに対するユーザーの関与を追跡し、エラーを引き起こしたユーザーの行動を正確に確認できるようにします。

LogRocket は、コンソール ログ、ページの読み込み時間、スタック トレース、ヘッダー本体を含む遅いネットワーク リクエスト/レスポンス、ブラウザーのメタデータ、カスタム ログを記録します。 JavaScript コードの影響を理解するのがこれまでになく簡単になります!

無料でお試しください。

以上が最高のメール編集ツールのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。