20260727_イベント資料

Transcript

3. Antigravity × Gemma ローカルLLMでつくる！自分だけの生成AIアプリ開発ハンズオン
4. − 出張ハンズオン − （みらい AI）
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. 成果物発表会のご案内 1分 ⼀⼈あたりの持ち時間 完成していなくても大丈夫！ どんなアプリを作ろうとしたか 「どこで詰まったか」「エラーの内容」も⽴派な発 表です！ 挑戦した⾃分と仲間に拍⼿を送りましょう
35. Q&A ご質問・ご感想があれば自由にお聞かせください！
37. 本日はありがとうございました！次のステップへ 10万円賞金のコンテストの応募はこちらか https://www.protosolution.co.jp/codebase/ai-contest-lp/