Googleフォームで作成した問合せ画面を、Google Apps Scriptを使って「問合せが来たらSlackで通知」を作ってみました!
Googleフォームの作成からスクリプト作成と設定をして、Slackに通知されるまでを書きます!
注意点
どうやら「フォーム」と「スプレッドシートから作るフォーム」は少し違うようです。
今回は「フォーム」をそのまま作成した場合ですので、ご注意くださいませ。
フォームを作る
Googleドライブの新規作成から、フォームを作成しましょう!
まずは対象となるフォームを作っていきます。
既にある場合は飛ばしてくだい。
それっぽいものをこんな感じで作りました。
各フォームの設定
各フォームは
- お名前: 記述式
- メールアドレス: 記述式
- お問い合わせ内容: 段落
お問い合わせは「段落」にすることで、複数行入力できるようにしています。
メールアドレスの回答検証
メールアドレスは、メニューから「回答の検証」をONにしています。
これによって、「記述式テキスト」欄の下に、検証内容を入力できる欄が表示されます。 ココを「テキスト」、「メールアドレス」とします。
するとメールアドレスのフォーマットではない文字列を入力されたとき、エラーしてくれるようになります。
必須をON
すべての項目の「必須」を、ONにして必ず入力してもらうようにしています。
なにも入力しないで進もうとすると、怒ってくれます。
確認とか
画面右上の目のマーク(プレビュー)で、実際の表示の確認や入力をする事ができます。
Slackについて
Slackは対象のチャンネル(なかったら作成)を、WebHook連携しておいてください!
そしてWebHookのURLをとっておきましょう!
スクリプトを開く
画面右上のメニューから「スクリプトエディタ」を押して、スクリプトを作りましょう!
開いたらスクリプト名を適当につけましょう。
付けないと実行できないので。
ここクリックして
名前を入力してOK。
イベントハンドラを作る
ソースはこんな感じ。
// フォームの送信時に動く処理 function onFormSubmit(e) { var itemResponse = e.response.getItemResponses(); for (var i = 0; i < itemResponse.length; i++) { var formData = itemResponse[i]; var title = formData.getItem().getTitle(); var response = formData.getResponse(); // タイトルごとに要素をセット switch (title) { case "お名前": name = response; break; case "メールアドレス": mail = response; break; case "お問い合わせ内容": discription = response; break; default: break; } } // メッセージを作成してSlackへ var msg = "問合せ\n氏名:" + name + "\nmail:" + mail + "\n内容:" + discription ; var url = '<SlackのWebHook URL>'; var channel = "#contact"; var payload = createPayload(msg, channel); postSlack(payload, url); } // payloadの作成 function createPayload(msg, channel) { return { "channel" : channel, "username" : "問合せする人", "text" : msg, "icon_emoji" : ":date:" }; } // Slackに送信 function postSlack(payload, url) { var options = { "method" : "POST", "payload" : JSON.stringify(payload) } var response = UrlFetchApp.fetch(url, options); var content = response.getContentText("UTF-8"); }
必須でやることは2つ!
onFormSubmit()の
- url変数に、SlackのWebHook URLを入れる
- channel変数に、Slackのチャンネル名を入れる
あとは
- onFormSubmit()の「msg変数」が、Slackに送信するメッセージ
- createPayload()の「username要素」が、bot名
- createPayload()の「icon_emoji要素」が、botのアイコン
なので、お好きに編集すればOKです。
トリガーの設定
トリガーとはイベントの登録的なものです。
「あることが起きた」→「この関数を実行」的なことをしてもらうための設定です。
このボタンを押すか、編集/現在のプロジェクトのトリガーを押しましょう。
「G Suite Developer Hub」というページに来ます。
以前まではスクリプト画面で設定を行っていましたが、変わったようです。
右下にある「トリガーの追加」ボタンを押します。
こんな入力フォームが出ます。
このように変更します。
- 実行する関数を: onFormSubmit
- イベントの種類を選択: フォーム送信時
で、保存。
これで、フォームを送信したときに、onFormSubmit()がコールされます。
「外部サービスへの接続」について、また許可を求められるので、サクッと許可しましょう。
完了すると、こんな感じでトリガーが表示されます。
認証
function test() { var form = FormApp.getActiveForm(); var test = form.getItems(); }
「認証が必要です」ポップアップが出てくるので、「許可を確認」から認証を通しましょう!
アカウント選択して……
アクセスのリクエストを「許可」。
とりあえずこれでOKです。
試す
フォームの画面に戻り、プレビューから作成したフォームを表示させます。 そして適当に入力して、送信しましょう。
キター!!!
認証のタイミング
実のところ「認証」で説明したロジックですが、最初は事前に行っていました。
しかしトリガーセット後、フォームを送信して試した所、エラーが発生していました。
調べた結果、「認証」で行っていることを、もう1度行うことで、正しく実行することができました!
トリガー設定で、権限が一旦クリアされてしまうんでしょうかね……
新たに作る場合は、コレを行ってから試せばOKだと思います!
参考
こちらを参考にしました。ありがとうございました!
あとがき
これで問合せされたらSlackに通知が来る!
こういう設定をしておけば、あとあと何かあったときに楽ちんですしね。
今回はSlackと連携しましたが、別のモノと連携して、フォームで送信したものを「ナニカ」する。
なんてこともできちゃいますね!