Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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


Slide 3

Slide 3 text

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


Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

駐車場について

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

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


Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

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


Slide 11

Slide 11 text

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


Slide 12

Slide 12 text

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


Slide 13

Slide 13 text

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


Slide 14

Slide 14 text

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


Slide 15

Slide 15 text

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


Slide 16

Slide 16 text

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


Slide 17

Slide 17 text

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


Slide 18

Slide 18 text

作成したアプリに画像を挿入したい方へ
 画像を挿入したい方は以下の手順でやるとスムーズに画像を挿入できます。
 ①画面右上のをタップする
 ②画面遷移後、しばらく時間が経つと以下のような画面が
 右下に表示されます。
 ③以下のステップで実行すると画像を設定する可能性が高 いです。(簡単なものならこれでいけます)
 
 1. Geminiにソースコードを理解させて、public/images ディレクトリを作成してもらう。
 
 
 
 
 
 2. 作成されたディレクトリ(public/images)下に画像を手 動でアップロードする。
 (drag and dropでアップロードできます。)
 
 3. (test.pngというファイル名の画像をアップロードした場合)
 Geminiに「test.pngという画像をアップロードしました。 この画像を私が操作するキャラクターの画像に設定 してもらえますでしょうか?」というプロンプトを実行さ せる。
 エラーがでたらスクショを撮ってGemini に投げるのも効果的です

Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

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


Slide 21

Slide 21 text

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


Slide 22

Slide 22 text

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