作ったもの
自宅のSwitchbotの温湿度計のデータを見れるウェブサイトを作りました。
制作時間は実質6時間くらいです。
作った過程、簡単な構成
背景
SwitchbotのAPIというのがあり簡単に使えるということを知り、
また、生成AIを使って自動でコーディングしてWeb系のアプリを作るというのが流行っているそうなので、マネしてみたく、使ってみました。
簡単な構成
AWSのサーバレスな構成です。データの流れに注目した図です。（ちゃんとした書き方をあまり知らない）
- Switchbot API→SQS
Lambda/PythonでSwitchbotのAPIを叩き、SQSに配信します。
S3に一気に配信してもいいのですが、構成を悩んでいたので、暫定的にSQSに貯めていました。
SQSはよく分からずFIFOキューにしました。 - SQS→S3
Lambda/PythonでSQSの内容をCSVに整形します。
CSVは日ごとにファイルができます。例：2025-05-11.csv - S3→CloudFront
静的Webサイトを構成して、JavaScript（ECharts）でグラフを描画しています。
生成AIを使った感想
構成の検討・相談では良い感じに使えた(ChatGPT)
「Swtichbotの温度データを良い感じに可視化したい」というお題だと、構成が無限に考えらると思います。
例えば、データ蓄積はS3/RDB/Kinesis Firehose？など色々あります。そこを「なるべく安くて簡単な構成」と相談するとS3が良いと説得してくれました。サンプル構成付きで。
また、可視化部分も、静的Webサイト(Chart.js/EChars）、EC2+Metabase、Grafana Cloud、Google Locker Studioなど色々あります。私が「そこまで機能はリッチでなくてよく、安いほうがよく、すでにあるCloudFrontを活用したい」と聞いたら、静的Webサイトをオススメしてくれました。
高速にプロトタイピングできる(Claude3.7sonnet)。ただし、要件出し・レビュー・修正は人間も必要
Claude3.7 sonnetはすごいです。人間が手で書いたら数時間かかるようなコードを5分くらいで書いてくれます。雑に依頼して、「こんな感じでどうでしょう？」とすぐに提案してくれます。
ただ、①要件をちゃんと説明・入力すること、②所望の動作になっているかチェックすること、③必要な部分を修正すること、の3つは、まだまだ人間側の工夫も必要かなと思いました。
要件を入力
要件については、ちゃんと人間が意思を持って言語化する必要があると思いました。
もちろん「なんでもいい」のであれば適当でいいのですが、適当に入力すると「コレジャナイ」ものが出てくることもあります。
私は、以下のようなプロンプトで入力しました。
- 要求
- Apache EChartsを使って、気温データを可視化したいです。
- 静的Webサイトで動くようなスクリプトにしてください
- エラーは逐一consoleに表示してください。
- データは以下のような形式で、サーバ上の同じディレクトリに2025-05-08.csvなど日付ごと保存されています。
- curretTimeがタイムスタンプで、temperatureが温度です。
- fetch()で読み込んできてください
- 複数日付（可能であればディレクトリの中身すべて）のデータを読み込んできて描画したいです。
- モックデータでのデモ表示などは不要です
- 機能
- 期間を「生データ、1日、7日、30日」などで選択できるようにしてください
- 表示事項を「気温、湿度、バッテリー」で選択できるようにしてください
チェック・レビュー
細かいチェックは不要ですが、色々とポチポチ、動作確認をしておかしい点を見つけるのは人間の役割です。
特に、LLM側は本来「それっぽいものを返答する」というロジックで動いており、細かい実行環境は知らないので、「実際に想定動作しない」ことがまあまああります。この点は人間も「知識と経験」のようなものがあった方が、解決が早くなりそうだと思いました。
修正
Claude3.7 sonnetのクセですが、「Aの動作をBするようにして。Cの動作をDするようにして」などと修正依頼すると、それ以外の部分も改修してきて、プログラムの構成・Webサイトの見た目を全く変えて出力してくることがあります。
「要らないところも勝手に直してきたな・・」と思い、「Eは不要です。書き直して」などと依頼しても、以前の姿に戻らないこともあります。
この点は新規でチャットを作り、修正したいプログラムを丸々入力して、「修正箇所のみ教えてください」というようにアドバイスを求めると、必要な書き換え箇所を出力してくれるイメージでした。
このように、若干「依頼の仕方」を工夫して所望のモノを引き出す必要があります・・・
細かい不満はあるが、スピードアップは間違いない
修正などに手間取るという不満を述べましたが、自分でイチからコードを書くのに比べれば、圧倒的に早いです。
今後もどんどん活用・浸透していくんだろうな・・・と感じました。