LoginSignup
13
1

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

Last updated at Posted at 2023-12-06

NatureRemoをPCで操作したくなった

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

なぜChatGPTを使うのか

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

仕様決定

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

・NatureRemoAPIを使用する
JavaScriptでCloud版のAPIを操作します
ネット環境無しでも使えるらしいLocal版は今回使用しません

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

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

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

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

ChatGPTに依頼してみる

上記の仕様をそのまま渡してみます
image.png
(作成結果のChatGPTページはこちら)

デスクトップに「NatureRemo操作.html」を作成します
メモ帳等で開き、作成されたコードを書き込み、トークン部分を書き換え、ページにアクセスすると
image.png
(個人名のため一部伏せます)
家電一覧が表示され、照明にはボタンが追加された事が確認できました

では、いざ実行すると...
image.png
エラーが起きました

ChatGPTは常に正しいとは限らない

400 Bad requestエラーが返ってきました
image.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説明ページでは
request body button:button name となっています
つまり、このデータが必要となります
image.png
ChatGPTに作成してもらったコードでは、turn_on もしくは turn_off が入っていることが確認できます
image.png
さらに、送信するデータ型も間違っています
API説明ページによると、送信データは application/x-www-form-urlencoded 型である必要があるため、
ヘッダーのContent-Type、bodyの書き方も x-www-form-urlencoded 型に合わせる必要があります
最終的に、以下のようなコードで動作するようになりました
image.png

今回の教訓

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

余談

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

13
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
1