X(旧Twitter)の文字数をチェックするツールの仕組みの解説

開発

X(旧Twitter)をビジネスで使われている方は多いと思います。そして、できれば予約投稿をして一日に何回も投稿をしたい、せっかく作った文章を他のところでも二次利用したい、という方も多いのではないでしょうか?

そこでメモ帳などにとっておきたいものですが、困るのはXに文字数制限があることです。

無料プランユーザーは、140文字(半角は280文字)以内で文字を納めなければ投稿が出来ません。(Xプレミアムでは最大25,000文字まで投稿可能)

そんな時に便利なツールが転がっていればいいのにな…と思ってこのサイトで開発したものが「X文字数チェッカー」です。


オールChatGPTで作成しました。

プログラミングの基礎さえ分かっていて、明瞭な指示さえできれば、誰でもツール開発できるようになったので、本当にいい時代ですね。

ツール開発のコツをつかむと、ChatGPTがどんな指示をするという事を聞いてくれるか何となくコツがつかめるようになるで、このブログでは仕組みについてなるべく専門用語を使わずに解説していきたいと思います。

ChatGPTにツール作成をお願いするなら「一回」で作らない

では、今回の「X文字数チェッカー」のようなツールを作るには、ChatGPTにどんなふうに頼めばいいのでしょうか?

まず私は、WordPressの固定ページに張り付けるだけで完了させたかったので、

「テキストエリアに文字を打ち込んだら、文字数を数えてくれるツールをHTMLとCSS、JavaScriptで作ってください」

と、ChatGPTにお願いしました。

テキストエリアは、プログラミングの世界では、「文字を入力する欄」のことを指します。

HTMLは見た目の部分を作るプログラミング言語で、主にHPに使われます。CSSはHTMLで作った見た目をおしゃれにするための装飾のための言語です。

だから、HTMLとCSSはセットと考えていいですね。

JavaScriptはボタンを押した後にやってほしいことを叶えてくれる言語です。

こんなざっくりしたお願いでも、ChatGPTはちゃんとHTMLの構造と、それに合わせたJavaScriptを書いてくれます。

ただ、この時点では 普通の文字数のカウント しかできません。

でも私が本当に作りたかったのは、X(旧Twitter)の文字数ルールに準拠したカウントなんですよね。

Xでは、

  • 半角英数字は0.5文字
  • 全角文字は1文字
  • 改行はカウントされない
  • URLも基本的には半角として扱われる(投稿時に短縮される)

といった特徴があります。

こうした特殊なルールをChatGPTに反映させるためには、
「実際にXで文字を打って確認しながら、ChatGPTに何度も条件を追加していく」必要がありました。


修正のコツ:

思った通りに動かないときは、「実際に入力してみたら●●になったので、こういう条件を追加してほしい」と伝えること。

例えば私は、次のように言いながら修正していきました。

  • 「半角文字は0.5文字としてカウントしてください」
  • 「改行は文字数としてカウントしないでください」
  • 「小数点以下は切り捨てで表示してください」

すると、ChatGPTはすぐにその仕様に合わせたコードを書き直してくれるんです。

こうして何度かやりとりして、自分が本当に欲しい動きをするツールが完成していきます。


ちなみに、このツールの中身はどうなっているの?

「HTML」では、このツールを使う人がテキストを入力するエリア(<textarea>タグ)と、コピー・リセットボタン、そして「現在の文字数:●●」と表示する部分を配置しています。

「CSS」では、Appleっぽくスタイリッシュに見えるように、ボタンや枠の色、角の丸み、フォントの統一感などを調整しています。

そして「JavaScript」が最も大事な部分。

ここで、文字を打ち込むたびにJavaScriptが走って、一文字ずつ種類を確認しながらカウントしてくれているんです。

特に今回は「半角・全角・改行」を見分ける必要があったので、以下のようなルールをプログラムに伝えました。

for (let i = 0; i < value.length; i++) {
  const char = value[i];
  if (char === '\n') {
    continue; // 改行はカウントしない
  }
  count += /[\x00-\x7F]/.test(char) ? 0.5 : 1; // 半角は0.5、全角は1
}

こうしたちょっとした工夫で、Xの仕様に寄せたツールが完成しました。

ツールはこちらから試せます

🔗 https://toraizearc.link/count_t/

Xの予約投稿や、複数アカウントへの投稿、他SNSへの転用などにも使えると思うので、ぜひあなたの投稿効率をアップさせるために役立ててください。

このような「小さなツール」が、日々の発信を助け、結果としてビジネスの安定化や拡大にもつながっていくと感じています。

タイトルとURLをコピーしました