「Bubble」でメール送信アプリを作ってみた

「Bubble」でメール送信アプリを作ってみた

はじめまして!今年の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}} を指定しました。

Dynamic Transactional Templateの作成

テンプレートを保存し、表示されるTemplate IDを確認しておきましょう。Bubbleで設定を行う時に必要となります。

2. Bubbleで行うこと

新しいアプリケーションを作成し、Designエディタの画面に移動します。

SendGridプラグインのインストール

SendGridのプラグインをインストールします。
Plugins画面に移動し、「+ Add plugins」をクリックします。

「+ Add plugins」をクリック

「SendGrid」で検索すると「SendGrid」という名称のプラグインがヒットします。「Install」ボタンをクリックし、ボタンの表示が「Uninstall」に変わったら「DONE」をクリックしてPluginsの管理画面に戻ります。

「Install」ボタンをクリックし、ボタンの表示が「Uninstall」に変わったら「DONE」をクリック

APIキーの設定

Pluginsの管理画面で「SendGrid」をクリックします。APIキーの入力欄に先ほどメモしたSendGridのAPIキーを入力します。

APIキーの設定

メール送信フォームの編集

メールを送信するフォームを作成します。
具体的な操作方法は、BubbleのLessonsでご確認ください。

以下の画像のようにフォームを作成しました。各項目を入力し「Send」ボタンをクリックすると、送信処理に成功した旨のメッセージが表示される動きを実装しました。「件名」、「名前」に入力された文字列は、それぞれメールテンプレート内の {{subject}}、{{name}} の部分に置き換えられます。詳しくはこちらをご覧ください。

メール送信フォームの編集

動作設定

メールの送信設定を行います。

「Send」ボタンを選択すると表示される編集メニューから「Start/Edit workflow」をクリックし、Workflow画面に遷移します。

「Start/Edit workflow」をクリックし、Workflow画面に遷移

次に「Click here to add an action…」をクリックし、Pluginsメニューの中の「SendGrid – Send email」を処理フローに追加します。

「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も同様に行います(下図参照)。
  • メールコンテンツの指定

    From Name、From Email Addressには固定文字列を設定しておきます。

    From Name、From Email Addressには固定文字列を設定

  • Substitution Tags:同様に、テンプレート内の置換タグにフォームで入力した内容が反映されるよう設定します。
  • テンプレート内の置換タグにフォームで入力した内容が反映されるよう設定

「Send」ボタンをクリックした後の動作を設定します。

正常に送信処理が行われたことを画面表示するためにElement Actionsメニューから「Show message」を選択します。「Element」には「Alert Success!」を選択し、送信処理に成功した場合にのみメッセージが表示されるよう「Only when」で表示条件を指定しましょう。

Element Actionsメニューから「Show message」を選択

「Only when」で表示条件を指定

また、送信処理完了後に入力内容がクリアされるよう「Reset inputs」も処理フローに追加します。

「Reset inputs」も処理フローに追加

Designエディタに戻り、画面右上にある「Preview」をクリックしましょう。テスト環境が完成しました。

「Preview」をクリック

3. 動作確認

いよいよ実際にメールを送信してみます!

「Send」ボタンをクリック

件名と名前を入力し、自分のメールアドレス宛に送信してみましょう。「Send」ボタンをクリックします。

「Success!」が画面上部に表示される

「Success!」が画面上部に表示されました。入力内容もクリアされています。メールが届いたか確認してみましょう。

届いたメール

無事にメールが届きました!置換タグにも指定した文字列が差し込まれています。

まとめ

今回はBubbleを使って、Dynamic Transactional Templateを適用したメールを送信するアプリを作ってみました。プログラミング勉強中の我々新人にとって、ノーコードでのアプリ作成はとても刺激的でした!BubbleとSendGridの親和性は非常に高いので、皆さんもご自身のスタイルに合わせたメール送信アプリを作ってみてくださいね。

メールを成功の原動力に

開発者にもマーケターにも信頼されているメールサービスを利用して、
時間の節約、スケーラビリティ、メール配信に関する専門知識を手に入れましょう。