LoginSignup
4
1

More than 1 year has passed since last update.

買った服と捨てた服 色をカウントするWebアプリ(番外編:ポケモン神経衰弱) #codepen #Netlify #ポケモン

Last updated at Posted at 2021-11-03

企画

以前noteで欲しい服よりも要らない服の情報が自分にとって有益という話を書きました。

今回はじめてWebアプリを作るにあたり、捨てた(売った)服=「自分にとって有用でない服」の色をカウントするアプリを作ってみます。

服にもいろいろ属性があるので、まずは「色」からチャレンジです。

ベース

こちらのcodepenをパクr使用させていただきました。リスペクト:pray:

ライブラリは「jQuery」「jQueryUI」が使われています。

試作品

ベースをもとに以下の修正を加えました。
①ボックスのバリエーションをアルファベットから色に変更
②1ボタンで1と0を行き来する仕様だったところ、カウントアップし続けるよう変更(「嫌い」を累積)
③各ボタンに個別のカウンターを追加
④各ボタンをそれぞれのカラーに変更
⑤ボックスの大きさや文字の大きさを調整

https://codepen.io/taka_xedge/pen/abyVbyp


See the Pen
disliked color
by TAKA (@taka_xedge)
on CodePen.


。。。

と、ここまで作って気づきましたが、

買ってない色の服はそもそも捨てないんですよね。。。

これだと、買っていない色のほうが優位ということになってしまう。
(スキルも大概ですが、そもそもがアホすぎました。。。)

ので、継続して修正します。

完成品

試作品をもとに以下の修正を加えました。
①ボタンを2つに増設
②全体的に日本語に変更し、用途が分かるように変更

プレビューがひどい。笑
0.25倍率でお願いします:pray:

https://codepen.io/taka_xedge/pen/yLopOEq


See the Pen
その色の服、大体捨ててますがな
by TAKA (@taka_xedge)
on CodePen.


Netlify使ってサイト公開してみました。

以下、反省点

 ・人に使ってもらうならLINEチャットボットとかと組みわせたほうが良さそう
 ・そもそも情報をストックするようなアプリにしないと役に立たない 
 ・もっとざっくばらんに服の属性を集めれるような仕様を考えないとダメ
 ・(ちゃんとできてからでいいけど)コードをきれいに

番外編

最近6歳の長女がポケモンにハマっています。(Switchでポケモンスナップしてます)

あまり遊んであげられない日々が続いているので、娘にゲームを作ってあげました。

公開されているpenをマルパクリで写真を差し替えただけなので所要時間は5分もかかりません。

とてもとても喜んでもらえたので、小さなお子様がいらっしゃる方にはオススメです。
(取得するイメージのポケモンのナンバー部分を置き換えるだけでお子様の好きなポケモンに即効変えることができます。)

https://codepen.io/taka_xedge/pen/JjyMbLQ


See the Pen
test(pokemon)
by TAKA (@taka_xedge)
on CodePen.


以下を参考にさせていただきました。リスペクト:pray:(2回目)

使った時間は番外編のほうが圧倒的に短いです。

人を喜ばせられたのはどっち?と考えると悶々としますね。

4
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
4
1