Slack Automation（vercel-labs/slack）

Slack Automation (Slack自動化)

Slackワークスペースと対話して、メッセージの確認、データの抽出、一般的なタスクの自動化を行います。

クイックスタート

既存のSlackブラウザセッションに接続するか、Slackを開きます。

# 既存セッションに接続（ポート9222、通常は既に開いているSlack）
agent-browser connect 9222

# またはSlackがまだ起動していない場合
agent-browser open https://app.slack.com

続いてスナップショットを取得し、何が利用可能か確認します。

agent-browser snapshot -i

コアワークフロー

1. 接続/ナビゲート: Slackを開くか接続する
2. スナップショット: リファレンス（@e1、@e2など）と共にインタラクティブ要素を取得
3. ナビゲート: タブをクリック、セクションを展開、または特定のチャンネルに移動
4. 抽出/操作: データを読み取るかアクションを実行
5. スクリーンショット: 発見事項の証拠をキャプチャ

# 例: 未読チャンネルを確認
agent-browser connect 9222
agent-browser snapshot -i
# 「More unreads」ボタンを探す
agent-browser click @e21  # 「More unreads」ボタンのリファレンス
agent-browser screenshot slack-unreads.png

一般的なタスク

未読メッセージの確認

# Slackに接続
agent-browser connect 9222

# スナップショットを取得して未読ボタンの位置を特定
agent-browser snapshot -i

# 以下の要素を探す:
# - 「More unreads」ボタン（通常サイドバーの上部付近）
# - Activityタブの「Unreads」トグル（未読数を表示）
# - 未読を示すバッジや太字テキストのあるチャンネル名

# Activityタブに移動して未読を一覧表示
agent-browser click @e14  # Activityタブ（リファレンスは変わる可能性あり）
agent-browser wait 1000
agent-browser screenshot activity-unreads.png

# またはDMタブを確認
agent-browser click @e13  # DMタブ
agent-browser screenshot dms.png

# またはサイドバーの「More unreads」を展開
agent-browser click @e21  # More unreadsボタン
agent-browser wait 500
agent-browser screenshot expanded-unreads.png

チャンネルへの移動

# サイドバー内でチャンネルを検索、または名前で検索
agent-browser snapshot -i

# リスト内のチャンネル名を探す（例: "engineering", "product-design"）
# チャンネルのtreeitemリファレンスをクリック
agent-browser click @e94  # 例: engineeringチャンネルのリファレンス
# クリックしたチャンネル名（ここではengineering）を置き換えることで、
# 古いチャンネルヘッダーでは待機条件を満たせず、新しいチャンネルがレンダリングされるのを待つ。
agent-browser wait --fn "document.querySelector('[data-qa=\"channel_header\"]')?.innerText.includes('engineering')"
agent-browser screenshot channel.png

メッセージ/スレッドの検索

# Slack検索を使用
agent-browser snapshot -i
agent-browser click @e5  # 検索ボタン（一般的なリファレンス）
agent-browser fill @e_search "keyword"
agent-browser press Enter
# 送信したクエリと一致させることで、古いルートが再利用されるのを防ぐ。
agent-browser wait --fn "location.pathname.includes('/search') && new URL(location.href).searchParams.get('q') === 'keyword'"
agent-browser screenshot search-results.png

チャンネル情報の抽出

# 表示されているすべてのチャンネルを取得
agent-browser snapshot --json > slack-snapshot.json

# チャンネル名とメタデータを解析
# レベル=2のtreeitem要素（セクション下のサブチャンネル）を探す

チャンネル詳細の確認

# チャンネルを開く
agent-browser click @e_channel_ref
agent-browser wait 1000

# チャンネル情報を取得（メンバー、説明など）
agent-browser snapshot -i
agent-browser screenshot channel-details.png

# メッセージをスクロール
agent-browser scroll down 500
agent-browser screenshot channel-messages.png

メモ/状態のキャプチャ

Slackからの発見事項を文書化する必要がある場合:

# 注釈付きスクリーンショット（要素番号を表示）
agent-browser screenshot --annotate slack-state.png

# フルページスクリーンショット
agent-browser screenshot --full slack-full.png

# 現在のURLを参照用に取得
agent-browser get url

# ページタイトルを取得
agent-browser get title

サイドバーの構造

Slackのサイドバーを理解すると効率的にナビゲートできます。

- スレッド
- ハドル
- 下書きと送信済み
- ディレクトリ
- [セクションヘッダー - 外部接続、スター付き、チャンネルなど]
  - [チャンネルがtreeitemとしてリスト]
- ダイレクトメッセージ
  - [DMがリスト]
- アプリ
  - [アプリのショートカット]
- [More unreads] ボタン（未読チャンネルリストの表示/非表示を切り替え）

よく見つかるリファレンス:

• @e12 - Homeタブ（通常）
• @e13 - DMタブ
• @e14 - Activityタブ
• @e5 - 検索ボタン
• @e21 - More unreadsボタン（セッションにより異なる）

Slackのタブ

チャンネルをクリックすると、以下のタブが表示されます:

• Messages - チャンネルの会話
• Files - 共有ファイル
• Pins - ピン留めされたメッセージ
• Add canvas - コラボレーションキャンバス
• その他のタブ（ワークスペース設定による）

タブのリファレンスをクリックしてビューを切り替え、異なる情報を取得します。

Slackからのデータ抽出

テキストコンテンツの取得

# メッセージまたは要素のテキストを取得
agent-browser get text @e_message_ref

アクセシビリティツリーの解析

# プログラムで解析するためのJSON形式のフルスナップショット
agent-browser snapshot --json > output.json

# 以下の情報を探す:
# - チャンネル名（treeitemのnameフィールド）
# - メッセージ内容（listitem/document要素内）
# - ユーザー名（ユーザー情報を含むbutton要素）
# - タイムスタンプ（時刻情報を含むlink要素）

未読数のカウント

# unreadsセクションを展開した後:
agent-browser snapshot -i | grep -c "treeitem"
# unreadsセクション内のチャンネル名を持つ各treeitemが1つの未読を示す

ベストプラクティス

• 既存セッションに接続する: Slackが既に開いている場合は agent-browser connect 9222 を使用します。新しいブラウザを開くより高速です。
• クリック前にスナップショットを取得する: ボタンをクリックする前に必ず snapshot -i でリファレンスを特定してください。
• ナビゲーション後に再スナップショット: 新しいチャンネルやセクションに移動した後、新しいリファレンスを見つけるために新しいスナップショットを取得してください。
• 解析用にJSONスナップショットを使用する: 構造化データを抽出する必要がある場合は、機械可読な出力として snapshot --json を使用してください。
• 操作の間隔を空ける: 高速な操作の合間に sleep 1 を追加してUIの更新を待ちます。
• アクセシビリティツリーを確認する: アクセシビリティツリーは、スクリーンリーダー（および自動化ツール）が何を見られるかを示します。要素がスナップショットにない場合、非表示かスクロールが必要かもしれません。
• サイドバー内でスクロールする: チャンネルリストが長い場合は agent-browser scroll down 300 --selector ".p-sidebar" を使用してSlackサイドバー内でスクロールします。

制限事項

• Slack APIにはアクセスできません: これはブラウザ自動化を使用しており、Slack APIは使いません。OAuth、Webhook、ボットトークンは不要です。
• セッション固有: スクリーンショットとスナップショットは現在のブラウザセッションに紐づいています。
• レート制限: Slackは高速な操作に対してレート制限をかける可能性があります。必要に応じてコマンド間に遅延を追加してください。
• ワークスペース固有: 自分のワークスペースとのみ対話します。クロスワークスペースの自動化はできません。

デバッグ

コンソールでエラーを確認

agent-browser console
agent-browser errors

現在のページ状態を取得

agent-browser get url
agent-browser get title
agent-browser screenshot page-state.png

例: 完全な未読チェック

#!/bin/bash

# Slackに接続
agent-browser connect 9222

# 最初のスナップショットを取得
echo "=== Slack未読をチェック ==="
agent-browser snapshot -i > snapshot.txt

# Activityタブで未読を確認
agent-browser click @e14  # Activityタブ
agent-browser wait 1000
agent-browser screenshot activity.png
ACTIVITY_RESULT=$(agent-browser get text @e_main_area)
echo "Activity: $ACTIVITY_RESULT"

# DMをチェック
agent-browser click @e13  # DMタブ
agent-browser wait 1000
agent-browser screenshot dms.png

# サイドバーの未読チャンネルをチェック
agent-browser click @e21  # More unreadsボタン
agent-browser wait 500
agent-browser snapshot -i > unreads-expanded.txt
agent-browser screenshot unreads.png

# サマリー
echo "=== サマリー ==="
echo "詳細は activity.png、dms.png、unreads.png を参照"

参考文献

• Slack ドキュメント: https://slack.com/help
• Web エクスペリエンス: https://app.slack.com
• キーボードショートカット: Slack内で ? を入力するとショートカット一覧が表示されます