学生時代に作った文章校正アプリを紹介!

スポンサーリンク

f:id:tkhstol-929:20181001232519p:plain みなさんどうもこんにちは、サーロインです。

いつも雑記ブログのような記事ばかりなので、今回はSE(システムエンジニア)らしく技術系記事を書きます。 タイトル通り、学生時代に作った文章校正アプリを紹介したいと思います。

Githubリンク

こちらがGithubリポジトリです。ソースはここに全て公開しています。

github.com


アプリ概要

アプリ名は「ProofreadingTool」です。
以下、READMEより引用です。

ProofreadingTool

「proofreading:文章校正」という意味です

機能1:全角英数文字を半角英数文字に変換する
→ 例:”ABCDE”は”ABCDE”と処理されます。

機能2:全角文字と半角文字の間に半角スペースを挿入する
→ 例:「数字の1は英語でoneといいます」という文章は「数字の 1 は英語で one といいます」と処理されます。


<使い方>
1.index.html, style.css, main.jsを同じディレクトリ内にDLする
2.任意のブラウザでindex.htmlを開く
3.左側のテキストボックスにスペース挿入前の文章を入力
4.実行ボタンを押す
5.右側のテキストボックスに結果テキストが表示される

f:id:tkhstol-929:20181001231543g:plain
スマホだとすこしGIFが見づらいかもしれません。PCで御覧くださいm( )m

作った経緯

このアプリを作ったのは大学4回生のときです。
私は理系だったので当時は研究室に配属されて卒論を執筆していました。

4回生の秋〜冬にかけて毎日毎日卒論を書いては教授に添削してもらっていたのですが、そのときよく教授からこんな指摘を受けていました。

「文中に英単語(半角英数)もしくは半角数字がでてきたら両端に半角スペースを入れてね」

前項のREADMEでも例に挙げましたが、たとえば「数字の1は英語でoneといいます」という文章は「数字の 1 は英語で one といいます」といった具合に"1"と"one"の両端に半角スペースを挿入しないといけないのです。

世の中の大半の人は普段文章を書く時はこんなこと意識しないと思いますが、理系の学術論文界隈ではこのルールは当たり前だそうです。たしかに半角スペースがあったほうがなんとなく見やすい気がします。

しかしこれ、めんどくさいんですよ(笑)

最初はひとつひとつ肉眼でチェックしていたのですが、卒論の分量が増えるにつれてチェックの手間も増えてきます。

チェックの面倒さが自分の中でMAXになったとき「そうだ、半角スペース挿入を自動化しよう」と考え、卒論そっちのけで作ったのがこのアプリです(笑)
あとついでに全角文字を半角文字に変換する機能もおまけでつけました。(コピペですが(笑))

ソース

index.html

<h2>文章校正ツール</h2>
<p>機能1:全角英数字を半角英数字に変換</p>
<p>機能2:全角文字列の中に含まれる半角文字の両端に,半角スペースを挿入する<br><br>
  &nbsp&nbsp&nbsp&nbsp例:「りんごは英語でAPPLEです」→「りんごは英語で APPLE です」<br>
  &nbsp&nbsp&nbsp&nbsp※"APPLE"の両端に半角スペースが挿入されている</p>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文章校正ツール</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <table>
      <tr>
        <td><textarea id="text1" placeholder="ここにテキストを入力してください" rows="30" cols="80"></textarea></td>
        <td> >>>>>>>>> </td>
        <td><textarea id="text2" placeholder="結果が表示されます" rows="30" cols="80"></textarea></td>
      </tr>
    </table>
    <button id="btn">実行!</button>
    <script src="main.js"></script>
  </body>
</html>


style.css

body {
  font-family: sans-serif;
}

h2 {
  text-align: center;
  font-size: 50px;
}
textarea {
  border-radius: 5px;
}

#btn {
  width: 120px;
  height: 60px;
  border-radius: 5px;
  text-align: center;
  font-size: 25px;
}

p {
  font-size: 15px;
}

img {
  width: 80px;
  height: 80px;
  padding-left: 90px;
}


main.js

/*
<半角スぺースを入れないパターン>
全角カンマ(ピリオド)+半角文字
"「" + "半角文字" + "」"
*/
(function () {
  'use strict';

  // 全角・半角チェック
  function isZenkaku(obj){
    var len=escape(obj).length;
    if(len>=4 || escape(obj) == '%0A'){
      // 全角の場合
      return true;
    }else{
      // 半角の場合
      return false;
    }
  }

  // str の idx 文字目の次に val を挿入
  function insertValue(str, idx){
    return str.slice(0, idx) + ' ' + str.slice(idx);
  };

  document.getElementById('btn').addEventListener('click', function(){
    // 入力されたテキスト
    var text = document.getElementById('text1').value;
    // 半角スペースを入れるインデックスを保持
    var spacenum = [];
    var j = 0;

    // 全角→半角へ変換
    text = text.replace(/[A-Za-z0-9]/g, function (s) {
        return String.fromCharCode(s.charCodeAt(0) - 65248);
    });

    for (var i = 0; i < text.length; i++) {
      if (text[i] == '{' || text[i] == '\n' || text[i] == '.' || text[i] == ',' || text[i] == '「' || text[i] == '」' || text[i] == ' ' ) {
        continue;
      }else if ((isZenkaku(text[i]) == true && isZenkaku(text[i + 1]) == false )
      || (isZenkaku(text[i]) == false && isZenkaku(text[i + 1]) == true )) {
        // ”全角+半角” or ”半角+全角”のとき
        if (text[i + 1] == '}' || text[i + 1] == '」' || text[i + 1] == ' ' || text[i+1] == '.'){continue;}
        spacenum[j] = i+1;
        j++;
      }
    }
    var k = 0;
    for (var i = 0; i < spacenum.length; i++) {
      // 半角スペース挿入
      text = insertValue(text, spacenum[i] + k);
      // 半角スペースを入れた分インデックスがずれる
      k++;
    }
    document.getElementById('text2').value = text; //text2に出力
  });


})();


jsのコードに関してはコチラで詳しく解説しています!

www.sirloin-nagurigaki.net

しかしまあ我ながらクソコードですね。
学生時代に卒論に追われながら作ったので仕方ない、という言い訳だけさせてください。
いずれコード整理しようと思います。
それでは。


みなさまのワンクリックがブログ執筆のモチベーションになります!ぜひクリックお願いいたしますm(_ _)m
にほんブログ村 IT技術ブログへ
にほんブログ村

にほんブログ村 IT技術ブログへ
にほんブログ村