「5分でできるLINEBot」にローディングアニメーションを追加する

はじめに

2024/4/17 に、LINEBotに回答待機中のときのローディングアニメーション機能が追加されました！

チャットボットを作っていて、AIに回答を作ってもらっているとどうしても返事待ちの時間があるのでこれはめちゃくちゃありがたいですね！

詳細についてはこちらを確認してください！

というわけで以前書いたこちらの記事に、ローディングアニメーション機能を追加する手順です。

実装

まずは下準備

こちらの記事を参考にAI応答するLINEBotをGASで作りましょう。

GASに関数を追加

GASの一番下でいいので、以下のスクリプトをコピペしましょう。

// ローディング機能
function loading(userId) {
  UrlFetchApp.fetch('https://api.line.me/v2/bot/chat/loading/start', {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'chatId': userId,
      'loadingSeconds': 20
    }),
  });
}

使わさせていただいている ライブラリ にはまだ機能がないようなので、応急処置の対応です。
そのうちプルリクエスト出してみます。

getAIAnswer関数を呼び出す直前に上記を追加

// 略 ~~~~~~~~~

function doPost(e) {

// 略 ~~~~~~~~~

  // 返信するメッセージを作成
  loading(json.events[0].source.userId) // <= getAIAnswerを呼び出す直前のこの位置に追加 ！！！！！！！！！！！！
  const receivedMessage = json.events[0].message.text;
  messages = getAIAnswer(receivedMessage)

  // line-bot-sdk-gas のライブラリを利用しています ( 
  https://github.com/kobanyan/line-bot-sdk-gas )
  const linebotClient = new LineBotSDK.Client({ channelAccessToken: CHANNEL_ACCESS_TOKEN });

  // メッセージを返信
  try{
    linebotClient.replyMessage(replyToken, messages);
  }catch(e){
    // うまく動作しない場合は、エラーが発生していないか確認してみましょう
    log_to_sheet("A", e)
  }

  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
// 略 ~~~~~~~~~

改めてデプロイしましょう

以上で完成です！
忘れないように改めてデプロイしておきましょう！

完成！

わりとさっくりできましたね！
AI応答を作るときには標準で欲しい機能だなと思ったので、以下の記事のGASのテンプレートにはデフォルトで入れておきます！