【FlutterFlow】SendGridを使ってメールを送信する方法

FlutterFlowとSendGridを使って、簡単にメールを送信する方法を解説します。

はじめに
手順
まとめ

はじめに

FlutterFlowは、ノーコードでモバイルアプリを開発できるプラットフォームです。SendGridは、クラウドベースのメール配信サービスです。

この2つのサービスを組み合わせることで、コードを（ほとんど）書かずに、簡単にメールを送信することができます。

手順

Sendgridアカウントを作成する

SendGridアカウントを作成するには、SendGrid公式サイトにアクセスし、サインアップをクリックします。

SendgridのAPIキーを取得する

SendGridアカウントにログインしたら、[Settings] > [API Keys] に移動します。[Create API Key] をクリックして、新しいAPIキーを作成します。

メール送信画面を作成する

FlutterFlowプロジェクトで、メール送信画面を作成します。画面には、以下の要素を追加します。

メールアドレス入力フィールド
件名入力フィールド
本文入力フィールド
送信ボタン

メール送信用のAPIを作成する

API Calls > Addで新しいAPIを作成します。

Method TypeはPOST、API URLはhttps://api.sendgrid.com/v3/mail/sendです。

以下のページが参考です。

SendGrid Web API【入門】 | SendGridブログ

SendGridのWeb API v3の概要をご紹介します。メール送信はもちろん、統計情報の取得や不達リストの管理など、あらゆる機能をアプリケーションに実装できます。日本語ドキュメントや手軽に試す方法もあわせてチェックしましょう。

HeaderにはSendgridのAPIキーとContent-Typeを設定してください。

Variablesは以下のように受信者、件名、本文を渡せるようにしてください。この後テストをするためにDefault Valueは何か値を入力しておいてください。

BodyはJSONで以下のように設定してください。こちらのコードをコピペしてから設定をすれば楽です。

{
  "personalizations": [
    {
      "to": [
        {
          "email": "<enter_to_email>"
        }
      ],
      "subject": "<enter_to_subject>"
    }
  ],
  "content": [
    {
      "type": "text/plain",
      "value": "<enter_content>"
    }
  ],
  "from": {
    "email": "<enter_from_email>",
    "name": "<enter_from_name>"
  },
  "reply_to": {
    "email": "<enter_reply_to_email>",
    "name": "<enter_reply_to_name>"
  }
}

Add callを押します。
Response & TestでTest API Callを実施してください。http response 202が返却されます。
Default Valueに設定した通知先(toEmail)にSendgridからメールが通知されているかと思います。
作成したAPIは忘れずにSaveしておいてください。