生成AIを活用した開発は急速に広がっています。しかし、いざ自分で取り組もうとすると「思った以上にハードルが高いのでは…」と感じたことはないでしょうか。
その背景には、どこまでが自動化され、どこからが人間の役割なのかが直感的に分かりにくいという課題があります。その結果、「アプリを作るには結局どのくらいの知識が必要なのか」が見えづらく、最初の一歩が重くなってしまうのです。
誰もが試したいはずなのに…生成AIアプリ開発が“腰が重くなる”理由
生成AIアプリケーション開発に関連する知識領域
以下に、生成AIを活用したアプリケーション開発に関連する主な知識領域を独断と偏見で整理しました。
| 関連する知識ドメイン | 内容 | 具体例 |
|---|---|---|
| 生成AI開発の専門用語と概念 | 開発現場では特有の用語や概念が飛び交い、それを理解する必要がある | Claude Code、Gemini CLI、RAG、プロンプトエンジニアリング、MCP |
| プログラミング | AIが生成したコードを扱うためには、基礎的なプログラミング素養が欠かせない | 言語文法、アルゴリズム、ソフトウェア設計手法（構造化、OOP、関数型）、エラー処理、DB連携、主要フレームワーク（Rails、Reactなど） |
| クラウドインフラ | 実際にアプリを公開するには、クラウド環境を含めたシステム全体を理解する必要がある | アプリ実行形式（Webアプリ、スマホアプリ、API）、データベース設計、ネットワーク／クラウド基盤、UI/UX設計 |
| 運用・非機能要件 | 他者に安心して使ってもらえる品質を維持するには、テストや運用設計が必須 | 各種テスト手法、CI/CD、各種非機能要件の確保(セキュリティ、性能など) |
これらをすべて学びきってからでないとアプリが作れない――そんな風に考えると、確かに厳しいですよね。
“第一歩の軽さ”をもたらすFirebase Studio
こうして見ると、生成AI開発には多くの知識が関わっていて、最初の一歩が重く感じられます。
でも、すべてを理解してから始める必要はありません。本エントリでは、Firebase Studio を使って、環境構築や複雑な設定を最小限に、アイデアをすぐに形にし、アプリケーションとしてデプロイしていきます。
今回は、結婚式やパーティー会場で使える 写真共有アプリケーション を作っていきます。
もちろん、Firebase Studioを使えばもっと高機能なアプリケーションも作れますが、ここでは説明を分かりやすくするため、あえてシンプルな構成にしています。
このアプリは、PythonやJavaScriptのプログラミングスキルがなくても構築でき、必要に応じて拡張していくことも可能です。
興味が湧いてきましたか？
では、さっそく作り方を見ていきましょう。
Webページとしてはちょっと縦長ですが、作業はほぼ一本道で進みます。
Step.1 まず、アプリケーションから作る
最初に行うのは、細かいプログラミングではなく 動くアプリケーションを用意すること です。
Firebase Studio ( https://studio.firebase.google.com/ ) にアクセスします。
初回はこのようなメッセージが表示されるので terms and conditions を受け入れて次の画面に行きます。
Firebase Studioの画面が表示されます。
(沢山アプリを作っているのでアプリ名などを加工して見えなくしています)
画面のように左ウィンドウにプロンプトを入力し、「Prototype with AI」ボタンを押しましょう。
入力したプロンプトは以下の通りです。
|
以下の機能を持つ、パーティー用のアルバムWEBアプリを作成してください。
|
Firebase Studioはすぐにアプリケーションの構築プランを用意してくれます。
「Prototype this App」ボタンを押すと、すぐにAIがアプリケーションを開発し始めます。
わずか13秒後にアプリケーションが動き始めます。早い！
左側のウィンドウにアプリケーションが表示されるので、すぐに動かして動作検証ができます。
画像アップロードももちろん成功。画像の拡大やスライドショーだってできます。
アプリケーションが出来上がってしまいました。
ただし、このアップロードしたデータはまだどこにも保存されていないため、画面を再表示すると消えてしまいます。データをクラウド上のどこかに永続的に保存する必要があります。
そこで次のステップでは、Firebaseプロジェクトの各種設定 を行います。具体的には、データを保存するための Firestore と Storage の設定、そしてアプリを外部に公開するための Firebase App Hosting の有効化とデプロイ手順について扱っていきます。
Step.2 アプリを動かすFirebaseを設定する
アプリケーションを Firebase App Hosting にデプロイして公開します。
Step.2-1 Storageの設定
やりたい事は言葉(プロンプト)にしてAIに伝える、というのが基本です。
FirebaseプロジェクトをAI側で設定してくれました。
しかし、まだこの段階ではエラーが出ます。
エラーを渡してみます。
この後、Storageの権限設定を開始します。
Firebaseコンソール( https://console.firebase.google.com/ )の話が出てきましたので、アクセスします。
今回作ったアプリケーションが表示されているのでアクセスします。
左側の「構築」→「Storage」を選択するとStorageの画面が表示されます。
「プロジェクトをアップグレード」という文に、課金圧を感じますが課金の手続きをしましょう。課金プラン(Blazeプラン)については後述します。手順の詳細は省きますが、クレジットカードでの設定が便利です。
こんな感じで予算額と、それを超えた場合のメール通知も設定できます。仲間内で使う分には3000円、行かないと思いますが・・・。
Blazeプランの設定が終わったので、「使ってみる」を選択します。
保存先のロケーションにはこだわりが無いので、ここは「US-CENTRAL1」で
セキュリティルールはデフォルトで提示されたもの(本番環境モード)でよいです。
おそらく後からAIに修正案を出してもらう可能性が高いです。もし、AIに修正案を提示してもらわなくても済んでしまった場合に備えて、厳しめに設定しておくことを推奨します。
この後、AIから修正を依頼された場合はFirebaseコンソールの「Storage」から、画面右側の「ルール」タブを選択しましょう。こちらからルールを編集できます(アプリの情報を開示しないため、白く塗りつぶしています)。
Storageの設定を完了すると、アプリケーションが動くはずですが、もしかするとコーディングエラーが発生しているかもしれません。
エラーが発生した時は、以下のような表示が出ることが多いので「Fix Error」しましょう。ボタンが出ないときは、エラー内容を入力欄に張り付ければ対応してもらえます。
これで動くようになりました。
AIは決定論的に毎回同じ挙動をするわけではないので、違う流れで進むかもしれませんが、おおむねこのような流れで作業を行うとアプリケーションが完成します。
Storageの設定完了により、データがクラウド上に保存されるようになりました。
Step.2-2 Firebase App Hostingへのデプロイ
あとは、「Firebase App Hosting」を使ってアプリケーションをクラウド上にデプロイするだけです。ゴールはもうすぐ。画面の右上を見てください。「Publish」というボタンが見えるはずです。
ここまでの設定ができていれば、このボタンを押して表示される命令をすべて対応すればデプロイが完了します。
「Set up services」を押せば「Firebase App Hosting」にアプリケーションがデプロイされ、晴れてWebアプリケーションとして動作することになります。お疲れさまでした！
まとめ
取り扱った内容
ここまでで、Firebase Studioを使って 写真共有アプリケーションを作成 し、さらに Firebaseプロジェクトの設定 を通じて以下を整えました。
-
Firebase Studio を利用して アプリケーションを構築
-
Firebase Storage を利用して 実際の画像ファイルをクラウドに保存
-
Firebase App Hosting を利用して Webサイトとしてアプリを公開
今後について
今回暑かったのは「パーティー用の写真共有アプリ」でした。つまり、共有範囲を限定でき、問題が発生した時の影響が小さいことが前提のアプリです。これを本格的に他の人が使えるアプリにするためには様々な考慮が必要です。
Firebase Studioでプロンプトベースの開発を進めていくうえで、知っておくべきこと、知っておいた方が良い事について、今後エントリを上げていきますので、よろしくお願いいたします。
伝えたい事
Firebase Studioで実際にアプリを作り始めてみると、次第に「プロンプトの工夫が必要だ」とか「AIが生成したコードの不具合にどう対処するか」といった課題に気づくはずです。
ただし、これらは事前に机上で考えすぎても答えが出にくいものです。一度手を動かして作ってみることで初めて分かることが多い、というのが正直な感想です。
その点、Firebase Studioは入口の敷居がとても低く、誰でもすぐに「作ってから学ぶ」というサイクルに入ることができます。
せっかくこれほど便利で強力な環境が整っているのですから、ぜひまずは一度、手元でアプリを作ってみませんか