また食べたいのにどこで買ったカレーパンか覚えていない
なんとなく立ち寄ったパン屋さんで、なんとなく買ったカレーパンが意外にも美味しくて、また食べたいなーってなることがよくあるのですが、また食べたいなーってなった時には、どこで買ったか忘れていることがほとんどなんですよね。
そんな悩みを解決してくれる、カレーパンを記録するWebアプリを作りました。
カレーパン記録アプリ
できあがったのがこちら。
※パン屋でさくっと使えるように、スマホから開くことを想定して作成しました。
カレーパンの名前、店名や訪店日時、位置情報までをお店でサクッと入力。
家に帰ってカレーパンを食べたら、生地感やルー、具材の情報を入力。
保存するボタンを押せば、カレーパンの情報がばっちり記録されますﾔｯﾀﾈ!!
環境
Netlify
CodePen
Vue.js
bootstrap
LocalStorage
Web Sensor API
コード紹介
See the Pen カフェ記録アプリ by Masahiro Nishiguchi (@Masaedge) on CodePen.
位置情報の取得にはWeb Sensor APIを使用し、Googlemapのリンク形式で出力するようにしました。
LocalStorageを使用して、カレーパンの名前をキーに、その他入力の情報をデータとして保存します。
LocalStorageに保存した情報を読み出す際は、リスト形式でそのまま出力しているので、もっと見やすく出力する方法を模索したいと思います。
作って使用した感想
位置情報の取得とか、こんなに簡単に実装できるのか！！といった驚きで溢れています。
bootstrapの良さをあまり引き出せている気がしないので、まだまだ精進しなければいけないな、、と思っています。
生地感や具の情報を保存するようにしたので、食べたいカレーパンをサクッと検索できるのがいいポイントだなと思っています。
これから追加したい機能は、画像を残す機能です。文字だけでは思い出せない情報も、画像があればもっと鮮明に思い出せるのにな。。という感想を抱いています。