@moyongkexing/slack-loading-reactions

SlackアプリでローディングリアクションによるUI表現を簡単に実装するためのライブラリです。

特徴

• 🔄 簡単なローディング表現 - メッセージにリアクション絵文字でローディング状態を表示
• 🎨 定義済み絵文字プリセット - よく使われるローディング絵文字を事前定義
• 🛡️ 型安全 - TypeScriptで完全に型定義済み
• 🧪 テスト済み - 包括的なテストスイート付き
• 📦 軽量 - 依存関係なし、Slack Web API クライアントのみ使用

インストール

import { 
  startLoading, 
  stopLoading, 
  withLoading, 
  LOADING_EMOJIS 
} from "jsr:@moyongkexing/slack-loading-reactions";

基本的な使用方法

手動でローディング管理

import { SlackAPI } from "deno-slack-api/mod.ts";
import { startLoading, stopLoading, LOADING_EMOJIS } from "jsr:@moyongkexing/slack-loading-reactions";

const client = SlackAPI(token);

// ローディング開始
await startLoading(client, channel, timestamp, LOADING_EMOJIS.HOURGLASS);

// 何らかの重い処理
await heavyProcessing();

// ローディング終了
await stopLoading(client, channel, timestamp, LOADING_EMOJIS.HOURGLASS);

自動ローディング管理（推奨）

import { withLoading, LOADING_EMOJIS } from "jsr:@moyongkexing/slack-loading-reactions";

// 処理の前後で自動的にローディング絵文字を追加・削除
const result = await withLoading(
  client,
  channel,
  timestamp,
  async () => {
    // ここに重い処理を記述
    return await heavyProcessing();
  },
  LOADING_EMOJIS.SPINNER
);

利用可能な絵文字プリセット

import { LOADING_EMOJIS } from "jsr:@moyongkexing/slack-loading-reactions";

LOADING_EMOJIS.HOURGLASS     // ⏳ hourglass_flowing_sand - 砂時計（流れる砂）
LOADING_EMOJIS.SPINNER       // 🔄 arrows_clockwise - 矢印の回転
LOADING_EMOJIS.CLOCK         // ⌛ hourglass - 砂時計（静止）
LOADING_EMOJIS.PROCESSING    // 🔵 large_blue_circle - 青い丸
LOADING_EMOJIS.GEAR          // ⚙️ gear - 歯車
LOADING_EMOJIS.EYES          // 👀 eyes - 目
LOADING_EMOJIS.THINKING      // 🤔 thinking_face - 思考中

Slack SDKでの使用例

Deno Slack SDK

import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";
import { withLoading, LOADING_EMOJIS } from "jsr:@moyongkexing/slack-loading-reactions";

export const ProcessDataFunction = SlackFunction(
  ProcessDataDefinition,
  async ({ inputs, client }) => {
    const result = await withLoading(
      client,
      inputs.channel_id,
      inputs.message_ts,
      async () => {
        // データ処理ロジック
        return await processLargeDataSet(inputs.data);
      },
      LOADING_EMOJIS.GEAR
    );

    return { outputs: { result } };
  }
);

Bolt for JavaScript

import { App } from "@slack/bolt";
import { startLoading, stopLoading, LOADING_EMOJIS } from "jsr:@moyongkexing/slack-loading-reactions";

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET
});

app.command("/analyze", async ({ command, ack, client }) => {
  await ack();
  
  // ローディング開始
  await startLoading(client, command.channel_id, command.ts, LOADING_EMOJIS.THINKING);
  
  try {
    // 分析処理
    const analysis = await performAnalysis(command.text);
    
    await client.chat.postMessage({
      channel: command.channel_id,
      text: `分析結果: ${analysis}`
    });
  } finally {
    // ローディング終了
    await stopLoading(client, command.channel_id, command.ts, LOADING_EMOJIS.THINKING);
  }
});

API リファレンス

startLoading(client, channel, timestamp, emoji?)

ローディング絵文字をメッセージに追加します。

パラメータ:

• client: Slack Web API クライアント
• channel: チャンネルID
• timestamp: メッセージのタイムスタンプ
• emoji: 絵文字名（省略時は LOADING_EMOJIS.HOURGLASS）

戻り値: Promise<LoadingResult>

stopLoading(client, channel, timestamp, emoji?)

ローディング絵文字をメッセージから削除します。

パラメータ: startLoading と同様

戻り値: Promise<LoadingResult>

withLoading(client, channel, timestamp, operation, emoji?)

非同期処理を実行し、その前後でローディング絵文字を自動管理します。

パラメータ:

• client: Slack Web API クライアント
• channel: チャンネルID
• timestamp: メッセージのタイムスタンプ
• operation: 実行する非同期関数
• emoji: 絵文字名（省略時は LOADING_EMOJIS.HOURGLASS）

戻り値: Promise<T> （operationの戻り値）

必要な権限

Slackアプリには以下の権限が必要です：

{
  "scopes": [
    "reactions:write"
  ]
}

TypeScript型定義

interface SlackClient {
  reactions: {
    add: (params: ReactionAddParams) => Promise<ReactionResponse>;
    remove: (params: ReactionRemoveParams) => Promise<ReactionResponse>;
  };
}

interface LoadingResult {
  success: boolean;
  error?: string;
}

ライセンス

MIT

作者

moyongkexing

貢献

プルリクエストやイシューは GitHub で受け付けています。