以前、文字数カウントアプリのWeb版を作ったよって記事を書いたのですが、
文字数カウントツールのUIがしょぼかったので改善してみました↓
文字数カウントツールの変更点
前回からの変更点としては以下です。
- 全体的なUI変更
- HTML・CSSの調整
- キーボードの予測変換で入力した際にカウントされない問題の対処
最初に作った時にキーボードの予測変換で入力した文字がカウントされない問題は把握していたのですが、なかなか手を付けられずにいたので、今回修正しました。
文字数カウント部分の実装を修正+追加
前回までの仕様では、textareaでテキストを入力中かどうかをリアルタイムでチェックして文字数をカウントしていましたが、それだとキーボードの予測変換や、コピーした文字列を入力されてしまうと正しく文字数を数えることができませんでした。
今回は、「カウント」ボタンを設置することで、最終的に入力したテキストをチェックすることができるようになりました。
なので、
・リアルタイムで数えたい場合はコピペや予測候補による入力不可
・コピペや予測候補を使って入力したい場合は入力完了時に「カウント」を押す
という形になります。
もっとちゃんとやれば、「カウント」ボタンを押さなくてもコピペした文章や予測候補のテキストもリアルタイムで数えられると思うので、今後の課題としておきたいと思います。
HTMLとCSSも修正
今回、HTMLとCSSも修正しました。前回までのはこんな感じ↓
今回は、HTMLとCSSの書籍で勉強したものを反映したので、前よりは見た目がましになっているはずです。
やっぱりマージンとかパディングをちゃんとやった方が見た目も綺麗でスッキリしますね。
ただ、CSSとかは真面目にやろうとすると結構な学習コストがかかる（時間がかかる）ので、今の所は基本的なところだけ抑えて適度にやれればいいかなと思います。
あと、まだPC版の見た目しか作ってないので、スマホで見るとかなり小さく表示されてしまうので、今後のアップデートでスマホでも綺麗に表示できるようにしたいところです。
文字数カウントに今後追加する予定のもの
今の所、文字数カウントツールに今後追加していく予定のものとしては、以下を考えてます。
- スマホUIに対応
- コピペしたテキストを「カウント」ボタンなしでもリアルタイムで数えられるようにする
- テキスト全体のバイト数など、もっと細かい情報も出せるようにしたい
もしよかったら使って感想を聞かせて頂けると嬉しいです↓
よろしくお願いします。
お知らせ
謎解き推理ゲーム「イラスト捜査」を最近リリースしました！
もしよろしければダウンロードお願い致します！
