「textlint と Next.js で始める静的サイトの校正支援」という題材で実験サイトを作成した背景、文章チェックのコンセプトについて。
背景
Next.js + CMS の構成で各ページやブログ記事等を作成しているとき、(とくにモバイル環境で)入力中の文章に対して気になることが増えてきました。
- 「パラーメーター」等の表記が統一されているか？
- 空白の使い方も統一されているか？
- スマートフォンから入力していると上記の他に、妙に句読点が増えてしまう傾向にある
- ⇒ いろいろ気になる箇所を機械的にチェックしたい
textlint + テキストエディターは便利だが…
それらについて少し検索してみたところ「textlintとテキストエディターを組み合わせると良い」という記事をよく見かけました。
- CLI 環境で試してみたところ、たしかに良かった(個人の感想です)
- Vim や VSCode 等のプラグイン対応も充実している(textlint をインストールするだけで手元の Vim では linter として認識された)
- HTML もプラグインを使うことで対応可能
- ⇒ しかし CMS 付属のエディターで利用することは難しそう
プレビューモードで動的にチェック
そこで Next.js のプレビューモードでページが動的に生成される時に、コンテンツの HTML 本文を textlint でチェックするようにしました。
サーバー上でチェックさせる利点
上記構成は少々無理やり感がありますが、「プレビューモード＝ページ生成はサーバー上で実行される＝ルールと設定が 1 箇所に集約される」ことから以下のような利点も生まれます。
- 入力を行うデバイス別にチェック用の環境を構築する必要がない
- サイトや記事カテゴリー等の属性に合わせたルールを用意できる
- ⇒ ユーザー側で設定の切り替えを意識せずとも自動的にルールが適用される
