lisz-works

プログラミングと興味を貴方に

問合せフォーム→Slack!フォーム作成・スクリプト作成/設定してみた!

【スポンサーリンク】

Google Apps Script

Googleフォームで作成した問合せ画面を、Google Apps Scriptを使って「問合せが来たらSlackで通知」を作ってみました!

Googleフォームの作成からスクリプト作成と設定をして、Slackに通知されるまでを書きます!

注意点

どうやら「フォーム」と「スプレッドシートから作るフォーム」は少し違うようです。

今回は「フォーム」をそのまま作成した場合ですので、ご注意くださいませ。

フォームを作る

Googleドライブの新規作成から、フォームを作成しましょう!

まずは対象となるフォームを作っていきます。
既にある場合は飛ばしてくだい。

それっぽいものをこんな感じで作りました。

フォーム

各フォームの設定

各フォームは

  1. お名前: 記述式
  2. メールアドレス: 記述式
  3. お問い合わせ内容: 段落

お問い合わせは「段落」にすることで、複数行入力できるようにしています。

メールアドレスの回答検証

メールアドレスは、メニューから「回答の検証」を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()の

  1. url変数に、SlackのWebHook URLを入れる
  2. channel変数に、Slackのチャンネル名を入れる

あとは

  • onFormSubmit()の「msg変数」が、Slackに送信するメッセージ
  • createPayload()の「username要素」が、bot名
  • createPayload()の「icon_emoji要素」が、botのアイコン

なので、お好きに編集すればOKです。

トリガーの設定

トリガーとはイベントの登録的なものです。
「あることが起きた」→「この関数を実行」的なことをしてもらうための設定です。

このボタンを押すか、編集/現在のプロジェクトのトリガーを押しましょう。

現在のプロジェクトのトリガー

「G Suite Developer Hub」というページに来ます。
以前まではスクリプト画面で設定を行っていましたが、変わったようです。

トリガー設定画面

右下にある「トリガーの追加」ボタンを押します。

トリガーの追加ボタン

こんな入力フォームが出ます。

トリガーの追加

このように変更します。

  1. 実行する関数を: onFormSubmit
  2. イベントの種類を選択: フォーム送信時

で、保存。

これで、フォームを送信したときに、onFormSubmit()がコールされます。

「外部サービスへの接続」について、また許可を求められるので、サクッと許可しましょう。

完了すると、こんな感じでトリガーが表示されます。

トリガー設定結果

認証

function test() {
  var form = FormApp.getActiveForm();
  var test = form.getItems();
}

「認証が必要です」ポップアップが出てくるので、「許可を確認」から認証を通しましょう!

許可を確認

アカウント選択して……

アカウント選択

アクセスのリクエストを「許可」。

許可

とりあえずこれでOKです。

試す

フォームの画面に戻り、プレビューから作成したフォームを表示させます。 そして適当に入力して、送信しましょう。

フォーム入力→送信

キター!!!

Slack受信結果

認証のタイミング

実のところ「認証」で説明したロジックですが、最初は事前に行っていました。

しかしトリガーセット後、フォームを送信して試した所、エラーが発生していました。

調べた結果、「認証」で行っていることを、もう1度行うことで、正しく実行することができました!

トリガー設定で、権限が一旦クリアされてしまうんでしょうかね……

新たに作る場合は、コレを行ってから試せばOKだと思います!

参考

こちらを参考にしました。ありがとうございました!

qiita.com

qiita.com

あとがき

これで問合せされたらSlackに通知が来る!

こういう設定をしておけば、あとあと何かあったときに楽ちんですしね。

今回はSlackと連携しましたが、別のモノと連携して、フォームで送信したものを「ナニカ」する。

なんてこともできちゃいますね!