Django ✕ LINE Messaging APIでローディングアニメーションを出す方法
LINE Bot開発では、ユーザーがボタンを押した後に処理に時間がかかる場面がありますよね。
こうした場面でローディングアニメーションを表示することで、「処理中である」ことをユーザーに視覚的に伝えることができます。
処理が無言で進むと、ユーザーは「反応してない?」と不安になることも。ローディングを入れるだけで、安心感とUXが大きく向上します。
この記事では、DjangoとLINE Messaging APIを使った開発で、処理中に下のようなローディングを表示する方法をご紹介します。

前提
この記事では以下の技術を使います:
- Django
- LINE Messaging API
設定の仕方
チャネルアクセストークンを設定する
.envファイルに記載した LINE_CHANNEL_ACCESS_TOKEN を、settings.py で読み込んで設定しておきます。
LINE_CHANNEL_ACCESS_TOKEN=チャネルアクセストークン
LINE_CHANNEL_ACCESS_TOKEN = os.environ.get('LINE_CHANNEL_ACCESS_TOKEN')
LINE_CHANNEL_ACCESS_TOKEN = settings.LINE_CHANNEL_ACCESS_TOKEN
ローディングアニメーションの関数を作成する
# ローディングアニメーションの関数
def start_loading_animation(user_id):
url = "https://api.line.me/v2/bot/chat/loading/start"
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {LINE_CHANNEL_ACCESS_TOKEN}"
}
data = {
"chatId": user_id,
"loadingSeconds": 5
}
response = requests.post(url, headers=headers, data=json.dumps(data))
return response.status_code, response.json()
loadingSecondsで何秒間表示するのか指定します。
ローディングのアニメーションは指定した秒数(5秒〜60秒)が経過するか、表示中にLINE公式アカウントからメッセージが届くと自動的に消えます。
Webhookの関数のところでローディング関数を呼び出す
ローディングアニメーションを特定のユーザーに送信するには、そのユーザーの LINE_ID が必要です。
Webhookで受信したJSONから line_id を抽出し、それを引数としてローディングアニメーション表示用の関数を呼び出します。
# webhookの関数
@csrf_exempt
def line_webhook(request):
body = json.loads(request.body.decode("utf-8"))
for event in body.get("events", []):
reply_token = event["replyToken"]
line_id = event["source"]["userId"]
start_loading_animation(line_id)
# ユーザーが初めて登録した場合
if event["type"] == "follow":
# Postback イベントの処理
elif event["type"] == "postback":
# ユーザーがメッセージを送信した場合
elif event["type"] == "message" and event["message"]["type"] == "text":
return JsonResponse({"status": "ok"})
これでリプライメッセージでローディングを毎度表示することができます。

コメント