<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="1" class="code-line">Claue Code によって並行開発が可能になって寝れないのが続いている日々です。<br>
それに拍車をかけた、スマホからでも使えるようにする<code>mpociot/claude-code-slack-bot</code>を紹介しつつ、それを紹介するために<code>SuperClaude-Org/SuperClaude_Framework</code>を使って紹介させてみようと思います。</p>
<h2 id="superclaude_framework%E3%81%A8%E3%81%AF" data-line="4" class="code-line">
<a class="header-anchor-link" href="#superclaude_framework%E3%81%A8%E3%81%AF" aria-hidden="true"></a> <code>SuperClaude_Framework</code>とは</h2>
<p data-line="5" class="code-line">Claude Codeを “拡張”して開発作業を進めやすくするためのフレームワークです。<br>
ここでなんだかんだ言うよりインストールして頂いて、触っていただくのが早いです。</p>
<p data-line="8" class="code-line">以下レポです。</p>
<p data-line="10" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5b1ac65ba96dc" src="https://embed.zenn.studio/card#zenn-embedded__5b1ac65ba96dc" data-content="https%3A%2F%2Fgithub.com%2FSuperClaude-Org%2FSuperClaude_Framework" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/SuperClaude-Org/SuperClaude_Framework" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/SuperClaude-Org/SuperClaude_Framework</a></p>
<h2 id="claude-code-slack-bot%E3%82%92claude-code%E3%81%AB%E7%B4%B9%E4%BB%8B%E3%81%97%E3%81%A6%E3%82%82%E3%82%89%E3%81%86" data-line="12" class="code-line">
<a class="header-anchor-link" href="#claude-code-slack-bot%E3%82%92claude-code%E3%81%AB%E7%B4%B9%E4%BB%8B%E3%81%97%E3%81%A6%E3%82%82%E3%82%89%E3%81%86" aria-hidden="true"></a> <code>claude-code-slack-bot</code>をClaude Codeに紹介してもらう</h2>
<p data-line="13" class="code-line">どちらもにも同じ質問をしてみて解説してもらいます。</p>
<h3 id="%E9%80%9A%E5%B8%B8-claude-code" data-line="15" class="code-line">
<a class="header-anchor-link" href="#%E9%80%9A%E5%B8%B8-claude-code" aria-hidden="true"></a> 通常 Claude Code</h3>
<h4 id="%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89" data-line="17" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89" aria-hidden="true"></a> コマンド</h4>
<div class="code-block-container"><pre class="language-zsh"><code class="language-zsh code-line" data-line="18">このプロジェクトを説明してほしい
</code></pre></div><h4 id="%E7%B5%90%E6%9E%9C" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%90%E6%9E%9C" aria-hidden="true"></a> 結果</h4>
<div class="code-block-container"><pre class="language-zsh"><code class="language-zsh code-line" data-line="23">⏺ このプロジェクトは、Slack内で Claude Code の AI
  コーディングアシスタント機能を提供する TypeScript ベースの Slack ボットです。

  主要機能

  作業ディレクトリ管理
  - ベースディレクトリ設定（例：/Users/username/Code/）で短いプロジェクト名使用可能
  - チャンネルごとのデフォルト作業ディレクトリ
  - スレッド単位での作業ディレクトリ上書き機能

  リアルタイム タスク追跡
  - Claude の計画プロセスをフォーマットされたタスクリストとして表示
  - 作業進行に応じたリアルタイム ステータス更新
  - 優先度インジケーター（🔴 高、🟡 中、🟢 低）

  ファイルアップロード対応
  - 画像（JPG、PNG、GIF、WebP）、テキストファイル、コードファイル対応
  - テキストファイルはプロンプトに直接埋め込み
  - 画像は Claude が Read ツールで分析

  高度なメッセージ処理
  - ストリーミング レスポンス
  - ツール使用の豊富なフォーマット
  - ステータス インジケーター（🤔 思考中、⚙️ 作業中、✅ 完了）

  MCP (Model Context Protocol) 統合
  - 外部 MCP サーバーによる Claude 機能拡張
  - ファイルシステムアクセス、GitHub API、データベース接続、Web検索など

  アーキテクチャ

  主要コンポーネント：
  - slack-handler.ts - Slack イベント処理
  - claude-handler.ts - Claude Code SDK 統合
  - working-directory-manager.ts - ディレクトリ管理
  - todo-manager.ts - タスク追跡
  - mcp-manager.ts - MCP サーバー管理

  このボットにより、Slack ワークスペース内で直接 AI によるコーディング支援、ファイル
  分析、コードレビュー、プロジェクト管理が可能になります。
</code></pre></div><h3 id="super-claude" data-line="67" class="code-line">
<a class="header-anchor-link" href="#super-claude" aria-hidden="true"></a> Super Claude</h3>
<h4 id="%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89-1" data-line="69" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89-1" aria-hidden="true"></a> コマンド</h4>
<div class="code-block-container"><pre class="language-zsh"><code class="language-zsh code-line" data-line="70">/sc:explain このプロジェクトを説明してほしい
</code></pre></div><h4 id="%E7%B5%90%E6%9E%9C-1" data-line="74" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%90%E6%9E%9C-1" aria-hidden="true"></a> 結果</h4>
<div class="code-block-container"><pre class="language-zsh"><code class="language-zsh code-line" data-line="75">&gt; /sc:explain is running… このプロジェクトを説明してほしい
  ⎿  Allowed 4 tools for this command

⏺ このプロジェクトについて詳しく分析して説明いたします。

⏺ Update Todos
  ⎿  ☐ プロジェクト構造を分析    
     ☐ 主要コンポーネントを特定
     ☐ アーキテクチャと機能を解説
     ☐ 技術スタックと設定を説明

⏺ Read(package.json)
  ⎿  Read 29 lines (ctrl+r to expand)

⏺ List(~/Git/claude-code-slack-bot)
  ⎿  Listed 26 paths (ctrl+r to expand)

⏺ Read(src)
  ⎿  Error: EISDIR: illegal operation on a directory, read

⏺ List(src)
  ⎿  Listed 16 paths (ctrl+r to expand)

⏺ Read(src/index.ts)
  ⎿  Read 58 lines (ctrl+r to expand)

⏺ Update Todos
  ⎿  ☒ プロジェクト構造を分析    
     ☐ 主要コンポーネントを特定
     ☐ アーキテクチャと機能を解説
     ☐ 技術スタックと設定を説明

⏺ Read(src/slack-handler.ts)
  ⎿  Read 50 lines (ctrl+r to expand)

⏺ Read(src/claude-handler.ts)
  ⎿  Read 50 lines (ctrl+r to expand)

⏺ Read(src/config.ts)
  ⎿  Read 34 lines (ctrl+r to expand)

⏺ Update Todos
  ⎿  ☒ プロジェクト構造を分析    
     ☒ 主要コンポーネントを特定
     ☐ アーキテクチャと機能を解説
     ☐ 技術スタックと設定を説明

⏺ Claude Code Slack Bot プロジェクト説明

  このプロジェクトは Claude Code SDK を活用した Slack Bot で、Slack ワークスペース内で AI
  によるコーディング支援を提供するTypeScript ベースのアプリケーションです。

  🏗️ プロジェクト概要

  主要目的

  - リアルタイム AI アシスタンス: Slack チャネルや DM で Claude Code の機能を利用
  - ファイル分析: 画像やコードファイルのアップロードと分析
  - 作業ディレクトリ管理: プロジェクト固有のコンテキスト維持
  - タスク追跡: リアルタイムでのタスクリストと進捗表示

  🔧 技術アーキテクチャ

  コアコンポーネント

  1. エントリーポイント (src/index.ts)

  - アプリケーション初期化とシステム起動
  - 環境設定の検証
  - Slack App、Claude Handler、MCP Manager の初期化

  2. Slack イベント処理 (src/slack-handler.ts)

  - メッセージイベント、メンション、ファイルアップロードの処理
  - Socket Mode によるリアルタイム通信
  - スレッド管理とコンテキスト維持

  3. Claude Code 統合 (src/claude-handler.ts)

  - Claude Code SDK との通信
  - ストリーミングレスポンス処理
  - セッション管理（ユーザー/チャネル/スレッド別）

  4. 作業ディレクトリ管理 (src/working-directory-manager.ts)

  - チャネル固有のデフォルトディレクトリ
  - スレッドによる一時的なオーバーライド
  - 相対パス/絶対パスの解決

  5. ファイル処理 (src/file-handler.ts)

  - 画像、テキスト、コードファイルのサポート
  - セキュアなダウンロードと一時保存
  - ファイルサイズ制限（50MB）と自動クリーンアップ

  6. タスク管理 (src/todo-manager.ts)

  - Claude の計画プロセスのリアルタイム表示
  - 優先度レベル（🔴 高、🟡 中、🟢 低）
  - 進捗状況の動的更新

  7. MCP サーバー管理 (src/mcp-manager.ts)

  - Model Context Protocol サーバーの設定と管理
  - 外部ツールとの統合（ファイルシステム、GitHub API等）
  - 動的設定再読み込み

  🌟 主要機能

  1. インテリジェントな作業ディレクトリ管理

  階層: スレッド固有 &gt; チャネルデフォルト &gt; DM 固有
  設定: `cwd project-name` または `cwd /absolute/path`
  サポート: 相対パス・絶対パス両対応

  2. リアルタイムタスク追跡

  📋 タスクリスト

  🔄 進行中:
  🔴 認証システムの分析

  ⏳ 待機中:
  🟡 OAuth フローの実装
  🟢 エラーハンドリングの追加

  進捗: 1/3 タスク完了 (33%)

  3. 高度なメッセージ処理

  - ストリーミングレスポンス: リアルタイムでメッセージ更新
  - ツール使用の可視化: ファイル編集、bash コマンド等の表示
  - ステータス表示: 🤔 考え中、⚙️ 作業中、✅ 完了

  4. MCP 統合

  - 外部ツール拡張: ファイルシステム、GitHub、データベース連携
  - マルチサーバー対応: stdio、SSE、HTTP プロトコル
  - 自動設定: mcp-servers.json から自動読み込み

  5. セキュリティと権限管理

  - Permission Server: Slack コンテキストでの安全な実行
  - ファイル検証: タイプとサイズのバリデーション
  - 一時ファイル管理: 自動クリーンアップ

⏺ Update Todos
  ⎿  ☒ プロジェクト構造を分析    
     ☒ 主要コンポーネントを特定
     ☒ アーキテクチャと機能を解説
     ☐ 技術スタックと設定を説明

⏺ 🛠️ 技術スタック

  フロントエンド（Slack）

  - @slack/bolt: Slack App 開発フレームワーク
  - Socket Mode: リアルタイムイベント処理
  - ファイルアップロード: 画像・コード・ドキュメント対応

  バックエンド（Node.js）

  - TypeScript 5.8.3: 型安全性とモダンJS
  - @anthropic-ai/claude-code 1.0.35: Claude Code SDK
  - @modelcontextprotocol/sdk 1.13.2: MCP サーバー統合
  - node-fetch 3.3.2: HTTP クライアント
  - dotenv 16.6.0: 環境変数管理

  開発環境

  "scripts": {
    "start": "tsx src/index.ts",     // 本番実行
    "dev": "tsx watch src/index.ts", // 開発モード
    "build": "tsc",                  // TypeScript コンパイル
    "prod": "node dist/index.js"     // プロダクション
  }

  ⚙️ 環境設定

  必須環境変数

  # Slack App
  SLACK_BOT_TOKEN=xoxb-your-bot-token
  SLACK_APP_TOKEN=xapp-your-app-token
  SLACK_SIGNING_SECRET=your-signing-secret

  # Claude Code
  ANTHROPIC_API_KEY=your-anthropic-api-key

  オプション設定

  # 作業ディレクトリ
  BASE_DIRECTORY=/Users/username/Code/

  # サードパーティプロバイダー
  CLAUDE_CODE_USE_BEDROCK=1
  CLAUDE_CODE_USE_VERTEX=1

  # 開発
  DEBUG=true

  Slack App 権限

  必須権限:
    - app_mentions:read    # メンション読み取り
    - channels:history     # チャネル履歴
    - chat:write          # メッセージ送信
    - im:history          # DM履歴
    - users:read          # ユーザー情報
    - reactions:write     # リアクション追加

  イベント:
    - app_mention         # メンション時
    - message.im          # DM受信時
    - member_joined_channel # チャネル追加時

  🚀 使用例

  チャネルセットアップ

  1. ボットをチャネルに追加
  2. ウェルカムメッセージで作業ディレクトリ設定を要求
  3. `cwd project-name` でデフォルト設定
  4. `@ClaudeBot 認証について手伝って` で利用開始

  ファイル分析

  [画像/コードファイルをアップロード]
  このスクリーンショットを分析して改善案を提案して

  MCP サーバー管理

  # 設定済みサーバー確認
  User: mcp
  Bot: 🔧 MCP Servers:
       • filesystem (stdio)
       • github (stdio)

  # 設定再読み込み
  User: mcp reload
  Bot: ✅ MCP設定を再読み込みしました

⏺ Update Todos
  ⎿  ☒ プロジェクト構造を分析    
     ☒ 主要コンポーネントを特定
     ☒ アーキテクチャと機能を解説
     ☒ 技術スタックと設定を説明

⏺ 💡 主要設計思想

  1. セッションベースの会話管理

  - ユーザー、チャネル、スレッド毎の独立したコンテキスト
  - 継続的な対話の一貫性を保証
  - メモリ効率的なセッション管理

  2. 階層的作業ディレクトリ

  優先順位: スレッド設定 &gt; チャネルデフォルト &gt; DM設定
  柔軟性: 相対パス・絶対パス両対応
  智能解決: ベースディレクトリ + プロジェクト名

  3. リアルタイム透明性

  - Claude の思考プロセスを可視化
  - 進行中タスクのライブ更新
  - エラー発生時の詳細なフィードバック

  4. セキュリティファースト

  - 環境変数による機密情報管理
  - ファイルタイプ・サイズの厳格な検証
  - 一時ファイルの自動クリーンアップ
  - Permission Server による安全な実行制御

  このプロジェクトは、開発者の生産性向上を目的とした高度な AI アシスタントシステムで、Slack
  の使いやすさと Claude Code の強力な AI 機能を統合した実用的なソリューションです。
</code></pre></div><h3 id="%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82claude-code-slack-bot%E3%81%AE%E6%B4%BB%E7%94%A8%E3%82%B7%E3%83%BC%E3%83%B3" data-line="355" class="code-line">
<a class="header-anchor-link" href="#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82claude-code-slack-bot%E3%81%AE%E6%B4%BB%E7%94%A8%E3%82%B7%E3%83%BC%E3%83%B3" aria-hidden="true"></a> そもそもclaude-code-slack-botの活用シーン</h3>
<p data-line="356" class="code-line">スマホからとりあえずコマンドできるので、</p>
<ul data-line="358" class="code-line">
<li data-line="358" class="code-line">ご飯中</li>
<li data-line="359" class="code-line">外出中</li>
<li data-line="360" class="code-line">お茶・コーヒ休憩</li>
</ul>
<p data-line="362" class="code-line">などなど。<br>
Claude Codeが時間を奪います。<br>
ただし、エラーやうまくいかないところがあるので、その内ローカルで修正してPRを出そうかと思いってます。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="366" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="367" class="code-line">体感時間としては、通常の方が早いけど、細かさで言うとSuper Claudeの方がまあ軍配が上がる。<br>
是非触っていない方は触って頂きたい。</p>
<p data-line="370" class="code-line"><code>体調崩さないようにAIツールとは向き合っていきたい</code></p>
<h3 id="%E9%96%A2%E9%80%A3%E3%83%AA%E3%83%B3%E3%82%AF" data-line="373" class="code-line">
<a class="header-anchor-link" href="#%E9%96%A2%E9%80%A3%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> 関連リンク</h3>
<ul data-line="374" class="code-line">
<li data-line="374" class="code-line"><a href="https://github.com/SuperClaude-Org/SuperClaude_Framework" target="_blank" rel="nofollow noopener noreferrer">SuperClaude Framework</a></li>
<li data-line="375" class="code-line"><a href="https://github.com/mpociot/claude-code-slack-bot" target="_blank" rel="nofollow noopener noreferrer">claude-code-slack-bot</a></li>
</ul>


Claude Codeの拡張（SuperClaude）使って、SlackからClaude Codeを動かすレポを説明をさせてみる

そもそもclaude-code-slack-botの活用シーン

claude-code-slack-botをClaude Codeに紹介してもらう

Discussion