LINE Bot Designerで、LINE Botをアレンジしてみよう！

本エントリーはAdvent Calendar 2021[「初めてのアドベントカレンダー Advent Calendar 2021」](https://qiita.com/advent-calendar/2021/first-try)の23日目のエントリーです！

#はじめに
こんにちは！kawazapと申します

今回は「Teamうどん」さん主催のアドベントカレンダー[「初めてのアドベントカレンダー Advent Calendar 2021」](https://qiita.com/advent-calendar/2021/first-try)の23日目にエントリーしました

まずは、掲載遅くなってしまい申し訳ございません！
Qiita記事を書くのも初めてなので、読みづらいところあると思いますがよろしくお願いします！

#この記事の対象者
- LINEBot触ったことない方〜オウム返しBotの次の段階を試してみたい方
- GASを使って、LINEBotを作成してみたい方

#この記事通りに作って最終的にできるもの
以下の画像のように、バブルメッセージを利用してニュース配信をするLINEBotの作成を目指します
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/a7cfcf50-faea-e7b1-cd56-c466873ea6c7.png" width=50%>



#LINEBot作成の準備(LINEBotを作成したことある方は飛ばしてもらっても大丈夫です)
 [LINE Developers](https://developers.line.biz/ja/)へログイン

 Console menu TOPの下にある、Providersで「Create」を押すことで、プロバイダーを新規作成してください。(作成者のようなものです)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/d04e2934-2871-768f-aa43-1af5c3fe31c5.png" width=50%>
下準備は以上になります！

#オウム返しするLINEBot作成(作ったことある方は飛ばしてもらって大丈夫です)
**LINE Developersの設定**
自分の作成したプロバイダーを選択すると、以下の図のような画面になるかと思います。今回は、「**Create a Messaging API channel**」を選択してください

「Create a new channel」の画面になり、自分の作成するChannelのnameなどの入力及び利用規約の承認してください。

作成したMessaging APIの設定画面が出ます。Channel access tokenは、後で使うのでどこかにメモしておいてください。
**Channel access token**の発行の仕方
「**Messaging API**」の項目の下で、**Channel access token**という項目があります。「Issue」ボタンを押すと発行されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/1672dc74-a654-5172-0aa5-e5336e4afddb.png" width=50%>
下準備は以上になります！



**Google Apps Scriptの編集**
Google Driveのお好きなフォルダ上で、「新規作成」→「その他」→「Google Apps Script」を選択してください

以下のコードを、エディタに貼り付けてください。また、LINE DevelopersのところでメモしてもらったChannel access tokenを、1行目の**CHANNEL_ACCESS_TOKEN**のところに貼り付けてください。

```
var CHANNEL_ACCESS_TOKEN = 'CHANNEL_ACCESS_TOKEN'; 
var line_endpoint = 'https://api.line.me/v2/bot/message/reply';

function doPost(e) {
 var json = JSON.parse(e.postData.contents);
 var reply_token= json.events[0].replyToken;

 //トークンが取得出来なかった場合何もしない
 if (typeof reply_token === 'undefined')return;
  
 //送られたメッセージ内容を取得
 var message = json.events[0].message.text;  
  
 //テキストでない場合はそのままにする
 if(typeof message=="undefined")return;
 
 //メッセージを返信
 UrlFetchApp.fetch(line_endpoint, {
   'headers': {
     'Content-Type': 'application/json; charset=UTF-8',
     'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
   },
   'method': 'post',
   'payload': JSON.stringify({
     'replyToken': reply_token,
     'messages':[{
       type:'text',
       text:message,
      }],
   }),
 });
 return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
```
LINE DevelopersのところでメモしてもらったChannel access tokenを、1行目の**CHANNEL_ACCESS_TOKEN**のところに貼り付けてください。

保存をしてもらった後、「公開」→「ウェブアプリケーションとして導入...」をクリックする

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/593fae6a-7c33-a6ab-ed2e-ce0777e40c7b.png" width=50%>
下準備は以上になります！

「Deploy as web app」という画面では、以下の項目を変更してください
- **Project version:適宜新しいバージョンにしてください**(ここのバージョン変更がないと更新されないです！この記事で一番伝えたいこと)
- Who has access to the app:Only my self → Anyone, even anonumous

設定変更後、「Deploy」をクリックすると、初めての場合は、許可承認画面になりますので、許可してください。
「**このアプリは、Googleで確認されていません**」という表示が出ますが、「詳細」をクリックして「(****)(安全でないページ)に移動」を押してください。

うまくいけば、以下の画面のようにURLが表示されるので、このURLをメモしておいてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/07a18107-9014-67ed-91bf-fcaee677cfb6.png" width=50%>

**LINE Developersに戻ります**
Message APIの中のWebhook settings、Webhook URLに先ほどメモしたGASのURLを添付してUploadしてください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/be6a5de6-e609-aaa6-bb77-a8885e87f528.png" width=50%>

Verifyを押してうまく言えば"Success"と表示されます！

最後の仕上げです！LINE DevelopersのMessaging APIの中の項目で、LINE OFFcial Account featuresで、**Auto-reply messages**横の**Edit**をクリックしてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/2976ee33-9e29-63dc-7df6-2473ad545c7f.png" width=50%>

応答設定が表示されたら、下の項目の通りに設定して下さい。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/f23425d1-b391-1952-b2f4-ea721a6940e2.png" width=50%>

完成です！Messaging APIのところにあるQR codeのところをLINEのところで読み取ってもらえば、遊べると思います！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/17bab8be-10cd-a057-ef85-650f583ab3c9.jpeg" width=50%>

##バブルメッセージを利用したLINE Bot作成
次のステップとして、今回は企業のLINEBotなどでよく使われるバブルメッセージを使ってニュース配信するLINEBotを作ってみようと思います。

**下準備**
下準備として、[LINE bot designer](https://developers.line.biz/ja/services/bot-designer/)をダウンロードしてください。このアプリケーションは、LINEBotのデザインをしたいときに、GUI上で編集を行い、その時のjsonを生成してくれるものです。
この使い方に慣れると色々と幅が広がると思い、今回ニュース記事で用いられるデザイン例を元に使い方を紹介します。

**LINE Bot designer**
プロジェクトを新規作成後、Bot名、会社名、カテゴリーなどを設定してください。
今回は、Flex Messageの中のバブルメッセージを使います。
左側の鉛筆などの図が書かれているところの二段目を選択すると、Flex Messageが開けます。テンプレートで、「ニュース」を選択します。


- ヘッダー > テキストのところで、タイトルを変更
- 本文 > ボックス > 画像のところで、表示する画像の変更
    - URLのところに関しては、[LINE Botで画像を送信するときはNetlifyを使え！(Googleドライブがダメな理由)](https://www.ultra-noob.com/blog/2020/94/)
を参考にされるといいと思います。
- 本文 > ボックス > テキストの変更
    - テキストにリンクを関連づける際には、プロパティ内の「アクション」を有効化し、タイプ「URLアクション」に関連づけるURLを添付してください。



左側の一番下のトーク画面を押すと、以下の画像のように試験的な動作確認もできます。
うまく動けていそうだったら、作成画面の右下にあるJSONを使いますので、別なところにコピーしておいてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/f7e0ae3f-8fd3-ffdc-cdd2-88d9804ac955.png" width=50%>

**LINE Developersでの作業**
オウム返しBotの時と同様に、新規でCreate a Messaging API channelの作成、アクセストークンの取得をしてください。

**Google Apps Scriptの編集**
新規で、ファイルを作成します。
以下のプログラムを貼り付けて、「ここにJSONをコピー」のところに、LINE Bot designerで作成したjsonを貼ってください。
その後の動作は、オウム返しBotと同じです。

```
//LINE Developersで取得したアクセストークンを入れる
var CHANNEL_ACCESS_TOKEN = 'CHANNEL_ACCESS_TOKEN'; 
var line_endpoint = 'https://api.line.me/v2/bot/message/reply';

//ポストで送られてくるので、送られてきたJSONをパース
function doPost(e) {
  var json = JSON.parse(e.postData.contents);

  //返信するためのトークン取得
  var reply_token= json.events[0].replyToken;

  //送られたメッセージ内容を取得
  var payload = JSON.stringify({
      "replyToken":reply_token,
    "messages": [{
      'type': 'flex',
      'altText': 'NEWS test',
      'contents'://ここにJSONを貼り付ける   
      }]
  });

  // メッセージを返信    
  UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': payload
  });
}
```
うまく機能したら、以下の画像のようになります。(GIF画像が良かったのですが、アップロード容量制限を超えるみたいなので、1月になったから修正します)


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665781/a7cfcf50-faea-e7b1-cd56-c466873ea6c7.png" width=50%>

##終わりに
以上で、LINE Botの作り方についての説明を終わります！
LINE Bot designerでは他にも色々なデザインができるので、ぜひお試しください！

##参考記事
[Google Apps Scriptでオウム返しLINE Botを作る。](https://qiita.com/tetrapod117/items/e7b48485c98f6b88f311)
[LINE Botで画像を送信するときはNetlifyを使え！(Googleドライブがダメな理由)](https://www.ultra-noob.com/blog/2020/94/)