Webサイトからのお問い合わせメールや注文メールの一覧リストを自動作成してみた話(SendGrid・LogicApps・Googleスプレッドシートの連携)

Pocket

la-contactmail-ttl
この記事は Microsoft Azure2 Advent Calendar 5日目の記事です。

最近はほとんどのWebサイトに「お問い合わせフォーム」が設置されていますが、そのメール内容をお手軽にリスト化する方法ってないかな?みたいに聞かれることがあったので色々なコネクターがあるLogic Appsで試してみようかなーと。
というわけで、今回は「フォームから送信される内容(お問い合わせや注文)のそれぞれの一覧リストをLogic Appsで自動作成(SendGrid・LogicApps・Googleスプレッドシートの連携)」してみました。

また今回は「どれだけコードを書かずにLogic Apps提供のコネクターだけで仕組みを作れるか?」に勝手にこだわってまして、コードを書く必要があるのはお問い合わせフォームのところだけとなっています。(お問い合わせフォームも、以前作ったLogic Appsを流用)

今回やること

la-contactmail-001
Webサイトのお問い合わせフォームから送信した内容は指定のメールアドレスに送信されますが、Logic Appsのコネクターで「お問い合わせ」か「注文」かを件名を見て判定し以降の処理も実行するようにしました。
注文処理についてはワークフローがあると思うので(何時に受注チェックして出荷準備して…という感じで)、お問い合わせメールのみ、受信したときにSlackで通知がくるようにしています。

la-contactmail-002
全体のフロー(Logic Appsデザイナー)はこんな感じ。
コネクターごとに説明していきます。

事前の準備

利用するデータをLogic Appsのコネクターで利用しやすくするため、お問い合わせフォームを使います。

お問い合わせフォームの調整

la-contactmail-003
件名で処理を判定するため、エンドユーザーが自由に件名を入れると困る…というわけで、件名部分はセレクトボックスに変更。

<select name="Subject" id="form-subject">
            <option value="[Contact]サイトについて">サイトについてのお問い合わせ</option>
            <option value="[Contact]商品について">商品についてのお問い合わせ</option>
            <option value="[Contact]支払い方法について">支払い方についてのお問い合わせ</option>
            <option value="[Order]注文">商品を注文する</option>
      </select>

Logic Appsの条件判定に使うため、お問い合わせ内容には[Contact]、注文内容には[Order]が件名の中に含まれるようにしました。
(エンドユーザーには関係ないので表の表示には見えないように)
Logic Appsを使ったお問い合わせフォームの作り方は、以下の記事を参考にされてください。

ノンプログラマーでも出来る!Logic Appsでお問い合わせフォームを作ってみた話。
https://zuvuyalink.net/nrjlog/archives/3160

Googleスプレッドシートの準備

Logic Appsには「Office365 Outlook – 新しい電子メールが届いたとき」というコネクターがありますが、今回は理由があって使いませんでした。理由は後述します~。
事前準備として、2種類のGoogleスプレッドシートを準備します。
la-contactmail-004
お問い合わせフォームからメールが送信されると、お問い合わせメールは「contactmail-list2016」、注文メールは「ordermail-list2016」というそれぞれの名前のGoogleスプレッドシートに内容が自動で追加されていきます。
Googleスプレッドシートには以下の内容で。

  • 送信者アドレス
  • 送信者名
  • 件名
  • 本文

今回はお問い合わせメール「contactmail-list2016」、注文メール「ordermail-list2016」の両方とも同じ項目にしました。

実際にLogic Appsで仕組みを作ってみる

la-contactmail-005
トリガーの「要求」「send email」の設定は以前作成したフォームと変更せずOK。
個人的に「Email Body(メールの本文になるところ)」が少し見にくかったので、今回修正してみましたが。

la-contactmail-006
件名(Subject)の内容で処理を条件分岐させます。
[contact]が入っていればお問い合わせメールの処理[Order]が入ってれば注文メールの処理になります。

お問い合わせメールの処理

la-contactmail-007
「google」で検索して「Googleスプレッドシート – Insert row(行の追加)」を選択。
該当のGoogleスプレッドシートを選択します。
また青枠内の内容は「シート1」を選ぶと自動で追加されます、入力する項目はこんな感じで。この部分は「動的コンテンツの追加」で入力出来る項目を選べます。
la-contactmail-008
お問い合わせメールが来たときのみ、Slackに通知がくるようにします。
「slack」を検索して「Post Message」を選択。
入力内容はこのような感じで。「Message Text」部分で送信者のアドレスも表示されるようにしました。

注文メールの処理

la-contactmail-009
「google」で検索して「Googleスプレッドシート – Insert row(行の追加)」を選択。
該当のGoogleスプレッドシートを選択します。
入力方法はお問い合わせメールと同じです。

これで完成!

実際にメールフォームから送信してみる

実際にメールフォームから送信してみた結果は以下。(上記で表示した項目4つを全て試すため4回送信)

Googleスプレッドシート

la-contactmail-010
お問い合わせメールの一覧リスト「contactmail-list2016」はこのような感じ。
指定した項目ごとにきちんと内容が入っているのがわかります。

la-contactmail-011
お問い合わせメールの一覧リスト「ordermail-list2016」はこのような感じ。
指定した項目ごとにきちんと内容が入っているのがわかります。

Slackの通知

la-contactmail-012
お問い合わせメールのときだけ通知が来るようにしていたので、このような感じ。
Bot Nameも指定したものになっていて「送信者メールアドレス」も通知メッセージに含まれています。(ぼかし部分)

送信メール

la-contactmail-013
SendGridのコネクターを利用しているので、指定したメールアドレスにメールが届きます。(今回はGmail使用)
このようにメールも届いています。
la-contactmail-015
送信される内容は「Send email」コネクターで設定した内容になっています。

「Office365 Outlook – 新しい電子メールが届いたとき」を使わなかった理由

このコネクターを使うとラクじゃないか!とはじめは思ったのですけど、実際にやってみたら問題にぶつかり…。
la-contactmail-014
このように、本文部分にHTMLを含めて入ってしまうのです…。
Logic Appsは基本、前の処理で使用したコネクターの内容を後ろのコネクターで利用できます。
色々試したのだけど、現時点のコネクターではこのHTMLを削除する方法が見つからなかったので、今回は「お問い合わせフォームを使う(SendGridのコネクター使用)」としました。

最後に

今回利用したSendGridのメールフォームはセキュリティ面で懸念点があるため、まだ実務で使うのはオススメできません…。
ですので、今回の方法の利用は自己責任でお願いします!m(_ _)m
Logic Appsはコネクターの種類も増えてきているので、こんな感じで工夫して組み合わせると面白い仕組みがサクッと作れますので、色々試してみてください~!

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください