ブラウザ上でtextlintをサクッと試せる環境を作ってみた（AWSサービス名のルール編）

こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。

• textlintとかでtypo防止用のしくみがあるのはすごいけど、環境構築とかが少し面倒くさいんだよなぁ
• わざわざVSCode開いたり、textlintのCLIを実行するのが手間だから、さくっとブラウザ上で試せないかな

そんなことを考えたことはありませんか？

たしかにブラウザ上で作業をしていると、わざわざローカルでファイルを開くことが逆に面倒な時ってありますよね。

私は普段Google Chrome（以下Chromeと表記）をブラウザとして利用しているのですが、「textlintを動かす拡張機能があれば良いのに」と思って探していたら、すぐに見つかりました。

その上、偉大なる先人のおかげで前回の記事で公開したbun913/textlint-rule-aws-service-nameについても、ブラウザ上で動かすことができました！

今回はその手順などについて書かせていただきます。

先に結論（どんな感じで動くのか）

拡張機能を導入後、少しの手順で以下のようにtextarea上に記載している文章中のtypoを指摘してくれるようになりました。

画面上に表示されているFix aws-service-name ploblems をクリックすることで、修復もしてくれます。

手順

お試し版（Chrome拡張やスクリプトのインストール不要）

bun913/textlint-rule-aws-service-nameのサイト上部にある入力欄で「ec2」や「cloud front」などと入力して試すことができます！

少し見にくいですが、長い文章を入れることもできます。私が試した限り2,000文字くらいでも問題なく動作しました。

この場合、　installボタンなどの押下は不要です！

Chrome拡張・スクリプトのインストール版

Chromeのストアからtextlint editorをインストールします。

この拡張機能はtextlint/editorで開発されており、「Privacy First」であることを掲げています。

具体的にはサーバーにデータを送らずに、各ユーザーのクライアント環境でリントを動作させるという意味合いのようです。

また、各ルールをブラウザ上で動作させるためにスクリプト（textlint worker script）のインストールが必要となります。

bun913/textlint-rule-aws-service-nameの場合は、以下のサイトにアクセスします。

そしてinstallボタンをクリックします。（install ボタンを押す前に、上記Chrome拡張のインストールをお願いします！）

以下の画面に遷移します。

ここではインストールしようとしているスクリプトの内容やルールの内容が表示されています。

問題なければ再度installボタンをクリックします。

そうすることによって、textarea上で以下のようにルールが稼働していることがわかります。

とはいえ、私が試した限りではすべてのtextareaで動作する訳ではないようです。（そもそも、拡張機能のバージョンが0.12.6ということを念頭に）

なお、再掲となりますが拡張機能やルールをインストールするのに抵抗がある場合は、こちらのサイトで試すことができます！

どうやってこのサイトを作ったのか

手順でも紹介したこちらのサイトについては、bun913/textlint-editor-aws-service-name-exampleのリポジトリから生成しています。

このリポジトリは以下のリポジトリからフォークしたものです。

textlintのルールとして作成したパッケージをブラウザ上でも動かせるようにしくみ化してくれています。

そのためbun913/textlint-rule-aws-service-nameに限らず、さまざまなルールを動かすことができるようです。

たとえば以下のようなルールです。

• azu/textlint-editor-prh-example
• textlint-rule-preset-japanese

非常に簡単にtextlintのルールをブラウザ（拡張機能）で動作させることができましたので、興味のある方はぜひご確認ください！（すべてのtexlintルールを動作させることができる訳ではないようです）

そもそも、私が作成したtextlintルール自体も以下のリポジトリで公開されているテンプレート作成用のCLIを利用させてもらったものであり、OSSと先人のすごさを実感しています。

こちらのおかげで簡単にTypeScriptを使って開発ができ、fs.readFileSyncのようなNode.jsに依存する機能をブラウザで動作させるように工夫されていてとてもおもしろかったです。

詳しく知りたい方は以下の記事をご参照ください。

最後にまとめ

• ブラウザ上でサクッとAWSサービスtypoしているか気になる場合はこちらのサイトで試せます
• Chrome拡張を使うことも可能です！
• ただし、ガッツリ文章を書きたい場合textlintの環境を作成した方が良いと思います！
  • 参考： 文章校正を行うためのtextlint入門 - ICS MEDIA

この記事がどなたかの時間を1秒でも削減できればうれしいです！

以上、今泉でした。