FlutterFlowでsendgridを使ったメール送信機能を作ってみよう①

こんにちは。今回はノーコード（ローコード）のFlutterFow（フラッターフロー）でメール送信機能を作りたいと思います。
sendgridを使ってメール送信の実装をしてみます。

事前準備：sendgridのアカウントを取得しAPIキーを取得する

まずはsendgridのアカウント取得を行い、APIキーを取得します。

https://blog.flutterflow.io/sending-email/

それについてはこちらの記事が参考になるので「Setup a SendGrid account」の箇所をやってみてください。

Sender Authentication のところにあるように送信元メールアドレスの認証もお忘れ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なく。

FlutterFlow側でsendgridのAPIの設定

APIキーが取得できたら、FlutterFlow側でAPIの設定を行います。

以下のようにAPIキーを設定します。

Bodyはこんな感じです。

{
  "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>"
  }
}

変数を以下のように定義します。

これらの変数を、以下のように先ほどのbodyの中に埋め込みます。

"from"のところはsendgrid側で設定した送信元メールアドレスを固定で記載します。

UI作成

次はUIです。以下のようにシンプルにメールアドレス、タイトル、本文を入れて送信ボタンを押すとメールが送れるUIにしました。

sendgridのAPIの呼び出し

最後にボタンアクションでAPIを呼び出します。

これで完了です。

簡単ですね。

FlutterFlowでsendgridを使ったメール送信：まとめ

今回はsendgridのAPIを使ってメール送信機能を実装してみました。
FlutterFlowなどのノーコード・ローコードはAPIを繋げるので他サービスと連携することでどんどん機能追加できるのが魅力的ですね。

今後も色々試したものを共有していきたいと思います。

アプリ・Webサービスの開発の無料相談はこちら

FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。