20260730_イベント資料

Transcript

3. Antigravity × Gemma ローカルLLMでつくる！自分だけの生成AIアプリ開発ハンズオン
4. − 出張ハンズオン −
5. 写真・動画撮影 NGの方はお声がけください
6. 本日の流れ STEP 01 STEP 02 STEP 03 STEP 04 STEP 05 知る 見る 入れる 作る 見せる AIとローカルLLM 作例デモ 環境をセットアップ プロンプトワーク 成果物発表 ※ 本⽇の15分セッションでは「知る」「⾒る」「作る」を中⼼に解説します！ 「⼊れる（セットアップ）」は⼿元資料でサポートします。
7. connpass エンジニアをつなぐIT勉強会支援プラットフォーム アカウント登録 ↓ イベントに申し込み
8. 01.生成AI（LLM）って何？ 生成AI（LLM）とローカルLLMの仕組みを理解しよう
9. 生成AI（LLM）とは？ 「膨⼤な⽂章を学習し、つぎに来る⾔葉を⾼精度に予測するマシン」  ⼊⼒（プロンプト） 「明⽇の天気は」   LLM（予測マシン） 確率的につながる単語を計算   出⼒ 「晴れでしょう」 ⼤規模⾔語モデル (LLM) AIエージェントへの進化 ⼤量のテキストデータを学習し、⼈間のように⾃然な対話、⽂章 の作成、翻訳、コードの⽣成を⾏う⼈⼯知能技術です。 単なる「質問への回答」にとどまらず、⾃律的に思考し、ファイ ルの編集やツールの実⾏までこなす「AIエージェント」へと発展 しています。 ChatGPTやGeminiなど、現代の⾰新的なAIツールの核となってい ます。 開発や⽇常作業の強⼒な相棒として活躍します。
10. クラウド LLM ローカル LLM 接続先のサーバー内で動く 手元の端末内で動く ChatGPT・Gemini と同じ“会話できる AI（LLM）”の仲間。 大きな違いは「どこで動くか」 ★
11. クラウド LLM vs ローカル LLM  クラウドLLM (ChatGPT等)  ローカルLLM (Gemma等) データの流れ データの流れ ⾃分のPC ➔ ネット送信 ➔ 海外巨⼤サーバ ➔ 返答 ⾃分のPCの中でAIが直接思考 ➔ 端末内で完結！  通信が必須（Wi-Fi環境が必要）  完全オフラインで即座に動作  従量課⾦や利⽤制限がある  完全無料で制限なく使い放題  機密データの送信に注意が必要  外部へデータが漏洩するリスクゼロ
12. 最近のローカル LLM事情 性能がクラウドに追いついてき た テキスト入力だけでなく、画像入力な どにも対応できるようになった スマホやノート PCでも 動かせるようになった ツールが成熟し、 簡単に使えるようになった
13. 02. どんなものが作れるの？ 作例デモを見て、具体的にAIとの関係をイメージしてみよう
14. 作例① 💡 アイデア生成サービス 「作りたいものが思いつかない」を解決 テーマを入力すると、AIが多角的な視点からアイデアを ブレスト＆自動提案してくれるアプリ。 プロンプト 【仕様】 - 5つの質問に選択式で答えると、開発アイディアを3件カード形式で提案する - 画面遷移：スタート画面 → 質問画面（1問ずつ） → 診断中アニメーション → 結果カー ド - 質問例：誰の悩みを解決したい／人に見せたいか／テキスト・画像・音声どれ／ 真面目か笑えるか／一人で使うか複数人か - この段階ではAIは使わず、選択肢の組み合わせに応じた固定パターンで結果を返す - 結果カードには「タイトル・概要・作るのに必要な機能」を表示 【制約】 - HTML/CSS/JavaScript を index.html 1ファイルに全て記述 - 外部ライブラリ・npm・ビルドツールは一切使わない - CSSは診断アプリ風のポップな配色 - 説明は不要、コードのみ出力
15. 作例② 🎙 オフライン音声学生ノート ネット接続なしで講義を自動要約 講義⾳声を⽂字起こしし、ローカルLLMが要約＆重要単語を抽出 する学習サポートツール。 💡 主な機能と特徴 ‧ リアルタイム⽂字起こし マイクから⼊⼒された講義⾳声を、⾼精度にテキスト化します。 ‧ ローカルLLMによる⾃動要約 外部APIを使わず、PC内で動作するローカルLLM（Ollamaなど）が内 容を賢く要約。 ‧ 重要キーワード‧単語の⾃動抽出 復習やテスト対策に役⽴つ重要な⽤語やキーワードを⾃動的にリスト アップします。
16. この部分の色を変えたい ～の部分が動かない エラーを解決して
17. 03. ハンズオン環境構築 Antigravity と Ollama (Gemma) をインストールしよう
19. Antigravity ①ダウンロード 1. 公式サイトを開く ブラウザで公式サイトを開く: antigravity.google 2. インストーラーを選択 お使いのOS（macOS / Windows）に適合するインストーラーを選 択してダウンロードします。
20. Antigravity ②セットアップ 1. ファイル実行 ダウンロードしたインストーラーをダブルクリックして起動します。 2. ログイン 「Continue with Google」をクリックし、個⼈のGoogleアカウント でログインします。 3. 準備完了 開発画⾯（VS Code互換のUI）が表⽰されたら起動成功です。
21. Antigravity ③安全性とデータの使用とプラグイン 1.「セキュリティ＆データの利用」の項目 2. さまざまな Google デベロッパー ツールと連携する 一連の拡張機能（ MCP：プラグイン） チェックせず NextでOK すべて選択してインストール
22. Antigravity ④完了チェック この開発画面が 表示されていれば OK！ 準備ができた⽅は、ぜひ隣で困っている 仲間を助けてあげましょう！
23. Ollama ①インストール STEP 01 ブラウザで公式サイトを開く ollama.com STEP 02 インストーラーのダウンロード お使いのOS（macOS / Windows）に適合するインストーラーを 選択してダウンロードします。
24. Ollama ②ターミナルの起動と確認 ▪【Windows】PowerShellの起動 1. Win キーを押す （またはスタートボタンを右クリック） 2. 「PowerShell」と⼊⼒し選択 ▪【Mac】ターミナルの起動 1. command + Space キーを押す 2. 「Terminall」と⼊⼒し選択 ターミナル（Mac）または PowerShell（Win）を開き、以下のコマンドを⼊⼒します。 PS C:\WINDOWS\system32> ollama --version ollama version is 0.32.4
25. Ollama ③Gemmaを入れる Googleが開発したオープンモデル「Gemma」をPCにダウンロード＆起動します。 標準モデル（推奨） ollama run gemma4:12b 軽量モデル 最新軽量版 スペックが⼼配なPC向け 最新の効率化モデル ollama run gemma4:e4b ollama run gemma4:e2b
26. 04. プロンプトワーク ⾃分だけのオリジナルサービスを作ってみよう
27. ハンズオンの流れ ローカル実⾏ フィードバック AntigravityとGemmaでツールを 試作 ⾯⽩かったアイデアを称え合おう アイデア決定 成果物発表 プロンプトの【 】に構想を⼊⼒し てみよう グループで作成したツールをお互 いに共有！
28. 作り方は３回の指示だけ STEP 1（5分） STEP 2（3分） STEP 3（7分） ① 大枠を作る ② ローカル LLMに接続 ③ 直す・仕上げる ⽳埋めテンプレートを使い、画⾯ と基本機能をAIに作ってもらいま す。 作成したWebアプリの裏側を Gemmaに繋ぎ変えます。 「⾒た⽬をオシャレにして」「機 能を追加して」と改善します。
29. プロンプト①アイディア構想 index.html 1ファイルだけで完結する「【 ツール・サービス名 】」を作ってください。 【だれに】 ・【 対象ユーザー 】の、【 解決したい悩み 】という悩みを解決したい 【どう動く】 ・ユーザーがすること：【 具体的な入力アクション 】 ・アプリが返すもの：【 生成される結果・回答 】 ・この段階ではAIは使わず、JavaScriptの仮の固定パターン（ダミーデータ）で動けばOK 【おやくそく】 ・HTML/CSS/JavaScript を index.html 1ファイルに全て記述 ・外部ライブラリ・ビルドツールは使わない ・モダンで清潔感のある洗練されたUIデザインにする ・プロジェクト直下に index.html を作成してください ・余計な解説は不要で、コードの作成・更新のみを行ってください
30. プロンプト①プロンプト記入例 💡 記⼊例 1 💡 記⼊例 2 【 留学⽣向け 講義ノート翻訳メモ 】 【 真夜中の独り⾔⽇記 】ツール だれに：⽇本の⼤学に通う留学⽣ の「講義スピードが速く、翻訳しながらノー トを取るのが間に合わない」悩みを解決 だれに：夜眠れずに考え事をしてしまう ⼈の「誰にも⾔えない愚痴や独り⾔を 吐き出して、ただ共感して癒やされたい」悩みを解決 ユーザーがすること：講義で聞き取った⽇本語テキスト（またはキーワード） を⼊⼒して「翻訳メモ作成」を押す すること：テキストエリアに今の気持ちや愚痴を⼊⼒し、「吐き出す」ボタン を押す アプリ：⽇本語テキストと、その英語翻訳＆要約メモを並べてカード形式で表 ⽰する アプリ：静かな夜をイメージした画⾯で、⼊⼒内容を優しく肯定‧共感する温 かいメッセージを表⽰する 💡 記⼊例 3 💡 記⼊例 4 【 晩ごはんに迷ったときの闇鍋ガチャ 】 【 講義の代筆メモ 】 だれに：今⽇の夜ご飯が決まらない ⼈の「誰かに適当に決めてほしい、ワクワ クしたい」気分に応える だれに：⼤学の講義でノートを取るのが遅い ⼈の「教授の話に追いつかず⼤事 なポイントを書き逃してしまう」悩みを解決 すること：「ガチャを回す」ボタンを押す（冷蔵庫にある⾷材を1つ⼊⼒して もOK） すること：講義で聞いたキーワードを数個箇条書きで⼊⼒し、「まとめ」ボタ ンを押す アプリ：ランダムで「メイン料理＋奇妙なトッピング」をカード形式でポップ に表⽰する アプリ：⼊⼒したキーワードを使って、分かりやすい箇条書きのノート形式に 整形して表⽰する
31. プロンプト②ローカル LLMにつなぐ 【どこを】 アプリの中の「 【 置き換えたい処理・ボタン 】」の処理を、ローカル LLM（Ollama）呼び出しに置き換えてください。 【AIにさせたいこと】 ・あなたは【 AIの役割・キャラクター 】の担当です。 ・【 入力されるデータ 】を受け取り、【 出力してほしい回答・内容 】を返してください。 【つなぎ方】 ・エンドポイント : http://localhost:11434/api/chat ・モデル名: gemma4:e2b ・リクエスト形式 : { model: "gemma4:e2b", messages: [{ role: "system", content: 【AIにさせたいこと】に書いた内容 }, { role: "user", content: 画面でユーザーが入力したテキスト }], stream: false } ・レスポンス（data.message.content）からテキストを取得して画面に反映する ・返答に ``` などのコードフェンスが含まれる場合は除去すること ・見出しや箇条書きなどのマークダウンは、崩れずに読める形で画面に表示する ・Ollama未起動時や通信エラー時は「 Ollamaを起動してください」と画面に表示し、仮実装の挙動にフォールバックして画面を壊さない こと 【おやくそく】 ・index.html 1ファイルのまま ・説明不要、コードのみ出力（ index.html を直接最新状態にして保存してください）
32. プロンプト②プロンプト記入例 💡 記⼊例 1 💡 記⼊例 2 【 留学⽣向け 講義ノート翻訳メモ 】 【 真夜中の独り⾔⽇記 】ツール 【どこを】 アプリの中の「【 「翻訳メモ作成」ボタンを押したときのテキスト処理 】」の処理を、ローカルLLM（Ollama）呼び出しに置き換えてくださ い。 【どこを】 アプリの中の「【 「吐き出す」ボタンを押したときの共感メッセージ⽣ 成 】」の処理を、ローカルLLM（Ollama）呼び出しに置き換えてくださ い。 【AIにさせたいこと】 ‧あなたは【 ⽇本の⼤学の講義ノートを留学⽣向けに分かりやすくまと める優秀なチューター 】の担当です。 ‧【 ユーザーが⼊⼒した講義の⽇本語テキスト 】を受け取り、【 元の ⽇本語の意味を保ったまま、⾃然な英語への翻訳と、ポイントを絞った 英語の箇条書き要約メモ 】を返してください。 【AIにさせたいこと】 ‧あなたは【 夜眠れない⼈の愚痴や独り⾔を静かに聞いてくれる、優し く温かいカウンセラー 】の担当です。 ‧【 ユーザーが⼊⼒した夜の悩みや愚痴のテキスト 】を受け取り、【 相⼿の気持ちを絶対に否定せず、温かく寄り添い共感する2〜3⽂の短い メッセージ 】を返してください。
33. プロンプト③ 直す・仕上げる 1機能ずつ順番に指示を出す 「デザインをダークモードにして」 「結果を箇条書きで分かりやすくして」 「コピーボタンを追加して」 ⼀気に頼まず、 ⼩分けにして対話するのがコツ！
34. QA ローカル LLMとつながらない、、 ・Antigravity IDEを使っている人 ・Windows PS C:\WINDOWS\system32> $env:OLLAMA_ORIGINS=”*” PS C:\WINDOWS\system32>ollama serve PS C:\WINDOWS\system32> ollama run gemma4:e2b ・Mac > OLLAMA_ORIGINS="*" ollama serve > ollama run gemma4:e2b
35. 成果物発表会のご案内 1分 ⼀⼈あたりの持ち時間 完成していなくても大丈夫！ どんなアプリを作ろうとしたか 「どこで詰まったか」「エラーの内容」も⽴派な発 表です！ 挑戦した⾃分と仲間に拍⼿を送りましょう
36. Q&A ご質問・ご感想があれば自由にお聞かせください！
38. 本日はありがとうございました！次のステップへ 10万円賞金のコンテストの応募はこちらから https://www.protosolution.co.jp/codebase/ai-contest-lp/
39. − Appendix −
40. アイデア出し〜テスト実行までのプロンプトテンプレ 次スライド以降で以下の手順に従って開発することができます！ 順番 プロンプト 種類 実行先 1 P0 環境チェッカーを作る 全員共通・固定 Antigravity 2 アイデア出し 対話 ChatGPT / Gemini / Claude 3 P1 土台を作る ↑で生成 Antigravity 4 P2 メイン機能 ↑で生成 Antigravity 5 P3 音声入力・読み上げ 全員共通・固定 Antigravity 6 P4 品質・速度・UX改善 全員共通・固定 Antigravity 7 P5 動作シナリオテスト ↑で生成 Antigravity 8 P6 追加修正テンプレ 全員共通・固定 Antigravity（随時）
41. （推奨） Ollama経由でGemmaが呼べるか疎通確認 Antigravityで以下プロンプトを実行して、自分のPCでGemmaの接続診断を行いましょう！ これから index.html 1ファイルだけで動くWebアプリを作ります。その第一歩として、ローカルLLM（Ollama）との接続診断パネルを作ってください。 ## 技術要件（厳守） - HTML / CSS / JavaScript のみ。index.html 1ファイルに全て記述する - npm・ビルドツール・フレームワーク・外部CDN・追加言語のインストールは一切禁止 - Ollamaのエンドポイントは http://localhost:11434 、モデルは gemma4:e2b ## 作るもの：接続診断パネル 画面上部に「接続診断」セクションを作り、以下を表示・実行できるようにしてください。 ### 1. 現在の実行環境の表示（ページ読み込み時に自動表示） - location.href - location.origin（file:// で開いている場合は "null" になる点に注意） - location.protocol - protocol が file: の場合は「file:// で開いているとマイク機能とCORSで問題が出ます。プレビューサーバー（http://localhost）経由で開いてください」と警告を出す ### 2. 「接続テスト」ボタン（押すと以下を順に実行し、各ステップの結果を ✅／❌ で一覧表示） - ステップ1：GET http://localhost:11434/api/tags - 成功したら、取得したモデル名の一覧を画面に表示する - 一覧の中に gemma4:e2b が存在するかを判定して表示する（無ければ「モデル名が違う可能性があります」と、実際にあるモデル名を候補として提示する） - ステップ2：POST http://localhost:11434/api/chat - body は model: "gemma4:e2b" / messages: [{role:"user", content:"こんにちは"}] / stream: false / think: false / keep_alive: "30m" - 応答本文の先頭50文字と、リクエストにかかった秒数を表示する アプリはできたけど、Gemmaが呼 び出されない問題が発生する可能 性があります。 このプロンプト実行でこの問題を回 避できます ### 3. エラーの切り分け表示（ここが最重要） fetchが失敗した場合、原因ごとに違う対処法を画面に出してください。 - **TypeError（Failed to fetch）が発生した場合**：Ollamaが起動していないか、CORSでブロックされたかのどちらか。両方の可能性と、それぞれの確認方法を並べて表示する。特に、ブラウザの開発者ツールのConsoleに CORS という単語が出てい ないか確認するよう促す - **HTTPステータスが返ってきた場合**：ステータスコードと応答本文をそのまま表示する（404ならモデル名の誤りの可能性が高い旨を添える） - **タイムアウトした場合**：初回呼び出しはモデルの読み込みに数十秒かかることがある旨を表示する（タイムアウトは60秒に設定） CORSが疑われる場合の対処法として、以下をOS別にコピーボタン付きで表示してください。 - macOS: `launchctl setenv OLLAMA_ORIGINS "*"` を実行後、Ollamaアプリを終了して起動し直す - Windows: `setx OLLAMA_ORIGINS "*"` を実行後、タスクトレイのOllamaを終了して起動し直す - Linux: `systemctl edit ollama.service` に `Environment="OLLAMA_ORIGINS=*"` を追記し、`sudo systemctl daemon-reload && sudo systemctl restart ollama` - どのOSでも使える簡易手段: 一度Ollamaを終了してから、ターミナルで `OLLAMA_ORIGINS=* ollama serve` を実行する また「この設定はハンズオン当日限りの設定です。終わったら元に戻してください」という注意書きも表示してください。 ### 4. 見た目 診断パネルは後から折りたたんで隠せるようにしてください（アプリ本体を作った後も残して使うため）。 ## 最後にお願いしたいこと 作成後、プレビューサーバーを起動してブラウザで実際に開き、「接続テスト」ボタンを押した結果を確認してください。エラーが出た場合は、原因を切り分けたうえで、私が何をすればよいかを日本語で説明してください。
42. アイデア出しで悩んでいたら .... 以下プロンプトをChatGPT / Gemini / Claudeに貼り付けて、AIと一緒にアイデアを出しましょう！ あなたは「ローカルLLMアプリ開発ハンズオン」のアイデア出し伴走役です。 私（参加者）と対話しながらアプリのアイデアを固め、最後にAIコーディングツール「Antigravity」へそのまま貼り付けられるプロンプトを作ってください。 ## 絶対制約（アイデアはこの範囲内で考えること） 1. 成果物は index.html 1ファイルのみ。HTML / CSS / JavaScript を全部その中に書く 2. npm・ビルドツール・フレームワーク・外部CDN・追加言語のインストールは一切禁止（環境依存を避けるため） 3. アプリの中からローカルLLM（Ollama / モデル名 gemma4:e2b / http://localhost:11434 ）を必ず呼び出し、そのやりとりがアプリの中心機能であること 4. データ保存は localStorage まで。サーバー・DB・ログイン機能は不可 5. 制作時間は90分。プログラミング初心者でも完成できる規模にする 6. 画面は1〜2画面まで。主要機能は3つ以内 7. gemma4:e2b は小型モデル。長文の指示・厳密なJSON出力・複雑な多段推論は苦手。多少出力がブレても壊れない設計にする 8. 後の工程で「音声入力（マイクで話す）」と「AI応答の自動読み上げ」を追加する予定がある。それが活きるアイデアだと望ましいが、必須ではない ## 進め方（この順番を守り、各STEPの最後に必ず私の確認を取ってから次へ進む） ### STEP 0：ヒアリング 一度に聞くのは1〜2問まで、合計5問以内。以下の観点から、私の答えに応じて質問を変えてください。 - 興味のある分野・好きなこと - 誰に使ってほしいか - 日常でちょっと面倒だと感じていること - プログラミング経験の有無 - LLMにどんな役割をさせたいか LLMの役割は、迷ったら次の型から選ばせてください。 ①生成（文章・アイデアを作る）②変換（要約・翻訳・言い換え）③判定・分類 ④対話・ロールプレイ ⑤評価・採点 ⑥抽出（文章から情報を取り出す） 私が「おまかせ」「思いつかない」と言ったら、下の「アイデアの種」から数個提示して選ばせてください。 ### STEP 1：アイデア5案の提示 次の表形式で5案出す。 | # | アイデア名 | ひとこと説明 | LLMの役割 | 画面イメージ | 実装難易度 | おもしろさ | そのうえで「どれが気になりますか？組み合わせや変更もOKです」と聞く。 ### STEP 2：1案に絞って深掘り - 30秒デモシナリオ（発表会で見せる流れ） - ユーザーの操作手順（1→2→3…） - 画面の構成要素（ボタン・入力欄・表示エリア） - LLMに送るsystemプロンプト案（日本語・短く・出力形式を指定） - localStorageに保存する項目 - LLMがうまく答えなかった時の挙動 ### STEP 3：実現性チェック 以下を1つずつ◦×で判定し、×があれば仕様を削ってから次に進む。 - index.html 1ファイルで書けるか - 外部ライブラリ・外部APIが不要か - 1つの操作につきLLM呼び出しは1回で済むか（連鎖呼び出しは遅くなるので避ける） - 応答に数秒かかっても成立するUXか - LLMの出力が多少ブレても画面が壊れないか - 機能3つ以内・90分で作れるか ### STEP 4：Antigravity用プロンプトの出力 チェックが通ったら、以下の3本をそれぞれ独立したコードブロックに入れて出力してください。私はこれをコピーしてAntigravityに順番に貼ります。「上記の」などの指示語で前提を省略せず、1本ずつ単体で読める文章にしてください。 --**【P1】土台を作る** 冒頭に必ずこの一文を入れる：「すでに index.html に Ollama の接続診断パネルが実装されています。診断パネルは残したまま、その下にアプリ本体を追加してください。」 そのうえで以下を書く。 - 作るアプリの概要・目的・利用シーンを2〜3行 - 画面レイアウトと要素（HTMLの構造がイメージできる粒度で） - 技術要件として次を必ず明記： - HTML/CSS/JavaScript のみ、index.html 1ファイル、外部ライブラリ禁止 - Ollama は http://localhost:11434/api/chat 、モデルは gemma4:e2b - リクエストに stream: false / think: false / keep_alive: "30m" を指定 - ページ読み込み時に短いウォームアップ呼び出しを1回行う - Ollamaに接続できない時は画面にわかりやすくエラーを表示し、アプリ自体は落とさない - systemプロンプトは日本語で簡潔に書く（内容は下に明記） - 使用するsystemプロンプトの全文 - 締めの一文：「まず画面の骨組みと、LLMを呼んで応答を表示するところまでを作ってください。作成後、プレビューで実際に動かして確認してください。」 **【P2】メイン機能を追加** - このアプリならではの中心機能を1〜2個、動作の流れとともに指示する - LLMに送るプロンプトの内容と、期待する出力形式を明記する - 出力形式が守られなかった場合のフォールバック挙動も指示する - 締めの一文：「作成後、プレビューで実際に操作して動作を確認してください。」 **【P5】動作シナリオテスト** 「以下のシナリオを実際にブラウザで動かして、問題があれば修正してください。修正したら、何をどう直したかを説明してください。」で始め、①〜⑥程度の具体的な操作手順と期待結果を番号付きで書く。 このアプリ固有の操作に加えて、次の3つは必ず含める。 - Ollamaを停止した状態でアプリを開くと、わかりやすいエラーが表示され画面が固まらない - マイクが使えない環境でも、テキスト入力だけで最後まで操作できる - ページを再読み込みしても、保存したデータが復元される --## 会話のルール - 日本語で、フレンドリーかつ簡潔に - STEP 4以外ではコードを書かない。アイデアと仕様の議論に集中する - 専門用語は使ったらその場で一言補足する - 私が答えに詰まったら、選択肢を提示して選ばせる - 制約に反するアイデアが出たら、その場で「制約に合わせるとこう変えられます」と代案を出す ## アイデアの種（詰まった時に提示する例） 献立提案／冷蔵庫の余り物レシピ／言い訳ジェネレーター／ネーミング考案／キャッチコピー生成／AI人狼・取り調べゲーム／面接練習相手／プレゼン質問シミュレーター／クレーム対応トレーニング／ポエム変換／絵文字翻訳／方言変換／子ども向け説明変換／俳句・川柳の採点／しりとり・なぞなぞ／TODOの優先度判定／感情日記と振り返り／メール文面の丁寧さチェック／会議メモの要約／今日の運勢／ネコ語翻訳 準備ができたら、まずSTEP 0の最初の質問から始めてください。 最終的にP1・P2・P5 の3つの プロンプトが作成されるので、 Antigravityにコピペして実行し ていきましょう！ （P3・P4は次のスライドにあります）
43. 音声機能を追加するプロンプト 以下プロンプトをAntigravityで実行することで、AIと会話できる機能が実行されます！ 【P3】音声入力・読み上げ追加 音声機能を追加してください。外部ライブラリは使わず、ブラウザ標準のWeb Speech APIのみで実装します。 index.html 1ファイルのままにしてください。 P2まで実行したら、次は こちらのプロンプト（P3）を 実行しましょう！ ## 1. 音声入力（マイク） - テキスト入力欄の横にマイクボタンを追加する - クリックで録音開始、再クリックで停止。録音中はボタンの色や表示を変えて、録音中だと一目でわかるようにする - 文字起こし結果を入力欄に反映し、そのまま自動送信する - 言語は日本語（ja-JP）に設定する ## 2. 読み上げ - AIの応答を speechSynthesis で自動読み上げする - 読み上げのON/OFFを切り替えるボタンを画面に置く。OFFの状態も localStorage に保存して次回に引き継ぐ - 新しい応答を読み上げる前に、前の読み上げを必ず停止する - 日本語の音声（ja-JP）を優先して選択する。無ければブラウザのデフォルトを使う ## 3. 使えない環境への対応（重要） 音声機能は動かない環境があります。落ちないように必ず次の対応を入れてください。 - ページ読み込み時に SpeechRecognition（webkitSpeechRecognition）と speechSynthesis が使えるか判定する - 使えない場合はマイクボタンを非表示にするか無効化し、「この環境では音声入力は使えません。テキスト入力をご利用ください」と控えめに表示する - マイクの権限が拒否された場合も、エラーメッセージを表示するだけでアプリは動き続けるようにする - 音声認識でエラーや無音タイムアウトが起きた場合、録音状態を必ず解除する（ボタンが録音中のまま固まらないようにする） - **音声機能が一切使えなくても、テキストチャットだけでアプリの全機能が使えること** ## 4. 補足 - 音声入力はマイク権限が必要なため、file:// で開くと動きません。http://localhost のプレビュー経由で開いた状態で動作確認してください - 音声認識はブラウザによってはインターネット接続を必要とします。オフラインだと動かない可能性がある旨を、エラー時のメッセージに含めてください 作成後、プレビューで実際にマイクボタンを押して動作を確認し、結果を報告してください。
44. アプリを磨き上げる（品質・速度・ UXの改善） 以下プロンプトをAntigravityで実行することで、主要なユーザー体験（UX）が改善されます！ 【P4】 品質・速度・UX改善 アプリの品質を上げてください。index.html 1ファイルのまま、外部ライブラリは使わずにお願いします。 ## 応答速度 - Ollamaへのリクエストに think: false と keep_alive: "30m" が指定されているか確認し、抜けていれば追加する - ページ読み込み時のウォームアップ呼び出しが実装されているか確認し、無ければ追加する - 応答が遅い時のために、リクエストにタイムアウト（60秒）を設定し、超えたら「時間がかかっています」と表示する P3まで実行したら、次は こちらのプロンプト（P4）を 実行しましょう！ （次はChatGPTなどで生成したP5を実行して下さい） ## 入力まわり - 日本語IMEで変換中にEnterキーを押しても誤送信されないようにする（compositionstart / compositionend で判定する。keyCode 229 だけに頼らない） - 送信ボタンの連打を防ぐ。応答待ちの間はボタンと入力欄を無効化する - 空文字やスペースだけの送信を弾く ## 待ち時間の表示 - LLMの応答を待っている間、ローディング表示（「考え中…」など）を出す - 応答が返ってきたらローディングを必ず消す。エラー時も消えるようにする ## エラー処理 - Ollamaに接続できない場合、画面上部に「Ollamaが起動していないか、CORSでブロックされています」と表示し、診断パネルを開くよう促す - LLMの出力が想定した形式でなかった場合でも、画面が壊れないフォールバック処理を入れる - try-catchの漏れがないか全体を確認する ## データ保存 - 主要なデータを localStorage に保存し、ページを再読み込みしても復元されるようにする - 保存データを消す「リセット」ボタンを目立たない位置に置く（押す前に確認ダイアログを出す） ## 見た目 - スマホでもPCでも崩れないレスポンシブ対応にする - 配色・余白・フォントサイズを整えて、発表会で見せられる見た目にする - 文字が小さすぎないようにする（プロジェクターに映すため） 改善が終わったら、プレビューで実際に動かして確認し、変更点を箇条書きで報告してください。
45. 追加修正テンプレート集（「やっぱりここ直したい」用） 手が止まったとき用の穴埋めテンプレです。 適当に文章で頼むより、この形で伝えたほうが直りが速くて壊れにくいです。 ① バグを直したいとき ② 見た目を変えたいとき 不具合があるので直してください。 見た目を調整してください。機能やロジックは一切変更しないでください。 - やった操作：〔 例：マイクボタンを押して「こんにちは」と話した 〕 - 期待した動作：〔 例：文字起こしされて自動送信される 〕 - 実際の動作：〔 例：ボタンが赤いままで何も起きない 〕 - コンソールのエラー：〔 開発者ツールのConsoleに出ている赤い文字をそのまま貼る／無ければ「な し」 〕 - 変えたい箇所：〔 - どうしたいか：〔 - 全体の雰囲気：〔 例：チャットの吹き出し 〕 例：AIの発言を左寄せの水色、自分の発言を右寄せの白にしたい 例：ポップ／落ち着いた／シンプル 〕 〕 まず原因を特定して、何が起きていたかを説明してから修正してください。 関係のない部分のコードは変更しないでください。 修正後、プレビューで実際に同じ操作をして直ったことを確認してください。 ③ 機能を足したいとき ④ AIの答えの内容を良くしたいとき 機能を追加してください。 LLMの応答の質を上げてください。 - 追加したい機能：〔 〕 - どういう時に使うか：〔 〕 - 操作の流れ：〔 1→2→3 〕 - 今の応答：〔 実際に返ってきた文章を貼る 〕 - こうしてほしい：〔 例：もっと短く、3行以内で 制約は変わりません。index.html 1ファイル、HTML/CSS/JavaScriptのみ、外部ライブラリ・CDN禁止、 Ollama（gemma4:e2b）を使用、保存はlocalStorageまで。 既存の機能を壊さないように、追加前に影響範囲を説明してから実装してください。 残り時間が少ないので、最小限の実装で構いません。 ／ もっとふざけた口調で ／ 必ず箇条書きで systemプロンプトの書き方を改善して対応してください。 gemma4:e2bは小型モデルなので、指示は短く具体的に、良い出力の例を1つ入れる形にしてください。 temperature の調整も必要なら行ってください。 〕
46. ⑤ 直したら別のところが壊れたとき ⑥ 動作が重い・応答が遅いとき さきほどの修正で〔 〕が動かなくなりました。 直前の変更を取り消して、修正前の状態に戻してください。 そのうえで、元の問題を別の方法で解決する案を、実装する前に説明してください。 動作が重いので、体感速度を改善してください。 - 遅いと感じる箇所：〔 例：送信してから返事が出始めるまで 〕 - だいたいの待ち時間：〔 例：20秒くらい 〕 - 初回だけ遅いか、毎回遅いか：〔 〕 次の順で確認して、当てはまるものを直してください。 1. Ollamaへのリクエストに keep_alive: "30m" と think: false が指定されているか 2. ページ読み込み時のウォームアップ呼び出しが実際に動いているか 3. 1回の操作でOllamaを複数回呼んでいないか。呼んでいれば1回にまとめられないか検討する 4. systemプロンプトや送信している会話履歴が長すぎないか。履歴は直近数件までに絞れないか 5. 応答が長すぎて遅い場合、options の num_predict で最大長を制限する 6. （時間に余裕があれば）stream: true に変えて、応答を少しずつ表示するようにする どれが原因で、何をどう変えたかを説明してください。 ⑦ 今どうなっているか分からなくなったとき ⑧ 発表直前の仕上げ 今のコードがどうなっているか分からなくなりました。コードは変更せず、説明だけしてください。 これから発表するので、最終チェックをしてください。 1. index.html が今どんな構成になっているか、セクションごとに日本語で説明してください 2. Ollamaを呼び出している関数はどれで、どこから呼ばれていますか 3. これから手を入れるときに、壊れやすいので触らないほうがいい箇所はどこですか 1. アプリを最初から通しで操作して、途中で止まる箇所がないか確認する 2. エラーが出る箇所があれば直す 3. プロジェクターで映すので、文字サイズと配色のコントラストを見直す 4. 画面上部のデバッグ用パネル（接続診断パネル）を初期状態で折りたたんでおく 専門用語には一言補足を付けてください。 大きな作り変えはせず、動いているものを壊さない範囲でお願いします。