もくじ

VS Codeでライティング!文章の校正+文字数を表示する拡張機能

ハウツー
ウエのicon
ウエ

こんにちは、ウエさんです。
私はパソコンでブログのライティングをやっているのですが、文字数をカウントしたり、国語も怪しいので自動でテキストを校正したい!ということで、今回は普段コーディングでお世話になっているVisual Studio Codeの拡張機能を使って、文字数カウントと校正をする方法をご紹介します!

今までライティングで使っていたツール

Evernote
OneNote
Notion
テキストを打つだけなら上記のデスクトップアプリを使っていました。
どれもクラウドで保存ができて、webからでも他のデバイスからでも作業ができるため重宝していました。
が、文字数のカウントはされないし、もちろん校正する機能もありません。
とくにNotionはテキスト用というわけでもないので、書いた記事をまとめるには良いのですが、ライティングであればもっとシンプルなもので十分なんですよね。

ライティングする際、私が期待すること

テキストの打ちやすさ
どのデバイスからも使えること
文字数カウント
できれば校正したい
テキストを打つだけであれば、EvernoteやOneNoteで十分なのですが、OneNoteはフォントが見づらいし、見やすいフォントに変更しても、たまにフォントがデフォルトに戻るという仕様で、なんとなくイマイチ。
あと自由にレイアウトできると言うOneNote最大の利点が、テキストしか打たない私には無意味で、横幅が意味なく広いのもムダだなと。
なによりどれも文字数が自動で表示されない!
Evernoteはかろうじて、ノートの情報を見れば文字数は確認できますが、それもちょっと手間です。

文字数を確認する手段

ワードを使う
文字数をカウントしてくれるサービスを利用する
これらを駆使すればどのテキストアプリを使っても、解決します。 それであれば、Evernoteでも十分です。
しかし、校正は?となると、校正をしてくれる外部サービスを利用しなくてはいけません。
さらに面倒!

Visual Studio Codeで文字数カウントと校正ができる!

いろいろ調べた結果、ずっとweb制作で使っていたVisual Studio Code(以下VS Code)に、私が求めていた機能がありました!
ずっとソースコードを書くだけのソフトだと思っていたのですが、拡張機能でライティングしやすい環境を作ることができました。

ライティング用の拡張機能『VSNote』をインストール

VSNote
これはVS Codeで、マークダウン式のメモができる拡張機能です。 私はこれに普段は、制作しているサイトのメモや必要なコマンドなどを書いて保存しています。
フォルダー分けやタグ検索も可能で、シンプルにメモをとりたい場合に非常に便利です。

左メニューのアイコンからファイルにアクセスできる

VS Codeno左メニューに表示されるVSNoteのアイコン
拡張機能をインストールすると、左メニューにメモアイコンが出現します。保存したファイルを探さなくても、そこから簡単にアクセスできるので、非常に便利です!

インストールの方法

拡張機能から検索しインストール
左メニューの拡張機能アイコンから、VS Codeと検索すればすぐに出てきます。そこでインストールができます。

どこからでもアクセスできるよう、メモの保存先をドロップボックスに変更

VSNoteっセットアップ
1.
コマンドパレット(Shift + Ctr(Command) + P、もしくは上部メニューの「表示」からも開けます)を開き、「vsnotes run」と入れると、「VSNotes: Run setup」が出てきますので選択します。
2.
ファイルダイアログが出てきますので、ファイルを保存したい場所を選びます。
この時、保存先をドロップボックスなどクラウドで保存できるサービスのディレクトリを選んでおくと、ドロップボックス経由で共有できるため非常に便利です。

拡張機能の設定からでも保存先の変更は可能

ちなみに拡張機能の設定からでも、ファイルの保存先が変更できます。難しい場合はこちらで変更してみてください。 私はドロップボックスのフォルダに保存しています。
VSNoteの設定
VSNoteのファイルパスの設定

新しいファイルを追加する

ファイルを追加するのは非常に簡単です。
コマンドパレットを開く
コマンドパレットを開き「vsnote」と入力すると「VSNotes: Creat a New Note」と出るので、これを選択します。
そして次に追加したいファイル名を入れると、ファイルが生成されます。ファイル名は日本語でも問題ありません。
【例1】
ファイルの生成
生成されたファイル
入力すると"2021-03-03_07-10_newnote.md"というファイルが生成されます。
※デフォルトでフィル名に年月日時間がつきます。
【例2:フォルダー分けしたい場合】
new/newnote
生成されたファイル名
このように入力するとFilesフォルダーの中にnewフォルダーが生成され、その中に2021-03-03_07-13_newnote.mdができました。

ファイル名の命名規則の変更

ファイル名にはデフォルトで最初に日付が自動で入りますが、変更することも可能です。
An image from Notion
拡張機能の設定のここにある{dt}が日付です。私は後ろに日付がくるように変更していますが、不要な人は削除してしまって問題ありません。
また日付を年月だけにしたい場合は、setting.jsonを開き、日付の箇所を修正する必要があります。

setting.jsonの修正

コマンドパレットを開き「setting」と入力し「Preferences: Open User Settings(json)」を選択します。
ファイルが開き、下記のコードが出てくるので、"format": "yyyy-MM-dd_HH-mm"(年-月-日_時間-分)の部分を変更します。
{ "type": "datetime", "token": "{dt}", "format": "yyyy-MM-dd_HH-mm", "description": "Insert formatted datetime." }
年月日だけにしたい場合は下記のようにしてください。
{ "type": "datetime", "token": "{dt}", "format": "yyyy-MM-dd", "description": "Insert formatted datetime."

文字数カウントの拡張機能『CharacterCount』をインストールする

拡張機能
文字数をカウントするには、この拡張機能をインストールするだけで、VS Codeのファイルに文字数が表示されるようになります!
文字カウントが表示されたテキスト
左メニューの拡張機能アイコンから、CharacterCountと検索し、インストールしてください。

自動的に校正してくれる拡張機能『テキスト校正くん』

拡張機能
テキストファイル(.txt)・Markdownファイル(.md)・Re:VIEWファイル(.re)にて、日本語の校正をしてくれる拡張機能で、文字を打つだけで自動的にチェックしてくれます。

テキスト校正くんによる校正内容

※公式より引用抜粋
「ですます」調と「である」調の混在 - ら抜き言葉 - 二重否定 - 同じ助詞の連続使用 - 同じ接続詞の連続使用 - 逆接の接続助詞「が」の連続使用 - 全角と半角アルファベットの混在 - 弱い日本語表現の利用(〜かもしれない) - 読点の数(1文に4つまで) - ウェブの用語や名称の表記統一(Javascript→JavaScript、Github→GitHub等) - 漢字の閉じ方、開き方(下さい→ください、出来る→できる等)
校正されたテキスト
チェックが入った文章には、このように赤で波線が引かれ、カーソルを持っていくと修正内容を見ることができます。この画像であれば、JavascriptはJavaScriptと書いてねということです。
自分では気づかないようなことをチェックしてくれるので非常に便利です。

デメリット:わざと行っている表現でも波線が出る

内容によっては、狙ってわざと書いている文章なども出てくると思いますが、そういうものであってもチェックされ波線が引かれてしまいます。
その場合回避できないので、ページが赤いままになってしまいます。
そこがストレスになる人には不向きなツールですね。

とめ

VS Code+VSNote+CharacterCount+テキスト校正くんは、パソコンでのライティングで、文字数や校正まで一度にやりたい人へオススメです。
VS Codeを普段使っている人は、是非使ってみてください!
ただタブレットなどのデバイスでは、まだVS Codeを使えないのが難点です。
iPadでもこの環境が使えるようになれば便利なのになあと思います。
ウエのicon
ウエ
シンママ子1猫1。30代後半からweb制作の仕事をはじめ、現在肩こり悪化が最大の悩み。