Скачать или смотреть 初心者でも簡単にできる！Google AI Studioでアプリ作成と公開

アプリ開発AI Google AI Studioのbuildモードを完成して公開する方法について。特にデプロイが難しかったので公開します。

チョー便利に誰でも、アプリが作れる google AI studio！

課題は公開する方法です
１，そのまま、Githubで上げるとtsxファイルが動かない
２，自信のサーバーにFTPするとAPIキーが危ない
しかし、この方法なら、安全に公開できるのでやってみてください。

PDF資料
https://edu-ai.jp/images/google-AI-st...

Google AI Studio Buildモードでのアプリ開発と公開手順

Google AI StudioへのアクセスとBuildモードの選択
Google AI Studioのbuildモードを利用してアプリを開発し、公開する手順について説明します。まず、ウェブ検索で「Google AI studio」と入力して検索し、Google AI Studioのサイトにアクセスします。Google AI Studioの画面左側のナビゲーションメニューから「Build」モードを選択します。このモードは、プロンプトから本番環境への移行を最も迅速に行うためのものです。

プロンプトによるアプリの指示とBuild実行
「Build」モードに入ると、「Build your ideas with Gemini」という画面が表示されます。ここで、作りたいアプリケーションの内容をテキストで指示します。例えば、「音声を聞いて文字起こしをするサイトを作って」といった具体的なプロンプトを入力します。プロンプトを入力したら、右端にある「Build」ボタンをクリックしてアプリの生成を開始します。

プロンプトの繰り返しによるアプリの改善
生成されたアプリのプレビュー画面とコードアシスタントが表示されます。プロンプトを一回実行しただけで完璧なアプリができるわけではないため、コードアシスタントに対してプロンプトを繰り返し入力し、アプリを改善していきます。例えば、アプリ内の表示を全て日本語にするよう指示したり、「文字起こしをした後で、その文字が一時的に出ていて、その後、非表示になります。ずっと表示して」のように、特定の動作の改善を指示します。さらに、「右上に白い背景に黒い文字の「ダウンロード」という角丸ボタンを作って、出力したテキストを全て並べてテキストでダウンロードできるようにして。時間はいらないので、出力したテキストだけを1行づつ、つなげてください。」といった具体的な機能追加の指示も行います。これらの指示に対して、コードアシスタントはエラーの修正や機能の追加を行い、更新されたファイルを表示します。最終的に、ダウンロード機能や、文字起こし履歴をクリアする「クリア」ボタンの追加なども行い、アプリの完成度を高めます。

アプリ完成後のデプロイ方法
デプロイ方法① 課金とAI APIの有効化
完成したアプリを公開するには、Google Cloud Consoleで課金とAI関連のAPIを有効にするアカウントの準備が必要です。

Google Cloud Consoleの検索: ウェブ検索で「Google cloud console」と検索し、Google Cloud Consoleにアクセスします。

新しいプロジェクトの作成: Google Cloud Consoleの画面で「新しいプロジェクト」を作成し、適当なプロジェクト名（例: My Project 84574）をつけて「作成」ボタンを押します。プロジェクトIDは後で必要になるため、控えておきます。

課金の設定: プロジェクトを作成したら、画面の「クイックアクセス」セクションなどから「課金」ボタンを選択します。

お支払い方法の登録: 課金画面で「お支払い方法」を選択し、クレジットカード情報を登録します。無料枠を利用する場合でも、AIが稼働するためにはクレジットカードの登録が必要です。

APIとサービスの有効化: Google Cloud Consoleのメイン画面に戻り、「APIとサービス」を選択します。

ライブラリからAPIを選択: 左側のナビゲーションメニューから「ライブラリ」を選択します。

Gemini APIの検索と有効化: 検索窓で「gemini API」と検索し、「Gemini API」を選択します。画面の指示に従って「有効化」ボタンを押し、APIを有効にします。もしアプリ内でGoogle Mapsなど他のサービスを利用している場合は、同様にそのAPIも有効化します。

デプロイ方法② Google AI Studioでアカウントを紐づける
次に、Google AI Studioに戻り、作成したGoogle Cloud Consoleプロジェクトとアプリを紐づけます。

APIキーの切り替え: Google AI Studioのアプリ画面右上にあるキー選択のアイコン（「Switch to API key」に対応する箇所）をクリックします。

新しいキーの作成: ポップアップ画面で「Create a new key」を押します。

プロジェクトの選択: 「Project」のドロップダウンから、Google Cloud Consoleで作成・課金設定を行ったプロジェクト名を選択します。

Keyの設定: キーが表示されたら「Done」を押して設定を完了します。

アプリのデプロイ: アプリの画面右上にある「アプリをデプロイ」（Deploy app）のボタンをクリックします。

デプロイの確認: 「Deploy app on Google Cloud」という確認画面が表示されます。Google Cloud Projectに正しいプロジェクト名が表示されていることを確認し、利用規約に同意した上で、再度「Deploy app」を押します。

公開の完了: 「App successfully deployed to Google Cloud」というメッセージが表示され、App URLが発行されます。このURLにアプリが公開されており、アクセスして利用することができます。


応用編 複数人での開発・公開のための権限管理


一般の開発者は上記手順で完了ですが、学校の授業や企業の共同開発などで、複数人で一つの課金アカウントの権限を共有したい場合の手順です。未成年者や部下にクレジットカード情報を渡さずに開発を進めさせることができます。


応用編① 教師・上司の作業 (Google Cloud Consoleでの権限設定)


課金アカウントを保有する側（教師や上司）が行う作業です。

Google Cloud Consoleへのアクセス: 再度「Google cloud console」にアクセスします。

IAMと管理への移動: 左側のナビゲーションメニューから「IAMと管理」を選択します。

アクセス権の付与: 画面上部にある「+アクセスを許可」ボタンをクリックします。

プリンシパルの追加: 新しいプリンシパルとして、権限を付与したい生徒や部下のメールアドレスを一人ずつ入力します。

ロールの割り当て: ロールを選択する際、例えば「基本」のカテゴリから「オーナー」など、必要な権限を持つロールを割り当てます。設定後、「保存」ボタンを押します。

割り当ての制限設定: 任意で、予期せぬ高額請求を防ぐために「割り当てとシステム上限」から「割り当て」を設定し、金額の上限を定めることを検討します。また、「条件」タブからアクセス権の有効期限を期間限定に設定することも可能です。

プロジェクトIDの送付: 左側のナビゲーションメニューの「設定」から「プロジェクトID」を確認し、生徒や部下に送付します。

応用編② 生徒・部下の作業 (共有されたアカウントでのキー作成とデプロイ)
権限を付与された側（生徒や部下）が行う作業です。

招待メールの承諾: 権限を付与されたユーザーにはGoogle Cloudから招待メールが届きます。メール内のURLをクリックし、Google Cloud Consoleの画面で「招待に応じる」ボタンを押して招待を承諾します。

アクセスの許可: 権限確認の画面で「アクセスを許可」を押します。

Google AI Studioでのキー作成: Google AI Studioのアプリ画面に戻り、右上にあるキー選択のアイコン（「Switch to API key」に対応する箇所）をクリックし、「Create a new key」を押します。

キー名の設定とプロジェクトのインポート:
a. キー名（何でもOK）を設定します。
b. 「Select a Cloud Project」の下にある「Import project」を押します。
c. 先生や上司から送られた「プロジェクトID」を検索窓に入力し、表示されたプロジェクトを選択します。
d. 「インポート」ボタンを押します。

キーの作成と完了: インポートされたプロジェクトが選択されていることを確認し、「キーを作成」を押し、最後に「Done」を押して設定を完了します。

アプリのデプロイ: 右上にある「アプリをデプロイ」ボタンをクリックし、確認画面で再度「Deploy app」を押してアプリを公開します。

公開URLの利用: アプリの公開が完了し、App URLが発行されます。このURLを宿題の提出や上司への報告に利用します。アプリが実際に動作することを確認し、大成功です。