すべてのカテゴリ

FirebaseとSendGridで実装したメルマガサービスの管理メルマガやニュースレターはオンラインを利用したマーケティングなどで広く使われています。 こうした、メルマガやニュースレターを配信するサービスは、FirebaseとSendGridを利用すれば比較的簡単に実装できます。 無料のメルマガ、ニュースレターの配信サービスも多数存在しますが、メッセージの追跡などを考えると、FirebaseとSendGridを使って実装する価値もあります。 こうした、WebサービスやWebアプリの場合、設定を変えたり、重要なデータの削除などの機能も必要になる場合があります。利用者が一人の場合は、そうした管理も含めて全ての操作ができるように実装すれば特別なアプリは必要ない場合がほとんどです。 しかし会社などの組織で利用する場合、複数の人がメッセージに送信にかかわることも多くなりますし、重要な設定の変更やデータの削除などの権限は管理者のみにした方が都合が良い場合も多くなります。 この記事は、メルマガのサービスで考えられる管理機能とその実現方法について解説しています。 管理の方法は？ WebアプリやWebサービスの管理の方法はいくつかあります。 一つは、WebアプリやWebサービスが稼働しているサーバーにログインして行う方法です。しかし、Firebaseを利用したWebアプリやWebサービスの場合は、直接サーバーにログインして行う管理はほとんどありません。 Firebaseを利用したWebアプリやWebサービスの場合、可能性としては ＊　Firebaseコンソールで管理（設定） ＊　

FirebaseでSendGridで送付したメッセージを追跡するSendGridは、単純にメッセージを送信するだけではなく、送信したメッセージを追跡する機能も提供しています。SendGridで送付したメッセージの追跡情報は、SendGridのWebサイトのユーザーインターフェースから見ることができます。 さらに、便利なのは、単にSendGridのWebサイトで追跡情報を見るだけではなく、Firebaseを使った独自のWebサービスやWebアプリにSendGridで送付したメッセージの追跡機能を取り込んで利用することも可能です。この記事では、SendGridで送付したメッセージをFirebaseを利用した独自のWebサービスやWebアプリで追跡する方法について解説します。 SendGridから送付できるメッセージは２種類 SendGrid経由で送付できるメッセージは２種類あります。 ＊　E-Mail形式のメッセージ（E-Mailアドレスを指定して送付） ＊　マーケティングキャンペーン（送付先を登録したリストで送付） の２つです。機能的には似ていますが、詳細の機能は違っています。 SendGridではどちらのタイプのメッセージも追跡して、送信の完了や開封状況、メッセージ中のリンクなどの情報を追跡する事ができます。 SendGridのていきょうするメッセージの追跡という観点で比べてみると以下のような点が違います。 ＊　マーケティングキャンペーンはSendGrid上にメッセージの控えが残る ＊　マーケティングキャンペーンは登録されている送付先ごとに個別に送付される ＊　マー

FirebaseとSendGridを上手く利用するには？FirebaseとSendGridを使ってメルマガ（ニュースレター）サービスを実装する場合、SendGridのサーバーからデータを取得する場合の処理は： ＊　バックエンドにリクエストを送信 ＊　バックエンドはリクエストをSendGridに転送 ＊　バックエンドがSendGridからデータを受け取る ＊　バックエンドがデータをフロントエンドに転送 というステップで処理が実行されます。 SendGridとのやり取りにAPI Key（SendGridの秘密鍵）を利用する必要があるのでどうしても、バックエンドと通す必要があるため、意外に時間がかかります。 今日の記事は、FirebaseとSendGridでメルマガ（ニュースレター）のサービスを実装する際に、こうした待ち時間を改善する方法について解説します。 Firebaseのデータベースアクセスは高速アクセス可能！ バックエンドのサービス（functions）とそのホスティングにFirebaseを使う場合、もう一つ工夫するとメルマガ（ニュースレター）を配信する際のサービスをより快適にすることができます。 Firebaseのデータベース（Cloud Firestore）は、チャットなどのサービスでもよく利用されますが、リアルタイムでの更新も可能で、高速でアクセス可能です。これを上手く使うとSendGridのデータの取得も高速かつ便利に行う事が可能です。 少なくても、Firebase Cloud Firestoreのデータベースにはバックエンドを介さずに直接アクセスすること

FirebaseでSendGridを実装したときの非同期処理の問題例作成した、WebサービスやWebアプリの検証で見つかった非同期処理に関連した問題の具体的な例を紹介します。 Javascript（Typescript）はシングルスレッド（一つの仕事）で実行されるので、時間のかかる処理の待ち時間を有効に使うために、非同期で処理を可能にして、性能の改善をしています。 同期の処理の場合は、プログラムの実行（処理）は基本的にはプログラムで書いた順番で処理されるので問題が起きることは余りありません。しかし、非同期で処理する場合プログラムの記述順序とは違った順番で処理されるので問題を見つけにくい欠点があります。 送付先のリストの処理の不具合 SendGridでは配布先の宛先をリストにまとめて、リストに登録されている人にまとめてメッセージを送ることができます。 実際にSendGridのAPIでリストの情報として取得できるのは、全てのリストのID、名前、登録者数は一つのAPIで取得できますが、リストに登録されているユーザーを取得するには別のAPIを使う必要があります。 リストの情報とそのリストの登録者の情報を一緒に取得しようとすると ＊　リストの一覧を取得 ＊　取得した各リストの登録者を取得 という処理をする必要があります。 axios({     method:"GET",     url: url,     headers:{ Authorization: authHeader} }).then((res:AxiosResponse) => {     const l

FirebaseとSendGridで作るメルマガサービスの検証方法前回はモジュールごとに分けて検証をする事例を、FirebaseとSendGridでメルマガ（ニュースレター）サービスの例を使って説明しました。その中でいろいろな機能がありますが、その一つの機能、メルマガメルマガ（ニュースレター）の送付先の登録の機能についてより具体的な話をお届けしました。 今日はさらに詳しい部分について考えていくことにします。 ところで、プログラミングを勉強して起業や就職に役立てようという方がたくさんいらっしゃるので、プログラムのやり方に関する記事は沢山あります。一方で、作ったプログラミングをどのように検証（テスト）するかという記事はプログラミングのやり方に比べると圧倒的に少なくなります。 前回も触れましたが、実際は、プログラミングを作る（実装する）作業よりも、出来上がったプログラミングを検証する方が、時間も手間もかかります。そして、品質の良いプログラムを提供するには、十分な検証（テスト）をする必要があります。さらに、これも前回触れていますが、プログラムを検証するためのプログラムの開発も必要になることも多く、意外に軽く見られがちな検証（テスト）ですが、プログラムの開発ではなくてはならないステップなのでここでも取り上げることにしました。 プログラムの検証の基本 プログラムの検証の基本は、起こりうることを全てテストするというのが究極のゴールです。 実際は全ての機能の検証はできないか、実行するのが非常に難しい場合も多く、１００％のテストというのは現実的にはできない場合がほとんどです。これが「想定

FirebaseとSendGridで作るメールマガサービスの検証前回は、バグの話を紹介しました。 ソフトウエアの開発にバグはつきものですが、バグが起きる原因について簡単に紹介しました。 バグの分類は大きく分けて２種類で ＊　必要な機能が設計通りに動かないバグ ＊　想定外の条件が引き起こすバグ です。設計通りに動作するかどうかの検証は設計者でも比較的簡単に検証できます。しかし、想定外の条件が引き起こすバグは、設計者が想定していないケースのため、設計者自身では検証が難しい部分という話を紹介しました。想定外のケースのテストをするためには、設計者以外の第三者にテストしてもらうというのが会社など組織で開発する場合の検証方針です。 フリーランスの場合は、設計から検証まで自分で行わなければならないことが多く、いかに想定外のケースを取り除けるかが重要になります。 効率的な検証のコツ 実際に、一人で全ての検証を完全に行うのはほぼ不可能に近いというのがある程度以上の規模のソフトウエアでは現時点での実情です。 しかし、効率的に検証を行う方法や、少しでも想定外を減らす方法はいくつかあります。この記事ではまず、効率的に検証を行う方法を解説します。 検証の範囲を絞る！ 最初に考えることは、検証の範囲を絞ることです。 今回紹介している、FirebaseとSendGridを利用してメルマガ（ニュースレーター）の配信を行うサービスを例に考えて行きます。 実装の所でも既に紹介していますが、このサービスを作るには大きく３つの部分が必要になります。 一つは「バックエンド」です。これは、フロントエンド

FirebaseとSendGridでメルマガサービスのバックエンドAPI実装の注意！FirebaseとSendGridでメルマガ（ニュースレター）サービスを作る場合、メッセージの送信には、通常のE-Mailベースのメッセージ送信より、マーケティングキャンペーンを利用する方が便利です。 マーケティングキャンペーンの処理をバックエンドで実装する際には幾つかの注意点があります。 今日は、FirebaseとSendGridでメルマガ（ニュースレター）サービスで利用するバックエンドをexpressを利用して、実装する場合の注意点について解説しています。 バックエンドのAPIの決め方 WebサービスやWebアプリでバックエンドのインターフェースを決める場合には幾つか注意点があります。 機能的なインターフェース セキュリティ上のインターフェース セキュリティ上のインターフェースは、バックエンドのサービスを利用できる人を制限したりする場合には重要な要素になります。セキュリティ対策にはいろいろありますが、（セッション）クッキーを利用したり、ログイン情報（UIDなど）を添付したり、CORSで利用できるドメインを限定したりして、必要以外の人のアクセスを制限するためのインターフェースです。 今回はセキュリティ上のインターフェースではなく、機能的なインターフェースを中心に解説をします。 機能的なインターフェースは、フロントエンドから必要な機能のバックエンド処理をどのように呼び出すかという仕様です。フロントエンドとバックエンドのやり取りは基本的にはカスタムのインターフェースなので、自由に設計する

FirebaseとSendGridを使って送信者の登録を行うには？FirebaseとSendGridを利用してメルマガ（ニュースレター）のサービスを実装する場合には、単にメッセージを送信するだけではなく、SendGridといろいろな情報を取得する必要があります。 今日は、メッセージの送信者の登録を中心にお届けします。 前回、SendGridに登録されているメッセージ配信先の取得についてお届けしました。 SendGridのAPIの定義の仕方を見るとわかりますが、SendGridとのやり取りの操作の内容は大きく分けると： ＊データの追加 ＊データの取得（読み出し） ＊データの更新 ＊データの削除 になります。例外もありますが、これをHTTPのメソッドで分類して区別しています。 ＊データの追加 POST 登録データ ＊データの取得 GET なし 一括取得 ・個別取得 ＊データの更新 PATCH 更新データ ＊データの削除 DELETE データのＩＤ 前回の例では、SendGridに登録されている送付先の一括取得の詳細をお伝えしました。 基本的なバックエンドの処理は同じ！ データの操作方法や対象とするデータによって詳細のコードは変わってきます。 しかし基本的な処理の「枠組み」は同じです。 app.post(URL,(req:express.Request, res:express.Response) => {     // 登録の処理 }) app.get(URL,(req:express.Request, res:express.Response) =&gt

FirebaseとSendGridを使って登録送付先を取得する方法FirebaseとSendGridを利用してメルマガ（ニュースレター）のサービスを実装する場合には、単にメッセージを送信するだけではなく、SendGridからいろいろな情報を取得する必要があります。 SendGridのサーバーとやり取りをするためには、SendGridのAPIキー（秘密鍵／secret key）が必要になります。従って、実装はフロントエンドが直接SendGridのサーバーとやり取りをするのではありません。バックエンド（サーバー）側のサービスを介してSendGridとやり取りをします。 この記事ではまず、SendGridに登録した送付先をバックエンドを介して取得する方法を解説しています。 バックエンドの実装 まず最初にSendGridと直接やり取りをするバックエンドの実装例です。 SendGridに登録した送付先を一括取得する部分のコードです。 バックエンドのサーバーのフレームワークにはexpressを利用しています。 事前にexpressのパッケージをnpmを利用してインストールする必要があります。expressの詳しい実装例はこちらの記事をご覧ください。 SendGridのサーバーから、登録した送付先を一括取得するAPIは「contactdb/recipients」をHTTPの「GET」のメソッドでSendGridのサーバーに送ります。 HTTPの送信にはaxiosを使っています。バックエンドのファンクション（functions）をフロントエンドと別々にWebホスティングする場合には

FirebaseとSendGridを使ったメルマガサービスのバックエンドの実装FirebaseとSendGridを使ったメルマガ（ニュースレター）サービスを実装する場合に通常のメッセージ（E-Mailアドレスを指定して送信するスタイル）ではなく、送付先を登録したリストを指定して送信するマーケティングキャンペーンで送信する方が都合が良いことがたくさんあります。 大きな違いは送付したメッセージの追跡をする場合です。E-Mailアドレスを指定して送信する場合は、送られたメッセージの宛先（「To」で指定された宛先）に受取人以外のE-Mailアドレスを載せないようにするには、全員に個別のメッセージを送る必要があります。 わかりやすく説明すると、１０人の人にメルマガ（ニュースレター）を配信する場合、１０人分のE-Mailアドレスを全て「To」で指定して１通のメッセージとして送信することは可能です。しかし、この場合は問題が一つあります。それは、全員のメールアドレスが「To」で指定されているために、メールを受け取った人は１０人全てのE-Mailアドレスを見ることができます。これは、メルマガ（ニュースレター）などのサービスを行う際に個人情報保護の観点からは問題になります。 これを避けるためには「Bcc」で指定する方法もあります。そうすれば、１通のメールで済ませることも可能です。 もう一つの方法は個別にE-Mailアドレスを指定して１０通のメッセージを送る方法もあります。ただし、この場合は１０通のメールを送るためのリクエストをSendGridに送る必要があります。１０通に分けて送付した場合は

FirebaseとSendGridでメルマガサービスを送る準備FirebaeとSendGridを使ってメルマガ（ニュースレター）配信サービスを作る場合の詳細の続編です。 既に、メルマガ（ニュースレター）を受け取る為の登録のフォームの実装については説明しました。 この記事では実際に、メッセージを配信するための準備について解説します。 メッセージの送信方法は、どのSendGridのAPIを利用するかで変わってきます。 メッセージを送るには通常のE-Mailと似た送信方法（Mail SENDのAPI）とマーケティングメッセージ（Campagins/SingleSends）があります。多くの人に同時に送信できて、メッセージの追跡が簡単な方法がマーケティングメッセージです。この記事ではマーケティングメッセージを利用してメッセージを配信する方法について解説します。 マーケティングメッセージは２つのAPIがあって、サービスの提供をどこから受けるかで変わります。 ＊　本家アメリカのSendGridから直接サービスを受ける場合　➞　New Markeging Campagin API ＊　日本の構造計画研究所経由でサービスを受ける場合　➞　Legacy Marketing Campagin API になります。この記事では日本の構造計画研究所経由でサービスを受けることを前提に解説していきます。 利用するAPIを調べる 利用するAPIはLegary Marketing Campaign APIです。このAPIは送付先を登録したリストを使って配信できます。リストも、全ての登録者（All C

FirebaseとSendGridでメルマガサービスを作る時の注意！FirebaseとSendGridを利用してメルマガ（ニュースレター）を配信するサービスは意外に簡単に実現できます。その際気を付ける点にサポートされているAPIがどこからSendGridのサービスを利用するかで変わってくることです。 日本では構造計画研究所がサービスを提供しています。 私は現在海外在住なので本家本元のSendGridからサービスを受けています。 ところが、この２つのサービスSendGridと言っても微妙に違う部分があって同じではありません。 どんなところが違うか？ まずは、利用プランから見てみるとどちらも無料プランがありますが、 無料プランの内容も少し違います 有料プランになると余り差がなくなります。 マーケティング機能は、アメリカのプランの場合は基本プランの料金に含まれているようですが、構造計画研究所のプランはリストの登録人数で料金が変わってくるようです。登録数が２０００件以下の場合は無料で利用できるようですが、これを超えると超過分に１０，０００件単位で１，３００円の料金が毎月発生するようです。 機能上の違いは？ 機能上の大きな違いは、利用できるAPIが一部違うことです。 料金も一つのポイントだと思いますが、機能の方もサービスを実装するうえでは重要なポイントになります。 基本的には、マーケティング機能に関連したAPIが違います ＊　アメリカのSendGrid：New Marketing Campagins ＊　構造計画研究所：Legacy Marketing Campagins

FirebaseとSendGridSendGridで作るメルマガの登録フォームFirebaseとSendGridを使ってメルマガ（ニュースレター／News letter）を実装する際に、メルマガ（ニュースレター／News letter）の登録フォームを作成する方法について解説しています。 SendGridのサービスを使う場合、バックエンドの実装が必要です。登録フォーム自体はフロントエンドからも実装できますが、バックエンドに実装をまとめてしまうと実装がシンプルになります。 バックエンド（サーバー）側でレンダリングを行う場合、最近ではNEXTやNUXTのフレームワークを利用するケースも多いですが、シンプルな実装の場合、もう少し手軽に実装できる方法に、「express-handlebar」を使う方法もあります。 この記事では登録フォームを「express-handlebar」を利用して実装する方法を紹介しています。 「express-handlebar」とは？ HTMLのテンプレートです。簡単なHTMLのテンプレートを元に、サーバー側でHTMLを作る場合に利用できます。 テンプレートエンジンと呼ばれています。いろいろな実装が公開されていますが、今回は「express-handlebar」を紹介します。 実装の準備 プロジェクトフォルダの作成 まずは、メルマガのサービスのためのフォルダを作成してください。フォルダを作成したら作成したフォルダに移動して、Firebaseの初期化を行います。 $ npm install -g firebase-tools $ npm instal

FirebaseベースとSendGridでメッセージの追跡をする前回の記事では、FirebaseとSendGridを利用して、メッセージの追跡情報をWebHookで取り込む方法について解説しました。設定にもよりますが、メッセージの送信の完了や、メッセージの開封、メッセージ中のリンクのクリックなどの追跡情報を、SendGridのサーバーに設定したURLまで送信させることが可能です。その情報をFirebaseのバックエンドサービス（ファンクション／functions）で収集して、Firebaseのデータベースに入れることでメッセージの追跡を実現できます。 前回の記事で触れていますが、メッセージの追跡を行うためにはメッセージの追跡情報と送付するメッセージを紐づける必要があります。この記事ではその詳細を解説します。 SendGridのWebHookで送られてくる情報は「イベント」によって違う 実は、メッセージの追跡情報の中身はイベントによって異なっています。 E-Mailアドレスや、イベントが発生した日時などは共通ですが、微妙に違います。このため、SQLなどのデータベースにこのイベント情報を記録するのは少々面倒です。イベントによって、送られてくる情報が違うので、ほとんどの場合イベントごとにテーブルを分けるなどの処理が必要になります。 Firebaseのデータベースの場合、個々のドキュメントのデータの中身は違っていても、同じコレクションに入れることができるので扱いがシンプルになります。 この中で、共通して使用できるのが、受け取り側のE-Mailアドレス、イベントのタイプ、イベン

FirebaseベースのファンクションでSendGridのWebHookをサポートするSendGridは、E-Mailの配信サービスを提供しています。通常のE-Mailに近いメッセージの配信もできますし、メルマガやニュースレーターのような同じメッセージを大量一括送信もできます。 プログラムからも利用可能なAPIもサポートしていて、WebアプリやWebサービスにE-Mailによるメッセージ送信機能を組み込んだりするのに利用できます。 SendGridがサポートしている機能の一つに、E-Mailの追跡があります。これは、発送したE-Mailが配信されたか、E-Mailが開封されたか、E-Mailのリンクがクリックされたかなどを追跡する機能です。 この機能は、SendGridが提供するWebサイトからもアクセス可能ですが、こうしたイベントが発生した場合にSendGridのサーバーが通知してくれる機能「WebHook」を利用しても追跡が可能です。 Firebaseのバックエンド機能（ファンクション：functions）と組み合わせて利用すると簡単にこの追跡機能もWebサービスやWebアプリに組み込むことができます。 SendGridのWebHookの仕組み SendGridのWebHookはSendGrid側で設定を行う必要があります。 SendGridのWebサイトからも設定できますし、APIを利用すれば、プログラムからも設定できます。 設定は簡単で、WebHookで追跡するイベント情報をどこに送るかを指定するだけです。 実際には存在しないＵＲＬですが、 backen

FirebaseでSendGridを利用するSendGridというサービスをご存じですか？ SendGridはE-Mailを配信するためのサービスです。メルマガやニュースレターのように、登録したユーザーにメッセージを一括して配信したりすることができます。また、配信の日時を予め設定して配信したりする事もできます。 さらに、配送したメッセージのトラッキングなどの機能を提供しています。メッセージが届いたか、メッセージが開封されたかなどのイベントを追跡してマーケティングなどに役立てることもできます。 SendGridのサービスの利用方法 SendGrid自体も、Webサイトを提供していて、Webサイトから様々な設定やメッセージの配信が可能です。従って、特にプログラミングをしなくてもサービスを利用することができます。 サービスは無料から利用可能です。１日あたり１００通までのE-Mailの発想は無料プランで利用できます。（アメリカでSendGridが提供する無料プランの場合） 日本では、いくつかの代理店がSendGridのサービスを提供しています。構造計画研究所の提供するプランでは、月に１２，０００通までのE-Mailが無料となっています。（2020年11月現在） SendGridのサービスの仕組み SendGridのサービスは既存のE-Mailアドレスを使ってメッセージを配信するサービスです。SendGridがE-Mailアドレスを提供するわけではなく、すでに取得しているE-Mailアドレスを使って、SendGridの配信システムを使ってE-Mailを送るサービスです。つまり、

Firebase と SendGrid で作るちょっと便利なお問合せフォームFirebase のデータベース機能（Cloud Firestore）を利用してお問合せフォームを作る例を紹介しました。これは、お問合せ内容を Firebase のデータベースに入れて管理する方法です。 この方法の欠点は、お問合せ内容を定期的に確認する必要があります。Firebase コンソールからも確認はできますが、実際の運用をするにはちょっと不便です。そこで、管理用のアプリをReactやVueで作る事例も紹介しました。 しかし、お問合せだけ別に確認するのはちょっと面倒ですよね？ そこでこの記事では、お問合せフォームで入力した内容を E-Mail で送る事もできるという話を紹介します。 Web サービスから E-Mail を送るのはちょっと面倒 E-Mail はメールサーバーがまとめて受信したり、配送したりするシステムです。通常は Web のサービスとは独立のシステムから配送されるようになっているので、シンプルな JavaScript（Typescript）から送るのはちょっと面倒です。 しかし、お問合せ内容が E-Mail から確認できると便利だと思いませんか？ 特別なアプリなしに、携帯（スマホ）からも簡単に確認できますし、管理用のアプリも必要ありません。お問合せも連絡先を E-Mail で頂いた場合は返信も E-Mail になるので E-Mail で確認できたほうが便利で、素早く回答も可能になります。 Firebase を使うと簡単に E-Mail に送る方法があります！ Fireb