Email-Builder-js の開始方法

Email-Builder-js ライブラリをインストールする推奨方法は NPM を使用することです。スムーズなインストールのために、以下のコマンドをご利用ください。

npm install --save @usewaypoint/email-builder
 

コンポーネントベースのメールテンプレートデザインを作成する

オープンソースの Email-Builder-js ライブラリの核心には、コンポーネントへの注目があります。このアプローチにより、ソフトウェア開発者はヘッダー、フッター、コンテンツセクション、ボタンなどの再利用可能な部品を作成できます。これらのコンポーネントは簡単に組み合わせて完全なテンプレートを形成できます。このようにデザインを分解することで、コードがより整理されるだけでなく、テンプレートの更新や管理もシンプルになります。以下の例では、各コンポーネントが個別に作成されており、柔軟な構成と全体構造を変更せずに将来の更新が可能です。

 
const EmailBuilder = require('email-builder-js');

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
私たちのプラットフォームへようこそ！
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
ご参加いただきありがとうございます。ぜひ私たちの機能をお楽しみください！
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
よろしくお願いいたします,
チーム
',
  style: { color: '#999', textAlign: 'center', padding: '10px' },
});

// Combine components into a template
const template = email.buildTemplate({
  components: [header, mainContent, footer],
});

// Output the complete HTML template
console.log(template);
 

テンプレートにカスタムスタイリングとブランディングを適用する

メールテンプレートがアプリケーションのブランドに合わせられるようにするため、Email-Builder-js ライブラリは各コンポーネントの style 属性を通じて広範なカスタマイズを可能にします。これにはテンプレートの色、フォント、サイズ、レイアウトの調整が含まれます。ソフトウェア開発者はインラインスタイリングを使用でき、これはメールクライアントがデザインを意図通りにレンダリングするために重要です。以下のコードスニペットは、背景色、パディング、丸みを帯びた角を持つボタンを作成し、ブランドカラーに合わせた典型的なコールトゥアクションボタンに似せたスタイルになっています。

 
const button = email.createComponent({
  tag: 'a',
  content: 'Click Here to Get Started',
  attributes: { href: 'https://example.com/get-started' },
  style: {
    display: 'inline-block',
    padding: '10px 20px',
    backgroundColor: '#007bff',
    color: '#fff',
    textDecoration: 'none',
    borderRadius: '5px',
    textAlign: 'center'
  },
});

const template = email.buildTemplate({
  components: [button],
});

console.log(template);
 

Node.js でメールへの動的コンテンツ注入

注文確認やユーザー固有の通知など、パーソナライズされたメールを送信するアプリケーション向けに、オープンソースの Email-Builder-js ライブラリは動的コンテンツ注入をサポートします。ソフトウェア開発者はプログラム的にテンプレートにユーザー固有の情報（名前、住所、購入詳細など）を挿入でき、より魅力的で関連性の高いメールの作成が可能になります。テンプレートリテラルを使用することで、開発者はプレースホルダーを動的コンテンツに簡単に置き換えることができます。このアプローチは、取引メールやパーソナライズが重要なあらゆる状況で非常に効果的であることが、以下の例で示されています。

 
const userName = 'John Doe';
const product = 'Premium Subscription';

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
こんにちは ${userName}、
ご購入いただきありがとうございます、${product}！
`,
  style: { color: '#333', fontSize: '16px' },
});

const template = email.buildTemplate({
  components: [personalizedContent],
});

console.log(template);