【AI駆動開発】初心者がGeminiだけでAlexaスキルを作った話

## はじめに
Geminiに課金したのでせっかくだから何か作ってみたい
そういえば、Alexaのゴミ出し管理スキルって自分にぴったりのが無かったな
でも、自分でコードを書くのはちょっと面倒だし

じゃあ、Geminiにコード全部任せて、自分好みの最強スキル作ればいいんじゃね？

と、雰囲気で始めた結果、
「こうやっておくとスムーズだったな〜」という気づきもあったので、
そのへんをゆるっとまとめました
Alexaスキル開発という観点ではあまり記述してないです。

## 準備
### 方針
* Geminiを信じる
* 自分でコードは書かず、エラー対処も自分でしない、全部コピペ

### 開発環境
* Gemini Advanced 2.5 Pro
* それ以外はGeminiに任せてよしなに対応する

## 要件定義
そもそもAlexaアプリが自分で作れるかを確認しないとで聞いてみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/cfc4c771-a815-4067-9642-273942a344b1.png)

1行目から早速のご指導。
Alexaの中で使えるアプリだなぁって思っていたら「Alexaスキル」ですと訂正された

まぁ、自分で作れるのが確認できたのでヨシ
<br>

次にGeminiに要件定義もやらせてみる
最初に要件定義をやることぐらいは流石に知っている

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/c7d87439-a36c-4ac3-b568-f7c98b4de6fa.png)

「開く」ボタンが出てきたが、これはCanvas機能である
要件定義書をCanvasにて管理することで、チャット画面を汚さずに進められる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/87b4e086-8ab0-453b-9094-7f38a989428f.png)

:::note info
⭐️ポイント⭐️
Geminiとのやりとりで更新されるものは、最初からCanvasで作るとずっと便利
:::


Canvas機能がとても便利、これはたくさん使った方が良いなと実感する
追加でもう1つ用意してもらう


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/645c19ea-351c-4cd5-bff4-f41873141769.png)

表形式にして、Geminiの質問に答えれば勝手に要件定義終わるな

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/e4a11125-3e5a-450b-9c11-fb62b4a8dfb4.png)

回答はかなり適当でもGeminiはそれっぽく理解して要件定義を更新してくれる
言葉遣いもテキトーで良い、最高である

このままの調子で要件定義完了待ったなし
Gemini歴2日目にして完全に理解した

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/614a8580-47fc-456c-b11c-5a4e3b371253.png)

Gemini突然の死
そして、このチャットで二度とGeminiとは会話ができないのであった...
`(補足) 記事作成時には使えるように直ってました`

## 復活の要件定義

ただ、私にはCanvasの要件定義書が残ってる
新しいGeminiと再スタートができる、強い

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/d9024c84-de7e-4e17-9042-bd1918615eba.png)

:::note info
⭐️ポイント⭐️
Canvasにまとめておくことで再利用性が高い、やっててよかったCanvas式
:::

<details><summary>ここまでの要件定義</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/3fad8339-a8b1-4207-a498-fcde36cdf90e.png)

</details>
<br>

Geminiは色々提案してくれるけど、君に全ベットしているから、全部yes

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/34c3caaf-cceb-46d0-9538-c4529f30093e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/49e9a537-79d0-4411-acfe-f20388a0cd4b.png)

**スロット**も**インテント**もあんまり分かってないけど、
ゴミ捨てスキルに必要な何かなんだなぁと思いつつ進める

<br>

突然のGeminiとの別れに備えて、定期的に**要件定義書**も更新しておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/11def44b-68f6-4eb8-a7e0-91f0bba36d5c.png)
Geminiが見ているCanvasと自分が見ているCanvasのバージョンが時々ズレてしまう
ことがあるので、明示的に更新をすることで副次効果としてズレを防げる

:::note info
⭐️ポイント⭐️
Canvasは基本自動更新されるけど、明示的にやっておくと安心
:::


## 設計

なんやかんや質問に答えるだけで要件定義が終わった
どうやらここから設計フェーズに入るらしい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/b45e1df4-34c5-43ff-a3ef-ba0d5913614f.png)

ここからゴミ捨てに関わる話ではなく、技術的な話が増えてきた
判断できない時はとりあえず聞いてみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/7e6f3418-6138-4f59-960c-19e6b9b30f26.png)

ちゃんとどっちがおすすめかも教えてくれる
ここから先はGeminiを信じて「そっちで行こう」を連投する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/f12d446b-924f-4277-b4cb-615e17d90d68.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/03e4db02-b3c4-42f4-91f0-86c61abb457e.png)

いつの間にかコードを書いてくれるまで到達した
まずはハードコーディングで各曜日のゴミ捨てを設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/662c4b45-5a12-4a72-a761-9eb8f1dbac3a.png)

コードレビュー？そんなのはしない、Geminiに任せる。
エラーを見て判断すると言いながらも、エラーもGeminiに投げるんだよなぁ、スマン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/01b3c6fb-dc3e-4800-90e8-1727d59de263.png)

Gemini「Node.jsをAlexa-Hosted環境にデプロイし、Alexa Developer Consoleのシミュレーターや実機のEchoデバイスでテストしてください」

Geminiはまだ私が知識があると思っているみたいだ、残念

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/0318621b-d868-480e-88d8-8bb2ab49aa0b.png)

<details><summary>設定・準備ガイド</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/099b9ac6-3a3d-433b-8b41-64220479f3bb.png)

</details>

## Alexaスキル設定
ここまでGeminiと二人三脚で順調にこなしていたが、壁にぶつかる
**<font color="HotPink">
Geminiが最新のAlexa-Hostednサイト構成を理解していない問題
</font>**

これはしょうがないが、サイト側の更新によって
Geminiの指示に書いてあるボタンが無い、違う場所にあるという事象が発生

またGeminiは親切に日本語で教えてくれるが、Alexaサイト側が英語で見つけられない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/1eedcdf3-21de-4055-9d86-2a2196b5767d.png)

そして、初めて気づく。スクショ送ればいいじゃん、と。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/40fa1c88-3831-4180-800a-2b448ab7232a.png)

Gemini秒速で回答、好き

昔教授から「秒で回答してください」とメールがきて、即レスをしたら時間の単位であったことを思い出す

:::note info
⭐️ポイント⭐️
画像も理解できるから、分からない時はそのまま画像を貼って聞く
:::

そんなこんなでGeminiに言われるがままにAlexa側での設定を進める
どんな入力をすべきかは教えてくれるが、入力は自力、めんどくさい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/86d1b90d-70ad-4ce7-a0a5-3f83dc1dee58.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/3dac650f-d5d4-474a-9212-723ec98cd476.png)

そしてビルド、そう簡単にはうまくいかない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/6a58386a-79a8-440e-979b-7e2498cc1e1d.png)

エラーをコピペして聞いてみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/31934cd9-a19c-44c0-86da-0adf58e171f7.png)

修正して、テストへ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/607e9cce-8491-400f-8a50-935ff33c51ca.png)

「ビン」と言ったら「便」になってしまった、音声認識の課題あるあるである
「ダンボール」がうまく進む時と、進まない時がある、困った、スクショペタ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/46568619-05ab-493f-a8fa-14595352d36d.png)

スクショを貼っただけで感謝される、Geminiこちらこそありがとう

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/93a2bf61-25be-4251-aa8b-33fc0f2c9907.png" width=50%>

完成した
正直ハードコーディングで良い、自分だけが使えれば良いし

「Gemini、ハードコーディングで完成だよね？」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/3f2cb6e0-dfe6-406a-b4a8-80f24a9c4cfe.png)

それはGeminiが許さない、Geminiは高みを目指す

## ソフトコーティング対応
Gemini曰く、ゴミ捨ての曜日設定は以下の3つ
* Alexaへの音声入力で設定
* Webページを作って、その設定をAlexaへ連携
* Alexaアプリ側で設定

利用しやすさとして音声入力は使いづらいし、Webページを作る余力もないので、
消去法で3つ目のAlexaアプリ側での設定で進める

<br>

予定であったが、今まで使った時間以上を費やし完成できず、、、

:::note warn
**結論**
ハードコーディングのままとする
:::

というのも、いくらGeminiと話してもいっこうに完成しない

テスト結果のスクショだけ貼って完了の世界は終わり、
GeminiからCloudWatchのログを見ろと言われてしまう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/290c7290-ef52-4678-9eed-2787e3195bac.png)

エラー沼にハマって抜け出せない...
すまないGemini。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/4759381b-6d55-4e7b-9d22-31a7d4bcfbce.png)

こっそりChatGPTに聞いてみると、それできないよと言われる

`(補足)本当に実現不可かは、公式ドキュメントで確認しましょう`

:::note info
⭐️ポイント⭐️
詰まったら1つの生成AIだけじゃなくて他のにも聞いてみよう
(Geminiで新チャット立ち上げて聞くでもよかったかも)
:::

今まで一緒に頑張ってきたGeminiになんて言おう、、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/bd94d260-4549-4536-ba04-2881d99eb7f1.png)

ChatGPTっていうと気を悪くするかもしれないし、「有識者」って誤魔化そう
<br>
<br>
<br>
<br>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/0d58c41b-fa2d-4b5a-80fe-0de2d2837410.png)
バレてたー、ChatGPTに聞いてるの知ってたー

ということで、外部から値を取ってくるのを断念
今回は自分だけが使えればヨシという方針のもとハードコーディングで完成させていく

`(補足)自分のチャットを見たところ"ChatGPT"が含まれてた、文体で気づかれたのかと思ったよ`

<br>
開発を始める前にこんなことを思ってしまっていたが大反省

> そういえば、Alexaのゴミ出し管理スキルって自分にぴったりのが無かったな

既に開発されていたスキルは、
各曜日のゴミ種別をWebページ連携で実装しており力の差を実感する

:::note info
⭐️ポイント⭐️
実現性確認はGemini単独に任せない
公式ドキュメントの確認や、それを引用してGeminiに聞くこと
:::


もろもろコードをいじってしまったので修正することに
ただエラーがまた出てきたため、ChatGPTの力も使って完成を目指す
Geminiに任せる方針のため、ChatGPTの回答を隠さずコピペまま、開き直る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/7354846a-16a8-4dba-a671-8cf62feb96b2.png)

コードの修正でJSONも直すことに
手投入してたシノニムもコードで設定できたことを知る

`(補足)シノニム：同義語、類義語、言い換え (例. 不燃ごみ = 燃えないごみ,不燃ゴミ)`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/779518c9-d370-454f-b77b-177870be8082.png)

> どんな入力をすべきかは教えてくれるが、入力は自力、めんどくさい

こんなことを思っていた自分の愚かさを実感

:::note info
⭐️ポイント⭐️
めんどくさいなって思った作業はGeminiに聞いてみる
手動でやらなくて良い方法があるかも
:::

<br>

ハードコード版ですが、無事に完成しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/6fe0e0d6-83e0-406e-a3d2-5ffb1efa577b.png" width=50%>

## 最後に
### ポイントまとめ
* 実現性は公式ドキュメントなどを使い自分で確認、または引用して生成AIに聞く
* Canvas関連
    * Geminiとのやりとりで更新が予定されるものは初めからCanvasで作る
    * 明示的に更新をする
* 複数の生成AIに聞いてみる
* 文字だけではなく、画像も使ってチャットする
* 時間がかかりそうな作業は効率化できないか聞いてみる

### 反省
記事を書いている間にA2Aの発表があった、このノウハウ不要になるのでは。
* [Agent2Agent](https://cloud.google.com/blog/ja/products/ai-machine-learning/a2a-a-new-era-of-agent-interoperability)
* [firebase](https://firebase.google.com/?hl=ja)

### 利用サイト
* [Gemini](https://gemini.google.com/app)
* [Alexa Developer Console](https://developer.amazon.com/alexa/console/ask) 
* [Amazon開発者向けポータル](https://developer.amazon.com/ja/)

### 参考
無し

### 「Gemini、タイトル何がいいかな？」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284042/c5fac303-cd92-42e5-a05c-6ab555a9986a.png)