REC:雑記帳

料理・猫好き30代が送る雑多なブログ

ブログの下書きにVisual Studio Code(VSCode)を使うと便利で幸せになれる

f:id:recrox:20191129213515j:plain

Microsoftが開発・公開しているVisual Studio Code(VSCode)を使用したら、はてなブログの下書きが捗るようになったという話。

はじめに

このブログははてなブログを使用して記事を投稿するときにはMarkdown記法を使用しています。
最近、ブログの下書きをVisual Studio Code(以下VSCode)で書くようにしたら、とても捗るようになったのでメモ。

はてなブログは下書きとプレビューが不便

f:id:recrox:20191128005403j:plainf:id:recrox:20191128005436j:plain
はてなブログの記事投稿画面

はてなブログユーザーならご存知だろうけど、はてなブログは記事投稿画面で投稿下書きとして保存のどちらかを選ぶ形になっていますよね。

そのため、基本的にはブラウザを介して入力を行っていく形であり、ページのリロードを行ったり、間違ってブラウザを落としたりすると、入力していた内容が一気に吹っ飛んだりして泣きを見ることがあります。
かくいう僕もブログに費やした時間を何度も無駄にしました。

また、はてなブログの仕様なので仕方のない部分なのかもしれませんが、 入力した内容をプレビューする際にもタブで切り替えなければならなかったりと、一度書き作業の手を止めないとダメなのも煩わしく感じます。

Visual Studio Code(VSCode)

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Visual Studio Codeとは、Microsoft社がリリースしているオープンソースの高機能ソースコードエディタです。
本当に多機能、かつ、動作も軽快でエディタをこれ一本に置き換えても良いほどの出来です。

【ゼロから!】Visual Studio Codeのインストールと使い方
△わかりやすい参考サイト

MarkdownエディタとしてVSCodeを使う

VScodeは色々と対応ソースがある中でMarkdownにも対応しています。
そうです、つまり、はてなブログやWordPressでMarkdown記法を使っている場合、これが使えるということになるのです。

では、VSCodeのどのようなところが便利なのか、個人的に**『これイイジャン!』と思ったことをまとめます。

VSCodeの便利なところ

豊富なシンタックスハイライト機能

f:id:recrox:20191128010135j:plain
VisualStudioCodeのイメージ

VSCodeにはシンタックスハイライト機能があり、当然ながらMarkdownにも対応しています。
Markdown記法で下書きを書くと、しっかりとハイライト(強調)してくれるので、いちいちプレビューしなくてもMarkdownの記述があっているか確認することができるんです。

この機能は、特にMarkdown記法にまだ慣れていないような場合とても助かると思います。

この機能があるので、Markdown以外にも主要なソースコードは多種多様に対応しているVSCodeを、普段は通常のソースエディタとしても重宝しています。

Markdownのプレビュー機能

f:id:recrox:20191128005448j:plain
VisualStudioCodeのMarkdownプレビュー

もうひとつ、Markdownエディタには必須のリアルタイムプレビュー機能も付いています。

これはどういうことかというと、叩いた文字がすぐさまプレビュー画面に反映される機能で、記述した文章がブログにどのように表示されるか、大体のイメージを常に確認しながら下書きを行うことができる機能にです。

大体のイメージと書いたのは『実際のブログに表示されるイメージ全くそのままは確認できない』という意味です。
そこまでは実現できないまでも、それに近いイメージをすぐさま確認できるのはやっぱり大きいと思います。

拡張機能(Extensions)が豊富

VSCodeは拡張機能としてエディタ自体に機能を追加できます。

これが本当に素晴らしくて、有志によって色々な拡張機能が作成されているので、痒いところに手が届く自分仕様エディタにすることもできます。
個人的にブログの下書きを行うにあたり、Character CountTrailing Spacesは必須だと感じました。

Character Countはその名の通り、入力文字数をカウントする拡張機能です。
Trailing Spaces文末のスペースを強調してくれる拡張機能で、Markdown記法で忘れがちな改行忘れを防止できます。

あとは、テキスト校正くんも自分では中々気付かない文章の校正を指摘してくれるので便利です。 今後、色々入れてみて便利だなと感じたものがあれば別記事にまとめてみるのも面白いかも。

まとめ

以上、VSCodeのご紹介でした。

Markdown記法でブログ記事を書いている場合、VSCodeは下書きツールとして優秀だと思います。
最終的なプレビュー結果はブログで確認する必要がありますが、外部ツールである以上、それは仕方のないことです。 それはブログに投稿する時、調整すれば良いでしょう。

VSCodeに限った話ではありませんが、表示を確認しながら作業を行い、下書きをローカルに保存しておけるというのはやっぱり良いですね。
必要に応じてOneDriveやDropBoxなりクラウドと同期するフォルダに入れればどこでだって取り出せるので、端末が変わっても作業を継続することができるので最高です。

というわけで、同じようにMarkdown記法を使っていて、はてなブログの記事投稿画面に煩わしさを感じているならば、VSCodeを使うことでわりと幸せになれるかも知れない、ということでした。