LINE BotにTypeScriptでローディングのアニメーションを表示

はじめに

2024/04/17にLINE Messaging APIにローディングアニメーション表示機能が追加されました！

https://developers.line.biz/ja/news/2024/04/17/loading-indicator/

リファレンスはこちら

https://developers.line.biz/ja/reference/messaging-api/#display-a-loading-indicator

まだ、Bot SDKも対応していない(2024/04/17現在)のでSDKなしでTypeScriptで実装してみたいと思います。

追記
大変失礼しました。SDK対応しているようでした。最近はSDKに即反映されるようになったんですね...
実装もSDKを利用したものに修正させていただきました。

挙動

実際に動かしてみたときの動画はこちらになります。

指定した秒数だけローディングアニメーションが表示され消えます。
また、表示中にLINE公式アカウントからメッセージが届くと自動的に消えます

準備

LINE Bot SDKをインストールします。

$ npm install @line/bot-sdk

LINE Bot SDKのver.9.2.0以上が必要なので、それ未満の人は適宜upgradeしてください。

実装

下記のコードでローディングのアニメーションを表示することができます。
{{YOUR_CHANNEL_ACCESS_TOKEN}} と {{YOUR_USER_ID}} は適切な値に書き換えてください。

const main = async () => {
  const client = new messagingApi.MessagingApiClient({
    channelAccessToken: {{YOUR_CHANNEL_ACCESS_TOKEN}}
  })
  await client.showLoadingAnimation({
    chatId: '{{YOUR_USER_ID}}',
    loadingSeconds: 40
  })
}

main()
  .then(() => console.log("Done"))

まとめ

実装も簡単ですね。
裏で生成AIが動くようなBotの場合、どうしても返答に時間がかかってしまいがちなので、ローディングアニメーションを利用してあげるとユーザー体験が向上するかと思います。

どんどん活用していきましょう。