【LINEBot制作シリーズ1】GASで作るおうむ返しBot編

date
Dec 4, 2023
slug
create-linebot
status
Published
tags
Tutorial
summary
チュートリアルの進行を支援してくれるオリジナルGPTも掲載しています。
type
Post
📄
本記事についての注意書き
  • 章立ての構成です。各章の中身は▶︎をクリックで展開できます
  • 極力専門用語は避けていますが、よくわからない言葉に出くわした際は都度調べること
  • 初学者の人へ: とりあえず進めるという使い方もありです。その場合は各章の冒頭に掲載している完成版のコードを活用してください。

Chap.1 成果物

制作にあたり利用するサービスはGASとLINE Messaging APIです。どちらも無料です。

Chap.2 下準備


1/ Botアカウントのセットアップ

開発者用ページから、Botアカウントを作成します。
各自のLineアカウントでログインしてください。ログインの場所が分かりにくいので注意。
notion image

Providers(提供者)の作成

自分のハンドルネームなどを入力し、「Create」で作成できます。
notion image

Messaging API channelの作成

notion image
このようなボタンがあるので押します。その後現れるフォームには適当な値を入力してください。

Channel access tokenの発行

Channelの作成が完了すると、Channelの情報について閲覧・編集ができるようになります。
「Messaging API」という項目からChannel access tokenを発行しておきます。後ほど使用するので、クリップボードにコピーしておきます。

その他の設定

また、Channelの設定を以下のように設定しておきます。
  • Auto-reply messagesをオフ
  • Greeting messagesをオフ

2/ GASプロジェクトの作成

続いて、GASプロジェクトを新しく作成します。このGASプロジェクトは後ほどBotアカウントと連携させることになります。
GASの利用にはGoogleアカウントが必要になります。

3/ プロパティを定義

まず2つのプロパティを定義しておきます。
  • lineAccessToken: 先ほど取得した文字列。LineMessagingAPIを利用するための鍵のような役割
  • lineEndpoint: LineMessagingAPIを叩くためにアクセスするurl

スクリプトプロパティの設定

エディタが開けたら、左サイドバーの歯車マークから「プロジェクトの設定」へと移行します。「プロパティ」にはlineAccessToken(タイポしないよう注意)、「値」には先ほど発行したChannel access tokenを入力しておきます。
入力した例
入力した例
 
使用するサービスのアカウントセットアップが主です

Chap.3 前提知識

なるべく簡潔に、かつ3つに絞っています

1/ Line Messaging APIでLINEアカウントを操作する

Line Messaging APIとは

APIが公開されています。通常スマホアプリを通して手動でLINEアカウントを操作されますが、このAPIを用いればプログラムに操作させることが可能になります。

Line Messaging APIの仕様

Line Developpersの公式ドキュメントに仕様がまとまっています。今回は、画像の箇所に書かれていることと全く同じ処理をGASスクリプトで書いていきます。
https://developers.line.biz/ja/reference/messaging-api/#send-reply-message

2/ 受け取ったメッセージイベントを処理するdoPost

これから制作する 「GASプロジェクトとLINEアカウントは「Webhook」という仕組みによって紐付けられます。
誰かからBotアカウントに対してメッセージが送られると、doPostという関数が呼ばれることになります。そしてユーザーから送られたメッセージは、メッセージイベントとして受け取ることができます。
受け取ったメッセージイベントは、以降eventとして扱います。

3/ 受け取るメッセージイベントの取り扱い

JSON形式のデータはJavascriptでは取り扱えないので、 JSON.parse()で変換する必要があります。
💡
JSON APIによるデータのやり取りにおいて、一般的に用いられるデータ形式がJSONというデータ形式です。 今回利用するLine Messaging APIでもJSONが用いられています。
例えば、スーパマリオでお馴染みの、ジャンプの得意な赤いおじさんをJSONで表現しようとするとこんな感じです。
本題のコーディングの前に最低限抑えて欲しい前提知識です。

以上、長くなりましたが、導入はここまでとなります。
実際にコードを書いていきましょう。
💬
読み進めるにあたって
  • コードの変更が発生する箇所については、その差分を太字で表記しています(Notion版限定)
  • 全てLINE Messaging APIの公式ドキュメントに沿って制作しています。適宜こちらのページに目を通すことで、理解の助けになると思います。
以下、手順の解説です。

Chap.4-1 無条件に「こんにちは」を返答させる

完成版のコードを見る


以下コードの解説です。

doPost()で行う処理

👉
該当コード
doPostでは次の3つの処理を行なっています。
doPost()で行う処理
  1. メッセージイベント(以下、event)の解析
  1. メッセージイベントからreplyTokenを抽出
  1. LINE送信のリクエスト(LineMessagingAPI)を叩く
順次解説していきます。

1/ eventの解析

JSONというデータ形式です。生のJSONデータは、Javascriptで取り扱うことができません。
メッセージイベントから抽出するデータは次の1つです。

2/ replyTokenの取得

👉
該当コード
eventから必要なデータを抽出します。このステップで必要なデータはreplyTokenのみです。
replyTokenとは ランダムに生成された文字列です。メッセージに対して返信するための合鍵のような役割を果たす。

3/ メッセージの送信

最後にメッセージを送信します。この工程をそのまま記述するとコード長くなるのでsendLineMessage()という関数を新たに作り、その関数内に処理を切り分けるということをしています。

sendLineMessageで行う処理

LineMessagingAPIの機能を用いることで、メッセージを送信しています。
👉
該当コード
前提としてAPIリクエストに必要なパラメータは次のとおり
リクエストに必要なパラメータ
  1. リクエストの送信先URL
  1. リクエストヘッダ
  1. リクエストメソッド(GET or POST or DELETE or PUT)
  1. リクエストボディ
  1. replyTokenを含んだメッセージデータ
1は下準備の段階ですでに定義してあります。そのほかのパラメータを定義していきます。

1/ リクエストヘッダを定義する

👉
該当箇所
公式ドキュメントの仕様通りに定義してます。
notion image

2/ リクエストボディを定義する

👉
該当箇所
公式ドキュメントの仕様に沿って、以下の2つのプロパティを定義しています。
notion image

3/ メッセージ送信のリクエストを叩く

LineMessagingAPIを利用して、メッセージ送信のリクエストをします。
👉
該当箇所
リクエストには次の3つが必要でした。
リクエストに必要なパラメータ
  1. リクエストの送信先URL
  1. リクエストヘッダ
  1. HTTPメソッド(GET or POST or DELETE or PUT)
  1. replyTokenを含んだメッセージデータ
そしてリクエストを叩くにはGASに標準で搭載された機能であるUrlFetchApp.fetchという機能を使用します。公式ドキュメントの解説を参照してみましょう。
前段階として、送られたメッセージに関わらず「こんにちは」と返答させてみましょう

Chap.4-2 おうむ返しさせる

完成版のコードを見る


1/ eventからテキストデータを抽出し、sendLineMessage()に渡す

👉
変更箇所(太字)

eventObjectからメッセージ文を取り出す

で取り出す事が可能です 。今回の例では取り出した文字列はmessageTextとして定義しています

sendLineMessage()に渡す

実際にリクエストを送る処理はsendLineMessage()内で行なっています。先ほど抽出した文字列をsendLineMessage()で取り扱うため、パラメータを追加します(値渡し)。
 

3/ 抽出したテキストデータを送信する

1で取得したメッセージ文をsendLineMessage()に渡します。sendLineMessage()にパラメーター(引数)を追加します。
「こんにちは」の代わりに抽出したテキストデータを送信します。 具体的にはsendLineMessage()内で、送信するメッセージデータを定義しているこの箇所です。
👉
変更箇所(太字)
 
送られたメッセージと同じメッセージを返答させます

Chap.5 デプロイとWebhookの設定


1/ GASプロジェクトのデプロイ

GASプロジェクトを開いた後、右上に「デプロイ」と表記されたボタンがあるので、これをクリックします。
デプロイ設定
  • 種類: 「WEBアプリ」
  • 次のユーザーとして実行: 「自分」
  • アクセスできるユーザー: 「全員」
途中こんな画面になると思いますが、正常です
notion image
「advanced」→「Go to あなたのプロジェクト(unsafe)」とします。その後 許可するをクリック。
デプロイが完了するとurlが発行されるのでこれをコピーしておきます。

2/ LINE Botとの紐付け(Webhook)

発行されたurlを設定することで、接続します。
設定
「Messaging API」のページにある、「Webhook Settings」を次のように設定します。
  • 「Webhook URL」: デプロイ時に発行されたurlを入力
Webhookの設定を行って、LINEとGASプロジェクトを連携させます。
Use webhookのトグルをオンにしておく
Use webhookのトグルをオンにしておく
最後に記述したスクリプトをアプリケーションとして公開し、Lineアカウントと連携させます。
 

© Yusuke Sugino 2023 - 2024