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

Transcript

2. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • Google AI Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 ※本イベントの発言はすべて個人の見解であり、所属組織を代表するものではありません 
 2
3. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • Google AI Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 3
5. 駐車場について
7. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • Google AI Studioの紹介とログイン案内 
 • 成果発表 & 感想共有 
 • クロージング 
 7
8. Firebase Studioの紹介
 📖Firebase Studio とは？
 
 インターネットブラウザだけで、
 AIの力を借りてアプリを作れるツールです。 
 • GoogleのAI「Gemini」が開発をサポート 
 • スマホアプリやウェブサイトを簡単に作成できる 
 8
9. 👦何ができるの？ 
 
 AIがコードを書く
 • 例えば「ログイン機能を作って」と言うだけで、AIがプログ ラムを自動で作成してくれます。 
 
 ボタン一つで公開
 • 難しい操作は不要で作ったアプリを世界中の人が使える ように、ボタン一つで公開できます。 
 
 全部まとめて作成
 • スマホアプリ、ウェブサイト、データベース（情報の保存場 所）を一つの画面で作成できます。 
 （別々のツールを使い分ける必要がない） 
 Firebase Studioの紹介
 9
10. 🔍どんな特徴があるの？ 
 
 パソコンに何もインストール不要 
 • ChromeやSafariなどのブラウザがあれば、すぐに使えま す。
 
 すぐに始められる
 • アカウントを作って、ブラウザを開けば数分で開発開始 できます。（面倒な初期設定は一切なし） 
 
 自分好みにカスタマイズ可能
 • 自分の好きなように機能を追加・変更できます。 
 Firebase Studioの紹介
 10
11. 環境準備・制作物決め
 このアイコンが目印！ 
 ①「Firebase」で検索し、下記のようなサイトへ遷移 
 ②「使ってみる」→「Try Firebase Studio」 
 11
12. 環境準備・制作物決め
 ③Googleアカウントでログイン
 ④作ってみたいアプリ案をとにかく伝えてみる！ 
 どんなふうに伝えるか迷ったら… 
 
 　→AIにプロンプトを書いてもらいましょう！ 
 どんなプロンプトに すればいい？
 何を作ろう？
 コツの詳細はP.25へ！ 
 12
13. 環境準備・制作物決め
 ⑤作成内容が表示されるので、内容を確認し問題なければ「Prototype this App」 
 ⑥自動で作られていくので待ち、作成するか聞かれたら「Create」 
 最初は英語で出てきてしまうので、
 「説明と作成は日本語で」を付ける
 お菓子でも食べながら待ちましょう！
 13
14. Firebase Studioで作成したアプリの紹介①
 作成時間：1時間
 （アイデア構想からプロンプト作成、動作 するアプリ完成まで）
 
 概要：
 ポ⚪モンみたいなゲームアプリ
 14
15. Firebase Studioで作成したアプリの紹介②
 作成時間：1時間
 （アイデア構想からプロンプト作成、動作 するアプリ完成まで）
 
 概要：
 住所や都市名を入力するとレ ビュー評価の高い居酒屋を自動 検索するアプリ
 アプリ作成時、最初に実行した プロンプトはこちら（p.34） 15
16. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内
 • Google AI Studioの紹介とログイン案内 
 • 成果発表 & 感想共有 
 • クロージング 
 16
17. Google AI Studioの紹介
 📖Google AI Studio とは？
 
 インターネットブラウザからアクセスするだけで、 
 Geminiの最新モデルを試せます。 
 
 • Firebase Studioと同様にアプリが開発できる 
 
 • Geminiの最新モデル（実験的モデル含む）をアプリに組み 込める
 
 • 「こんなAI機能を作りたい」と思ったら、まずはここで試し て、うまくいくか確認する場所 
 17
18. Google AI Studioの紹介
 👦何ができるの？ 
 
 マルチモーダル対応
 • テキストだけでなく、画像、PDF、長時間の動画や音声 ファイルまで読み込ませて、AIに解析や要約をさせること ができる。
 
 プロンプトの調整とテスト
 • AIへの指示（プロンプト）を細かく調整し、AIの創造性 （Temperature）などのパラメータを変更して、理想の回答 が得られるまで試行錯誤できる。 
 
 その他についてはFirebase Studioとほぼ同じです！
 18
19. Google AI Studioの紹介
 🔍Firebase Studioとの違いは？ 
 特徴 Google AI Studio Firebase Studio 得意なアプ ローチ Model-First（AI機能重視） Data-First（データ管理重視） 開発の起点 「こんなAIの動きをさせたい」 「こんなデータを管理・表示したい」 裏側の仕組み 基本的にステートレス（その場限 り）。 複雑なデータ保存は別途実装が必要。 Data Connect (SQL/NoSQL)と直結。 認証(Auth)やDB設計が最初から組み込まれてい る。 向いている成 果物 AIチャットボット、要約ツール、 アイデア検証用の単発アプリ。 顧客管理システム、SNS、ECサイトなど、 ユーザーデータが溜まっていくアプリ。 明確な違いは、 「ユーザーのデータを預かるかどうか」です。 19
20. Google AI Studioで作成したアプリの紹介
 以下リンクに様々な方が開発し たアプリがあります。
 
 https://aistudio.google.com/app s?source=showcase&showcaseT ag=all
 
 
 20
21. 環境準備・制作物決め
 このアイコンが目印！ 
 ①「Google AI Studio」で検索し、下記のようなサイトへ遷移 
 ②「Vibe Code GenAI apps」をクリック 
 21
22. 環境準備・制作物決め
 ④作ってみたいアプリ案をとにかく伝えてみる！ 
 どんなふうに伝えるか迷ったら… 
 
 　→AIにプロンプトを書いてもらいましょう！ 
 コツの詳細はP.25へ！ 
 22 ⑤入力が完了したら「Build」をクリックでアプリが作成されます！ 

23. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • Google AI Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 23
24. お題例
 • 簡単なTodoアプリ 
 • 簡単なゲーム 
 • ソーシャルメディアアプリ 
 • クイズアプリ 
 
 • LINEスタンプ量産アプリ 
 • 占いアプリ 
 • ホワイトボード/黒板の文字抽出アプリ 
 • 音楽作成アプリ 
 👇以下のようなアプリは生成AIの性能をより活かせるかも！ 24
25. 良いプロンプト作成のコツ
 Firebase StudioのAI（Gemini）にうまくアプリを作ってもらうには、 
 「お願いの仕方（プロンプト） 」が非常に重要です。 
 
 以下のポイントを押さえて、AIに的確な指示を出しましょう！ 
 
 1. 具体的に伝える 🎯
 ◦ 「何がしたいか」「どう動かしたいか」を明確に。使いたい技術も指定すると効果的です。
 
 2. AIに相談する ✨
 ◦ 良い指示が思いつかない時は、AIに「どうお願いすれば良い？」と相談してみましょう。
 
 3. 背景を共有する 📖
 ◦ 「誰のため？」「どんな目的？」を伝えるだけで、AIの理解度が格段にアップします。
 
 4. お手本（具体例）を見せる 🖼
 ◦ 操作やデータの具体例を示すと、イメージが正確に伝わり、手戻りが減ります。
 
 5. 小さく始める 👣
 ◦ まずは基本機能から。少しずつ機能を追加・改良していくのが成功への近道です。
 ▼詳細はこちら
 25
26. 制作スタート▶ 26
27. 作成したアプリに画像を挿入したい方へ
 画像を挿入したい方は以下の手順でやるとスムーズに画像を挿入できます。
 ①画面右上の</>をタップする
 ②画面遷移後、しばらく時間が経つと以下のような画面が
 右下に表示されます。
 ③以下のステップで実行すると画像を設定する可能性が高 いです。（簡単なものならこれでいけます）
 
 1. Geminiにソースコードを理解させて、public/images ディレクトリを作成してもらう。
 
 
 
 
 
 2. 作成されたディレクトリ（public/images）下に画像を手 動でアップロードする。
 （drag and dropでアップロードできます。）
 
 3. （test.pngというファイル名の画像をアップロードした場合）
 Geminiに「test.pngという画像をアップロードしました。 この画像を私が操作するキャラクターの画像に設定 してもらえますでしょうか？」というプロンプトを実行さ せる。
 エラーがでたらスクショを撮ってGemini に投げるのも効果的です 27
28. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • Google AI Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 28
29. 成果発表
 代表して3名の方に成果発表をお願いしています 
 
 • 作成したアプリの紹介 
 ◦ どんな課題を解決するアプリか？ 
 ◦ どのような機能があるか？
 
 • 感想・学び・工夫した点 
 ◦ プロンプトで工夫したこと
 ◦ 難しかった／面白かったこと
 ◦ Firebase Studioの印象 など
 29
30. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • Google AI Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 30
31. 【お知らせ】一緒に働く仲間を大募集🫣
 スマホアプリ 
 インフラ構築・保守 
 グーシリーズのアプリや、キングスアプリなどの開 発
 ーーーーーーーーーーー 
 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を活用したサービス開発 ・保守にあなたも参加してみませんか？ 
 ※発言はすべて個人の見解であり、所属組織を代表するものではありません 
 31
32. アンケート
 ⬇アンケートのご協力よろしくお願いします 
 
 
 
 32
33. Appendix 33
34. ▼アプリ作成時、一番最初に実行したプロンプト（テキスト） 近くのレビューの評価が良い居酒屋を検索するスマホ向けのアプリをflutterと Pythonで開発したいです。 -ユーザーの入力 　-自然言語（住所（沖縄県那覇市、900-0011、現在地など）やGoogle Mapで◦ で囲った所：SUUMOの囲って検索みたいなイメージ） -出力 　-UI側で各居酒屋ごとに一言コメントを添えて一覧表示する 　-一覧表示できるものは10~15件で、それ以外の居酒屋一覧は「一覧で見る」ボ タンをタップして、全部一覧で表示されるようにする（ここでは一言コメントはな くて良い）。 -レビュー評価が高い居酒屋 　-Google検索 または Google Mapの検索でレビューの星が最も多い上位10件を提 案する 　-ただしレビューの星が高くてもレビューコメントの評価が悪いものはマイナス の重み付けをする 34