🦔

Botの作り方(LINE Bot+GAS)

2022/10/29に公開約5,500字

この記事は?

LINEアカウントを作って、ユーザーがチャットに書いたテキストを元に自動で答える仕組みを構築する方法をまとめました

対象読者

  • LINE Botを作ってみたいと思っている方
  • GASでAPIを作ってみたいと考えている方
  • 少しプログラムをかじったことがある人
    ※ JavaScript の処理の細かい補足は記載していません

必要なアカウント

  • LINE公式アカウントのフリープラン
  • LINE Developers
  • Googleのアカウント

目次

  1. LINEアカウントの作成と準備
  2. GASでAPI作成
  3. LINE Botの設定
  4. (応用編)LINEアカウントのリッチメニュー作成
  5. 最後に

LINEアカウントの作成と準備

LINEアカウントを作り、Botを作り始めるための前準備を行う
※ LINE Developers のアカウントを登録し、ログインしておくこと

LINEのアカウント作成


LINE公式アカウント作成画面

アカウントは特筆することはないので、画面に従って作成する
フリープランは月1000件の通知まで無料!
(※ 全ユーザに対してなので、100人友達登録されていると月10件まで可)

応答モードの設定

「応答モード」をBotにすると、ユーザが入力した内容を元に応答を返すようになります
入力されたテキストをAPIに送り、その内容を元にメッセージを表示するので「応答メッセージ」はオフにします

Messaging APIの準備

Messaging API を利用すると、LINEアカウントと用意したAPIとやり取りができるようになります
詳細な設定は、「LINE Developers」から行う必要があります

Messaging APIの設定

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Messaging APIの「access token」がないとAPIとやり取りができないので、「access token」を作成して保存しておきます(重要なトークンなので一般公開はしないように

GASでAPI作成

今回はサンプルなので純粋な「Apps Script」を使ってAPIを作成します

Apps Scriptの作成

マイドライブの「+新規」からApps Scriptを選択する

コード記述

LINE Bot からのアクセスは Post 通信で行われます
そのため、doPostメソッドを作成します

main.gs
function doPost(e){
  const replyToken= JSON.parse(e.postData.contents).events[0].replyToken;
  if (typeof replyToken === 'undefined') {
    Logger.log('replyTokenなし')
    return;
  }

  const user_message= JSON.parse(e.postData.contents).events[0].message.text
  let message = ''
  switch (user_message) {
    case 'サンプル':
      message = 'サンプル入力ありがとう!'
      break
    case 'テスト':
      message = 'テスト入力ありがとう!'
      break
    default:
      message = 'サンプル・テストを入力してください'
  }

  const url = 'https://api.line.me/v2/bot/message/reply'
  const channelKey = '「access token」'
 
  const messages = [{
    'type': 'text',
    'text': message,
  }]
 
  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + channelKey,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': messages,
    }),
  })
}

上記のソースでは、「サンプル」もしくは「テスト」とユーザーがチャットに記述したときに、適切なメッセージを返すサンプルになります
※「access token」には Messaging APIのaccess token を設定してください

細かくはリファレンスを確認してみてください

上記が終わり次第、「実行」して必要なアクセス権をつける必要があります

※ 実行後、上記ソースはデバッグに対応していないのでエラーになります

デプロイ(APIの公開)

ソースを記述して終わりというわけにはいかず、APIを公開する必要があります
「アクセスを承認」ボタンが出てきたら承認してください
※ 全員に公開するとAPIのURLを知っているとアクセスされてしまいますので、 本番運用する際はセキュリティ面に考慮してください


デプロイが完了したらウェブアプリのURLをコピーしてください

LINE Botの設定

Messaging APIにWebhookを設定


LINE Developers の Messaging APIのWebhookのEditから編集する


Webhook URLを設定した後は、Use Webhook をONにする

LINE Bot の動作確認


LINE上でメッセージを入力すると、APIが値を返します
これで一通りの開発が終わりました!

(応用編)LINEアカウントのリッチメニュー作成

毎回ユーザに文字を入力してもらうのはユーザビリティ的にどうなの!?
とか、LINEの公式アカウントでよく見るメニュー欄あれって作れるの?
という部分に対しての応用編

リッチメニューを作成

基本設定

タイトルとリッチメニューの表示期間を指定します


(カレンダーを見る限り、9999年みたいな設定はできない模様)

コンテンツ設定

メニューの構成


テスト、サンプル用のメニューを作成するので、上記のように指定します


画像を作成でボタンを作ります(画像があれば画像ULでも可)

作り方は省略しますが、直感的に操作できるUIなので可能だと思います

メニューにアクションを設定


リンクやクーポンなども指定できるが、今回はテキストを設定します
こうすると、メニューのボタンを押すだけでテキストが送信されるようになります

問題なければ「保存」します

リッチメニューの動作確認


リッチメニューは現在(2022/10/29現在)PCには対応していないため、動作確認はスマホから行う必要があります
ポチっとメニューを押して動作すれば、完成です!

最後に

個人利用のLINE Botが欲しくて、昨日初Botを作成しました
一度作ってみて仕組みがわかると、案外着手しやすいと感じたので記事にしてみました

この記事が誰かの参考になったら幸いです

Discussion

ログインするとコメントできます