AI 3-minute cooking / AI 3分間クッキング

2025/5/30 サイバーフライデーLT資料です。
会場にはITエンジニアも、そうじゃない方もいらっしゃいますので、これはAIコーディングに馴染みのない方向け。

Transcript

1. AI 3分間クッキング なにができるかは　AI 次第 @otb_msk ※本スライドの内容は全て2025.5.30現在のものです 【2025.5.30 サイバーフライデーLT】
2. 自己紹介 乙部　@otb_msk • 福井県在住、フリーランス（主にセクションナイン様） • ライフワークとして、こども向けプログラミング教室の先生 　⇒ PCN（プログラミング クラブ ネットワーク） 　「すべてのこどもたちにプログラミングを」 　IchigoJam Basic • 開発経験は C++、VB.NET、PHP（素組み）、JavaScript （素組み）など2000年代で止まっている • 近年は事業会社で、発注側企業の情シスをやってた人 ◦ コンタクトセンター AmazonConnect × Salesforce マイグレーション 2
3. デモ1：めがねルーレット　プロンプト シンプルなWebアプリを作ろう * ブラウザで動作するルーレットです * いろんなメガネのルーレットです * スタートボタンを押すを、メガネが回り始めます * ストップボタンを押すと、だんだん回るスピードがゆっくり になり、確定演出の後で、1つに決定します * イベントで利用するので、遠くからでも見やすいサイズとデ ザイン、カラーで 3
4. 最適化プロンプトを作って改善しよう ブラウザで動作するメガネルーレットWebアプリを作成してください。 【基本仕様】 - HTML/CSS/JavaScript単一ファイル - 8種類のメガネ（👓🕶🥽を組み合わせ、それぞれに名前付き） - 円形ルーレット、直径500px - 8色の扇形（各45度、conic-gradientで実装） - メガネアイコンは各扇形の中央（22.5度、67.5度...と配置） 【UI要件】 - タイトル：「🤓 メガネルーレット 🤓」4rem - ポインター：ルーレット上部に白い三角形 - ボタン：「スタート」（赤系）「ストップ」（青緑系）、2rem、大きめ - 結果表示エリア：3rem、半透明背景、当選時は金色で光るアニメーション 【動作仕様】 - スタート：高速回転開始（8deg/frame）、ストップボタン有効化 - ストップ：段階的減速（0.98倍ずつ）→確定演出（1秒のスケール&回転）→結果表示 - 結果：選択されたメガネの絵文字と名前を表示 【デザイン要件】 - 背景：紫系グラデーション - 遠距離視認性重視：大きなフォント、高コントラスト、鮮やかな色 - モダンなUI：角丸、影、ホバー効果 - レスポンシブ不要、イベント用固定サイズ 4 このアプリを一発で作るために、 最適なプロンプトの指示方法を教えて
5. デモ1：めがねルーレット https://claude.ai/public/artifacts/9511d925-72d2-4fca-bb31-4c3d73290730 5
6. AIコーディングの いま/みらい 自分で構築できる人 自分で構築できない人 ルールをメンテナンス、オーケストレーションする人 ルールを与えて自動コーディング × 意図した実装になっているか確認 品質を担保するための補助エージェント 実装の作業効率を上げるための補助エージェント 自然言語で頼んで作ってもらう 6 今回の使い方
7. おわり ほしいものは 作ろう！ 　Good Vibe! 7