【textlint】textlint editorを使ってブラウザで文章校正をする

## はじめに
　本記事は、プログラミング初学者が学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

### `textlint editor`を使ってブラウザで文章校正をする


### `textlint editor`をchromeに追加する

以下から`textlint editor`を「chromeに追加」します。

https://chrome.google.com/webstore/detail/textlint-editor/gfhlfpnpjokocfohicmfbgjneiipfeil

### ワーカースクリプトをインストールする
`textlint editor`はchromeに追加しただけでは使用できません。
使用できるようにするためには、ワーカースクリプトをインストールします。
README.mdでは以下のワーカースクリプトが例示されています。
それぞれ、文章校正のルールが異なりますのでご確認ください。

https://github.com/textlint/editor

ワーカースクリプト1：https://azu.github.io/textlintrc/
GitHub：https://github.com/azu/textlintrc

ワーカースクリプト2：https://textlint-ja.github.io/textlint-rule-preset-Japanese/
GitHub：https://github.com/textlint-ja/textlint-rule-preset-japanese

ワーカースクリプト3：https://textlint-ja.github.io/textlint-rule-preset-ja-technical-writing/
GitHub：https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing


ワーカースクリプトのURLにアクセスすると以下のような画面が表示されます。
上方の「input your text」の欄にテキストを入力すると文章校正を試すことができます。

![スクリーンショット 2022-04-11 4.21.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/454d99c1-ce68-be4e-4f3c-3b1845352809.png)

ワーカースクリプトのインストールは以下の手順で行います。
まず、下画像赤枠の「install」をクリックします。
![スクリーンショット 2022-04-11 4.21.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/2f774735-20e9-e341-3078-af7564ecffc7.png)

表示された画面で再度「install」をクリックします。
![スクリーンショット 2022-04-11 4.26.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/0c44f265-1f65-0458-8a30-d7eb4993ddea.png)

`textlint editor`のアイコンをクリックして以下のようにワーカースクリプトが表示されればインストール完了です。

![スクリーンショット 2022-04-11 4.32.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/d3c5134b-e403-1d05-7a02-cc1c5fb650b6.png)


### 文章校正のルールをカスタマイズする
上記の手順で既に文章校正ができる状態になっています。
しかし、`textlint-rule-preset-ja-technical-writing`では、一文の字数制限のデフォルト値が100文字となっています。
これを60文字に変更します。
ルールのみを変更するのであれば上画像の「Edit」から変更できるようですが、編集が非常にしづらいです。
また、プラグインの追加もできません。
そのため、今回はテンプレートを使用して自分好みに設定したいとおもいます。

まず、以下のURLにアクセスします。

https://github.com/textlint/editor-script-template

表示されたページの「Use this template」をクリックしてリポジトリを作成します。

![スクリーンショット 2022-04-11 5.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/34a5e8ad-7dca-cc7d-6beb-b060008d072d.png)

作成が完了したら以下の画面でGitHub Pagesの設定をします。
この作業は自分で設定したものを「ワーカースクリプトをインストールする」と同じ手順でインストールするために必要です。

![スクリーンショット 2022-04-11 5.06.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/1f9eebf7-d4d9-c7f5-2520-b9b97b081671.png)

次に、リポジトリをクローンしてローカルで編集できるようにします。

```:ターミナル
$ git clone git@github.com:<owner name>/<your-repo-name>.git
$ cd <your-repo-name>
$ npm install
```

上記ができたら、必要なルールプリセット等をインストールします。
ルールプリセット等の選定は以下を参考にしてください。

https://github.com/textlint/textlint/wiki/Collection-of-textlint-rule

今回は以下のコマンドを実行します。

```:ターミナル
$ npm install textlint-rule-preset-ja-technical-writing
```
コマンド実行後、textlintの設定ファイルである`.textllint.json`を編集します。

```.textllint.json
{
  "filters": {
    "comments": true
  },
  "rules": {
    "preset-ja-technical-writing": {
      "sentence-length": {
        "max": 60
      }
    }
  },
  "plugins": {
    "@textlint/text": true,
    "@textlint/markdown": true
  }
}
```
編集後、Gitに`push`します。
```:ターミナル
$ git add -A
$ git commit -m "コメント"
$ git push origin main
```

pushするとCIが走ってデプロイされます。
GitHub　Pagesの設定画面に記載せれているURLにアクセスします。

![スクリーンショット 2022-04-11 5.55.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/d2560eaf-b67c-832c-eaee-4603d5edc38b.png)


「ワーカースクリプトをインストールする」の手順でインストールすれば使用できるようになります。