NatureRemoをPCで操作するためChatGPTに頑張ってもらった

## NatureRemoをPCで操作したくなった
NatureRemoとは、スマートフォンから家電の操作ができるようにするリモコンのことです
テレビやエアコン、照明などの赤外線で操作されているリモコンを1つに集約し、スマートフォンなどのアプリ上から家電を操作することができます
我が家にはコイツが導入されており、現状では各部屋の照明、エアコン、扇風機等が管理されています
専用のスマホアプリから操作しても良いのですが、PCで作業をしている時にスマホを開き、アプリを開き、ボタンを押すのはめんどくさいな、PCでささっと動かせればな～という気持ちがありました
PC版のアプリは発表されておらず、非公式のアプリは僕の自宅環境では動作しませんでしたので、今回PC版のアプリを作成しようと思い立ちました

## なぜChatGPTを使うのか
弊社にはChatGPT手当というものが存在します
エンジニアが働きやすい会社を目指す社風のため、業務でChatGPTを使うなら支援するべという事です　いい会社ですね
「詳細な仕様を伝えたらそのまま動くプログラムが出来た！」的なポストがちょうどX(旧Twitter)で話題になっていたため、有料版も使えるしいっちょ試してみるか！というのがはじまりです
今回は、動作するものを手早く作ることを目的とします

## 仕様決定
以下の内容を今回の仕様とします
**・HTML及びJavaScriptでコードを作成し、ウェブブラウザで動作させる**
インストールがあると各手間が増えてめんどくさいのと
動作するものを手早く作ることが目的なのと
ネットに繋がっているPCならどこでも動かせるのが理想だからです

**・NatureRemoAPIを使用する**
JavaScriptで[Cloud版のAPI](https://swagger.nature.global/)を操作します
ネット環境無しでも使えるらしいLocal版は今回使用しません

**・API動作に必要なトークンは定数としてハードコーディングする**
別ファイルに保存する、キャッシュに保存する、なども考えましたが、なるべく簡単なプログラムで済ませたいのでここは手作業で書き込むこととします
セキュリティ的にはよろしくないです

**・ページを表示する際、最初に家電一覧を取得して表示する**
登録済の家電を一覧で表示します

**・家電が照明の場合、ON/OFFボタンをページ上に配置する**
動作するものを手早く作ることが目的のため、ひとまず照明に対象を絞ります
~~エアコンの冷暖房、動作切り替え、温度設定、風量設定のデバッグがめんどくさいと思ったわけじゃ無いです~~

**・家電ごとにDiv要素を分ける**
ボタンと家電名の紐づけが分かりやすいよう、項目をDiv要素で分けることが狙いです

## ChatGPTに依頼してみる
上記の仕様をそのまま渡してみます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525595/68aa796e-de02-9d9f-9283-1124e2a8eb35.png)
[（作成結果のChatGPTページはこちら）](https://chat.openai.com/share/9b67ac1e-7c8a-423f-8722-e33db11e61c4)

デスクトップに「NatureRemo操作.html」を作成します
メモ帳等で開き、作成されたコードを書き込み、トークン部分を書き換え、ページにアクセスすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525595/7b551460-128f-e076-383f-edd4c94a5983.png)
（個人名のため一部伏せます）
家電一覧が表示され、照明にはボタンが追加された事が確認できました

では、いざ実行すると...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525595/a6fd84ef-5cc5-0e92-18e1-a334983559b0.png)
エラーが起きました

## ChatGPTは常に正しいとは限らない
400 Bad requestエラーが返ってきました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525595/0da6222d-a2e5-02bf-ce08-1649d866a74b.png)
今回のエラーはPOSTしたリクエストが失敗したことで発生したようです

APIで失敗しそうな点は次の辺りです
①リクエストのURLが誤っている
今回の場合は合っていました（ api.nature.global/1/appliances/${id}/light ）
参考：https://swagger.nature.global/#/default/post_1_appliances__applianceid__light

②認証されていない
こちらも、今回の場合は合っていました
参考：https://developer.nature.global/#oauth2

③APIに必要なbody情報が誤っている
今回の場合はこちらに問題がありました
具体的には、[API説明ページ](https://swagger.nature.global/#/default/post_1_appliances__applianceid__light)では
request body `button:button name` となっています
つまり、このデータが必要となります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525595/383f827c-6967-d883-3d93-c611cdb51534.png)
ChatGPTに作成してもらったコードでは、`turn_on` もしくは `turn_off` が入っていることが確認できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525595/55feea17-4003-a1da-9842-64c1d6b12572.png)
さらに、送信するデータ型も間違っています
[API説明ページ](https://swagger.nature.global/#/default/post_1_appliances__applianceid__light)によると、送信データは `application/x-www-form-urlencoded` 型である必要があるため、
ヘッダーの`Content-Type`、bodyの書き方も `x-www-form-urlencoded` 型に合わせる必要があります
最終的に、以下のようなコードで動作するようになりました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525595/23b5ca40-e3c3-b6f1-098c-dc5fbea35dad.png)

## 今回の教訓
今回のように、AIはけっこう嘘をつくので、100%信じると痛い目を見ます
AIに甘えるとプログラムが書けないプログラマになってしまいそうです
補助的にコード生成を行うにとどめるのが、AIプログラミングの正しい使い方かなと個人的には思いました


## 余談
我が家はNatureRemoの他にアレクサも導入しています、そのため
「アレクサ、仕事部屋の照明つけて」
これで求める機能が動いてしまいます
~~PC版アプリなんていらんかったんや...~~ IoTってすげぇや！