MENU
  • ホーム
  • サービス
  • 記事一覧
  • 問い合わせ
プログラミングやサーバー設定など様々な内容を紹介しています。
HIROTRONの部屋
  • ホーム
  • サービス
  • 記事一覧
  • 問い合わせ
HIROTRONの部屋
  • ホーム
  • サービス
  • 記事一覧
  • 問い合わせ
  1. ホーム
  2. Django
  3. Django ✕ LINE Messaging APIでローディングアニメーションを出す方法

Django ✕ LINE Messaging APIでローディングアニメーションを出す方法

2025 6/25
Django LINE_Messaging_API
2025年6月25日

Django ✕ LINE Messaging APIでローディングアニメーションを出す方法

LINE Bot開発では、ユーザーがボタンを押した後に処理に時間がかかる場面がありますよね。

こうした場面でローディングアニメーションを表示することで、「処理中である」ことをユーザーに視覚的に伝えることができます。

処理が無言で進むと、ユーザーは「反応してない?」と不安になることも。ローディングを入れるだけで、安心感とUXが大きく向上します。

この記事では、DjangoとLINE Messaging APIを使った開発で、処理中に下のようなローディングを表示する方法をご紹介します。

あわせて読みたい
Messaging APIリファレンス LINE Developersサイトは開発者向けのポータルサイトです。LINEプラットフォームのさまざまな開発者向けプロダクトを利用するための、管理ツールやドキュメントを利用でき…

目次

  前提

この記事では以下の技術を使います:

  • 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"})

これでリプライメッセージでローディングを毎度表示することができます。

あわせて読みたい
第1話:WordPressじゃ物足りない!?LINE✕鬼太鼓スタンプラリー開発のはじまり 私は、友達の紹介でさどんでこプロジェクトのIT担当として様々システム構築などを行っています。今回、スタンプラリー作成でかなり大変だったということから、開発秘話…
Django LINE_Messaging_API
Django LINE LINE Messaging API
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • 第4話:位置情報でスタンプ獲得!LIFFとLINE Botの連携の裏側

この記事を書いた人

hiroto121022のアバター hiroto121022

医学生でありながら、さどんでこプロジェクトのITリーダーを務めるフルスタック開発者。LINE BotやGPS連携スタンプラリー、NFT販売サイトなどをすべて独学で開発。使用言語はPython、Typescript、Javascript。Django、Next.js、Reactなどのフレームワークを駆使し、サーバー構築・デプロイ・SSL対応まで一貫して担当。AIによるアートのアニメーション化にも取り組み、伝統文化とテクノロジーを融合させた新しい地域体験の創出に挑戦している。

関連記事

  • 第4話:位置情報でスタンプ獲得!LIFFとLINE Botの連携の裏側
    2025年6月22日
  • 第3話:地図の中にスタンプ!?Google Maps × Django管理画面の作成
    2025年6月22日
  • 第2話:画像に仕込む魔法!LINEイメージマップとスタンプの格闘記
    2025年6月22日

コメント

コメントする コメントをキャンセル

hiroto121022
医学生でありながら、さどんでこプロジェクトのITリーダーを務めるフルスタック開発者。LINE BotやGPS連携スタンプラリー、NFT販売サイトなどをすべて独学で開発。使用言語はPython、Typescript、Javascript。Django、Next.js、Reactなどのフレームワークを駆使し、サーバー構築・デプロイ・SSL対応まで一貫して担当。
GitHub
新着記事
  • Django ✕ LINE Messaging APIでローディングアニメーションを出す方法
  • 第4話:位置情報でスタンプ獲得!LIFFとLINE Botの連携の裏側
  • 第3話:地図の中にスタンプ!?Google Maps × Django管理画面の作成
  • 第2話:画像に仕込む魔法!LINEイメージマップとスタンプの格闘記
  • 第1話:WordPressじゃ物足りない!?LINE✕鬼太鼓スタンプラリー開発のはじまり

© HIROTRONの部屋.

目次