FirebaseとSendGridを使ったメルマガサービスのバックエンドの実装

FirebaseとSendGridを使ったメルマガサービスのバックエンドの実装

2020年11月23日


FirebaseとSendGridを使ったメルマガサービスの実装 ~ メッセージの送信方法

FirebaseとSendGridを使ったメルマガ(ニュースレター)サービスを実装する場合に通常のメッセージ(E-Mailアドレスを指定して送信するスタイル)ではなく、送付先を登録したリストを指定して送信するマーケティングキャンペーンで送信する方が都合が良いことがたくさんあります。

大きな違いは送付したメッセージの追跡をする場合です。E-Mailアドレスを指定して送信する場合は、送られたメッセージの宛先(「To」で指定された宛先)に受取人以外のE-Mailアドレスを載せないようにするには、全員に個別のメッセージを送る必要があります。

わかりやすく説明すると、10人の人にメルマガ(ニュースレター)を配信する場合、10人分のE-Mailアドレスを全て「To」で指定して1通のメッセージとして送信することは可能です。しかし、この場合は問題が一つあります。それは、全員のメールアドレスが「To」で指定されているために、メールを受け取った人は10人全てのE-Mailアドレスを見ることができます。これは、メルマガ(ニュースレター)などのサービスを行う際に個人情報保護の観点からは問題になります。

これを避けるためには「Bcc」で指定する方法もあります。そうすれば、1通のメールで済ませることも可能です。 もう一つの方法は個別にE-Mailアドレスを指定して10通のメッセージを送る方法もあります。ただし、この場合は10通のメールを送るためのリクエストをSendGridに送る必要があります。10通に分けて送付した場合はメッセージの追跡も少し複雑になりますし、メッセージの控えも同じメッセージの控えを10通分残す必要もあるので配信数が多くなると保存容量も大きく変わってきます。

メルマガに向いたマーケティングキャンペーン

この問題を解決する方法としてSendGridが提供している配信方法がマーケティングキャンペーンと呼ばれる配信方法です。これは、E-Mailアドレスを指定する代わりに、配信先を登録した配布リストを指定して送信するという仕組みです。日本で構造計画研究所経由でSendGridのサービスを受ける場合は、キャンペーン(Campagin)と呼ばれるメッセージ(のオブジェクト)を作成して送ります。本家のアメリカのSendGridから直接サービスを受けている場合はシングルセンド(single sends)を使って送ります。

この方法でメッセージを配信した場合、SendGridが個別にメッセージを宛先ごとに送ってくれます。 また、メッセージの控えもSendGridのサーバ側に残るので、Webサービス・Webアプリ側で控えを残す必要もなくなります。メッセージの追跡もマーケティングキャンペーン(オブジェクト)毎に行えるので、単に個別に追跡するだけではなく、各マーケティングキャンペーン毎のデータを集めるのも簡単になります。

メルマガ(ニュースレター)配信のサービスを考えた場合、マーケティングキャンペーンを利用してメッセージを送る方がこのようにいろいろな面で有利です。

マーケティングキャンペーンのメッセージ

マーケティングキャンペーンで配信するメッセージは、メッセージ毎にオブジェクトを作成する必要があります。 別の記事でも解説していますが、このマーケティングキャンペーンでは2つの関門があります。

  • マーケティングキャンペーン(オブジェクト)の作成時
  • マーケティングキャンペーン(オブジェクト)の送信・送信予約時

この2つの操作でそれぞれ最低限必要な項目が異なります。

マーケティングキャンペーンの作成に必要な要素

マーケティングキャンペーンの作成時には、必要なのはタイトル(title)だけです。 しかし、作成後にアップデートできるのは

  • タイトル(title)
  • 件名(subject)
  • 分類(categorys)
  • 本文(html_content/plain_content)

だけになります。 しかし実際の送信時・送信予約時には、配布先リストや送信者などの情報が必要になります。 これは、後からの追加ができないのでマーケティングキャンペーン作成時に指定することになります。

いろいろなグループを作成してメッセージの送り先を分けたりする場合は、配布先リストを選択できるようにしたり、会社や組織の名前でメッセージを送信する場合メッセージの送信者をリストから指定できるようにしておく必要があります。さらに、SendGridはセグメントの機能もあって、配布先リストの中をさらに細分類して送付先をしていすることができます。

以上を考えて、マーケティングキャンペーンの作成フォームの基本的な構成は

  • タイトル入力
  • 件名入力
  • 送信者(リストから選択)
  • 配布先リスト(リストから選択)
  • 送付先セグメント(リストから選択)
  • 登録停止リスト(リストから指定、もしくはグローバルリストのみの使用)
  • メッセージの本文
  • 「作成」の実行ボタン
  • 作成中止のボタン

の様になります。リストから選択する項目では、事前に登録されている内容をSendGridから取得しておく必要があります。マーケティングキャンペーン(のオブジェクト)を作成すると、SendGridからマーケティングキャンペーンのIDが発行されて、このIDで管理できるようになります。

マーケティングキャンペーンの一覧表示

マーケティングキャンペーンの機能を利用する場合、現在SendGridのサーバーにあるマーケティングキャンペーンの一覧をSendGridサーバーから取得する必要があります。 それぞれのマーケティングキャンペーン(のオブジェクト)は幾つかの状態に分類できます。

  • ドラフト(送信前の状態)
  • 送信予約(送信町の状態)
  • 送信済

になります。ドラフトの状態では、タイトル、件名、分類、本文などは変更したり、追加したりできます。 送信予約の場合は、送信予約の変更や取り消しの操作ができます。 送信済の場合は、変更はできません。ただし、メッセージ追跡などが必要な場合に、メッセージのIDを取得したり、送信したメッセージの確認などの操作が必要になります。

そうした、キャンペーン管理のページが必要になります。

メッセージの予約送信

マーケティングキャンペーンのメッセージは、ボタンを押したらすぐに送信という操作はもちろん可能です。その他に、メッセージのテスト送信や、送信日時を指定して送信予約をすることが可能です。送信日時はUNIXのタイムスタンプで指定します。これは、日時の管理をコンピュータで行う場合に広く使われている方法です。1970年1月1日の午前0時0分0秒のUTCの時刻からの経過時間(秒)で表します。

この数値は人間が見てわかる時間ではないので、日付を人間が見てわかる形で入力した情報を変換して利用します。よく使われる形式が「2020-11-22T00:00:00」のような形で入力すると、Javascriptの標準関数で変換ができるので便利です。

バックエンドでサポートが必要なAPIは?

この一連の機能を実装するために必要なバックエンド側の機能は以下の様になります

分類操作説明優先度備考
配布先登録メッセージ配布先の登録必須
配布先更新メッセージ配布先の更新必須
配布先削除メッセージ配布先の削除必須
配布先取得メッセージ配布先の取得必須
配布先リスト新規作成メッセージ配布先リストの作成
配布先リスト削除メッセージ配布先リストの削除
配布先リスト取得メッセージ配布先リストの取得
配布先リスト登録メッセージ配布先リストへの登録
配布先リストリスト登録削除メッセージ配布先リストからの削除
配布先セグメント新規作成メッセージ配布先セグメントセグメントの作成
配布先セグメント削除メッセージ配布先セグメントセグメントの削除
配布先セグメント取得メッセージ配布先セグメントの取得
送信者登録送信者の登録
送信者更新送信者の更新
送信者削除送信者の削除
送信者取得送信者の取得
キャンペーン作成マーケティングキャンペーンの作成必須
キャンペーン更新マーケティングキャンペーンの更新必須
キャンペーン削除マーケティングキャンペーンの削除必須
キャンペーン取得マーケティングキャンペーンの取得必須
キャンペーン送信マーケティングキャンペーンの送信必須
キャンペーン送信予約マーケティングキャンペーンの送信予約必須
キャンペーンテスト送信マーケティングキャンペーンのテスト送信必須
キャンペーン送信日時の変更マーケティングキャンペーンの送信日時の変更必須
キャンペーン送信予約の取り消しマーケティングキャンペーンの送信予約取り消し必須
キャンペーン送信予約日時の取得マーケティングキャンペーンの送信予約日時の取得必須

配布先を一つのリストで管理する場合には配布先の実装はなくても大丈夫です。同様に、セグメントも省くことは可能です。送信者も固定にしてしまう場合はバックエンドの処理を省いても問題ありません。

しかし、最小限の機能のサポートでも、結構な数の機能がバックエンドに必要になります。

各機能に別々のURLを割り当てて、バックエンドでexpressなどのフレームワークを使って処理別に実装します。 各分類ごとに同じURL(API)を割り当てて、HTTPのメソッドで操作を分ける方法でも良いですし、APIに操作を加えても構いません。SendGridのV3のAPIでは機能ごとにURLを決めて、HTTPのメソッドで操作を分けています。

配布先(contact recipients)のAPIを例に取ると

APIMethod操作
/contactdb/recipientsPOST新規登録
/contactdb/recipientsGET一覧取得
/contactdb/recipientsDELETE削除
/contactdb/recipientsPATCH更新

のように、同じURLで操作対象を特定して、HTTPのメソッドで操作を決めています。

フロントエンドとバックエンドの実装も同じような方法を使うことができます。

別の方法としては |API|Method|操作| |-|-|-|-| |/contactdb/recipients/create|POST|新規登録| |/contactdb/recipients/get|POST|一覧取得| |/contactdb/recipients/delte|POST|削除| |/contactdb/recipients/update|POST|更新| の様にURLに操作内容も含めてしまって、全てのリクエストは「POST」で送るという方法もあります。

いずれにしても、バックエンドで必要な処理は少なくありません。

基本の記述は以下のようなコードで実装できます。あとは、処理する項目に合わせて「data」の部分を変えればOKです。あとは、SendGridからの応答を受け取っってフロントエンドに必要なデータを転送したり、処理結果を通知するように記述を追加すればバックエンドの実装は完了です。

基本的に同じような記述の羅列で対応できます。

this.app.post(
      CONSTANT.API_SIGNUP,
      (req: express.Request, res: express.Response) => {
        const url = "";
        const data: TYPE.SG_Contact = {
          email: req.body.contact.email,
          first_name: req.body.contact.first_name,
          last_name: req.body.contact.last_name,
        };
        const options: any = {
          method: "POST",
          url: url,
          headers: { AUthorization: "Bearer " + CONSTANT.SG_API_KEY },
          data: data,
          json: true,
        };
        axios(options)
          .then((response: AxiosResponse) => {
              // SendGridの応答を受け取ってフロントエンドに応答するための処理
          })
          .then((error: any) => {
              // エラーの場合の処理、フロントエンドにもエラーを通知します
          });
      }
    );

まとめ

FirebaseとSendGridを利用してメルマガ(ニュースレター)のサービスを実装する場合、通常のE-Mailベースのメッセージの機能よりは、マーケティングキャンペーンの機能を使った実装の方がメッセージの追跡やメッセージの控えの管理を考えると便利です。

実際にマーケティングキャンペーンの実装をするためにはシンプルな送信フォームの他にもバックエンドでサポートする機能が必要になります。

バックエンドの機能は多くなりますが、実装自体は同じような記述の繰り返しなので余り複雑ではありません。ただ、ルーティングの処理は多くなるので、バックエンドとフロントエンドを分けて実装した方が便利です。

Copyright(c) 2017-2020 by Silicon Valley Super Ware, all rights reserved.

コメント

このブログの人気の投稿

ユーザーインターフェースの設計

足し算以外もできるようにする

改良版足し算プログラム