コードで書くGoogleForms(自動でLine通知が来る方法)

**Googleフォーム**で入力がされたら**LineBot**から通知が来るように設定する方法を書いていきたいと思います！:relaxed:

####`今回すること`

**<応募フォーム(GoogleForms)>**
<img width="400"alt="sheet1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/3fad2ec0-2c4a-318b-28f0-f0aab17937be.png">
**<ライン通知>**
<img width="400"alt="sheet1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/0d03c527-8136-6f8a-c728-613ff76dca33.jpeg">

**GoogleAppsScript**と**LineMessagingAPI**を使い、**Googleフォーム**で入力されたら即時に**Line**アカウントに通知が来るようにしていきたいと思います🌞

##準備編
・**GoogleForms**作成
・<a href="https://qiita.com/uizprg/items/787ed90517c37a14d2b0#%E6%BA%96%E5%82%99%E7%B7%A8">スクリプトエディタを開く</a>
・<a href="https://developers.line.biz/ja/">LineDeveloperにログイン</a>

##実践編(LineBOT作成)


①<a href="https://developers.line.biz/console/">Developerのコンソールに行く</a>
<img width="300"alt="sheet1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/77cb7085-e9c5-83b2-60bf-36ba4999f07d.png">
②**Messaging API**を作成
<img width="250"alt="sheet1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/e3d5594a-c154-0673-7a8b-f7fa8d3dfcaa.png">
③**『Channel name』**、**『Channel description』**、**『Category』**、**『Subcategory』**などを入力
④**『MessagingAPI設定』**→**『QRコード』**でLineBOT追加

##実践編(エディタ)
######`エディタ①`
```javascript

function notifiLineBot(event){

var itemResponse = event.response.getItemResponses();
var name = itemResponse[0].getResponse();
var roomNumber = itemResponse[1].getResponse();
var position = itemResponse[2].getResponse();
```
ここまでは<a href="https://qiita.com/uizprg/items/787ed90517c37a14d2b0#%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF">コードで書くGoogleForms(自動返信・自動受付メール編)</a>と一緒！！
※詳細説明はここで見てね

######`エディタ②`

```javascript

var accessToken = '自分のアクセストークン' ; 
var userId = '自分のユーザーID';
var url = 'https://api.line.me/v2/bot/message/push';
```
・<font color="MediumBlue">**自分のアクセストークン**</font>：**『MessagingAPI設定』**→**『チャンネルアクセストークン』**で取得

<img width="600"alt="sheet1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/5d26f1b6-fa1e-3d62-6edd-7c634c4e2985.png"><img width="600"alt="sheet2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/ddfeb619-0208-c4bd-168a-36805a8e8f4f.png">

・<font color="MediumBlue">**自分のユーザーID**</font>：**『チャンネル基本設定』**→**『あなたのユーザーID』**で取得
<img width="600"alt="sheet2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/3d8ca22b-f9c3-711a-4147-b8441431e9f3.png">

・<font color="MediumBlue">**url**</font>：このリンクはフォームが送信された時にリクエストを送る（情報を投げる）場所です。
今回はLineの通知を送るという反応をするということなので**『Push』**の**『HTTPリクエスト』**をする。
『HTTPリクエスト』のリンクは<a href ="https://developers.line.biz/ja/reference/messaging-api/#send-push-message">LineDocument</a>から取得。

######`エディタ③`
```javascript

var headers = {
'Content-Type': 'application/json; charset=UTF-8' ,
'Authorization':'Bearer '+ accessToken 
};
```
<img width="600"alt="sheet2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/50fc1075-05c1-32bd-5ee3-e2169c63e359.png">

・<font color="MediumBlue">**headers**</font>：データーの処理する方法
・<font color="MediumBlue">**Content-Types**</font>：<a href ="https://developers.line.biz/ja/reference/messaging-api/#send-push-message">LineDocument</a>から引用
・<font color="MediumBlue">**Authorization**</font>：同様に<a href ="https://developers.line.biz/ja/reference/messaging-api/#send-push-message">LineDocument</a>から引用。**『accessToken』**は**エディタ②**で定義したもの

######`エディタ④` 

```javascript

  var message = '${name}様(RoomNumber:${roomNumber})からフォームの提出がありました。\n[${position}]としての参加希望です。'.replace('${name}',name).replace('${roomNumber}',roomNumber).replace('${position}',position);
  var pushData = {
      'to':userId,
      'messages' :[
        {
          'type':'text',
          'text':message
        }
      ]

  };
```

・<font color="MediumBlue">**message**</font>：LineBotが送るメッセージ
・<font color="MediumBlue">**replace.('${name}',name)**:</font>${name}の部分をname<font color="Teal">（ itemResponses[0].getResponse() ）</font>に置き換える
・<font color="MediumBlue">**\n**</font>：改行
・<font color="MediumBlue">**to**</font>：<a href="https://developers.line.biz/ja/reference/messaging-api/#send-push-messageF">[参考]</a>
<img width="600"alt="sheet2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/b61a3a6b-771b-9013-0962-c5707c879408.png">
・<font color="MediumBlue">**messages**</font>：<a href="https://developers.line.biz/ja/reference/messaging-api/#text-message">[参考]</a>
<img width="600"alt="sheet1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/820e715d-7bee-02b7-16bb-7e28618aa68c.png">

######`エディタ⑤`
```javascript

var options = {
'method':'post', 
'headers':headers,
'payload': JSON.stringify(pushData)
};

UrlFetchApp.fetch(url,options);
```
・<font color="MediumBlue">**options**</font>：googleAppsScriptでAPIを使用するのに必要な情報
・<font color="MediumBlue">**method**</font>：
<img width="300"alt="sheet1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/2467af9c-9a50-3cad-7685-2927b249d4e3.png">
・<font color="MediumBlue">**payload**</font>：**『pushData』****(エディタ④)**の情報を送る
・<font color="MediumBlue">**UrlFetchApp.fetch(url,options)**</font>：<a href="https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app">[参考]</a>　（情報を送るところ<font color="Teal">[url]</font>、送る情報<font color="Teal">[options]</font>)

######`エディタ(まとめ)`
```javascript

function notifiLineBot(event){

var itemResponse = event.response.getItemResponses();
var name = itemResponse[0].getResponse();
var roomNumber = itemResponse[1].getResponse();
var position = itemResponse[2].getResponse();

var accessToken ='自分のアクセストークン' ;
var userId = '自分のユーザーID';
var url = 'https://api.line.me/v2/bot/message/push';

var headers = {
  'Content-Type':'application/json; charset=UTF-8',
  'Authorization':'Bearer '+accessToken
  };

var message = '${name}様(RoomNumber:${roomNumber})からフォームの提出がありました。\n[${position}]としての参加希望です。'.replace('${name}',name).replace('${roomNumber}',roomNumber).replace('${position}',position);
var pushData = {
      'to':userId,
      'messages' :[
        {
          'type':'text',
          'text':message
        }
      ]

  };
var options = {
'method':'post', 
'headers':headers,
'payload': JSON.stringify(pushData)
};

UrlFetchApp.fetch(url,options);

}
```
##実践編(トリガー)
エディタだけだと、フォームを受け付けても自動で送信がされないのでトリガーの設定をする必要があります。トリガーに移る前に、**『control+S』**でセーブを忘れずに！
<img width="300"alt="sheet1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407730/568fcf00-9ea9-c91a-926e-0768ccbfbb96.png">

##おまけ(気をつけるべきエラー)
エディタ③の『Bearer』の後ろに半角スペースを忘れずに！😏

お疲れ様です🙌