【追記：重要】Claude Code を VSCode / Cursor で使う場合の設定
2025年12月19日リリースの VSCode / Cursor 拡張機能バージョン 2.0.74 以降、フック機能（SessionStart、UserPromptSubmit、Stop など）が動作しなくなっています。2.0.73（12月17日）までは正常に動作していました。
この問題の回避策として、「Use Terminal」設定をオンにする必要があります。
設定方法：
- VSCode / Cursor の設定画面を開く
- 「Claude Code」の設定項目を探す
- 「Use Terminal」をオンにする
この設定をオンにすると、拡張機能は内部で CLI を起動して動作するため、フックが正常に機能します。
--追記ここまで
Twitch 向けの Web ツール「Profile Image Wall」を、要件整理から HTML/CSS/JS 実装まで、ほぼ Claude Code に任せて開発しました。
フロントエンド中心の個人開発で、「LLM にどこまで実務レベルの実装を任せられるか」を試したケーススタディです。
解決したかった Twitch 配信の課題
RealityRipple というエモートウォールサービスに「Command」という機能があって、
!username のようなコマンドに表示したい視聴者（username）のプロフィール画像を事前に1人ずつ登録して、
エモートとして画面に出して歓迎している配信者がいました。
この仕組みを見て「いいアイデアだ」と思いましたが、
- 事前に個別登録が必要で運用コストが高い
- 対象ユーザーが増えるほど管理が難しくなる
- 配信中にもっとラフに使いたい
という課題を感じました。
そこで、Twitch のプロフィール画像取得とチャットコマンドを組み合わせて、
- 事前登録なし
-
!@ユーザー名のような入力だけで - その場でプロフィール画像を取得してエモート表示する
という形に自動化したのが Profile Image Wall です。
Profile Image Wall ができること
最終的に出来上がった「Profile Image Wall」は、ブラウザソース一つで次のように動きます。
- チャットで
!@ユーザー名と打つと、そのユーザーの Twitch プロフィール画像がエモートのように画面を飛ぶ -
!@allと打つと、その時点で発言済み視聴者全員を歓迎する専用アニメーションを表示 -
!soなどのコマンドに連動して、Twitch 公式の/shoutoutコマンドを自動実行する -
/shoutoutの 2 分クールダウンを内部でキュー管理し、連打されても順番に確実に実行する - OBS のブラウザソースとして URL を貼るだけで動作し、Windows / macOS を問わず利用できる
ツール自体はここから利用できます。
Claude Code に任せた範囲
今回は「機能のアイデアと仕様の方向性だけ人間が決めて、実装はできるだけ Claude Code に任せる」という方針で進めました。
AI に実際にやらせた主な作業は次の通りです。
- 要件整理のテキスト化
- 「チャットコマンド → Twitch API → プロフィール画像取得 → アニメーション表示」までのフローを文章で説明
- UI 構成と画面レイアウト案の生成
- 設定パネル、エフェクト選択、ステータス表示などを含むシングルページ構成
- HTML / CSS / JavaScript の初期実装
- OBS ブラウザソース前提の軽量フロントエンド
- プロフィール画像アニメーション（Rise / Pop Up / Bounce など）
- Twitch OAuth と API 連携の骨組み
- トークン取得フロー
- プロフィール画像取得用エンドポイント呼び出しのコード草案
プロンプトは「こういう動きをしたい」「こういう UI 構成にしたい」と、挙動とインタラクションをできるだけ具体的に書くようにしました。
生成されたコードをローカルで動かし、動かなかった部分・足りない部分をフィードバックして、再生成を繰り返す形です。
人間がやったこと（AIでは難しかった部分）
一方、「全部を AI に丸投げできたわけではない」と感じた部分もあります。
- 仕様の優先順位付け
- どのエフェクトを残すか、どこまで機能を削るかの判断
- Twitch の利用規約やレートリミットを踏まえた設計のライン引き
- 実際の配信ユースケースに合わせた挙動調整
-
!@usernameをどのタイミングで受け付けるか -
/shoutoutキューの間隔や表示テンポなどのチューニング
-
- テキスト・コピー・説明文
- 配信者が直感的に理解しやすい用語選び
- 日本語と英語の両方で、Twitch 文脈に沿った表現に整える作業
LLM はコードや UI の「たたき台」を出すのは非常に得意ですが、「配信画面として実際に気持ちよく動くか」「自分ならこう動いてほしいか」の判断は、最終的に人間が試しながら詰める必要がありました。
「唯一のアイデア」ではなくても作る意味
開発前は、「プロフィール画像エモート＋/shoutout キュー」の組み合わせはかなり珍しいのでは、と感じていました。
その後調べてみると、Streamer.bot のプリセットなどで、似た方向性の自作スクリプトが海外コミュニティでは共有されていることも分かりました。
それでもこのツールを作る意味があると考えた理由は次の通りです。
- Webブラウザだけで完結し、OSを問わず導入しやすいこと
- プロフィール画像エモートと
/shoutout管理が一体化した「視聴者歓迎を軸にした完成品」として提供していること - コードを書かない配信者でも扱える UI に落とし込んでいること
アイデアの一部は既にどこかで試されていても、「どういう形で、誰に届けるか」を設計し直す価値は十分にあると感じています。
これから AI と個人開発を組み合わせる人へ
今回の開発を通して感じた、AI と個人開発の付き合い方です。
- 「唯一のアイデアかどうか」を保証してもらうのではなく、「実装と検証を速く回すための相棒」として使う
- コアとなる課題設定や“気持ちよさ”の判断は、人間側が握る
- ある程度形になったら、似たツールがあっても「自分の文脈でどう差別化するか」を考える
Profile Image Wall は、Claude Code に実装をかなり任せながらも、特定の配信文脈にフォーカスした Web ツールとして仕上げた一例です。
同じように「配信周りでこういうツールが欲しい」「Web でこういう仕組みがあると便利」というアイデアがあれば、LLM にまずプロトタイプを一緒に作らせてみると、思っている以上の速さで形になると思います。