非技術者でもできる！Google AI Studioで始める超高速PoC開発！

<img width=35%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/4c125ca6-fb1a-40de-b80d-420e24338371.png" width=30%>

こんにちは！今回は「PoC開発をとにかく爆速でやりたい！」「でもコードは書けないし、エンジニアに頼むのも大変…」という方に超おすすめのツール、**Google AI Studio** をご紹介します。

Google AI Studioを使うと、非技術者の方でもサクッとAIアプリのPoCが簡単に作れちゃいます。  
私自身も試してみたのですが、「え、もう動くの？」ってくらい簡単すぎて衝撃でした。

ということで、この記事では **Google AI Studioを使ったPoC開発の手順** を具体的に解説していきます！

---

## Google AI Studioって何？

Google AI Studioは、Googleが提供するクラウド上のAIアプリ開発環境です。  
https://aistudio.google.com/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/de7446a5-8280-4ab1-8f01-46d652310a66.png" width=50%>

最大の特徴は、**コードがほぼ書けなくてもアプリの試作（PoC）が作れてしまう** という点。 
AIを使ったコード生成、フロントエンドの簡易的な動作確認、スマホにデプロイしてのPoCまで一気通貫でできちゃうので、「とりあえず試したい！」というときにピッタリです。 

特に生成AIを活用したアプリのアイデアをその場で形にできるので、アイデア出しと実装を同時に回すようなイメージ。開発のスピード感がとにかくエグいです。

---

## 実際の手順をやってみる

それでは、実際にGoogle AI StudioでアプリPoCを作る流れを見ていきましょう。

### ① 新しいプロジェクトを作成

まず、Google AI Studioにアクセスし、左側の「Build」をクリックします。その後「Start from a template」を選択してから「Empty」を選びます。  
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/f02204b0-931b-4f4d-9ff6-0b969411a992.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/e0c6b31c-6a1e-41c1-803e-a2d17aac1889.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/a8471fe7-5463-4d95-948a-26963386b6fc.png" width=50%>

これで空のプロジェクトが作成されて準備ができました。

### ② アプリの仕様を左ペインに入力

次に、左側のペインに作りたいアプリの仕様を入力していきます。  
ここにアプリの詳細な仕様を書くとAIがコードを生成して、その実行プレビューまで作成してくれます！

例えばこんな感じで入力します：

```plaintext
スマートフォンのカメラを使ってOCR機能を実装したいと思います。
下記の仕様の通りのアプリケーションを実装してください。
・アプリUIの撮影ボタンを押すと、スマートフォンのカメラ機能を起動する。
・カメラ機能ではシャッターボタン押下で撮影する事ができる。
・撮影すると、撮影した画像をGoogleGeminiのOCR機能を使って文字列を抽出する。
・文字列抽出の精度はなるべく高くしてほしいですが、画像から読み取れる文章のフォーマットは出来るだけ維持してください。
・アプリUIに抽出した文字列を表示する。
・アプリは過去に撮影、抽出した文字列を、撮影日時順に記録していて、アプリUIでは過去にOCR機能をして文字列化した履歴が時系列順に表示される。
```
たったこれだけです。コードは一切書いてません。

### ③ コードが自動生成され、実行プレビュー

ここで送信すると、中央のペインにコードがズラッと生成されます。この例ではHTMLやらTypeScriptのファイルなどが計4個作成されました。さらに右側のペインにはそのコードを実行した結果（アプリのプレビュー）が表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/7110b484-82e8-4611-bde5-f5164fde959c.png" width=50%>

「コード？分かんないけど、動いてる！」という感動体験が味わえます。

---

## スマホで動かすまで一瞬

さて、PoCが形になったら「これ、スマホで触ってみたいな」と思いますよね。  
Google AI Studioでは、スマホへのデプロイも簡単に出来るようになっています。

以下の手順でスマホでの動作まで持っていく事ができます。

 (1) 右上のシェアボタンから共有URLを生成して取得する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/f6e5802a-921a-4310-b1c3-1e2146dcc960.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/7d95aec4-0b1c-4fa5-89ae-cf246302eee5.png" width=50%>

途中にGoogleDriveへのアクセス権限が求められるかもしれません。これはGoogleDriveのWebホスティング機能を使って生成したHTMLファイルやTypeScriptファイルをデリバリする為です。

 (2) 生成したURLでとりあえず開いてみる（Chromeブラウザ推奨）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/ba6df8c0-6635-47a4-b003-3654192a3c05.png" width=50%>

作成したアプリがブラウザ上から単一WebページのWebアプリとして確認できると思います。

 (3) 開いたWebページを右クリックして、「お使いのデバイスに送信」の共有機能を使ってスマホ側に送信

スマホのChromeブラウザに通知が来て、それを開けば今迄作っていたアプリが開けると思います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/65696a79-022f-4303-819a-37604815262c.png" width=50%>

これだけで **スマホ上で自分のPoCアプリが動く！**  が実現できます。凄い簡単ですね。

---

## 実際の動作例の紹介

本当に動くのか？という事で少しだけ試してみます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/68b09d62-1920-447a-94ca-3e08159d5e7d.png" width=50%>

完璧ですね。割と簡単なもの＆少量なOCRなら期待通りに動きそうです。

今度は少し文字量の多いもので試してみたいと思います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210612/7e3a3143-7ca5-4599-bd1a-e0bf350fad03.png" width=50%>

スゲー、、と思ったけど、よく見ると結構ミスが多いですね。
小説なんかを完璧に読み込むには課題がありそうです。とはいえ数分でデプロイしたPoC実装でそういう課題まで確認できたのは非常に良い経験ができたのではないかと思います。

---

## おわりに

いかがだったでしょうか？

**Google AI Studioを使うと、非技術者でも本当に一瞬でPoCが作れます。**  
しかも自然言語で仕様を書く → コード生成 → 動作確認 → スマホでテスト、までノンストップ。

「AIを使ったアイデア、頭の中にはあるけど実現できなくて…」という方、ぜひ一度触ってもらえればと思います。きっと、「あれ、もう動いてるじゃん！？」ってなるはずです。

PoC開発を爆速で進めて、実用的なアイデア具現化までを加速させていきましょう！
もし試してみた感想や「こんなPoC作ってみたよ！」という事例があれば、コメントなどしていただけると幸いです。

最後まで読んでいただきありがとうございました。

---