🐍

⚡️たった5分で実装!Slackアプリをグッと使いやすくする「処理中...」表示テクニック

2025/04/10に公開

Slackアプリを開発していますか?✨ ユーザー体験の向上は超重要ですよね!特に処理に時間がかかるAPIリクエストや複雑な操作を行う場合、ユーザーに「何かが進行中だよ〜」とお知らせすることで、アプリの使い心地がグンと良くなります🚀
今回は「処理中です...」というちょっとした表示で、ユーザー体験を劇的に改善する方法をご紹介します。

なぜ処理中表示が重要なのか?🤔

Slackアプリが検索やデータ取得などの操作を行っている際、何のフィードバックもないと、ユーザーはこんな不安を抱えてしまいます:

  • 「このアプリ、ちゃんと動いてるの…?」🧐
  • 「リクエスト、届いてる?」📲
  • 「いつまで待てばいいの?」⏱️

「処理中です...」という小さなメッセージを表示するだけで、これらの不安をスッキリ解消!ユーザーの心をホッとさせることができるんです😌

エフェメラルメッセージじゃなくて通常メッセージを使う理由🔍

Slackには「エフェメラルメッセージ」という、特定のユーザーだけに見える便利な機能がありますよね。でも、ちょっと困った制限があるんです:

エフェメラルメッセージは一度投稿するとアプリからは削除できません! 😱

処理中表示を実装する場合、処理が完了したら「処理中です...」メッセージをキレイさっぱり消したいので、通常のメッセージを使って、完了後にchat_deleteでサクッと削除する方法がベストなんです👍

実装例:シンプルな処理中メッセージ💻

以下は、処理中メッセージを表示して処理完了後に削除する簡単な実装例です:

# 処理中メッセージを送信する関数
def send_processing_message(client, channel_id, language, thread_ts=None):
    """
    処理中メッセージを送信する関数
    
    Args:
        client: Slackクライアント
        channel_id: チャンネルID
        language: 言語設定(例: "ja-JP")
        thread_ts: スレッドのタイムスタンプ(スレッド内に表示する場合)
        
    Returns:
        str: メッセージのタイムスタンプ(削除用)
    """
    processing_text = "処理中です..." if language == "ja-JP" else "Processing..."
    
    message = {
        "channel": channel_id,
        "text": processing_text
    }
    
    # スレッド内での処理の場合はスレッドに投稿
    if thread_ts:
        message["thread_ts"] = thread_ts
    
    # メッセージを送信
    response = client.chat_postMessage(**message)
    return response["ts"]

# 処理中メッセージを削除する関数
def delete_processing_message(client, channel_id, message_ts):
    """
    処理中メッセージを削除する関数
    
    Args:
        client: Slackクライアント
        channel_id: チャンネルID
        message_ts: 削除するメッセージのタイムスタンプ
    """
    if message_ts:
        try:
            client.chat_delete(
                channel=channel_id,
                ts=message_ts
            )
        except Exception as e:
            print(f"処理中メッセージの削除に失敗しました: {e}")

# 実際の使用例
def search_data(client, channel_id, thread_ts, query, language):
    """
    データ検索の実行例
    
    Args:
        client: Slackクライアント
        channel_id: チャンネルID
        thread_ts: スレッドのタイムスタンプ
        query: 検索クエリ
        language: 言語設定
    """
    # 処理中メッセージを表示
    processing_message_ts = None
    try:
        processing_message_ts = send_processing_message(client, channel_id, language, thread_ts)
    except Exception as e:
        print(f"処理中メッセージの送信に失敗しました: {e}")
    
    try:
        # データ検索などの時間のかかる処理
        results = perform_search(query)  # ダミー関数
        
        # 検索結果を表示
        result_text = f"検索結果: {len(results)}件見つかりました" if language == "ja-JP" else f"Search results: {len(results)} items found"
        client.chat_postMessage(
            channel=channel_id,
            thread_ts=thread_ts,
            text=result_text
        )
    finally:
        # 処理が成功しても失敗しても、処理中メッセージは削除
        if processing_message_ts:
            delete_processing_message(client, channel_id, processing_message_ts)

ここではchat_postMessageメソッドでメッセージを送信し、処理完了後にchat_deleteメソッドで削除しています。

スレッド内とチャンネル内での表示の使い分け🧵

処理中メッセージをもっとスマートに表示するために、状況に合わせた表示場所の切り替えも大事なポイントです✨:

def send_context_aware_processing_message(client, channel_id, language, is_thread_operation=False, thread_ts=None):
    """
    コンテキストに応じた処理中メッセージ表示
    
    Args:
        client: Slackクライアント
        channel_id: チャンネルID
        language: 言語設定
        is_thread_operation: スレッド内の操作かどうか
        thread_ts: スレッドのタイムスタンプ
        
    Returns:
        str: メッセージのタイムスタンプ
    """
    # スレッド内の操作の場合はスレッド内に表示
    if is_thread_operation and thread_ts:
        return send_processing_message(client, channel_id, language, thread_ts)
    
    # それ以外はチャンネルに表示
    return send_processing_message(client, channel_id, language)

多言語対応🌏

グローバルなアプリでは、処理中メッセージも多言語対応が必要ですよね🌍:

import i18n

# 翻訳ファイルでの定義例
# ja-JP.yml
# processing_message: "処理中です..."
# 
# en.yml
# processing_message: "Processing..."

def send_processing_message(client, channel_id, language, thread_ts=None):
    """
    多言語対応した処理中メッセージを送信する関数
    """
    processing_text = i18n.t("slack_app.processing_message", locale=language)
    
    # メッセージ送信ロジック
    message = {"channel": channel_id, "text": processing_text}
    if thread_ts:
        message["thread_ts"] = thread_ts
        
    response = client.chat_postMessage(**message)
    return response["ts"]

try-finallyパターンの使用🛡️

処理結果がどうあれ必ず処理中メッセージを削除するための、鉄板パターンがこちら👇:

def search_documents(client, channel_id, thread_ts, language, search_query):
    """
    ドキュメント検索の実装例
    """
    # 処理中メッセージを表示
    processing_message_ts = None
    try:
        processing_message_ts = send_processing_message(client, channel_id, language, thread_ts)
        
        # 検索処理(時間がかかる処理)
        search_results = perform_document_search(search_query)
        
        # 結果表示
        if search_results:
            client.chat_postMessage(
                channel=channel_id,
                thread_ts=thread_ts,
                text=f"検索結果: {len(search_results)}件"
            )
        else:
            client.chat_postMessage(
                channel=channel_id,
                thread_ts=thread_ts,
                text="検索結果が見つかりませんでした"
            )
            
    except Exception as e:
        # エラー処理
        client.chat_postMessage(
            channel=channel_id,
            thread_ts=thread_ts,
            text=f"検索中にエラーが発生しました: {e}"
        )
    finally:
        # 処理が成功しても失敗しても、処理中メッセージは削除
        if processing_message_ts:
            try:
                client.chat_delete(channel=channel_id, ts=processing_message_ts)
            except Exception as e:
                print(f"処理中メッセージの削除に失敗しました: {e}")

実装のポイント🔑

  1. i18n対応 🌐: 多言語対応のためにメッセージテキストを翻訳ファイルでスッキリ管理
  2. エラーハンドリング 🛠️: メッセージ送信・削除の失敗もしっかりキャッチ
  3. finally句の利用 ✅: 処理成功/失敗に関わらず必ずメッセージを削除
  4. コンテキスト察知 🧠: スレッド/チャンネルなど適切な場所に表示

実際のアプリでの適用例:Party on Slack 🎉

私たちが開発している「Party on Slack」アプリでも、この処理中表示テクニックを活用して、ユーザー体験を大幅に向上させています。チーム内でのコミュニケーションをもっと楽しく、効率的にするツールです!

📥 インストール方法

Party on Slackをまだ使っていない方は、以下のリンクからインストールしてくださると嬉しいです:

簡単なインストールで、すぐにチーム全体のコミュニケーションが活性化します。処理中表示をはじめとする直感的なUI/UXで、ストレスフリーな操作感を体験してみてください。

まとめ🎯

「処理中です...」というシンプルなメッセージがユーザー体験を劇的に向上させる魔法の一言なんです✨ エフェメラルメッセージは削除できないため、通常のメッセージとchat_deleteを組み合わせることで、スマートな処理中表示が実現できます。

この小さな工夫が、あなたのSlackアプリをワンランク上の使い心地に変えてくれるでしょう!🚀 ぜひ試してみてくださいね。

リバナレテックブログ

Discussion