アイザック?オコロ著??

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

この記事では、オープンソースでほとんど無(wú)料のオプションに焦點(diǎn)を當(dāng)て、利用可能な最も効果的なメール編集ツールとその獨(dú)自の機(jī)能に焦點(diǎn)を當(dāng)てます。次に、これらのエディターの 1 つである Unlayer を統(tǒng)合し、MailDev を使用してテストします。

アンレイヤー

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

React、Vue、Angular プロジェクトに簡(jiǎn)単に統(tǒng)合できます。以下に主な機(jī)能をいくつか示します:

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

簡(jiǎn)単メール

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

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

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

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

MJML

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

主な機(jī)能:

• MJML 構(gòu)文を使用した簡(jiǎn)素化された電子メール開(kāi)発
• MJML をレスポンシブ HTML に変換します
• 一般的な電子メール構(gòu)造のための広範(fàn)なコンポーネント ライブラリ

GrapesJS

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

以下は GrapesJS の主な機(jī)能の一部です:

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

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

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

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

まず、以下のコマンドを?qū)g行して、新しい React アプリケーションを作成し、そこに移動(dòng)します。

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) を參照し、設(shè)計(jì)された電子メール コンテンツをエクスポートします。 [電子メールの送信] ボタンをクリックすると、exportHtml 関數(shù)がトリガーされ、HTML 要素が sendTestEmail 関數(shù)に抽出され、ポスト リクエストがバックエンドの localhost API に送信されます。

電子メールテスト用の MailDev

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

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

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

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

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

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

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 リクエストを受け入れます。

次に、ターミナルで以下のコマンドを?qū)g行してノードサーバーを起動(dòng)します。

node server.js

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

npm install -g maildev

MailDev が正常にダウンロードされ、インストールされたら、以下のコマンドを?qū)g行して起動(dòng)します。

maildev

すべての構(gòu)成が完了したら、フロントエンド サーバーを起動(dòng)して、クールな電子メール テンプレートを作成しましょう。フロントエンドのターミナルで以下のコマンドを?qū)g行して React プロジェクトを開(kāi)始します:

npm start

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

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

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

かなり素?cái)长艘?jiàn)えるはずです!やったね!

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

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

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

結(jié)論

すべての電子メール エディタの中で、Unlayer は簡(jiǎn)単に埋め込める柔軟性があり、応答性の高い電子メール テンプレートを有効にするため、私のお?dú)荬巳毪辘芜x択肢となっています。また、MailDev は、電子メールに間違いがなく、完全な狀態(tài)であることを保証する點(diǎn)で優(yōu)れた仕事をしていると信じています。

お?jiǎng)幛幛坞娮鹰岍`ル エディターや、私が見(jiàn)逃している可能性のあるその他のツールがあれば教えてください。それまで、コーディングを楽しんでください!

---

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

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

LogRocket を使用すると、これらのエラーを新しい獨(dú)自の方法で理解できます。當(dāng)社のフロントエンド監(jiān)視ソリューションは、JavaScript フロントエンドに対するユーザーの関與を追跡し、エラーを引き起こしたユーザーの行動(dòng)を正確に確認(rèn)できるようにします。

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

無(wú)料でお試しください。

以上が最高のメール編集ツールのガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。