No content

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

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

No content

駐車場について 

No content

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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