「Bubble」でメール送信アプリを作ってみた
- 2021年11月4日
- by SendGrid
- Category: 技術ネタ
はじめまして！今年の8月からSendGridチームに配属となりました、新入社員の中田・金と申します。私たちは二人ともIT初心者ですが、配属後はメールの仕組みを勉強したり、はじめてのプログラミングに挑戦したり、日々トレーニングに励んでおります。早く皆様のお力になれるよう精進して参りますので、どうぞよろしくお願いいたします！
さて、本日はそんなビギナーの我々にも優しいノーコード開発ツール「Bubble」とTwilio SendGridを連携させたアプリについて紹介いたします。BubbleにはSendGridプラグインが用意されており、作成したWebアプリケーションから簡単にメールを送信することができます。
ノーコードツールに興味がある方、プログラミング未経験だけどアプリを作ってみたい方、色々なメール送信方法を試してみたい方などは、ぜひ参考にしてみてくださいね。
Bubbleとは？
Bubbleとは、ソースコードを書かずにWebアプリケーションを開発できるツールです。テキストボックスや画像、ボタンなどのコントロールを好きな場所にドラッグ&ドロップすればデザインを作成でき、処理フローの指定もクリックだけで行えるため、直感的な操作でアプリケーションを作ることができます。チュートリアルも充実しているので、プログラミングの経験がなくても簡単に始められます。
簡単なメール送信アプリをつくってみよう
今回は、Bubbleで作成したフォームからSendGridのDynamic Transactional Templateを適用したメールを送信するアプリを作ってみました。
仕組みはいたってシンプルです。
- フォームにメールアドレス、件名、名前を入力しSendボタンをクリックすると、アプリ側がそれらの情報を取得する
- SendGrid側で事前に準備したテンプレートと、フォームから取得した情報を使ってメールを作成し送信する
たったのこれだけです！機能がミニマルな分、アプリの作成に時間はかかりません。では、実際に作ってみましょう。
必要なもの
いずれもFreeプランのアカウントで問題ありません。
手順
1. SendGridで行うこと
APIキーの作成
SendGridでメールを送信するためにAPIキーを作成します（APIキーにはメール送信権限を付与する必要があります）。作成方法はドキュメントをご覧ください。
作成したAPIキーは1度しか表示されないため、どこかにメモしておきましょう。
Dynamic Transactional Templateの作成
メール本文となるテンプレートを作成します。今回はDynamic Transactional Templateを利用します。作成方法はドキュメントをご覧ください。
今回のテンプレートは、宛先ごとに異なる文字列を差し込めるようにしています。差し込み用の置換タグとして、件名には {{subject}}、本文には {{name}} を指定しました。
テンプレートを保存し、表示されるTemplate IDを確認しておきましょう。Bubbleで設定を行う時に必要となります。
2. Bubbleで行うこと
新しいアプリケーションを作成し、Designエディタの画面に移動します。
SendGridプラグインのインストール
SendGridのプラグインをインストールします。
Plugins画面に移動し、「+ Add plugins」をクリックします。
「SendGrid」で検索すると「SendGrid」という名称のプラグインがヒットします。「Install」ボタンをクリックし、ボタンの表示が「Uninstall」に変わったら「DONE」をクリックしてPluginsの管理画面に戻ります。
APIキーの設定
Pluginsの管理画面で「SendGrid」をクリックします。APIキーの入力欄に先ほどメモしたSendGridのAPIキーを入力します。
メール送信フォームの編集
メールを送信するフォームを作成します。
具体的な操作方法は、BubbleのLessonsでご確認ください。
以下の画像のようにフォームを作成しました。各項目を入力し「Send」ボタンをクリックすると、送信処理に成功した旨のメッセージが表示される動きを実装しました。「件名」、「名前」に入力された文字列は、それぞれメールテンプレート内の {{subject}}、{{name}} の部分に置き換えられます。詳しくはこちらをご覧ください。
動作設定
メールの送信設定を行います。
「Send」ボタンを選択すると表示される編集メニューから「Start/Edit workflow」をクリックし、Workflow画面に遷移します。
次に「Click here to add an action…」をクリックし、Pluginsメニューの中の「SendGrid – Send email」を処理フローに追加します。
使用するテンプレートとメールコンテンツ、差し込む文字列を指定します。
- TEMPLATE：SendGridで作成したテンプレートのTemplate IDを貼り付けます。Typeが「Dynamic」になっていることも確認してください。
- CONTENT：Subject、To Email Addressにはフォームで入力した内容が反映されるよう設定します。Subjectの場合、「Insert dynamic data」をクリックし「Input 件名を入力してください」、「’s value」を順番に選択します。To Email Addressも同様に行います（下図参照）。
- Substitution Tags：同様に、テンプレート内の置換タグにフォームで入力した内容が反映されるよう設定します。
From Name、From Email Addressには固定文字列を設定しておきます。
「Send」ボタンをクリックした後の動作を設定します。
正常に送信処理が行われたことを画面表示するためにElement Actionsメニューから「Show message」を選択します。「Element」には「Alert Success!」を選択し、送信処理に成功した場合にのみメッセージが表示されるよう「Only when」で表示条件を指定しましょう。
また、送信処理完了後に入力内容がクリアされるよう「Reset inputs」も処理フローに追加します。
Designエディタに戻り、画面右上にある「Preview」をクリックしましょう。テスト環境が完成しました。
3. 動作確認
いよいよ実際にメールを送信してみます！
件名と名前を入力し、自分のメールアドレス宛に送信してみましょう。「Send」ボタンをクリックします。
「Success!」が画面上部に表示されました。入力内容もクリアされています。メールが届いたか確認してみましょう。
無事にメールが届きました！置換タグにも指定した文字列が差し込まれています。
まとめ
今回はBubbleを使って、Dynamic Transactional Templateを適用したメールを送信するアプリを作ってみました。プログラミング勉強中の我々新人にとって、ノーコードでのアプリ作成はとても刺激的でした！BubbleとSendGridの親和性は非常に高いので、皆さんもご自身のスタイルに合わせたメール送信アプリを作ってみてくださいね。
