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

##企画##

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

https://note.com/taka_xedge/n/n476f431c3f5b

今回はじめてWebアプリを作るにあたり、<font color="Red">**捨てた（売った）服＝「自分にとって有用でない服」の色をカウントするアプリ**</font>を作ってみます。

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

##ベース##

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

https://codepen.io/getsetbro/pen/enDpj

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

##試作品##

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

https://codepen.io/taka_xedge/pen/abyVbyp
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abyVbyp" data-user="taka_xedge" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/taka_xedge/pen/abyVbyp">
  disliked color</a> by TAKA (<a href="https://codepen.io/taka_xedge">@taka_xedge</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

。。。

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

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

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

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

##完成品##

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

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

https://codepen.io/taka_xedge/pen/yLopOEq
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLopOEq" data-user="taka_xedge" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/taka_xedge/pen/yLopOEq">
  その色の服、大体捨ててますがな</a> by TAKA (<a href="https://codepen.io/taka_xedge">@taka_xedge</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

https://focused-noether-931bc1.netlify.app/

以下、反省点

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


##番外編##

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

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

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

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

https://codepen.io/taka_xedge/pen/JjyMbLQ
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjyMbLQ" data-user="taka_xedge" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/taka_xedge/pen/JjyMbLQ">
  test(pokemon)</a> by TAKA (<a href="https://codepen.io/taka_xedge">@taka_xedge</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

https://codepen.io/mel/pen/Brads

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

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