GoogleフォームとSlackとメールをGASで連携する【後編 フォームで入力された内容をIncoming Web Hookを使ってSlackで通知する】

この記事は、[GoogleフォームとGメールを連携する](https://qiita.com/kisaichi07/items/06949dccc8254f1355eb)の続きです。

- 前編: [GoogleフォームとGメールを連携する](https://qiita.com/kisaichi07/items/06949dccc8254f1355eb)
- 後編: フォームで入力された内容をIncoming Web Hookを使ってSlackで通知する（この記事）

# この記事でやること
Googleフォームで送信された内容をGAS経由でIncoming Web Hookを使ってSlackに送ります。

# Slack 
Incomming Web hook をアプリに追加
## 1. Slack左側のメニューの下にある、「App + 」をクリック
<img width="304" alt="スクリーンショット 2020-05-14 22.29.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/db3fc14b-741c-65ba-832a-65ae39fa1f93.png">

## 2. 右上のAppディレクトリをクリック
<img width="1076" alt="スクリーンショット 2020-05-14 22.29.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/85024c6d-7c99-61bb-2e91-56c06fac2db7.png">

## 3. Incoming Web hookを探して選択
<img width="976" alt="スクリーンショット 2020-05-14 22.30.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/7480e268-a0f7-6f8a-c62a-c4582191643b.png">

## 4. Slackに追加をクリック
<img width="736" alt="スクリーンショット 2020-05-14 22.30.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/115f9d68-c59e-226c-9408-b3d7e4c02a03.png">

## 5. チャンネルを選択し、Incoming Webhook インテグレーションの追加
<img width="976" alt="スクリーンショット 2020-05-14 22.31.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/6dc81e63-c23b-303f-488a-4a525e3a4b6e.png">

## 7. Web hook URLをコピー
<img width="1011" alt="スクリーンショット 2020-05-14 22.38.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/2e6a1315-c517-7b59-c9a2-186c074a74e4.png">


## 8. 名前やアイコンを設定する
<img width="1008" alt="スクリーンショット 2020-05-14 22.32.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/19c21406-71a9-396e-9dbb-7395923db61b.png">


# GAS

## Web hook URLを書き換える

下記のコードを`GmailApp.sendEmail(sendToAddress,mailTitle,mailMessage,option);`の下に付け足し、`YOUR WEB HOOK URL`を、先程コピーしたWeb hook URLに変更してください。

``` javascript
 // Slackへの通知
 var slackMessage = {
    method: 'post',
    contentType: 'application/json',
    payload: '{"username" : "お問い合わせBOT","text":"'+mailMessage+'"}'
  };
 
  UrlFetchApp.fetch("YOUR WEB HOOK URL", slackMessage);

```

## 外部サービスとの連携を許可
[GASからメール送信することを許可する](https://qiita.com/kisaichi07/items/06949dccc8254f1355eb#gas%E3%81%8B%E3%82%89%E3%83%A1%E3%83%BC%E3%83%AB%E9%80%81%E4%BF%A1%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%82%92%E8%A8%B1%E5%8F%AF%E3%81%99%E3%82%8B)
の手順を参考に、外部サービスの連携を許可してください。

# 完成！
これで、Slackにも通知がいくようになりました！

# コード全文

```javascript:GAS
FormApp.getActiveForm();

function sendForm(e) {
  var sendToAddress ="あなたのメールアドレス";
  var serviceName = "【すごいアンケート】";
  var mailTitle = serviceName +'に関する新規のお問い合わせがありました';//メールのタイトルを設定
  var mailMessage = serviceName +'に関する新規のお問い合わせがありました。\n\n';
  var option = {};
  option.from = sendToAddress;
  

  var list=[];
  var itemResponses = e.response.getItemResponses();
  
  //フォームの項目に記述された内容を取得し、itemResponsesとliｓｔ
  itemResponses.forEach(function(itemResponse){
    mailMessage += '【' + itemResponse.getItem().getTitle() + '】\n'
    mailMessage += itemResponse.getResponse() + '\n\n'
    list.push(itemResponse.getResponse())
  });
  
  //フォームのメールアドレスと名前を取得し、それぞれの変数に格納する
  var userName = list[0]; 
  var userMail = list[1];
  
  // 自動返信メール件名
  var subject = serviceName +'にお問い合わせいただきありがとうございました。';
      
  // 自動返信メール本文
  var body = userName + '様\n' +
    '\n' +
    'この度は'+serviceName +'にお問い合わせいただき、誠にありがとうございました。' +
    '\n' +
    '後日、弊社担当よりご連絡させていただきますので\n' +
    'よろしくお願い申し上げます。\n' + 
    '\n' +
    '─────────────────────────\n' +
    '署名をココに\n' +
    '─────────────────────────\n' +
    '\n';
  
  // メール送信
  GmailApp.sendEmail(userMail,subject,body,option);
  GmailApp.sendEmail(sendToAddress,mailTitle,mailMessage,option);
 
 // Slackへの通知
 var slackMessage = {
    method: 'post',
    contentType: 'application/json',
    payload: '{"username" : "お問い合わせBOT","text":"'+mailMessage+'"}'
  };
 
  UrlFetchApp.fetch("YOUR WEB HOOK URL", slackMessage);
  
  
}


```