前書き
先日、人生で初めてWebアプリを制作した。
（もし宜しければご覧いただけると幸いである。）
「餃子専用レビューページ」と題してひとまずは形にすることはできたが、「今自分の技量でできること」という点を意識しすぎた分、アイデアに自分らしさや餃子に特化した要素を取り込むことができていなかった。
そこで今回は、前回制作したものをレベルアップさせるべく、新たに学んだ技術を取り入れて改良を試みた。
改良したアプリ
下記のような仕上がりになったので、ぜひ叩いていただきたい。
追加した機能
- 入力項目
より餃子に特化させるべくニンニクの有無や値段などを入力欄に設定 - QRコード生成ページ
「こちら」をクリックすると、筆者の独断と偏見と趣味嗜好で選定した餃子7選の食べログサイトをQRコード化してランダムに表示
使用したもの
- CodePen
- Netlify
- Vue.js
- QRコード生成
- bootstrap
CodePenのソースコード
See the Pen 餃子専用レビューページ<改> by Yuki Tamura (@Yuki-Tamura) on CodePen.
改良をしてみた結果
見た目
今回bootstrapを使用したことで、少なくとも前回制作分よりも見やすくはなったのではないか。
特にボタンを色付けすることによって、ユーザーに潜在的な動作制御を促すことができるようになったことが個人的には満足している点だ。
使いやすさ
正直なところ、私がユーザーであれば少し不便に感じる点がいくつか存在する。
一点目として、出力されるレビュー一覧がそれぞれ個々となって表示されるという点である。
私としては、一ユーザーのレビューとして入力されたレビューを一つのまとまりにして、それぞれ区別をさせる仕様に仕上げたかった。が、今一つ知識が及ばなかった。
二つ目としては、すべて手入力で実施しなければならないのかと感じてしまう点である。
特に日にちやニンニクの有無など、プルダウンとして実装できればユーザーとしては利便性が向上することは間違いない。
ユーザーの立場に立って気づいたこととして、今後の課題の一つとすることとする。
後書き
一通りWebアプリの改良に取り組んだが、総じてとても楽しく実装することができた。
やはり「餃子」を目の前に作業をするだけあって、改良へのモチベーションは息を止めることが無かった。
また一度制作したものを改良、レベルアップするということで、前回と今回とでのクオリティの差や実装スキルの変化が目に見えて分かるため、できるようになったことや自分が得意なことの発見にも繋げることができた。
私の餃子への愛は、まだまだ発展途上である。