よしたく blog

ほぼ週刊で記事を書いています

ブログ環境 2020

今年の締めくくりとして今の執筆環境とこれまで移ってきたツールについてアウトプットしておく。

細々と技術ブログを書き続けてきた中で様々なツールに手を出してきた。 例えば、Inkdropだったり、Google Keepだったり、Notion と言ったツールになる。 もちろん、投稿先であるはてなブログや note にそのまま書くこともあった。

これらのツールを選んだ理由としては、2 つある。 一番重視したのはどのデバイスからでも編集できることであり、次に重視したのは自動で保存してくれることだった。 しかし、在宅勤務だったり、家から出る機会が減ったことによって重視する部分に変化が生じてきた。 今重視している部分は、はてなブログへの投稿のしやすさになり、それを実現するためのツールは VS Code となっている。

Notion を断念した

VS Code に寄せる直前は Notion に書いていて、これは自分の情報のすべてを Notion 上で管理したい思いから、ブログも寄せようとしていた。 現状簡単なメモ系はすべて Notion になっている。 しかし Notion は、Markdown で書けるのはよかったものの、段落ごとで文章が独立してしまい投稿する直前で「全選択 → コピー → 貼り付け」ができなかった。 これは自分の使い方が悪かったようなので訂正。

f:id:yoshitaku_jp:20201201182055p:plain
全選択ができない…

VS Code の環境を整えた

今は VS Code 上で書いている。 クラウド上に保存してすべてのデバイスから編集はできなくなったが、いまのところ不便は感じていない。 むしろ、iPadiPhone を文章を書くツールから分離できて今のところ良かった。

現在のフォルダ構成

現在はキャプチャのようなフォルダ構成をとっている。

  • .imagesフォルダは後で解説する。
  • .vscodeフォルダはsettings.jsonが入っていて、このフォルダ配下で実行したい設定を書いている。
  • YYYY/MMフォルダははてなブログの投稿の「月別アーカイブ」がYYYY/MMで管理されているので寄せた。
  • draftフォルダは書きかけのものを管理している。
  • templateフォルダは技術ブログだったり、書評向けだったりのテンプレートを管理している。

f:id:yoshitaku_jp:20201201182125p:plain

textlint を使って校正

textlint を使って校正している。 まだ自分なりの設定は組み込めていないので、少しずつカスタマイズしていきたい。 このブログを書いている目的が、このタイミングでの自分の考えとか思いを反映させたメモであると同時に、「誰か同じことを書いてくれないかな」という期待も含めてあるので書いてくれると嬉しい。

Paste Image を使ってキャプチャ画像をテキストに貼り付ける

拡張機能である「Paste Image」を使って撮ったキャプチャを VS Code に貼り付けて管理している。 各 PC でスクリーンキャプチャを撮った後はクリップボードに内容を持っているが、そのまま VS Code のテキスト部分に貼り付けることはできない。 しかし Past Image を導入すると Mac の場合、「Cmd+Alt+V」で VS Code に貼り付けることが出来る。

下に Past Image のキャプチャを貼り付けた。

f:id:yoshitaku_jp:20201201182139p:plain
これは画像です

marketplace.visualstudio.com

貼り付けた直後のテキスト上だと、次のようになっている。 ../.images/ブログ環境2020/2020-12-01-18-06-32.pngという形でファイルが作成されたことになる。

f:id:yoshitaku_jp:20201201182222p:plain
これも画像です

先程、紹介を飛ばした.imagesフォルダの下は次のようになっている。

f:id:yoshitaku_jp:20201201182310p:plain

Paste Images の設定

保存する形もsettings.jsonで設定でき、自分はデフォルトから下記のように変更した。

{
    "editor.formatOnSave": true,
    "pasteImage.path": "${projectRoot}/.images/${currentFileNameWithoutExt}/",
}

困っていること

現状困っていることは、はてなブログへ投稿する時に画像を 1 回 1 回アップロードし、文章の間に画像を挟み込まなければいけないことである。 Paste Images で VS Code 上では画像の管理がすごく楽になったが、はてなブログにアップロードするときの面倒さは取り除けていない。 VS Code にする以前から存在していた問題ではあるのだが、解決策には巡り会えていない。

はてなブログに投稿するプラグインも見つけたが、自分の問題は解決できなさそうで踏み切れない…。

marketplace.visualstudio.com

まとめ

今年の締めくくりとして今の執筆環境をアウトプットしておいた。 3 ヶ月後、半年後、来年のタイミングで見返した時にどう変化しているか楽しみだ。