least_alone

ひとりごと。

最強のはてなブログ執筆環境を発見してしまった話

最強のはてなブログ執筆環境を発見してしまった話

背景

はてなブログの記事編集画面ってゴミハゲ伊丹市森本ですよね。

多機能なのはいいんだけど、いくつかの気に食わないところと、
かゆいとこに手が届かないので記事を書くモチベもアガりません。

具体的には次のようなところが伊丹市森本です。

  • プレビュー画面が使いづらい
  • なんかよくわからん広告が挿入される
  • せっかくMarkdownモードにしてるのにタグアイコンがある
  • しかもそのアイコンをクリックするとhtmlタグで入力される
  • 画像の投稿がめんどくさい
  • 記事に必須のタグ編集タブがデフォで表示されてない
  • そもそもブログを開く→編集画面を開くってめんどくさい

このへんがはてなブログ特有の気に食わないところです。

ほかにも、この機能があったらな〜〜〜〜〜ってのが

  • vimモードがある(重要)
  • オフライン編集したい(このへんはExtensionでどうにかなるのかな?)
  • gitでバージョン管理がしたい

って感じです

話は変わりますが

僕はキモオタなのでプログラムなり仕様書なり報告書をゴリゴリ毎日書いています。

エディタは何を使っているかって? そりゃあ、真の漢はvim一択…と言いたいところですが、 Visual Studio Codeを使っています。

幸い、日本は宗教の自由が認められている国家ですので、 vim教徒でありながらパソコンはApple, ブラウザはGoogle, そしてエディタはMicroSoft製のものを使っています。

普段からPythonもRustもJavaJavaScriptもShellScriptもDockerFileもMarkdownLatexもすべてVSCodeで書いています。

Macユーザなら、brew cask install visual-studio-codeするだけ。

あなたがもしWindowsユーザであれば ここ から実行ファイルを落としてマウスをカチカチするだけ。

あとはVim Extensionを追加するだけで救われます。

パッとあなたが思いつくことの99%は拡張機能として優秀などこかの開発者が公開しています。

あなたはそれをカチカチしてインストールするだけでいい。これでVSCodeにできないことはないぞ!

…………………………あれ?

ということで

ありました。

https://github.com/uraway/hatenablogger

しかも作成されたのは数日前でした!是非ともGithubにStarをつけてあげてください!

インストール

  1. 左側サイドバーの拡張機能アイコンから検索ボックスにhatenaと入力
  2. 一番上にあるhatenabloggerという拡張機能のinstallボタンを押してインストール
  3. 拡張機能の設定を行う(※ 後述)
  4. インストールが終わったら再起動

拡張機能の設定

この拡張機能を使うには、

の3つの情報が必要となります。

はてなIDは自分のユーザIDです。 ブログIDは、https://を除いたブログのURL ここから確認できます

APIキーは ここから確認できます 下の方へスクロールすると、AtomPubという項目があるので、そこに記載されているAPIキーをメモしておきましょう。

※ 注意! このAPIキーは他人に知られてはいけません。パスワードのようなものだと思ってください。

これが他人にバレると自分のブログにスケベな記事を投稿されてしまうなどの重大なインシデントにつながる可能性があります。

入力しよう

VSCodeの設定画面を開きます

設定のUser Settingsタブ→Extension→Hatenablogger configurationに入力欄が3つありますので、上で確認した情報を入力します。

入力が終わったらVSCodeを再起動します。 僕の場合は再起動しないとうまく動作してくれませんでした。

使い心地

最強です。 あまりに良すぎてかゆいところを核の炎で焼き尽くされた気分です。

Markdown記法で記事を書き、 Command+Shift+Pでコマンドパレットを呼び出してhatenaと入力すると画像のアップロードや記事の公開ができます!

記事公開時にタイトルとカテゴリと公開or下書きを選べます。

君もブログ執筆にVSCodeを使おう!

参考文献

uraway - github/hatenablogger