こんにちは、seoです。自分は日本語があまりキレイでは無いので、ブログの文章もちょっと汚かったり回りくどかったりします。できるだけ文章をキレイに見せるため、自分の文章を自分でチェックできる環境を作りたいと思い、 textlintを使った簡単な文章校正チェックツールを作ってみました。

textlintのWeb版開発

textlintとは

日本語にも対応したテキスト文書のlintツールのようなものです。 Markdownにも対応し、辞書次第で色々なチェック、さらにプログラムのチェックまで出来るらしいです。 CLI上で起動させてる人はいますが、Web上で動かしている人がいなさそうなので、今回触ってみました。

導入

今回はtextlintがメインなので、Webサービスを作る言語はtextlintと同じnodejsをチョイス。フレームワークを使うまでも無いですが、一応expressを使いました。

nodejsはインストール済みと言う前提で進めます。

expressの準備

expressのインストール

npmを使ってexpressのグローバルインストールを実行します。以下のコマンドで、expressとexpress-generatorをインストール。

$ npm install express -g
$ npm install express-generator -g

アプリケーションの作成

expressコマンドが使えるようになったら、任意の場所で以下を実行して、アプリケーションを作る。 –view=ejsは、ejsテンプレートの利用を指定しています。 Expressのテンプレートエンジンははpug(旧jade)かejsのどちらかが思い浮かぶのですが、 ejsの方がシンプルなのでejsにしました。

$ express --view=ejs textlint-web

以下が表示されて、textlint-webディレクトリが作られていればOK。

create : textlint-web
create : textlint-web/package.json
create : textlint-web/app.js
create : textlint-web/public
create : textlint-web/routes
create : textlint-web/routes/index.js
create : textlint-web/routes/users.js
create : textlint-web/views
create : textlint-web/views/index.ejs
create : textlint-web/views/error.ejs
create : textlint-web/bin
create : textlint-web/bin/www
create : textlint-web/public/javascripts
create : textlint-web/public/images
create : textlint-web/public/stylesheets
create : textlint-web/public/stylesheets/style.css

install dependencies:
$ cd textlint-web && npm install

run the app:
$ DEBUG=textlint-web:* npm start

文言の通り、以下のコマンドを実行して、localhost:3000にアクセスすると ExpressのTOP画面が立ち上がります。

$ cd textlint-web && npm install
$ DEBUG=textlint-web:* npm start

textlintの準備

textlintのインストール

ここで今回メインのtextlintのインストール textlintもexpress同様npmでインストールする。 textlintはグローバルではなく、先程作ったtextlint-web上で実行します。また、textlintは辞書が必要不可欠で、今回は自分に必要そうな以下の２つの辞書データを入れました。

$ npm install textlint textlint-rule-preset-jtf-style  textlint-rule-preset-ja-technical-writing  --save-dev

これで、textlintと辞書データのインストールが完了です。

画面を作る

画面の構成は以下２画面

TOP画面にテキストボックスと登録ボタンを表示
リザルト画面に文章解析結果を表示

です。

早速、TOP画面と、リザルト画面は以下の様なソースにします。 TOP画面からは、orgtextと言う名前のデータをPOSTするようにします。 HTMLの部分は省略しますが、以下２つのファイルを作成しました。

views/index.ejs
views/result.ejs

textlintの処理部分を作成

textlintの処理を実行する前に、利用する辞書を設定した.textlintrcが必要なので、以下の様に記載をして、アプリのrootに設置します

{
    "rules": {
        "preset-jtf-style": true
    }
}

routes/index.jsを開いて中身に以下のようにしました。

var express = require('express');
var router = express.Router();
var TextLintEngine = require('textlint').TextLintEngine; // textlint require

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'TextLint on Web' });
});

router.post('/result', function(req, res, next) {
    const engine = new TextLintEngine({
        configFile: ".textlintrc"
    });

    engine.executeOnText(req.body.orgtext).then(results => {
        console.log(results[0].messages);
        if (engine.isErrorResults(results)) {
            const output = engine.formatResults(results);
        }
        res.render('result', { results: results[0].messages });
    });
});

module.exports = router;

画面を動かしてみる

localhost:3000にアクセスすると以下の様な画面が出るので、

こんにちは本日は快晴です

と言う文章を入れて、「校正チェック」のボタンを押します。

↓↓↓

出来た！！！こいつをもっとブログをチェックするのに適したツールに改修したいです。

textlintをnodejs/express環境で動作させる