はじめに
Slack Skills Plugin を使うと、AIコーディングエージェントと一緒に Slack アプリを短時間で作ることができます。今回のハンズオンでは、その体験を実際に手を動かしながら味わってもらうため、「English Study App」という小さな英単語学習アプリを作ります。この記事は、当日のハンズオン内容を振り返り用にまとめたものです。会場で手順を見失ってしまった方も、このページをなぞれば同じ流れを再現できます。
事前準備
- 開発用の Slack サンドボックスがあること。無料で Slack Developer Program から取得できます。申請時に使うイベントコードは
SLACKDEVDAYJPです。 - Slack CLI がインストール・ログイン済みであること。Mac/Linux と Windows のインストールガイドを参照してください。
Slack Skills Plugin とは
Slack Skills Plugin は、Claude Code や Cursor といった AI コーディングエージェントに、Slack アプリ開発のノウハウを直接組み込むプラグインです。開発者が API ドキュメントを行き来しながら手探りで実装する代わりに、あらかじめ検証済みの手順に沿ってエージェントがアプリを組み立てていけるようになります。
プラグインには、アプリ開発を支える 4 つのスキルが組み込まれています。
create-slack-appアプリの雛形の作成slack-cliローカルでの実行やマニフェストの更新slack-apiSlack API との連携の実装・実行block-kitアプリの UI の設計と検証
今回作るアプリ
Slack 上で動く小さな英語学習アプリ「English Study App」を、AIコーディングエージェントと構築しました。実際の作動は以下になります。
バイブコーディングという性質上、参加者ごとに細部は多少異なりますが、大まかには次のようなステップで進みます。
開発環境を整える
- Slack CLI をインストールするにはこちらのインストールガイドを参照してください：Mac/Linux と Windows 。
- 次に
slack loginと入力して、ログインプロセスを開始し、CLI を Slack サンドボックスに接続します。 - 表示されたコマンドをコピーして、Slack内テキストボックスに貼り付けてください。
- 例：
/slackauthticket NmMxNGNlNTasdf20assaJAPWaYtY2Y4MDliODIxZTFh
- 例：
- 表示されたプロンプトを確認し、チャレンジコードを CLI に貼り付けてください。
- 例：
x3CA2BX7G
- 例：
- 完了です。これでCLIとSlackワークスペースが接続されました。
Claude Code
/plugin install slack@claude-plugins-officialインストール後はリロードして有効化します。
/reload-plugins初回にこちらのツールを使用する時に OAuth 認証が求められます。
Cursor
Cursor の場合は、公式 Marketplace から直接インストールするか、プロンプトウィンドウに以下のコマンドを入力します。
/add-plugin slackインストール後は、Continue ボタンを押してワークスペースへの認証を行なってください。
その他のコーディングエージェント
Claude Code や Cursor 以外（Codex、Gemini、Clineなど）のツールを使っている場合は、npx で直接スキルをインストールできます。
npx skills slackapi/slack-skillsアプリを作ろう！
準備が整ったら、あとは AI エージェントとの対話だけでアプリが形になっていきます。まずはこちらのプロンプトから始めます。
Slack の Python Starter Template を使って「english-study-app」という Slack アプリを作成してください。生成されたら、slack run --team --org-workspace-grant=all のフラグをつけてアプリを起動してください。このひと言だけで、裏側では slack:create-slack-app スキルが動き、プロジェクト構成・認証・実行環境のセットアップまで一通り済ませてくれます。それと slack:slack-cli スキルがローカル実行を担ってくれるので、ターミナルとエージェントのチャットを行き来する必要がありません。Slack 上で @english-study-app hello のように話しかけて、アプリが応答することを確認できればアプリの生成ステップは完了です。
アプリが動き出したところで、いよいよ本題である単語検索機能を追加していきます。次のプロンプトを見てください。
define というスラッシュコマンドを追加してください。Wiktionary から英語の単語の定義を取得し、その定義を返信してください。ここでは slack:slack-api スキルが Slash command のリスナー実装と、外部 API 呼び出しのコードを一緒に書き上げてくれます。日本語の意味も返してもらうよう、続けて次のプロンプトを追加します。
英語の勉強アプリだから、Jisho から日本語の意味も取得し、その定義も返答に入れてください。ここで一度 /define hello のように実行してみると、プレーンテキストで単語の定義が返ってくることを確認できます。
機能としては動いていますが、出力はまだ味気ないプレーンテキストのままです。ここから Block Kit を使って見た目を整えていきます。
define コマンドを Block Kit で表示するように更新してください。以下の構成にしてください:単語を表示するヘッダーブロック、日本語の定義と発音記号を表示するコンテキストブロック、ディバイダー、品詞ごとのセクションブロック(番号付き定義をブロック引用で表示し、例文をイタリックで表示)、類義語・対義語がある場合はそれらを表示、最後にソースリンクを表示。プロンプト自体はかなり長くて具体的な指定を含んでいますが、実はここが今回のハンズオンで一番伝えたいポイントです。slack:block-kit スキルは、UI のレイアウトを設計するだけでなく、実際に Slack API に対してそのブロックを検証してくれます。つまり、生成されたその場で「本当に表示できる UI」であることが保証されるのです。
改めて /define を実行すると、単語の意味・発音・例文・類義語などが整理されたリッチな見た目で返ってくるのがわかります。
時間が余ったハンズオン参加者は、さらに次のような拡張にも挑戦しましょう！
拡張アイデアその①：調べた単語がリストに残っていれば、後から見返して復習するのも簡単になります。
上記の単語で調べた履歴を Slack list に保存してください。そのリストの権限を私に付与してください。拡張アイデアその②：クイズ形式で、尚更簡単に勉強できますよね？
App Home にクイズを作りたいです。上記のリストの単語からクイズを形成してください。まとめ
ありがとうございました！4つのスキル(create-slack-app / slack-cli / slack-api / block-kit)を組み合わせるだけで、雛形作成から実装、UI検証までを AI エージェントと一気通貫で進められることを、この English Study App 作りを通して体感しました。
Slack Dev Day Japan の時だけ
できた人は教えてください！(リンクを押して「うまくできた！」を押す)