大学生になると文字数下限が定められたレポートが多く課されますよね。
幸いにも今の時代は手書きレポート用紙じゃないので作成も提出も結構楽チンかもしれませんが、提出する前に文字数カウントツールで確認する人は結構多いはずです。
そんな中、（恐らく）最大手のサイトが2024年初頭に突如として削除されました。
代替サイトなんていくらでもありますが、どいつもこいつもUI/UXがウ○コです。
こんなにたくさんの人が使っているツールがウ○コUIってのはなかなか気に食わないのでいっそのこと自作しようという流れに…
1.デザイナーに依頼する
よく遊んでる友達がUIデザイナーなのでカラオケ奢りを条件に依頼します。
しばらく待ってるとAdobeXDでプロトタイプが共有されたのでいざ実装。
ちなみにレスポンシブデザインで幅や高さを変更した時にどう変化するかはなかなか伝わりにくいので、こうやって伝わるような形式を作っておくのがオススメです。
とりあえずスマホ版は後回しにしてPC版から作っていきます。
2.コードを書く
とりあえず完成。
この日はそのデザイナー友達と旅行だったので、帰りの中央線快速の車内で喋りながら作成しました。
Adobeフォントに限らず、Webフォントを全文字読み込むと通信環境次第でロードが激重になってしまうので、textareaの部分はデフォルトの明朝で妥協。
ちなみに脳筋なのでリアルタイム文字数更新のスイッチはdivだけで実装しています。（意外と動作に違和感がない）
文字数カウントの部分は正規表現でゴニョゴニョやってるだけなので割愛。
3.公開
せっかく良いUIで作ったので、公開してあわよくばSEOで天下を取りたいところ。
さて、どのサーバーにしようか…
・自宅鯖→DDos喰らうと自宅回線が死ぬのは御免なので却下
・さくらVPS→超単純なhttpサーバーにVPS使うのは無駄なので却下
・格安レンタルサーバー→安い。十分。
というわけで価格で選んだロリポップ。GMOの悪評が云々言われてはいるが正直どうでもいいので、最低のプランで契約しました。
SSL有料のサーバーが多いなか、CertBotの簡易SSLが無料で使えるのはメリットです。
あとドメインがwordcounter.jpで取れたのは正直びっくりしました。
これも値段しか見てないのでお名前.comで取得してネームサーバーを繋げます。
適当なFTPクライアントでアップロードしたら公開完了です。
4.SEO？？
SEOなんて殆ど知らないので調べてみます。
１．descriptionタグが重要
２．サイトマップをちゃんと整備して申請する。
３．ファビコンやタイトルをちゃんとする。
と言われてもよく分からない…
とりあえずGoogleに登録してみると、サイトの概要が、
「文字数カウンタ A A 設定をリセット 文章を入力 文字数を数える…」
と、htmlそのまんまのオワコンSEOになっていたので、descriptionタグを作って書いてみます。
「content="世界一使いやすい文字数カウンタ"」
って調子乗ってたらいつまでたってもGoogleが採用してくれないので、気を取り直して書くと…
まぁマシな感じにはなってきました。サイトのタイトルも、検索されるワード+独自ワードで出やすくはなったかも。
まだモバイル版も制作していないので、また進展があれば追記します。
2024.5.8
