5000164 is here
2013-10-23

空白と改行を削除するツールを作った

作ったもの

空白改行削除 | 5000164 here.

作ったものの概要

半角スペース、全角スペース、タブ、改行を削除します。

作成にいたる経緯

パソコンに何もアプリケーションをインストールしてはいけない環境。

文章を少しだけ修正する作業。

修正した文章は改行と空白を削除しなければならない。

という状況がつらかったから作った。

Webアプリという選択肢

アプリケーションはインストールできないけど、Webアプリならインストール不要。

なのでいい感じにWebで使えるツールを探す。

改行を削除するツールはたくさん見つかったが、使いづらい。

見つけたものは「改行を削除」するだけのツールのみ。

必要な作業は「文章を編集」して「改行を削除」すること。

出来上がってる文章をペーストして、改行を削除して、削除結果をコピーするという前提で作られているので、ちょっとした修正がやりづらい。

だから少しだけ編集もしやすいツールを作った

少しだけ編集しやすくするにあたって重視したことは下記の3つです。

作ってみた Ver.1

というわけで作ってみた。

編集領域はちょっと広め。

なによりも編集部分のフォントサイズと行間の設定を自分好みにした。

自分のために作っただけあって他のツールよりも使いやすい。

でも使ってると編集領域が物足りないと感じた。

フォントサイズは大きめにしてるのでもっと編集領域を広げたい。

そしてもっとエディタ感を出したい。

作ってみた Ver.2

というわけで作ってみた。

とってもエディタエディタさせました。

ウィンドウサイズを変更しても編集領域が追従します。

Pure CSSで実現。

動作対象はもちろんモダンブラウザです。

機能を満たしながらも編集領域は最大限確保できたかなと思います。

とりあえず満足。

ちょっとだけ編集する用なのでTabキーとか使えないです。

あとは行番号の表示とかにも興味あったけど、とりあえずこれで一段落。

改行と空白を削除してる部分の処理内容

JavaScriptで実装しています。

jQueryを使用。

$(function() {
  
  // Ctrl + Enterを押した場合に空白削除処理実行
  $("#input").keydown(function(event) {
    if(event.ctrlKey === true && event.which === 13) {
      spaceDelete();
    }
  });
  
  // ボタンをクリックした場合も空白削除処理実行
  $("#run").click(function() {
    spaceDelete();
  });
  
  // 空白削除処理実行後に内容を全選択する
  $("#result").focus(function() {
    $(this).select();
  });
});
  
// 空白削除処理
function spaceDelete() {
  
  // 入力文字列取得
  var inputText = $("#input").val();
  var resultText = "";
  
  // 空白文字をすべて削除
  resultText = inputText.replace(/\s/g, "");
  
  // 空白文字を削除した文字列を出力
  $("#result").val(resultText);
  
  // 出力内容にフォーカス
  $("#result").focus();
}

処理内容はこれだけです。

正規表現で文字列を置換しています。

正規表現の\sは全角スペースに一致しないと思ったら一致するんですね。

まとめ

Ver.1の製作時間は2時間くらい。

Ver.2の製作時間は5時間くらい。

CSSだけで編集領域をウィンドウに合わせるのに時間がかかった。

自分なりには結構使いやすく作れたので満足です。