作品を見る
【使用ツール】
ChatGPT / Codex / FileZilla
【使用技術)
HTML / CSS / JavaScript / Web Speech API / LocalStorage / PWA
【作品概要】
音声で買うものを登録し、あとから店舗や備考を整理できる買い物リストアプリです。
運転中や家事中など、手入力しにくい場面でも使いやすいように音声入力に対応しています。よく買う商品を定番リストで確認しながら入力でき、登録した商品は店舗ごとに自動でまとめて表示します。
購入済みの商品はチェックで分かりやすく管理でき、スマートフォンのホーム画面から起動できるPWAにも対応しています。
【工夫した点】
手がふさがっている時でも使いやすいように音声入力を中心にし、定番リストを見ながら登録できるようにしました。商品は店舗ごとに自動でまとめ、店舗名は略称で表示しています。
購入済みの商品は訂正線と薄い文字で表示し、翌日になると自動で削除されます。
データはLocalStorageに保存し、データベースやAI APIを使わないシンプルな構成にしました。APIキーなどの機密情報を持たせず、買い物内容もサーバーに保存しないようにしています。
また、スマートフォンで片手操作しやすいよう、ボタンの位置や大きさにも配慮しました。
【制作時間】
約10時間
