Twitterの下書きをするためのWebアプリ「Tweet Pad」をリリースしました。

このエントリーをはてなブックマークに追加


11/7にTwitterの仕様が変更されて、半角文字が0.5文字扱いとなったのですが、同時に残り文字数が表示されなくなり、あとどれだけ書けるのか分かりづらくなりました。
そこで、残り文字数を確認しながら下書きできるWebアプリ「Tweet Pad」を公開しました。名一杯まで推敲しながらツイートを書きたい方は、ぜひ活用してみてください。

Twitterの仕様変更とUI/UXへの影響

今回のTwitterの仕様変更では、日本語・中国語・韓国語以外の言語で制限文字数が280文字に拡大されました。

日本語でのMAX文字数は今までと変わらず140文字のままなのですが、半角英数字および記号はその影響を受けて1文字当たり0.5文字換算となるので、実質的にツイートできる文字数が増える形になります。

一度にたくさんの文章を投稿できるようになったのはいいのですが、なぜかツイート作成時の画面UIも変更されて、残り文字数が表示されなくなってしまったのです。

ツイート投稿時に残り文字数が表示されなくなり、円グラフの量だけで表現するUIに変更されました。

私は最初、Twitterの一時的な不具合だと思ってしばらく様子を見ていたのですが、最大文字数まで近づくとカウント表示が出るようになるので、これが正しい挙動なのだと気付きました。

半角=0.5文字換算になったため、小数点以下の繰り上げ/切り捨ての処理を投稿完了まで保留しているのか、実際の理由は分かりませんが、残り10文字になるまでは、「グラフの量を見て大体で判断してね」という仕様なのでしょう。

ツイート文字数を知ることの重要性

私は普段、ライブやイベントのレポートなどで、140文字ギリギリまでのツイートをすることが多いため、正確な残り文字数が把握できない今回のTwitterのUI変更には直感的に馴染めませんでした。

何も躍起になって最大文字数まで詰め込もうとしているわけではないのですが、長文のレポートなどを複数のツイートに分けて投稿する場合、文章をキリのいい単位で区切るのは、重要なポイントではないでしょうか?

残り10文字になると、ようやくカウンターが表示されますが、これだとじっくり推敲しながら考えるのは難しいのでは・・?

また、どちらかというとTwitterを使ってプロモーションを行っているプロ向けのニーズだと思うのですが、URLやハッシュタグなどを含めた場合に、あとどれだけ文章が書けるのかを知ることは、死活問題だと思うのです。

私自身は、今までTextwellwi.peなどのアプリを使って文字数をカウントしながら下書きをしていたのですが、『半角=0.5文字』という仕様には対応していないため、これらのツールに頼ることもできません。

そこで、ほんの思いつきではあったのですが、ほぼ自分のためにツイート数をカウントできるアプリを作ることにしたのです。

Tweet Padの使い方

Tweet Pad」の使い方はとっても簡単。Twitterに投稿する前に、Tweet Padを開いてフォームの中に文章を入力すると、画面の上にカウント数字がリアルタイムで表示され、Twitterにあと何文字投稿できるかが分かるのです。

140文字に収まるように、心ゆくまで下書きができたら、その下にある「Tweet」ボタンをクリックしてください。そのままTwitterの画面が開いて投稿することができます。

Tweet Pad」を使うと全角=1文字、半角=0.5文字換算で、ほぼ正確な残りツイート文字数を知ることができます。

その場でTwitterに投稿せずに、アプリのメモ帳やクラウドサービスなどに保存したい場合は、「Copy」ボタンをクリックしてください。入力された文章がクリップボードにコピーされるので、他のアプリなどにペーストすることができます。

イチから文章を書き直したい場合は、「Clear」ボタンをクリックしてください。入力された文章が消えて、また140文字からやり直すことができます。

また、本文中にURLが含まれていた場合は、23/2=11.5文字分として自動的にカウントされます。これは投稿時にTwitterの短縮URL(https://t.co/xxxxxxxxxx)に変換される仕様に対応したもので、これによって正確に残り文字数が把握できるのです。

URLを入力すると、自動的に11.5文字分として再計算するなど、Twitterの仕様をシュミレートした機能も実装されています。

手軽に作れるWebアプリの魅力

Tweet Pad」は、「Livelog」アルファ版と同じくJavaScriptとHTML/CSSだけでシンプルに構築されています。今回はWebアプリとして最低限の見栄えも整えたかったので、Bootstrap 4でスタイリングを行い、羽野めぐみさんが公開しているfeathericonというアイコンフォントを使用させていただきました。

スタイリッシュでオリジナリティの高いアイコンフォントが利用できる「feathericon

また、公開に当たってサーバやドメインの設定なども特に行わず、GitHub pagesを利用しているので、GitHubリポジトリにプッシュするだけで作業が完結しています。JavaScriptの知識があるだけで、サクッとアプリを作って公開できてしまうのだから、ほんとに便利な時代になりましたね・・。

今回は急遽の思いつきでリリースしたプロジェクトだったのですが、せっかくJavaScriptの知識を身に付けたので、今後も自分が便利で使いたいと思うツールをどんどんアプリ化して公開していきたいと思います。

ライブ情報をメモする「Livelog」の方も、Monacaでスマートフォン・アプリ版の開発を進めているところなので、使ってみたい方はぜひ楽しみにお待ちください。

関連リンク