Zenn
🔥

Claude CodeにTwitter炎上チェッカー作らせてみた

に公開
Chrome
Twitter
炎上
Claude Code
Vibe Coding
tech

「世界的ですもんね 乗るしかない このビッグウエーブに」

ということでClaude Codeを使ってサクッとVibe codingを試してみます。

作ったもの

Twitter炎上チェッカーというChrome拡張機能を作りました (←作らせました?)。

Twitter (旧Twitter) でツイート内容を入力するとAIが炎上可能性を検証し、ツイート内容が危険な場合は警告を出してくれるという、日々炎上がどこかで起こっているネット上でで戦火を浴びないための第一歩となるツールです。

実はあまり先例がないようです。

Twitter炎上チェッカー動作デモ

簡単な仕組み

ものすごく端的に言うと、リアルタイムで入力を監視し、AIに炎上可能性チェックのためのプロンプトとツイート本文を渡して、jsonでデータを返してもらうという至極単純な構成です。

リアルタイム検知は1秒ごとに実施しています。

AIでのチェック

生成AIとしてはGemini APIを用いることにしました。
なんとGeminiは無料で使えるAPIキーを配るなどの出血大サービスをしており、誰でも気軽に試しやすいので選定しました。

以下のテキストを分析し、Twitter/Xで投稿した場合の炎上リスクを評価してください。

テキスト: "${text}"

以下の基準で評価してください：
- safe: 炎上リスクが非常に低い
- caution: 炎上リスクがある程度存在する
- dangerous: 炎上リスクが高い

回答は以下のJSON形式で、警告メッセージジ100文字以内の短文でお願いします：
{
  "riskLevel": "safe|caution|dangerous",
  "warningMessage": "100文字以内の警告メッセージ"
}

リスクレベル

リスクレベルは以下の三段階に分類されます。

  • ✅ Safe: 炎上リスクが低い
  • ⚠️ Caution: 注意が必要
  • 🚨 Dangerous: 炎上リスクが高い

Safeの場合は何も警告はなく、CautionとDangerousでは警告が出力されます。
CautionとDangerous時の警告UIはそれぞれ以下の通りです。

Claude Code と 私 の会話

Claude Codeに作らせたと言っても、やはりユーザーは人間であるため、人間目線で使い勝手やUI、技術面に関して指示を出すことも多々あります。
開発中の会話や指示を一部振り返ってみることにします。

これはTwitter(X)で投稿前に入力されたテキストを認識し、炎上可能性を調べ、炎上しそうな文章であれば警告を出すというChrome拡張機能です。今はワードリストでチェックする方式ですが、GeminiにAPIで問い合わせ、炎上可能性をチェックして

この拡張機能は元々、AIでチェックせずワードリストでのチェック方式で開発しており、途中からClaude CodeにGemini AIを活用するように作り直してもらいました。
つまり今回、Claude CodeはAIへの問い合わせを主に担当してもらっています。

この指示により叩き台となるコードが生成されました。まず最初の問題点としてAPIキーがハードコードされており、拡張機能として公開するには適していませんでした。

geminiのAPIはユーザーのものを利用したいので、入力画面および、それを保存する機能を実装してください

この指示により、APIキーはハードコードされず、入力ページを作成してくれました。
UIもシンプルながら、必要十分なものになっています。


最後の入力から1秒経ったらAPIを叩くように変更してください。

最初に生成されたコードでは、ツイートの入力を監視しており、一文字でも変更があれば逐次APIを叩いていました。これでは太っ腹なGemini APIだとしても流石に痺れを切らしてRate Limitedを吐いてしまいます。

かわいそうなので(??)、ユーザーの最後の入力から1秒経ったときにAPIを叩くように変更してもらいました。

READMEを書いて

README.mdも書いてもらいました。
生成AIが生成するコンテンツって絵文字が使ってある場合が多く見やすいですね。絵文字が多いのは何故なのでしょうか?

APIキーはハードコードをするのではなく、拡張機能のオプションから設定する方式です。READMEを書き直してください

READMEに嘘を書いて怒られてますね。

まとめ1 (炎上チェッカー編)

Chrome拡張機能ですが、拡張機能としては公開してません。気が向いたら公開したいねって感じですが、果たしてこの重い腰があがるのか...
GitHubでコードを公開しているので、「戦火に巻き込まれるのはゴメンだぜ！」って方は是非↓

https://github.com/PocoPota/twitter-flame-checker

なんか軽い気持ちでツイートしたら、想像以上に反応があり、びっくりしてます。
思ったよりみんな、日々炎上を恐れて生きているんですかね。(適当)

https://x.com/PocoPota_io/status/1937899664646533168

この拡張機能は大学の「炎上を防ぐには」というテーマの発表で軽く作ったものですが、きちんと整備したらもっと良くなりそうだと感じました。
特にツイートボタンやリプ返信のときもチェックを入れたほうがいいですね。

まとめ2 (Claude Code編)

Claude Codeすごいですね。

↑もうこれにつきます。
数年後のエンジニアの仕事はどこまで減っているか、興味もありつつ心配ですね。AIに負けないエンジニアにならなくてはと思わされました。

しかし、まだ不完全なコードを生成することが多く、人間によるレビューは必須だと感じました。セキュリティの観点は特に。
またこの程度の簡易的なサービスだと大丈夫そうですが、大きなプロジェクトだと耐えれるのかも気になるところです。

他のプロジェクトでClaude Codeを触った時の例ですが、「CSS完全に理解した」状態で、ミスをする温かみもまだありそうですね(?)

最後に、プログラムは自分で書いたほうが楽しいです。

(と言いつつAIも活用していきますが)

まとめ3

2025年7月5日は地震も津波も起きず、世界は滅亡しなかったですね。(*最初のデモ画像)

Discussion