本記事について
本記事では「ノンエンジニア」や「ビギナーエンジニア」を対象としたGeminiを用いたAI駆動開発の解説記事となります。
「コードを書かずとも、ここまでの機能が作れるのか！！」っを感じてもらうことを目的としておりますのでデプロイまではいきません。
この点ご理解上、読み進めていただけますと幸いです。
企画書を上げる時に、プロトタイプがあれば上層部も理解しやすいですし、突然思いついたアイデアもノンエンジニアでもすぐに形にできる。といった感覚を得られると思います。
はじめに
Gemini Canvasとは？
Gemini Canvasとは、GoogleのAI「Gemini」に搭載されている、AIと共同編集できる「賢いデジタルホワイトボード」のような機能です。
Geminiとのチャットを通じて、まるでエンジニアやデザイナーと会話するように、アイデアをその場で形にしていくことができます。
具体的にできること
AIに「こんなものを作りたい」と伝えるだけで、以下のようなものをインタラクティブに生成できます。
- 1.動かせるアプリケーションの試作品（プロトタイプ）
- 「タスク管理アプリを作って」のように指示するだけで、実際にボタンを押したり、文字を入力したりできるWebアプリケーションの試作品をAIが構築します。
- 2.Webページやイラストのデザイン案
- Webサイトのレイアウトや、簡単なイラスト・図のアイデアをその場で描画させ、見た目を確認しながら作業を進められます。
ソースコードも確認可能
さらに、AIが生成したアプリケーションやデザインの裏側にあるソースコード（HTML/CSSやPythonなど）を直接見て、編集することも可能です。これにより、アイデアを形にするだけでなく、本格的な開発への足がかりとすることもできます。
Step0.作りたいものをGeminiに投げる
すでに作りたいものがある方は単一プロンプトで構いませんのでGeminiに投げてみましょう。
まだ作りたいものが思い浮かんでいない方は「作りたいもののアイデア」から一緒にGeminiに考えてもらいましょう。
今回は「投資に役立つアプリを作りたい」という設定で進めていきます。
急上昇している株を見ると、つい欲望に駆られて買ってしまいたくなるのが人間です。
投資の世界で最も難しいことは”自分の感情をコントロールすること”だとか言われているので、自分がどのタイミングでどういう意図を持って投資を実行したのかをまとめる「投資ノート」をつけている投資家もいます。
そういった、「投資ノート」てきなアプリを今回は作っていきます。
プロンプト
雑魚プロンプトですが、問題ないです👍
Geminiのアウトプット
Step1.どのような機能が必要・不要なのかについて指示をだす
Step3でアジャイル形式で修正（開発）ができるので厳密な機能要件は不要なのですが、アプリケーションの大枠がここで定義されるので、なるべく力を入れたいStepになります。
僕は次のような機能が欲しいので、それも追加してもらいます。
・どういう注文方法をしたのか「成行」「指値」「逆指値」から選択できるようにしてください。
・今回の投資は「バリュー投資」「グロース投資」「センチメント」のどれを基準に投資したのか選択できるようにしてください。
加えて、APIは今回使わないのでAPI機能は消してもらいましょう。
プロンプト
Geminiのアウトプット
右上の「取引を追加」を押すとモーダルが出てきます。
プロンプト通りに注文方法と投資判断が追加されています。
「保存」を押せばしっかりと反映されます。
Step3.アプリを触りながら修正箇所を指示する
一通り、アプリの仕様がわかったところで修正点を指示していきましょう。
プロンプト
・アプリの名前が「投資ノート」と微妙なので、「INVESTMENT NOTE」と変更
・アプリ名のすぐ下の「アプリの説明」と「User ID」は不要
・新しい取引を追加するモーダルの「ティッカー」は不要
・今の仕様だと、取引数が増えると見にくくなるので追加した取引の表示方法を変更
Geminiのアウトプット
アプリ名直ってますね
ティッカー消えてますね
テーブル形式にコンパクトにまとまっていて、見やすくなりました。
ここからさらに磨きをかけていきます。（作業工程は割愛します）
こちらが完成系です。
株式だけでなく、暗号資産や債券などにも対応できるようにしています。
おわりに
冒頭で述べたように、本記事は「コードを書かずとも、ここまでの機能が作れるのか！！」っを感じてもらうことを目的としておりますのでデプロイまではいきません。
また、Canvasのソースコードはひとつのファイルに敷き詰められているような形になっているので、デプロイするとなればGemini Code Assistなどを使ってファイル分割・コンポーネントごとの分割などが別途必要になってきます。（次回の記事でやろうと考えています）
以上