20260213_【🔰未経験者向け】生成AIで始める！爆速アプリ開発体験

Transcript

2. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Antigravityの紹介とインストール案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 ※本イベントの発言はすべて個人の見解であり、所属組織を代表するものではありません 
 2
3. 資料について
 3 スクリーンに投影しているスライドは、 
 connpassイベントページに資料としてアップロードしておりますので、 
 そちらからご確認ください。
 
 https://codebase.connpass.com/event/382830/presentation/ 

4. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Antigravityの紹介とインストール案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 4
6. 駐車場について
8. イベント内容 (簡単３ステップ！！！)
 8 どんなアプリを作るか? 作成！ ゲーム？ 　便利ツール? 画像編集？ どんなﾌﾟﾛﾝﾌﾟﾄか? 例) ・アイデアをメモ帳に箇条書き ・メモをAIに投げてAIが理解し　やす いようにリライト 「このメモをAntigravityでの開発に 最適な『詳細な開発指示書』にリライ トして」 例 ▼ 例 ▼
9. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Antigravityの紹介とインストール案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 9
10. Antigravityの紹介
 📖Antigravity とは？
 
 AIが主体となってアプリ開発・コーディングから 
 テストまで行う自律型の開発環境です。 
 • GoogleのAI「Gemini」が開発をサポート 
 • スマホアプリやウェブサイトを簡単に作成できる 
 10
11. 👦何ができるの？ 
 
 AIが自律的に開発をする
 • 例えば「～の機能を追加して」と言うだけで、AIが計画立 案/コード実装/コマンド実行(インストールやサーバ起 動)/動作検証の一連の流れを進めます。 
 
 複数タスクを同時進行
 • 指示中AIの作業完了を待たずに複数のタスクを同時進 行できます。（例：機能Aと機能Bの追加、既存バグ修正と 新機能追加）
 
 ブラウザとの連携
 • AIエージェントが専用のブラウザ拡張機能を使ってWeb ページを操作できます。 
 Antigravityの紹介
 11
12. 🔍どんな特徴があるの？ 
 
 指揮官としての操作感
 • 人間の指示から、複数のAIが並行して作業します。AIが バックグラウンドで作業を進めるため、人間は時折操作 の承認をするだけで開発が進みます。 
 
 AIが目(ブラウザ)を持っている
 • AIが自分でブラウザを立ち上げボタンクリック、「正しく動 いているか」を検証します。 
 
 継続的な学習（自己改善）
 • 使うほどに、そのプロジェクト特有の書き方やルールを AIが学習していき、人間の指摘内容を知識として蓄積し 賢くなります。
 Antigravityの紹介
 12
13. インストール案内 13
14. 環境準備・制作物決め
 このアイコンが目印！ 
 ①「Antigravity」で検索し、下記のようなサイトへ遷移 
 ②「Download for 〇〇」→環境に合わせてダウンロード・インストーラ起動し進める 
 14
15. 環境準備・制作物決め
 ③初期セットアップ
 15 ＜既存設定の読込＞ 
 VS Code等の既存エディタ設定 を読み込ませない場合は、設定 を変更せず「Next」 
 ＜画面の配色＞ 
 お好みで！

16. 環境準備・制作物決め
 ④動作モードの指定
 16 「Review-driven development」を選択し「Next」 
 ＜動作モードの種類＞ 
 Secure Mode(セキュアモード) 
 　セキュリティを最優先し、全作業に承認を求める。 
 
 Review-driven development(レビュー主導開発) 
 　AIが確認必要と判断した時に承認が求められる。 
 
 Agent-driven development(エージェント主導開発) 
 　承認無しでコマンドが実行される。 
 
 Custom configuration(カスタム設定) 
 　各項目を個別に調整。 
 

17. 環境準備・制作物決め
 ⑤詳細構成の設定
 17 ＜Keybindings（キーボード操作の設定）＞ 
 エディタ操作時のショートカットキースタイルを選択。 
 　Normal: WindowsやMacの操作（Ctrl+Cでコピー等）と同じ 
 　Vim:エディタの操作体系に慣れているエンジニア向け 
 
 ＜Extensions（拡張機能）＞ 
 プログラミング言語ごとのサポート機能 
 　Recommended :JavaScriptなど拡張機能を自動でインストール 
 　Configure: 自分で必要なものだけを個別に選択 
 
 ＜Command Line（コマンドラインツール）＞ 
 ターミナルからAntigravityを操作するためのツールをインストール 
 　Install :チェックを入れると、ターミナルで agy というコマンドを打つだけ で、そのディレクトリでAntigravityを即座に起動可能 
 
 特に好みの設定がなければ、そのままで「Next」 

18. 環境準備・制作物決め
 ⑥Googleでログイン
 ⑦Antigravityが開かれるので、「Open Folder」から任意の作業用フォルダを開く 
 18 ココにAntigravityがコード や設定ファイル等を作って いく！

19. 環境準備・制作物決め
 ⑧Agentに指示を出してみる
 何を作るか、どう伝えるか迷ったら… 
 
 　→AIにプロンプトを書いてもらいましょう！ 
 どんなプロンプトに すればいい？
 何を作ろう？
 コツの詳細はP.24へ！ 
 19
20. Antigravityにブラウザ操作をさせる方法
 Antigravityがブラウザ操作可能になる為には拡張機能の追加が必要です。
 ①GoogleChromeでGoogleログイン
 ②拡張機能「Antigravity Browser Extension 」を追加・有効
 ③Antigravity右上　　マークをクリックし、
 　ブラウザが開かれればOK
 20
21. Antigravityで作成したアプリの紹介 21
22. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Antigravityの紹介とインストール案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 22
23. お題例
 • 簡単なTodoアプリ 
 • 簡単なゲーム 
 • ソーシャルメディアアプリ 
 • クイズアプリ 
 
 • LINEスタンプ量産アプリ 
 • 占いアプリ 
 • ホワイトボード/黒板の文字抽出アプリ 
 • 音楽作成アプリ 
 👇以下のようなアプリは生成AIの性能をより活かせるかも！ 23 stepに 戻る
24. 良いプロンプト作成のコツ
 AntigravityのAI（Gemini）にうまくアプリを作ってもらうには、 
 「お願いの仕方（プロンプト） 」が非常に重要です。 
 
 以下のポイントを押さえて、AIに的確な指示を出しましょう！ 
 
 1. 具体的に伝える 🎯
 ◦ 「何がしたいか」「どう動かしたいか」を明確に。
 曖昧な表現を避け、主語・目的語をはっきり書くとAIの理解度が向上します。
 　　　例）
 　　　❌：「いい感じのページを作って」
 　　　🟢：「ユーザー登録フォームを作成して。名前、メール、パスワードの入力欄を含めて」
 
 2. GEMINI.md でルールを設定 する ✨
 ◦ 設定ファイル（.gemini/GEMINI.md）に基本ルールを書いておくと、
 毎回指示しなくても一貫した動作をしてくれます。
 
 　　　設定例：
 　　　・「日本語で回答すること」
 　　　・「コード変更前に実装計画を提示すること」
 　　　・「10ステップごとに進捗報告すること」
 
 
 24 プロジェクトルートディレクトリに 
 設定ファイルを作成します
25. 良いプロンプト作成のコツ
 3. 背景と目的を共有する 📖
 ◦ 「誰のため？」「どんな目的？」を伝えるだけで、AIの理解度が格段にアップします。
 
 　　　例）
 　　　・「社内向けの業務効率化ツールを作りたい。ユーザーは非エンジニア」
 
 4. Artifacts（計画書） をレビューする ✏ 
 ◦ Antigravity は実行前に計画書（Artifacts）を提示します。
 この計画を確認してからコメントやフィードバックを入れると実行の手戻りが減少します。
 
 5. 小さく始めて段階的に進める 👣
 ◦ まずは基本機能から。少しずつ機能を追加・改良していくのが成功への近道です。
 複雑な要件を一度に伝えると、AIが迷走することがあります。
 
 6. モードとモデルを使い分ける 🔄
 ◦ Planning モード + High ：設計・計画フェーズに最適（じっくり考える）
 ◦ Fast モード + Low ：実装・トライアンドエラーに最適（素早く動く）
 25 ごく稀に提示しないことがあります
26. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Antigravityの紹介とインストール案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 26
27. 成果発表
 代表して3名の方に成果発表をお願いしています 
 
 • 作成したアプリの紹介 
 ◦ どんな課題を解決するアプリか？ 
 ◦ どのような機能があるか？
 
 • 感想・学び・工夫した点 
 ◦ プロンプトで工夫したこと
 ◦ 難しかった／面白かったこと
 ◦ Antigravityの印象 など
 27
28. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Antigravityの紹介とインストール案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 28
29. 【お知らせ】一緒に働く仲間を大募集🫣
 スマホアプリ 
 インフラ構築・保守 
 グーシリーズのアプリや、キングスアプリなどの開 発
 ーーーーーーーーーーー 
 Flutter（Dart）
 Java、Swift、Kotlin、Ionic　等 
 各種サーバー／ネットワークの構築・運用保守、セ キュリティ対策、クラウドエンジニアリング、資産管 理など。
 ーーーーーーーーーーー 
 Linux、ORACLE、Apache、nginx, AWS 
 新規プロダクト開発 
 AI研究開発 
 SaaS開発。 
 企画・開発・保守 
 ーーーーーーーーーーー 
 HTML、JavaScript、Flutter、AWS 
 既存プロダクト向け 
 AI開発
 ーーーーーーーーーーー 
 Python、PyTorch、TensorFlow、Pandas、OpenCV、 NumPy、AWS
 ◼ プロトソリューション ソリューション開発部 沖縄で は事業拡大に向けてチームを引っ張っていける【シス テムエンジニア】を募集してます。 
 
 ◼ プロトグループで生成AIを活用したサービス開発 ・保守にあなたも参加してみませんか？ 
 ※発言はすべて個人の見解であり、所属組織を代表するものではありません 
 29
30. アンケート
 ⬇アンケートのご協力よろしくお願いします 
 
 
 
 30
31. Appendix 31
32. Opalで作成したアプリの紹介
 作成時間：1時間
 （アイデア構想からプロンプト作成、動作 するアプリ完成まで）
 
 概要：
 住所や都市名を入力するとレ ビュー評価の高い居酒屋を自動 検索するアプリ
 アプリ作成時、最初に実行した プロンプトはこちら 32
33. ▼アプリ作成時、一番最初に実行したプロンプト（テキスト） 近くのレビューの評価が良い居酒屋を検索するスマホ向けのアプリをflutterと Pythonで開発したいです。 -ユーザーの入力 　-自然言語（住所（沖縄県那覇市、900-0011、現在地など）やGoogle Mapで◦ で囲った所：SUUMOの囲って検索みたいなイメージ） -出力 　-UI側で各居酒屋ごとに一言コメントを添えて一覧表示する 　-一覧表示できるものは10~15件で、それ以外の居酒屋一覧は「一覧で見る」ボ タンをタップして、全部一覧で表示されるようにする（ここでは一言コメントはな くて良い）。 -レビュー評価が高い居酒屋 　-Google検索 または Google Mapの検索でレビューの星が最も多い上位10件を提 案する 　-ただしレビューの星が高くてもレビューコメントの評価が悪いものはマイナス の重み付けをする 33