Cursorハンズオン実践！

AI駆動開発 ハンズオン会 #1 【Cursor Workshop Tokyo】用の資料です
https://aid.connpass.com/event/368524/

Transcript

1. Cursor ハンズオン実践！ AI駆動開発 ハンズオン会 #1 [Cursor Workshop Tokyo]
2. Ikko Ashimine / 一功 安次嶺 AI駆動開発勉強会 LLM-jp 勉強会 株式会社I-Tecnology 取締役/CAIO/CADO 株式会社Oshibloom mugend AI 合同会社 AI駆動開発コンソーシアム 発起人/ボード GitHub: @eltociear Facebook: IkkoEltociearAshimine LinkedIn: ikko-ashimine 𝕏: @eltociear
3. 今日作るもの
4. 画像・動画ギャラリー ・Pixabay API × HTML/ デザイン/動き（1ファイル） 開発の目的 ・画像/動画を検索・グリッド表示・無限スクロール・お気に入り機能 ・完成するものは一つのファイル、どの PCでも動く ・API×フロントの “つながる感 ”を体験する 画像検索&一覧表示Webアプリ
5. 画像検索&一覧表示Webアプリ Live demo ：https://eltociear.github.io/cursor_handson_20251010/?q=food&mode=videos&page=2
6. ・検索バーからキーワードを入力し、画像や動画を取得して表示 ・画像を動画をボタンで切り替えられる ・結果をグリッドで表示（スマホ〜 PC対応） ・⭐でお気に入り登録／解除 ・お気に入りボタンで保存済み一覧を閲覧 ・クリックで詳細を表示（モーダル対応） Webアプリの要件
7. Pixabay のAPIを使います
8. フリー素材を提供する世界最大級のサイト ・無料で使える 写真・イラスト・動画・音楽 を提供 ・商用利用 OK・クレジット表記不要（※規約要確認） ・世界中のクリエイターが投稿した素材を API経由で取得可能 今回のハンズオンでやること 1⃣ 検索キーワードで Pixabay API を呼び出す 2⃣ 返ってきたデータをブラウザに表示（写真カード化） 3⃣ 「お気に入り」「動画」などタブを追加していく Pixabay って？
9. 1. Pixabay へアクセス 2. 右上のJoin（参加） → Sign Up から新規登録 3. ログイン状態のまま Pixabay API へアクセス 4. key (required) から緑色になっている API_KEY を取得 APIの取得方法（後で使用）
10. API＝アプリとアプリをつなぐ「窓口」（銀行の受付的なのを想像すると分かりやすいかも） 他のサービスの機能やデータを「プログラムから使うための入口」 今回は「Pixabay 」が提供する画像・動画データベースにアクセスする為に使用 APIとは？
11. 各ユーザーに一意に発行される「利用者 ID」 →このキーをURLに含めてアクセスすることで誰のリクエストかを識別します 前述の「APIが窓口」であれば「 API_KEY は暗証番号」 SNSやGitHub などのpublic リポジトリに含めるのは 絶対NG！！！！！！ ※GitHub= 自分のコードを保存して世界中の人と共有・協力できる場所。 GitLab 等も類似 ※public リポジトリ=誰でも見られるフォルダ。 private リポジトリは見られる人を指定可能 （が、private だとしてもAPI _KEY をソースコード内に入れるのも NGですね） 例: https://github.com/cursor/cursor/ , ⚠API_KEY の使用上の注意点
12. では実践開始しましょう
13. 最初のプロンプト 新しいディレクトリを作成してください Pixabay API を使って、検索キーワードから写真を取得し、ブラウザ上に表示する シンプルな index.html を生成してください。 （HTML/CSS/JavaScript のみで、ローカル HTTPで動作するように） 【要件】 - Pixabay の画像 APIを使用（無料） https://pixabay.com/api/?key=YOUR_KEY&q=cat&image_type=photo - 結果を 20枚表示（サムネイルのみ） - 検索フォームを上部に配置して再検索できるようにする - APIキーは const PIXABAY_KEY = 'YOUR_KEY' として定義 - デザインはシンプルで OK（後で拡張予定） 出力は index.html 1 ファイルでお願いします。 ここにあります →：https://github.com/eltociear/cursor_handson_20251010/blob/main/FIRST_PROMPT
14. エージェント呼び出し 右上のこれをクリック ここにプロンプト入力
15. Cursor の変更差分の承認 /非承認 Hunk（一部）ずつ 全部まとめて
16. お手持ちのブラウザ（ Chrome, Safari など）で対象ファイル開きましょう macOS: ⌘O Windows: Ctrl+O エージェントから完了の返答返ってきたら
17. Cursor などで使用している生成 AIは「確率的に次の単語を予測」して文章を生成 　→まったく同じ入力でも次に何を出すかは少しブレることがある 「人が毎回少し違う言い回しをする」みたいなもんだと思えばいいかも？ （ひたすら連想ゲームを繰り返してる感じ） 上手くいかない時は？
18. ポイントは3つ！できるだけ具体的に伝えると精度 UP❤ 1⃣ どこで（画面・場所） 2⃣ 何が（現象） 3⃣ どうなってほしい（期待） 🔺「画像が出ないので直して」 🔵「画像カードの中の写真が表示されない。リンク切れを直してほしい」とか ChatGPT さん「Grid の画像カード（.thumb ）で一部サムネが 404。webformatURL が空のとき previewURL にフォールバックして画像が必ず表示されるよう index.html の JS 内 normalizePhoto() を修正して。」 上手くいかない時は？
19. プロンプトを AIに強化してもらうのも手 上手くいかない時は？
20. プロンプト (2) 前ステップで作った index.html を、見た目と体験を大幅に改善した版として作り直してください。 （HTML/CSS/JS 単一ファイル。ローカル HTTPで動作） 【変更・追加】 - ヘッダーを固定（ sticky ）にして検索フォームを常時表示。検索ワードは URLクエリ (q)に反映・復元。 - レスポンシブなカードグリッド（モバイル 2列〜PC4列）。CSS変数・ダークテーマ。 - カード：サムネ＋作者名バッジ。ホバー時に軽い拡大 /シャドウのアニメーション。 - ローディング状態は「スケルトンカード」を表示。取得完了で置き換え。 - 結果0件時の空状態 UI（アイコンとメッセージ）。 - エラー時はトースト通知。再検索で自動的に消える。 - アクセシビリティ： img に alt、ヘッダー要素に適切な role。 - API_KEY は書き換えないでください。 【出力】 - 完成した index.html （全コード）。差分でなくフル出力。
21. プロンプト (3) 現状の index.html を拡張し、カードクリックで拡大表示できるモーダルを追加してください。 （HTML/CSS/JS 単一ファイル。フルコードで提示） 【要件】 - カードクリックでモーダルを表示。中身は <img> で最大化し、背景を半透明で暗く。 - 右上に閉じるボタン（ Esc でも閉じる）。フォーカストラップでモーダル内の操作に限定。 - 左右矢印キーで「前 /次」の画像にナビゲーション（同検索結果の並び順）。 - 先読み最適化：モーダル表示中は前後の 1枚をプリロード。 - 画像の“blur-up” 演出：最初は低解像度 (previewURL) をぼかして表示 →本画像(webformatURL/largeImageURL) が読み込めたら切り替え。 - メタ情報：作者名（ Pixabay ページへのリンク）とタグ（ #tag）をモーダル下部に表示。 - アクセシビリティ： dialog 相当の役割、 aria-label 等を適切に付与。 - API_KEY は書き換えないでください。 【据え置き】 - 検索・カード UI・スケルトンは前ステップの仕様を維持。
22. プロンプト (4) index.html をさらに拡張し、縦スクロールで次ページを自動取得できる「無限スクロール」を実装してください。 （HTML/CSS/JS 単一ファイル。フルコード） 【要件】 - デフォルトを 40件表示に変更。 - IntersectionObserver を用いた無限スクロール（ 40件ずつ追加）。最下部に sentinel を置く方式。 - 取得済み IDを Set で保持し、重複表示を防止。 - 画像は <img loading="lazy"> を使って遅延読み込み。表示直前でプリロードする簡易ロジックも可。 - 現在の検索状態（ q, page ）を URL に反映し、戻る /進むで状態復元できるように（ history.pushState / popstate ）。 - フッターに「 Back to Top 」ボタン（スクロールでフェードイン）。 - エラーや API残件なし時の振る舞い（読み込み停止・控えめなメッセージ）。 - ページの最下部に到達した場合、自動で次のページをロードしてください。 - API_KEY は書き換えないでください。 【据え置き】 - モーダル、カード UI、ヘッダー、スケルトンは維持・連携。
23. プロンプト (5) index.html をさらに拡張し、お気に入り機能をつけてください。 （HTML/CSS/JS 単一ファイル。フルコード） 【要件】 - お気に入り：カード右上に「★」トグル。クリックで localStorage('fav_media_v1') に保存 /解除。 - ヘッダーに「 Favorites 」タブを追加：お気に入りのみ一覧表示。通常検索と状態が切り替え可能。 - クイック検索チップを実装（例： Nature/City/Food/Animals/Technology ）。クリックで q を置き換え再検索。 - テーマ：ダーク /ライトの切り替え（ CSSカスタムプロパティ＋ prefers-color-scheme 対応）。切替状態は localStorage に保存。 - マイクロインタラクション：カードのホバーに “ふわっ ”としたアニメ、モーダルオープン時のフェード /ズーム。すべて CSS トランジションで軽量。 - アクセシビリティ仕上げ：タブは role="tablist" 準拠、ボタンに aria-label 、キーボードフォーカスリングを見やすく。 - パフォーマンス：不要なイベントリスナ解放、オブザーバやタイマーのクリーンアップ、画像のプレースホルダ戦略（ previewURL →webformatURL ）。 - API_KEY は書き換えないでください。 【注意】 - Pixabay の利用規約に配慮し、カード下部に小さく “Images from Pixabay” とリンク表記（フッター）を追加。
24. おまけ（中級） 余裕あればこれもやってみよう！
25. 音声反応Webアプリ（中級）
26. 音声リアクティブ・リング＋字幕デモ ・Web Audio API × Web Speech API × Canvas 2D 開発の目的 ・声や音に合わせて 光のリング（波紋） を描画 ・同時に 音声認識字幕 をリアルタイム表示 ・イベント会場で「声を出すと画面が反応する！」体験を提供 音声反応Webアプリ（中級）
27. UI構成 ・中央：フルスクリーン Canvas （リングアニメーション） ・左上：コントロールパネル 　・Start/Stop 　・感度スライダ 　・色テーマ（ Classic / Neon ） 　・ノイズゲート閾値 　・字幕オン /オフ ・右下：音声認識字幕（途中結果＋履歴） 音声反応Webアプリ
28. マイク入力 & 音解析 ・getUserMedia でマイク音声を取得 ・AudioContext + AnalyserNode で周波数解析 ・ピーク検出：低域強調＋可変しきい値＋クールダウン ・環境ノイズに応じた自動キャリブレーション機能あり 音声反応Webアプリ
29. 光のリング表現 ・ピーク時にリング生成 → 半径拡大 & アルファ減衰 ・複数リングの重なりで残像が映える ・テーマ切替 　・Classic ：白～薄水色のグロー 　・Neon：低音＝シアン、高音＝マゼンタ ・黒背景＋半透明フェードで軌跡が残る 音声反応Webアプリ