ブラウザで使える文字変換ツールを作ってみました（大文字小文字、半角全角、URL、HTML、Base64など）

　何の変哲もない日常を送っていると、ふとした拍子にとある文字列を URL エンコードしなくてはいけなくなったり、はたまた逆にデコードする必要に迫られたりすることが、稀に良くあるのではないかと思います。

　そのような状況に陥った時、これまでは自作の C# アプリのおまけ機能を使って急場を凌いでいたのですが、もう随分前に作ったこともあり、最新の環境にはそぐわなくなっていたので、「そろそろ作り直さないとなぁ。めんどくさいなぁ」みたいに薄らぼんやりと考えていたところ――

「あれ？ こんなの、HTML で作っちゃった方が楽じゃね？」

　ハタと、そんな風に思い至りまして、早速こうして作ってみたという次第です。

　ついでなので、良く使いそうな各種の文字列変換処理――例えば、大文字⇔小文字変換、全角半角ひらがなカタカナ変換、それから HTML やら Base64 のエンコード・デコードなども実装してみました。

　果たして、自分以外の役に立つのか良く分かりませんが、せっかく HTML で書いたことですし、いちおう置いておきます。

読み込み中です。少々お待ち下さい

文字列変換ツール

　なにかしら名前でもつけようかと思ったのですが、命名という行為が大変に苦手なので、特に思い付きませんでした。

　ぐだぐだ説明するより、直接そのものを貼り付けた方が話が早いですよね。

　次回から、この記事本文をいちいち開きたくない場合は、こちらをどうぞ。

使い方

• 変換したい文字列を貼り付けて、行いたい変換のボタンを押すだけのお手軽ツールです
• 「英数カナ」「URL」「HTML」「正規表現」でなんとなくグループ分けしてありますので、適宜切り替えてご利用ください
• テキスト入力領域の左右、および「Ctrl+z」「Ctrl+y（Ctrl+Shift+z）」で UNDO、REDO が行えます（履歴は最大 で10 個。Mac の場合、Ctrl を Option に置き換え可能です）

　比較的最近の環境であれば、ほとんどの場合で動くのではないかと思います。

　いちおう、PC では Chrome、Safari、Firefox、Opera、ie、Edge の各最新版、iOS は 8、9 辺り、Android は手持ちの端末が全てぶっ壊れたのでシミュレーターの 4.4 辺りで軽く動作を確認しました（Android 2.x 系は対象外となりました）。

　ツールの本体は、外部 JavaScript ライブラリを一切使用していない 1 枚こっきりの HTML です。jQuery すら使ってないです。最近の Web ブラウザの JS & CSS 対応状況なら、この程度の実装にいちいち外部ライブラリなんて必要ないんですよ！（怒られそう）

　ちなみに、2016/01/12 でサポート終了の ie 10 以前はサポートしません（参考）。

　一部で議論されている、古いブラウザのサポートはユーザーの為にならないとする主張には、耳を傾ける価値があるのではないかと思います（と、乗っかっておきます）。

　様々なセキュリティリスクに取り囲まれているといっても過言ではない昨今ですから、アプリや OS は、可能な限り最新のものを使うように心掛けましょう（説教臭くてすみません）。

こんなの、いつ使うのさ

　例えば、Wikipedia の記事を開いた時に、ブラウザのアドレス欄では日本語で表示されていたのに、コピーしてメモ帳とかに貼り付けてみたら、こんな風に良く分からん文字列に変換されしまった経験は無いでしょうか。

　もしくは、Google の検索結果の URL をコピーした時など、似たような文字列をどこかしらで目にした経験は、誰しもあるのではないかと思います。

　上のツールを使えば、このように矢鱈とパーセントが存在を主張しまくった文字列を日本語に戻したり、戻さなかったりできる訳ですね。

（ ↑ をツールにコピペして、「URL」グループの「decodeURIComponent」をクリックすると、私がいったい何をほざいておるのかご理解いただけます）

　そう、もうお気づきかと思いますが、HTTP サーバーに送るパラメータを自分で直接書く時に、使えたりもする訳ですよ。やりましたね！

　え、普通の人間はそんなことしない、ですって？

　あなた、そんなバカな、ハハハ。

　......え？

　いやその、もう少し一般向けという訳でもないのですが、しばしば自分で使いたくなることがありますので、「半角カナ変換」みたいなものも、セットで用意してみました。

　それをデフォルトに持ってくる辺りに、日和っている様子がありありと伺えますね。

　また、小手先で実装が可能な文字参照や Base64 も、ついでに対応しておきました。

　とはいえ、なにしろ入力も出力もテキストですので、バイナリを扱える訳じゃありませんから、Base64 なんてまるで無意味ですけどね。ハハハ。

　なに笑とんねん。メール......そ、そう、Base64 でエンコードされた日本語サブジェクトのデコードとかに使えるかも分からんやろがい！

　UTF-8 しか対応していないので、使えませんけど。

　そ、そんな......（ガクリ）

　なに、この茶番。

（少し補足すると、日本語 E メールの文字コードは、ほとんどの場合 ISO-2022-JP なので、上のツールで単純に Base64 デコードしても文字化けしてしまうということです。ボケが分かり難くて、すみません。
ちなみに、文字コード変換は、またちょっと趣旨が異なるので、当ツールでは扱いません）

　そして、さらに。

「こんな変換がしたい」「これはできないの？」

　そんなお声に「セルフ」でご対応いただけるように、めんどくさいから予め正規表現も付けておきました。

　用意されている機能なんかじゃ満足できねぇぜ、というアンサティスファクションなお方には、自ら正規表現を書いてご対処いただけます。大勝利ですね。

猪口才な機能の詳細

　特に何も見なくても使えるように作ったつもりですが、気になる人がいるかもしれない部分について、少し詳しい説明もいちおう書いておきます。

• このツールは単純な静的 HTML です。全ての処理はクライアント側だけで処理され、入力したテキストがサーバーに送られたりはしませんので、安心してご利用ください。
• 前回選択していたグループと正規表現を Cookie に保存していますが、次回開いた時にクライアント側で利用するだけのユーザー設定ファイルライクな使い方しかしていません。サーバー側では、一切参照しません。
  リリースから２日以降は、設定の保存は Web Storage（localStorage）を使うように変更しました。これで、目出度くローカルで完結です。最初っからそうしとけって話ですね。うっかりしてました、すみません。
• テキストの長さは特に制限していませんので、度を越して長大なテキストを貼り付けないように注意してください（最大で 10 件の履歴分も考慮してください）。あまりにデータが大きいと、Web ブラウザがハングする恐れがあります。
• 変換対象のテキストを部分選択することにより、一部だけ変換することが可能です（あんまり使い途は無さそうですが......）
• 「半角英数」は、英数記号のみを半角化します（日本語は半角化しません）
• それぞれ微妙に結果が異なるので、「URL」グループでは３つの JavaScript function を無駄に全て実行できるようにしてみました。ただし、文字コードは UTF-8 にしか対応していません（昨今の環境ならば、ほとんどの場合で問題無いとは思いますが）。
• 「HTML」グループの「HTMLエンコード・デコード」とは、要するに（文字）実体参照のことです。こちらについても、無駄に色々と対応しておきましたので、Wikipedia に載ってるくらいの文字であれば、ほぼ変換できるのではないかと思います（全てとは言ってない）。
• 「数値文字参照」は、番号で文字を指定する例のアレです。分かる人しか使わないと思うので、特に説明は要りませんよね（なげやり）
• 「正規表現」でのエスケープは、バックスラッシュで行ってください（但し、日本語 Windows の場合は円マークで構いません）。
• 置換文字列でも、改行とタブ文字程度は「\n\t」のように指定可能にしておきました。ので、例えばパターンに「\n」、置換文字列に「\n\t」と入力して「置換実行」を押せば、行頭に一括してタブを挿入できます（一行目以外）。
• 正規表現の書き方について、MDN の RegExp にヘルプリンクを張っておきましたので、よろしければご利用ください。

おわりに

　説明を書く方が面倒臭かったです。