Stream Deckプラグイン開発調査

ターミナルで pnpm deploy:cloudflare と打つたびに、「これ物理ボタンで一発にしたい」と手が止まった。Stream Deckの公式SDKを調べ始めたら、Node.js + TypeScriptに完全移行していて、普段の技術スタックとほぼ同じだった。調査結果をメモにまとめ、さらに自分の業務フローに当てはめて活用アイデアを洗い出した。

SDK調査のまとめ

アーキテクチャ

Stream Deck SDKは「ローカルファースト」設計で、Webアプリに似たFrontend/Backend構成だが全てローカルで動く。

Plugin（バックエンド）: Node.jsランタイムでキー押下イベントを処理
Property Inspector（フロントエンド）: Chromiumベースの設定UI
両者はStream Deck Appを介してWebSocket通信

ランタイムはNode.js 20/24、Chromium 130。

セットアップ

CLIでプロジェクト雛形を生成し、npm run watch でホットリロード開発できる。Stream Deckアプリに自動インストールされるので、コードを書き換えると即座にキーの挙動が変わる。

npm install -g @elgato/cli@latest
streamdeck create    # 対話型ウィザード
npm run watch        # ホットリロード開発

アクション定義

@action() デコレータで宣言的に書く。SingletonAction を継承し、onKeyDown 等のライフサイクルメソッドをオーバーライドする形式。

@action({ UUID: "com.example.counter" })
export class CounterAction extends SingletonAction<{ count: number }> {
  override async onKeyDown(ev: KeyDownEvent<{ count: number }>) {
    const newCount = (ev.payload.settings.count ?? 0) + 1;
    await ev.action.setSettings({ count: newCount });
    await ev.action.setTitle(`${newCount}`);
  }
}

画像・フィードバック

setImage でSVG/PNG/Base64を動的に差し替えられる。showOk() で緑チェック、showAlert() で黄色警告を一時表示。ビルド進捗やサーバー状態をキーの色で視覚化するのに使える。

業務フローへの活用アイデア

mdx-playgroundのコンテンツと開発ログを分析し、自分の業務に当てはめた。6カテゴリに整理する。

1. 開発ワークフローの高速化

複数プロジェクトを並行で触っているため、コンテキストスイッチのたびにターミナルを探してコマンドを打ち直している。ここを物理ボタンに載せる。

devサーバー起動ボタン: プロジェクトごとにキーを割り当て、押すと該当ディレクトリで pnpm dev を実行。起動中はキー画像を緑に切り替え、稼働状態が目に入る。

Cloudflareデプロイボタン: pnpm deploy:cloudflare をワンボタン化。ビルド中はSVGスピナーを表示し、成功で showOk()、失敗で showAlert() を返す。ビルドが通ったかどうかを、ターミナルに戻らず確認できる。

Git操作パネル: Commit / Push / Statusをキーに並べる。Statusキーには変更ファイル数を動的表示し、Branchキーには現在のブランチ名を載せる。

2. Git Worktree運用との相性

Worktreeで複数ブランチを同時に開いていると、「今どのWorktreeにいるか」を意識し続ける必要がある。キーの色でWorktreeを色分けすれば、目線をターミナルに移さずに現在のコンテキストが分かる。プロファイル切替（SwitchToProfile API）と組み合わせると、Worktreeに応じたキー配置の自動切替も可能。

3. 確定申告・経理シーズン用

確定申告では定型的なアプリ遷移が多い。freee、e-Tax、eLTAX、Google Spreadsheet、PDF確認という流れを踏むたびにブラウザのブックマークを掘っている。Stream Deckに税務ツールランチャーを並べれば、アプリ切替のステップが消える。

SD+のダイヤルがあれば、回転で顧客を切り替え、押下でそのGoogle Driveフォルダを開くUIも組める。

4. コンテンツ作成の効率化

毎日の開発日記作成では、日付ディレクトリの作成 → テンプレート配置 → 記事編集 → プレビュー確認 → デプロイという定型フローがある。「日記開始」ボタンでディレクトリとテンプレートを自動生成し、「プレビュー」ボタンで localhost:3000/今日の日付/ をブラウザに開く、という流れを物理ボタン化できる。

5. AI連携

Claude Codeのスラッシュコマンドを直接実行する手段はないが、ターミナルにキーストロークを送ることで間接連携が可能。/make-diary や /commit をワンボタンで流す使い方。

devサーバーの生死をポーリングで監視し、キーの色で常時表示するモニターも組める。5秒間隔で localhost:3000 にfetchし、応答があれば緑、なければ赤に切り替える。

6. 実装の優先度

すぐ使えるもの（既存プラグインの組み合わせ）:

URLランチャー（税務サイト、各プロジェクトのlocalhost）
プロファイル切替（Dev / Tax / Content）
フォルダオープン（プロジェクトディレクトリ）

カスタムプラグインが必要なもの:

Cloudflareデプロイボタン（進捗表示付き）
Gitステータスモニター（ブランチ名・変更数の動的表示）
devサーバーの起動/停止トグル

振り返り

SDKのドキュメントを読み込んで、streamdeck create からアクション定義、Property Inspector、配布まで一通りの流れを頭に入れた。TypeScript + Node.jsという技術スタックが自分の普段使いと重なるので、新たに覚える概念は「WebSocketイベントモデル」と「manifest.json の定義体系」くらいに絞られた。

活用アイデアを書き出す過程で、自分の業務フローの中で「毎回同じ手順を踏んでいる場所」が目に見えるようになった。特にCloudflareデプロイとGit操作パネルは、明日にでもプロトタイプを組みたいところ。