簡単な文字数カウントツール作ってみた
JavaScriptの勉強会でイベントハンドラの話題になったときに、length・value・onKeyupの話題が続いたので「えっ、じゃあそれ組み合わせてとりあえず何か作っておきたい！！」と思ったのがきっかけで作ってみました。
きっかけになった勉強会レポートはこちら↓
まずはデザイン
時間でいうと30分くらいでしたが、作ってて楽しかったです。（今回は機能をきちんと使いこなすことを重視しました）
最近のブームは、デザインとは別に、コーディングする際にどのような枠組み（主にdiv）でコーディングしていくか予めデザインカンプに書き込んで構想を練ってみることです。本当はバチバチ打ちながらキレイに設計していくのが理想だと思いますが、私の場合はまだCSS設計もやっと知識が頭に入ってき始めた段階なので、ぶっつけ本番よりも、操作が得意なデザインツールで先に思考整理の練習もやっちゃってます。
コーディング
今までの知識を総動員して、なるべくキレイなコードになるように設計して実装しました。
ファビコン
せっかくツールを作ったので、1つのサービスとして細部まで仕上げてみようということでファビコンも作成しました。あの小さな世界にオリジナリティを出しつつ視認性や可読性も考えるってなると物凄く難しいデザインだなと毎回思いつつ落とし所が難しいなと感じています。
Photoshopで32*32で作成したあと、無料サービスを利用して「.ico」に変換。
favicon-generator.mintsu-dev.com
OGPの設定
Twitterで報告もしたいな〜と思ったので、OGPもPhotoshopで作成してからHTMLに組み込んで設定。いわゆるバナーとかOGPとか、そういうグラフィカルなデザインももっと知見を広めて練習してセンスを磨き上げていきたい…
まずは作成した画像の見栄えを↓で確認
そしてHTMLに組み込む（参考にしたサイトは↓）
やっとTwitterに投稿！までこぎつけたものの、設定したはずのOGPが中々読み込まれず、調べた所Twitterが専用のツールを準備してくれているみたいで、そこで解決。↓
Netlifyにあげてみた
Netlifyイイ！みたいな噂を勉強会やTwitterで見かけていたので興味があり、使ってみました。
めちゃくちゃ簡単で感動しました。
参考にしたサイトは↓
まとめ
デザイン→実装（コーディング、ファビコン、OGPなどなど）まで全部含めて3時間くらいで完成しました。新しいことをたくさんできて大満足です。
