--- title: Vibe Coding を活用したセキュリティツール開発入門 tags: author: [JJ (yuasa)](https://docswell.com/user/melonattacker) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/KJ4WZNPV71.jpg?width=480 description: 「Vibe Coding を活用したセキュリティツール開発入門」の説明資料です。 https://tokushima-cyber-security-meetup.connpass.com/event/390907/ published: May 24, 26 canonical: https://docswell.com/s/melonattacker/5DM22L-2026-05-24-155501 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/KJ4WZNPV71.jpg) Vibe Codingでセキュリティ系 ミニツールを作ってみよう TOKUSHIMA Cyber Security Meetup 湯浅 潤樹 © Junki Yuasa # Page. 2 ![Page Image](https://bcdn.docswell.com/page/LE1YR5947G.jpg) 自己紹介 湯浅 潤樹（Junki Yuasa） • サイボウズ株式会社 セキュリティエンジニア • セキュリティツールを作るのが好きです • Threat Thinker、logira • 最近は徳島を題材にしたゲームも作っています • すだちころがし • 徳島県に住んでいます X: @melonattacker 2 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/GEWG15QZJ2.jpg) 今日のゴール 「ツールって作れるんだ」と感じて帰っていただくこと • 小さなセキュリティツールを作ってみる • 作る、動かす、直すを一通りやってみる • AIにどう頼めば進んでいくかを体感で覚える • 完成しなくてもOK、何か1つでも動けば大成功 Vibe Codingでセキュリティ系ミニツールを作ってみよう 3 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/47ZLPNWLJ3.jpg) 自己紹介タイム 30秒~1分程度で簡単に自己紹介をお願いします！ • 名前・ニックネーム • 出身地・どこから来たか • 普段やっていること • プログラミングやAIツールの利用経験 • 今日の意気込み Vibe Codingでセキュリティ系ミニツールを作ってみよう 4 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/YJ6WM8GMJV.jpg) 今日の流れ • 14:30~15:10 : 導入・デモ • 15:10~16:00 : 制作1 • 16:00~16:15 : 中間共有 • 16:15~17:10 : 制作2 • 17:10~17:35 : 発表 • 17:35~17:45 : まとめ 水分補給・お手洗い・休憩はご自由にどうぞ 5 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/GJ5MZ9VQJ4.jpg) 今日は2つのルートがあります プログラミング 未経験者ルート プログラミング 経験者ルート ChatGPT+単一 HTML+ブラウザで 動くものを作る Claude Code / CodexなどでCLIや 複数ファイルの ツールにも挑戦 未経験者 経験者 全員 Vibe Codingでセキュリティ系ミニツールを作ってみよう 6 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/9E29R23W7R.jpg) 全員 Vibe Codingとは ざっくり言うと、AIと会話しながら作ること • 完璧な仕様書より、まず作りたいものを言葉にする • AIに案を出してもらい、手元で動かしてみる • 作る、動かす、直すのループを何周も回す • 雑に言うとノリで作る、ただし安全には気を付ける Vibe Codingでセキュリティ系ミニツールを作ってみよう 7 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/D7Y4DY19EM.jpg) Vibe Codingの良さ 全員 コードが書けなくても作りたいものさえあれば作れる！ ベビーブランドを作っている実業家の方がVibe Codingでアプリを作る動画 https://www.youtube.com/watch?v=HzbsIW4PNw4 Vibe Codingでセキュリティ系ミニツールを作ってみよう 8 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/VENY6P2DJ8.jpg) セキュリティの世界にはどんな困りごとがある？ 全員 怪しいものを見分けたい メール、URL、ログ、設 定ファイル、添付ファイ ルなど 大量の情報を整理したい アクセスログ、脆弱性情 報、チェックリスト、調 査メモなど うっかりを防ぎたい 個人情報、APIキー、社 外秘情報、危険な設定 など 安全に自動化したい AIエージェント、スクリ プト、依存関係、実行環 境など Vibe Codingでセキュリティ系ミニツールを作ってみよう 9 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/Y79PL318E3.jpg) 全員 困りごとからツールを考える 困りごとを解決するには何が必要か？という観点で考える 困りごと 作れるツール メールやURLが怪しい フィッシング判定 / URLチェック ログが多すぎる アクセスログ集計 機密情報を貼りたくない 機密情報を隠す 設定ミスが不安 設定ファイルのチェック Vibe Codingでセキュリティ系ミニツールを作ってみよう 10 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/G78DXM4Z7D.jpg) セキュリティ系ミニツールを作ろう 全員 身近な困りごとを少しだけ楽にするツール • 本格的な製品ではなくてOK • 自分が少し使えそうなものでOK • クオリティが高くなくても、考えるきっかけになればOK • 今日は「とりあえず動く」状態にすることを目指す Vibe Codingでセキュリティ系ミニツールを作ってみよう 11 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/L7LM8361JR.jpg) 全員 題材例 題材に迷ったときはこの辺りから選ぶ パスワード強度チェッカー 個人情報マスキングツール 入力したパスワードの強度を判定 電話番号やクレカ番号を伏せる 怪しいメール判定ツール アクセスログ集計ツール フィッシングメールかどうか判定 ステータスコードやIPを集計 怪しいURL判定ツール Dockerfileチェックツール 短縮URLや怪しい単語をチェック よくある危ない書き方を検出 Vibe Codingでセキュリティ系ミニツールを作ってみよう 12 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/4EMY6D55EW.jpg) Vibe Codingの基本サイクル 全員 1. 作りたいものを言葉で表現 2. 最小版を作る 3. 動かして確認する 4. 改善点を1つ選ぶ 5. AIに頼んで直す、動かす 6. 4に戻る Vibe Codingでセキュリティ系ミニツールを作ってみよう 13 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/PER9P43ZJ9.jpg) 全員 頼み方で結果が変わる 惜しい頼み方 進めやすい頼み方 URLチェックツール作って HTML/CSS/JavaScriptだ けで、1ファイルで動く怪し いURL判定ツールを作って ください。まずはURL入力 欄、チェックボタン、結果 表示だけでOKです。 指示が具体的かつ明確だと方向性がずれにくい Vibe Codingでセキュリティ系ミニツールを作ってみよう 14 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/P7XQ3241EX.jpg) デモ: パスワード強度判定ツール 全員 HTML1ファイルでも小さいツールは作ることができる Vibe Codingでセキュリティ系ミニツールを作ってみよう 15 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/37K9YMZM7D.jpg) まずは完成系ではなく、動く最小版を作る 全員 HTML/CSS/JavaScriptだけで、 1ファイルで動くパスワード強度チェッカーを作ってください。 まずはパスワードの入力欄と文字数表示を用意してください。 16文字以上ならOK、16文字未満なら「短すぎます」と表示して。 初心者向けに、ファイルの保存方法とブラウザで開く方法も教えてく ださい。 Vibe Codingでセキュリティ系ミニツールを作ってみよう 16 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/LJ3W9YD2J5.jpg) 最小版から徐々に機能を加える 全員 次の条件もチェックするようにしてください。 - 英大文字が含まれている - 英小文字が含まれている - 数字が含まれている - 記号が含まれている それぞれの条件を満たしているかを、チェックリスト形式で画面に表 示してください。 Vibe Codingでセキュリティ系ミニツールを作ってみよう 17 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/8JDKG5P6EG.jpg) 全員 次に改善するなら？ 判定を分かりやすくする 使いやすくする 弱い・普通・強い、色表 示、注意メッセージ パスワード表示・非表示、 説明文追加 見た目を整える セキュリティを強化 中央配置、カードUI、 スマホ対応 漏えい済みパスワードを 警告 Vibe Codingでセキュリティ系ミニツールを作ってみよう 18 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/VEPK3G1Z78.jpg) 判定を分かりやすくするための指示の例 全員 パスワード強度を「弱い・普通・強い」の3段階で表示してください。 判定には、文字数・英大文字・英小文字・数字・記号の有無を使って ください。 また、強度に応じて表示色を変えてください。 弱い: 赤、普通: オレンジ、強い: 緑 初心者にも分かるように、変更点を説明してください。 Vibe Codingでセキュリティ系ミニツールを作ってみよう 19 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/27VV46YM7Q.jpg) 未経験者 単一HTMLで始める理由 ChatGPTでブラウザで動く単一のHTMLファイルで作る • • • • • 開発環境を構築しなくていい ブラウザで開くだけで動かせる 失敗しても改善しやすい 「作る→動かす→直す」のサイクルを回しやすい 外部ライブラリをなるべく使わず、シンプルに作れる Vibe Codingでセキュリティ系ミニツールを作ってみよう 20 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/5JGL1N9X7L.jpg) まずはここまで作ってみよう 未経験者 完成度よりも動くことを優先する • • • • 入力欄がある ボタンがある 結果が画面に表示される サンプルを1つ入れて動作確認できる Vibe Codingでセキュリティ系ミニツールを作ってみよう 21 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/47QYDQW5EP.jpg) Claude Code / Codex で作る場合 経験者 • 最初から実装させず、まず計画を出してもらう（/plan） • 機能を分割して、機能単位で小さく改善していく • コードを見て変更範囲を確認してからコミットするのがおすすめ • 入力例と期待する出力を用意して、動作確認しながら進める • 依存関係を増やしすぎない、バージョンを固定する Vibe Codingでセキュリティ系ミニツールを作ってみよう 22 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/KE4WZNKVJ1.jpg) 経験者 /plan させるプロンプト例 アクセスログを読み込んで、ステータスごとの件数と怪しいアクセス 候補を表示するCLIツールを作りたいです。 まずは実装せずに、要件を分解して実装計画を出してください。 外部依存はなるべく増やさず、最小構成で始めたいです。 その後、ステップごとに実装していきます。 Vibe Codingでセキュリティ系ミニツールを作ってみよう 23 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/L71YR5X4JG.jpg) 経験者 安全にVibe Codingするには • 危険な操作を承認しない • サンドボックス機能を使う • 依存関係を増やしすぎない • 3rd party製のSkillやMCPサーバを安易に入れない • AIコーディングツールの設定をセキュアに https://note.com/okdt/n/n655c4ee10e89 https://blog.flatt.tech/entry/vibe_coding_security_risk Vibe Codingでセキュリティ系ミニツールを作ってみよう 24 # Page. 25 ![Page Image](https://bcdn.docswell.com/page/G7WG15NZE2.jpg) Vibe Codingの成果物を安全にするには 経験者 まずは代表的な脆弱性の発生原理と対策方法を理解 https://amzn.asia/d/021dKPMw Vibe Codingでセキュリティ系ミニツールを作ってみよう 25 # Page. 26 ![Page Image](https://bcdn.docswell.com/page/4JZLPN3LE3.jpg) 全員 制作時間の進め方 • セキュリティ関連の題材以外でもOK • 完成度よりも「動かして確認する」ことを大事にする • • • • 個人情報、パスワード、APIキーなどの機密情報はAIに渡さない わからないことがあれば講師や周りの人に聞く 水分補給・お手洗い・休憩は自由にどうぞ いろんな方々が集まっているのでワイワイやっていきましょう Happy Building! Vibe Codingでセキュリティ系ミニツールを作ってみよう 26 # Page. 27 ![Page Image](https://bcdn.docswell.com/page/YE6WM8XMEV.jpg) 全員 中間共有で話すこと 1~2分程度で簡単に現状の共有をお願いします！ • 何を作っていますか？ • いま動いているところは？ • 詰まっているところは？ • 次に足したい機能は？ 途中で全然OK、うまくいかなかった話も歓迎です Vibe Codingでセキュリティ系ミニツールを作ってみよう 27 # Page. 28 ![Page Image](https://bcdn.docswell.com/page/GE5MZ9XQE4.jpg) 最後の発表で話すこと 全員 2~3分程度で取り組んだことについて教えてください！ • 作ったもの • 工夫したところ • AIにどう指示を出したか • うまくいかなかったところ • 次に改善したいところ • 今日の感想なんでも Vibe Codingでセキュリティ系ミニツールを作ってみよう 28 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/9729R2XWJR.jpg) まとめ セキュリティツールは専門家だけが作るものではない • 身近な困りごとを解決するために自作ツールが役立つ • AIと一緒に最小版を作って、少しずつ改善していくことが大事 • Vibe Coding は便利ではあるが、安全に行う気持ちを持つ Vibe Codingでセキュリティ系ミニツールを作ってみよう 29