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

Transcript

2. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 
 ※本イベントの発言はすべて個人の見解であり、所属組織を代表するものではありません 

3. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 

5. 駐車場について
7. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 

8. Firebase Studioの紹介
 📖Firebase Studio とは？
 
 インターネットブラウザだけで、
 AIの力を借りてアプリを作れるツールです。 
 • GoogleのAI「Gemini」が開発をサポート 
 • スマホアプリやウェブサイトを簡単に作成できる 

9. 👦何ができるの？ 
 
 AIがコードを書く
 • 例えば「ログイン機能を作って」と言うだけで、AIがプログ ラムを自動で作成してくれます。 
 
 ボタン一つで公開
 • 難しい操作は不要で作ったアプリを世界中の人が使える ように、ボタン一つで公開できます。 
 
 全部まとめて作成
 • スマホアプリ、ウェブサイト、データベース（情報の保存場 所）を一つの画面で作成できます。 
 （別々のツールを使い分ける必要がない） 
 Firebase Studioの紹介

10. 🔍どんな特徴があるの？ 
 
 パソコンに何もインストール不要 
 • ChromeやSafariなどのブラウザがあれば、すぐに使えま す。
 
 すぐに始められる
 • アカウントを作って、ブラウザを開けば数分で開発開始 できます。（面倒な初期設定は一切なし） 
 
 自分好みにカスタマイズ可能
 • 自分の好きなように機能を追加・変更できます。 
 Firebase Studioの紹介

11. 環境準備・制作物決め
 このアイコンが目印！ 
 ①「Firebase」で検索し、下記のようなサイトへ遷移 
 ②「使ってみる」→「Try Firebase Studio」 

12. 環境準備・制作物決め
 ③Googleアカウントでログイン
 ④作ってみたいアプリ案をとにかく伝えてみる！ 
 どんなふうに伝えるか迷ったら… 
 
 　→AIにプロンプトを書いてもらいましょう！ 
 どんなプロンプトに すればいい？
 何を作ろう？
 コツの詳細はP16へ！ 

13. 環境準備・制作物決め
 ⑤作成内容が表示されるので、内容を確認し問題なければ「Prototype this App」 
 ⑥自動で作られていくので待ち、作成するか聞かれたら「Create」 
 最初は英語で出てきてしまうので、
 「説明と作成は日本語で」を付ける
 お菓子でも食べながら待ちましょう！

14. Firebase Studioで作成したアプリの紹介
 作成時間：1時間
 （アイデア構想からプロンプト作成、動作 するアプリ完成まで）
 
 概要：
 ポ⚪モンみたいなゲームアプリ

15. お題例
 • 簡単なTodoアプリ 
 • 簡単なゲーム 
 • ソーシャルメディアアプリ 
 • クイズアプリ 

16. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 

17. 良いプロンプト作成のコツ
 Firebase StudioのAI（Gemini）にうまくアプリを作ってもらうには、 
 「お願いの仕方（プロンプト） 」が非常に重要です。 
 
 以下のポイントを押さえて、AIに的確な指示を出しましょう！ 
 
 1. 具体的に伝える 🎯
 ◦ 「何がしたいか」「どう動かしたいか」を明確に。使いたい技術も指定すると効果的です。
 
 2. AIに相談する ✨
 ◦ 良い指示が思いつかない時は、AIに「どうお願いすれば良い？」と相談してみましょう。
 
 3. 背景を共有する 📖
 ◦ 「誰のため？」「どんな目的？」を伝えるだけで、AIの理解度が格段にアップします。
 
 4. お手本（具体例）を見せる 🖼
 ◦ 操作やデータの具体例を示すと、イメージが正確に伝わり、手戻りが減ります。
 
 5. 小さく始める 👣
 ◦ まずは基本機能から。少しずつ機能を追加・改良していくのが成功への近道です。
 ▼詳細はこちら

18. 作成したアプリに画像を挿入したい方へ
 画像を挿入したい方は以下の手順でやるとスムーズに画像を挿入できます。
 ①画面右上の</>をタップする
 ②画面遷移後、しばらく時間が経つと以下のような画面が
 右下に表示されます。
 ③以下のステップで実行すると画像を設定する可能性が高 いです。（簡単なものならこれでいけます）
 
 1. Geminiにソースコードを理解させて、public/images ディレクトリを作成してもらう。
 
 
 
 
 
 2. 作成されたディレクトリ（public/images）下に画像を手 動でアップロードする。
 （drag and dropでアップロードできます。）
 
 3. （test.pngというファイル名の画像をアップロードした場合）
 Geminiに「test.pngという画像をアップロードしました。 この画像を私が操作するキャラクターの画像に設定 してもらえますでしょうか？」というプロンプトを実行さ せる。
 エラーがでたらスクショを撮ってGemini に投げるのも効果的です
19. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 

20. 成果発表
 代表して3名の方に成果発表をお願いしています 
 
 • 作成したアプリの紹介 
 ◦ どんな課題を解決するアプリか？ 
 ◦ どのような機能があるか？
 
 • 感想・学び・工夫した点 
 ◦ プロンプトで工夫したこと
 ◦ 難しかった／面白かったこと
 ◦ Firebase Studioの印象 など

21. イベント内容
 • オープニング 
 • 施設紹介と注意事項 
 • Firebase Studioの紹介とログイン案内 
 • 制作
 • 成果発表 & 感想共有 
 • クロージング 

22. 【お知らせ】一緒に働く仲間を大募集
 スマホアプリ 
 インフラ構築・保守 
 グーシリーズのアプリや、キングスアプリなどの開 発
 ーーーーーーーーーーー 
 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を活用したサービス開発 ・保守にあなたも参加してみませんか？ 
 ※発言はすべて個人の見解であり、所属組織を代表するものではありません