Webサイトの HTML を textlint でチェックする

Web サイト上の HTML 文書を Redpen なり、textlint でチェックできないか調べていたところ、textlint が html の文章チェックに対応しているので、実際に確認してみた結果を記載します。

HTML 文書をチェックしたい動機
textlint と textlint-plugin-html のインストール
ルールセットのインストール
HTML のチェック実行
TODO 事項

HTML 文書をチェックしたい動機

Static Site Genelator を使って生成している HTML では問題にならないかもしれません。
CMS を使っていたり更にもっと原始的に HTML を直接作っている場合、文章作成者と、HTML の作成者が異なり、形式変換していく際に誤りが混入する場合があります。変換しながらチェックするということもできますが、使っているエディタが文章 Lint に対応していなかったりすると、チェックされることもなく、Production 環境にリリースされる可能性があります。

開発環境での適用後、Production 環境でのリリース後に、サーバから配信される HTML に対して最終チェックの意味で Lint をかけたい。
原始的な環境、モダンな環境でも、最終的には HTML になるので開発環境には左右されずチェックができる。

以上 2つが HTML 文書をチェックしたい動機になります。

textlint と textlint-plugin-html のインストール

textlint 本体と、HTML parser plugin の textlint-plugin-html をインストールします。

textlint のインストール
```
npm install -g textlint
```
GitHub - textlint/textlint-plugin-html: HTML support for textlint のインストール
```
npm install -g textlint-plugin-html
```

これで、HTML を解析できるようになったので、textlint で標準入力から HTML に対してチェックを実施します。

stdin オプション指定して curl で取得した HTML をチェックする

curl https://www.monotalk.xyz | textlint --stdin
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 79127  100 79127    0     0   187k      0 --:--:-- --:--:-- --:--:--  188k

== Not have rules, textlint do not anything ==
=> How to set rule?
See https://github.com/textlint/textlint/blob/master/docs/configuring.md

ルールセットのインストールを行っていないため、ルール定義がない旨のメッセージが表示されました。
以下、ルール定義のインストールを実施していきます。

ルールセットのインストール

チェックしたい文章のイメージ

チェックしたい文章のイメージを記載します。チェックしたい文章は、技術文書ではなく、プレスリリース、オウンドメディア上の文章です。
個人のブログよりはしっかりした文章で書かれていて、技術文書ほど、文書構成が縛られていないイメージが個人的にはあります。
このイメージを踏まえて、Collection of textlint rule · textlint/textlint Wiki から使用するルールを抜粋します。

使用するルール

2017/11/12 段階のCollection of textlint rule · textlint/textlint Wiki の記載を元に使用するルールを検討します。
以下、オレオレで使用するルール、しないルールを決めた結果を記載します。¹、²

ルール名	Notes
textlint-rule-no-todo	TODO 記載はが存在するかチェックするルール
textlint-rule-no-start-duplicated-conjunction	連続した否定があるかをチェックするルール
textlint-rule-max-number-of-lines	長すぎる文をチェックするルール。デフォルト300文字
textlint-rule-max-comma	一文に登場するカンマの数に対するチェック
textlint-rule-no-exclamation-question-mark	`?,!,？,！`の使用可否に関するルール
textlint-rule-ng-word	NGワードをチェックするルール
textlint-rule-no-dead-link	デッドリンクチェック。これは放置している HTML 文書チェックに使えるかと思います
textlint-rule-no-empty-section	空の節をチェックするルール
textlint-rule-date-weekday-mismatch	日付表示の間違いをチェックするルール
textlint-rule-terminology	表示揺れをチェックするルール
textlint-rule-no-nfd	PDFなどから、文章をコピーすると発生する変な濁点をチェックするルール
textlint-rule-no-surrogate-pair	Unicodeのサロゲートペアの文字が使われているかチェックするルール
textlint-rule-max-ten	一文に利用できる、の数をチェックするルール
textlint-rule-max-kanji-continuous-len	漢字が連続できる最大文字数を制限するルール
textlint-rule-web-plus-db	WEB+DB PRESS用語統一ルール
textlint-rule-no-doubled-joshi	文中に同じ助詞が複数出てくるのをチェックするルール
textlint-rule-no-double-negative-ja	二重否定をチェックするルール
textlint-rule-no-hankaku-kana	半角カタカナの使用を禁止するルール
textlint-rule-ja-no-redundant-expression	冗長な表現を禁止するルール
textlint-rule-ja-no-abusage	よくある日本語の誤用をチェックするルール
textlint-rule-no-mixed-zenkaku-and-hankaku-alphabet	全角と半角アルファベットを混在をチェックするルール
textlint-rule-sentence-length	センテンスの文字数をチェックするルール
textlint-rule-first-sentence-length	セクションの最初のセンテンスの文字数をチェックするルール
textlint-rule-no-dropping-the-ra	ら抜き言葉か使われてないかをチェックするルール
textlint-rule-no-doubled-conjunctive-particle-ga	逆接の接続助詞「が」をチェックすルール
textlint-rule-no-doubled-conjunction	同じ接続詞が連続して出現していないかどうかをチェックするルール
textlint-rule-ja-no-mixed-period	文末の句点記号(。)の統一と抜けをチェックするtextlintルール
textlint-rule-max-appearence-count-of-words	段落内の単語の出現回数をチェックするルール
textlint-rule-max-length-of-title	タイトルの文字数をチェックするルール
textlint-rule-incremental-headers	見出しのレベルが適切かチェックするルール
textlint-rule-ja-hiragana-keishikimeishi	漢字よりもひらがなで表記したほうが読みやすい形式名詞を指摘するルール
textlint-rule-ja-hiragana-fukushi	漢字よりもひらがなで表記したほうが読みやすい副詞を指摘するルール
textlint-rule-ja-hiragana-hojodoushi	漢字よりもひらがなで表記したほうが読みやすい補助動詞するルール
textlint-rule-ja-unnatural-alphabet	IMEの入力ミスによるtypoなど不自然なアルファベットを指摘ルール
@textlint-ja/textlint-rule-no-insert-dropping-sa	サ抜き、サ入れ表現の誤用を指摘。適用するルール
textlint-rule-prefer-tari-tari	例示・並列・対表現の「〜たり〜たりする」をチェックするルール

ルールのインストールする

ルールを一律グローバルインストールします。³
以下実行したコマンドになります。

npm インストール

#!/bin/sh
npm install -g textlint-rule-no-todo
npm install -g textlint-rule-no-start-duplicated-conjunction
npm install -g textlint-rule-max-number-of-lines
npm install -g textlint-rule-max-comma
npm install -g textlint-rule-no-exclamation-question-mark
npm install -g textlint-rule-ng-word
npm install -g textlint-rule-no-dead-link
npm install -g textlint-rule-no-empty-section
npm install -g textlint-rule-date-weekday-mismatch
npm install -g textlint-rule-terminology
npm install -g textlint-rule-no-nfd
npm install -g textlint-rule-no-surrogate-pair
npm install -g textlint-rule-max-ten
npm install -g textlint-rule-max-kanji-continuous-len
npm install -g textlint-rule-web-plus-db
npm install -g textlint-rule-no-doubled-joshi
npm install -g textlint-rule-no-double-negative-ja
npm install -g textlint-rule-no-hankaku-kana
npm install -g textlint-rule-ja-no-redundant-expression
npm install -g textlint-rule-ja-no-abusage
npm install -g textlint-rule-no-mixed-zenkaku-and-hankaku-alphabet
npm install -g textlint-rule-sentence-length
npm install -g textlint-rule-first-sentence-length
npm install -g textlint-rule-no-dropping-the-ra
npm install -g textlint-rule-no-doubled-conjunctive-particle-ga
npm install -g textlint-rule-no-doubled-conjunction
npm install -g textlint-rule-ja-no-mixed-period
npm install -g textlint-rule-max-appearence-count-of-words
npm install -g textlint-rule-max-length-of-title
npm install -g textlint-rule-incremental-headers
npm install -g textlint-rule-ja-hiragana-keishikimeishi
npm install -g textlint-rule-ja-hiragana-fukushi
npm install -g textlint-rule-ja-hiragana-hojodoushi
npm install -g textlint-rule-ja-unnatural-alphabet
npm install -g @textlint-ja/textlint-rule-no-insert-dropping-sa
npm install -g textlint-rule-prefer-tari-tari

HTML のチェック実行

チェック時にあったほうがよいライブラリのインストール

実際のHTML は圧縮されている場合があるため、チェック前に整形して、エラーメッセージの対象行をわかりやすくするため、ライブラリをインストールします。

html-cli のインストール
HTML を整形する html-cli をインストールします。
```
npm install -g html-cli
```

`.textlintrc` ファイルの作成

インストールしたルールを適用するため、以下、.textlintrcファイルを作成しました。
ルールプロパティには Example として記載されていた値を記載しています。

{
    "plugins": [
    "html"
    ],
    "rules": {
        "no-todo": true,
        // html 形式の場合<p>タグが検出されてしまうので、コメントアウトしておく
        //"no-start-duplicated-conjunction": {
        //    "interval" : 2 // interval of sentences
        //},
        "max-number-of-lines": {
            "max" : 300 
        },
        "max-comma": {
            "max" : 3
        },
        // エクスクラメーションマークに対するチェック
        "no-exclamation-question-mark": true,
        // デッドリンクチェック
        "no-dead-link": {
             "checkRelative": false,
             "baseURI": null,
             "ignore": []
        },
        "no-empty-section": true,
        "date-weekday-mismatch": {
            "lang": "ja"
        },
        "terminology": {
            // Load default terms (see terms.json in the repository)
            "defaultTerms": true,
            // Syntax elements to skip. Overrides the default
            "skip": ["Blockquote"],
            // List of terms
            "terms": [
            // Exact spelling including the case
            "JavaScript",
            "ESLint",
            "Sass",
            "Less",
            "npm",
            // RegExp (case-insensitive) → replacement
            ["front[- ]end(\\w*)", "frontend$1"],
            ["back[- ]end(\\w*)", "backend$1"],
            ["web[- ]?site(s?)", "site$1"],
            ["hot[- ]key", "hotkey"],
            ["repo\\b", "repository"],
            ["CLI tool(s?)", "command line tool$1"],
            ["build system(s?)", "build tool$1"],
            ["id['’]?s", "IDs"],
            ["(\\w+[^.?!]\\)? )webpack", "$1webpack"],
            ["(\\w+[^.?!]\\)? )internet", "$internet"]
            ],
            // // OR load terms from a file
            // "terms": "~/terms.json",
            // // OR load terms from npm
            // "terms": "@johnsmith/terms"
        },
        "no-nfd": true,
        "no-surrogate-pair": true,
        "max-ten": {
            "max" : 3
        },
        "max-kanji-continuous-len": {
            // 連続できる漢字の文字数
            // Allow max continuous length of kanji
            // If {current} > max(5), report Error.
            max: 5,
            // "倍精度浮動小数点数"という単語は例外として無視します
            allow: ["倍精度浮動小数点数"]
        },
        "web-plus-db": true,
        "no-doubled-joshi": {
            "min_interval" : 1,
            "strict": false,
            "allow": []
        },
        "no-double-negative-ja": true,
        "no-hankaku-kana": true,
        "ja-no-redundant-expression": true,
        "no-mixed-zenkaku-and-hankaku-alphabet": true,
        "sentence-length": true,
        "no-dropping-the-ra": true,
        "no-doubled-conjunctive-particle-ga": true,
        "ja-no-mixed-period": true,
        "textlint-rule-max-appearence-count-of-words": {
            "limit": 5
        },
        "textlint-rule-max-length-of-title": {
            "#": 25,
            "##": 30
        },
        "incremental-headers": true,
        "ja-hiragana-keishikimeishi": true,
        "ja-hiragana-fukushi": true,
        "ja-hiragana-hojodoushi": true,
        "ja-unnatural-alphabet": true,
        "@textlint-ja/textlint-rule-no-insert-dropping-sa": true,
        "prefer-tari-tari": true
    }
}

チェック実行

以下コマンドで、チェックを実行します。
整形した HTML を tee コマンドで、ファイル出力しつつ、textlint の input にします。

curl コマンドで取得した HTML を整形して、保存整形した HTML に textlint のチェックを実行する

curl "https://www.monotalk.xyz/blog/wicket-152-%E3%81%A7css-javascript-%E3%81%AE-reference-%E5%87%BA%E5%8A%9B%E3%82%92%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B/" | html | tee pretty.html | textlint --stdin

OUTPUT

  1393:25    error    Disallow to use "!"                       no-exclamation-question-mark
  1393:43    error    Disallow to use "?"                       no-exclamation-question-mark
  1402:23    error    Disallow to use "!"                       no-exclamation-question-mark
  1402:40    error    Disallow to use "?"                       no-exclamation-question-mark
✖ 1176 problems (1176 errors, 0 warnings)
✓ 539 fixable problems.
Try to run: $ textlint --fix [file]

TODO 事項

自分なりのルール選定と、.textlintrc 作成、チェック実行まで実施できました。
今後は、以下を実施できたらと思います。

使用状況に合わせて辞書追加、ルール設定値のカスタマイズを行う。
HTML 文書チェックをスケジュール実行する

以上です。

For English ルールは一律適用していません。 ↩

install 時に以下、WARN と ERROR が出力されました。
textlint-rule-ja-hiragana-daimeishi と、textlint-rule-hyogai-onkun はインストール自体がうまくいかなかったようなので、除外しました。

npm WARN textlint-rule-no-todo@2.0.0 requires a peer of textlint@>= 5.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN textlint-rule-prh@2.4.1 requires a peer of textlint@>= 5.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN textlint-rule-prh@3.1.3 requires a peer of textlint@>= 5.5.0 but none is installed. You must install peer dependencies yourself.
npm ERR! code E404
npm ERR! 404 Not Found: textlint-rule-ja-hiragana-daimeishi@latest
npm ERR! code E404
npm ERR! 404 Not Found: textlint-rule-hyogai-onkun@latest

↩

ドキュメントでは、グローバルオプションをつけないインストールが推奨されています。 ↩

カテゴリー

JavaScript

HTML 文書 をチェックしたい動機