🎯 結論
ざっくり以下の手順で。
- Gemini の Canvas 使ってその場でプレビューしつつ Web アプリケーション開発する
a. 要件定義する (アウトプット: 要件定義書)
b. 要件を満たすために、どんなものを作るか明らかにする (アウトプット: 基本設計書)
c. Gemini と Canvas 使って実際に社内ツール ( Webアプリケーション) を作る
d. 動作確認 & 必要に応じて修正する - 希望通り動くものができたら「これを Google Apps Script で Web アプリケーションとしてデプロイ可能な形にして。具体的なデプロイ手順も明示して」と依頼する
- Gemini の指示に従って Google Apps Script に Web アプリケーションをデプロイする
- 公開してみんなに使ってもらう
💡 この構成のポイント
- セキュアな環境: チャットに入力した機密情報や社内データがAIの学習に使われない ( Google Workspace アカウントで Google 純正の Gemini を利用する場合)
- 社内限定公開が簡単: Google Apps Script (GAS) を経由することで、難しい設定なしに「社内の人間だけがアクセスできる」状態を作成可能
- Canvas 機能による直感的な開発: Canvas 機能により、実際の画面 (プレビュー) を見ながら「ここを青にして」「このボタンを追加して」と直感的に修正可能
🤖 Gemini と協働するコツ
要件定義を Gemini の力を借りながら一緒にやる
ざっくり以下のようなイメージです。
- Gemini にざっくりやりたいことを伝える + 「質問して」と伝える
- Gemini の質問に答える過程で情報が増えていく
- 増えた情報も統合して、Gemini がより詳細に要件定義をしてくれる
- 満足いくクオリティになるまで [ 1 → 3 ] を回す
特に大事と思っているのは 『「質問して」と伝える』 の部分です。
自分はよく以下のプロンプトを要望の最後に追加します。
要件について不明点があったら質問して、推測で進めないで、忖度しないで
↑ これをプロンプトの最後に付け加えると Gemini がなんとなくで進めずに
不明点についてはユーザーに対して質問をして、情報を集めた上で要件をまとめてくれます。
Gemini に対するプロンプト例 📝
ユーザーから提供された json を見やすく表示して、フィルターしたりすることが可能なビュワーを作成したい。
まずは要件定義書を作成したい。実際に渡される json は以下のようなイメージ。
要件について不明点があったら質問して、推測で進めないで、忖度しないで
[
{
"id": 1,
"name": "佐藤 健一",
"email": "sato.k@example.jp",
"isActive": true,
"tags": ["admin", "developer"]
},
{
"id": 2,
"name": "鈴木 舞",
"email": "mai_s@example.com",
"isActive": false,
"tags": ["user"]
},
{
"id": 3,
"name": "高橋 浩二",
"email": "takahashi.k@example.net",
"isActive": true,
"tags": ["editor", "marketing"]
}
]
ひとつの工程が終わったら、引き継ぎ可能なドキュメントを作成させて、新しくチャットを立ち上げる
- 要件定義が終わって、どんなものを作るか決めていく (基本設計書を作成する)
- どんなものを作るのかが決まって、開発を行う
など、ひとつの工程が終わって次の工程に進むタイミングで以下のような工程を経て
新しいチャットを立ち上げることをおすすめします。
(理由: 1つ のチャット内のやりとりが増えると AI の精度が落ちるため)
- Gemini にドキュメントを作成を依頼する (例: 「要件定義書を作成して」「基本設計書を作成して」)
- 作成されたドキュメント内容をコピーする
- 新しいチャットを立ち上げる
- コピーした内容を貼り付けつつ、続きの作業を行う
続きの作業を行うためのプロンプト例
以下の要件定義書を満たすようなツールを作成したい。基本設計を手伝って。不明点があったら質問して、推測で進めないで、忖度しないで
{ ここに要件定義書内容を貼り付ける }
以下の要件、基本設計を満たすようなツールを canvas でプレビュー可能な形で実装して。不明点があったら質問して、推測で進めないで、忖度しないで
## 要件
{ ここに要件定義書内容を貼り付ける }
## 基本設計
{ ここに基本設計書内容を貼り付ける }

