今回利用するサービス「SendGrid」でメッセージを送る！

Silicon Valley Super Ware

2020年7月7日


今回利用するサービス「SendGrid」でメッセージを送る！

今日はもう少し具体的な内容について説明していきます！
実際に制作するWebサービスは、「SendGrid」というサービスです。

一言で言うと、メルマガのようなメッセージを配信するためのサービスです。

オリジナルのサービスはアメリカの会社が提供していますが、 日本でも構造計画研究所などが日本語でのサービスを提供しています。
このサービスをWebサービスに組み込んで利用しているケースも多くあります。 今回の様に、試験的に組み込む場合は、「無料」のプランを利用する事もできるので このサービスを実装例に取り上げてみました。

今回作成するのは？

今回作成するのは、SendGridのAPIを利用して、メッセージを配信する部分を実装してみます。 完全なサービスにするには、他の機能の実装が必要になりますが、要領は同じです。 時間の関係上ブログの連載では「メッセージの送信」に限定してお伝えしていきます。
最初に書いたように、このサービスはアメリカの本社が提供するサービスでも 日本のリセラーが提供するサービスでも利用可能です。 ただし、一つ問題があって、利用できるＡＰＩの仕様が日本とアメリカでのサービスで 若干違っています。

このブログでは日本で、構造計画研究所が提供するサービスを前提に進めていきます。

今日はまず、このサービスに登録するところから始めてください！
「SendGrid」の新規会員登録はこちらから！
E-mailアドレスを入力すると、確認のE-mailが登録したアドレスに送られてきます。 E-mailアドレスを確認したあと、さらに必要事項を入力します。 登録作業はこれだけですが、実際に利用する為のユーザー名は後から登録した メールアドレスに送られてきます。

利用にはこのユーザー名が必要です。パスワードは登録時に入力したものです。
ユーザー名はE-mailではありませんのでご注意を！

ユーザー名が送られてくるまでに少し時間がかかります。 すぐに使えるわけではありませんので作り始める前に早めに登録してください！ （アメリカのサービスは、登録したらすぐに使えるようになります）

Webサービスを作る前に準備する事！

実際にWebサービスを作る前にやる事がいくつかあります。
ブラウザーでSendGridの管理ページにログインして行います
  • API Keyの取得 -- Setting -> API Keysから取得します
  • 送付先の登録 -- Marketing -> Contacts から「Add Contacts」
  • 送信者の登録 -- Marketing -> Senders から「Create New Sender」
などの準備が必要です。API Keyは取得した後、画面を閉じてしまうとみる事が出来なくなってしまいますので、 Keyの中身はどこか安全な場所に保管しておく方が無難です。 また、送信者は、メールアドレスのドメインの設定をしていない場合、確認のメールが送られるので 確認後メッセージの送信が可能になります。

API Key以外の作業は、WebサービスからAPIを利用して設定できるようにもできます！

完全なサービスを作るには、こうした機能もあなたのWebサービスに組み込む必要があります。 今回のブログの連載では、メッセージを送る部分以外は各自で作って頂く方針です。 必要な方は、そうした機能の実装のやり方を詳しく学べるコースもありますのでお問合せください！

APIのドキュメント

SendGridがサポートするAPIはWebサイトにまとめられています。
メッセージ送信で今回使用するＡＰＩは「API v3」の中にある、「V3 Mail Send API」です。良く使われるプログラミング言語のチュートリアルも豊富でこれらを参考にすると簡単に実装できます。

今回利用するNode.jsの例はGitHubにサンプルがあります。

「npm」で「@sendgrid/mail」というパッケージ（モジュール）を使えば簡単なコードを書くだけで あなたのWebサービスからSendGrid経由でメッセージを送る事ができます。
英語になりますが、結構詳しい説明があります。
このパッケージを使うと、「宛先」、「送信者」、「メッセージのタイトル（subject）」「本文」を 指定するだけで送れます。

サービスの構成

今回は、メッセージを送付するだけの実装に限定なので制作するものは以下の通りです。
  • メールのメッセージを入力するフォーム（お問合せフォームを流用可能）
  • バックエンドでフロントエンドから受け取ったメッセージをSendGridに送信
これだけです！
セキュリティ上誰でも送信できるのは問題ですので、Firebaseで認証（ログイン）処理を して、ログインした利用者のみが送信できるという仕組みにします。
余談になりますが、完全なサービスとして利用するには
  • 送信先の登録、更新、削除や登録先のリスト表示
  • メッセージの配布リストの作成、削除、配布リストへの登録・削除
  • メッセージの控えの作成
  • メッセージのトラック情報（送信状態や開封など）
などを加えると魅力的なメルマガやニュースレター配信のサービスにすることができます。
このような本格的なWebサービスの作成講座も提供しています。

興味のある方は今すぐお問合せください！



またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。


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

コメント

コメントを投稿

このブログの人気の投稿

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

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。 ...
続きを読む

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

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea...
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text...
続きを読む