VSCodeの拡張機能からQiitaの記事を投稿できるのかやってみた。

追記
Qiita投稿用のVSCode拡張機能2個目のレビュー記事を書きました。

VSCodeの拡張機能（2個目）からQiitaの記事を投稿できるのかやってみた。 - Qiita
https://qiita.com/masakinihirota/items/a220dabddd238ada5c67

レポジトリ

https://github.com/yuu-1st/vscode_qiitaapi
https://github.com/neet/vscode-qiita

総評

評価	拡張機能名	---
○	vscode_qiitaapi	たくさん投稿、更新する人は使いやすい
△	vscode-qiita	多機能だが、更新できないのが致命的

vscode_qiitaapi ○

テンプレートを事前に書いているのでテンプレート作成後なら記事の投稿が簡単、投稿に特化。
機能がシンプル。
テンプレートは一旦書き方を覚えれば楽。
更新が安心で楽。（ショートカット登録で更に楽）
テンプレートが面倒（デフォルト値がほしい）
投稿や更新をたくさんする人はこちらのほうが良いと思う。
vscode_qiitaapiの方はつい先日リリースしたばかり。

vscode-qiita △

テンプレートがいらないこと、右クリックで公開できること。
更新ができない＜＝かなり痛い（やり方見落としているだけかも）
記事一覧が取得できること。
投稿が面倒、投稿等は右クリックで出来るのは楽。
記事投稿時に、タイトル名やタグを記入するので使いにくい。
記事投稿時にタグを5つも設定するのが非常に面倒。
その他のリスト表示機能等ちょっとした使いやすさは上回っている。
最後のメンテナンスは9ヶ月前。

追記終了

Qiita の記事管理が記事数が増えるにつれ面倒になってきたので
好きなエディタで管理しようと思ったが今使用しているエディタ自体が
Markdown の対応がユーザーのプログラムでしかも 2012 年製で未完成
なので VSCode で無いかと探してみました。

【vscode・qiita】vscode から qiita に投稿する拡張機能を作ってみた - Qiita
https://qiita.com/yuu_1st/items/a4a4d78b20bb1c649e9b
を見つけたので触ってみます。

（このあたりから記事の作成を始めてみました。）

環境

Windows10
VSCode 最新版

インストール

VSCode のマーケットプレイスから
vscode_qiitaapiで拡張機能を検索＆インストール

vscode_qiitaapi - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=yuuyu.vscode-qiitaapi&ssr=false#overview

アクセストークンの取得

Qiita にログインしている必要があります。

Qiita アプリケーション
https://qiita.com/settings/applications

Qiita アクセストークンの発行
https://qiita.com/settings/tokens/new

qiita の設定 → アプリケーション → 個人用アクセストークン →
新しくトークンを発行する を選択し、
スコープに「read_qiita」「write_qiita」をオンにした上で発行し、
表示されたアクセストークンを、拡張設定から設定してください。

この画面から個人用アクセストークンを取得
*****************************7541

アクセストークンの設定

設定画面から登録

VSCode の
ファイル＞ユーザー設定＞設定
qiita と入力して設定項目を絞る。
設定項目名 内容
vscode_qiitaapi.accesstoken qiita のアクセストークンを設定します。
アクセストークンの入力

settings.jsonから登録

{
  "vscode_qiitaapi.accesstoken": "*****************************7541"
}

これで設定の完了です。
次は記事を投稿してみます。
最初に、この記事を投稿してみます。

コマンド一覧

コマンドパレットから、qiita に記事を投稿することができます。
現在使用できるコマンドは以下の通りです。

qiita に投稿する
qiita に投稿、もしくは記事の更新を行います。

qiita テンプレートを付与する
現在のアクティブファイルに、投稿に関する情報を記述するテンプレートを付与します。

qiita テンプレート

qiita に投稿するための付加情報として、
ファイルの先頭に「qiita テンプレート」を用意する必要があります。

qiita テンプレートはスラッシュとアスタリスク 10 個からなるラインで囲まれ、
以下の情報を保持します。

ID
qiitaの記事ID です。
新規投稿の際は ID は存在していないため空白であり、
記事の更新の場合は ID が存在しているため必須になります。

title 必須 文字列、文字列の制限数は不明
記事のタイトルです。

private 必須 true/false
記事を全体公開にするか限定投稿にするかです。
true/false の記述のみ受け付け、
true の場合は限定投稿、
false の場合は全体公開になります。

istweet 任意 true/false
記事を新規投稿した際に、ツイートするかどうかです。
記事の更新の場合はこの値は無視されます。
また、qiita が twitter と連携していない場合も無視されます。

tags 必須
記事につけるタグです。
","区切りで最大 5 つまで指定することが出来ます。

初投稿、初更新

ここまで記入できて準備は完了しました。
それではVSCodeから投稿のコマンドを実行してみます。

2021年5月23日
投稿を確認。

タイトルを変えたりして更新をしてみる。
更新も確認。

ショートカット

VSCodeのファイル＞ユーザー設定＞キーボードショートカット
qiitaと検索欄に入力してショートカットを絞る

keybindings.json

[
  {
    "key": "{ctrl+shift+好きなキー}",
    "command": "vscode_qiitaapi.post"
  },
  {
    "key": "{ctrl+shift+好きなキー}",
    "command": "vscode_qiitaapi.set_templete"
  }
]

その他

Markdown(.md)以外の拡張子から投稿する場合は、Pandoc のインストールが必要です。

VSCode から投稿するのに.md 以外のファイルで投稿するってどんな場合だろう。？

感想 問題点、不満

感想

とにかく手軽に投稿できる。連続投稿したい人にはかなり良い拡張機能に思えた。

記事を投稿する機能と、更新する機能に特化した拡張機能。
単発で記事を書いている人は不要だろう。

ある程度記事を投稿している人ならばローカルで記事を管理してこの拡張機能を使うというのが想定された使い方だと思う。

記事を投稿する場所はZennもあるのでそちらにも対応できたらと思った。

日本語入力に関してはVSCodeはちょっと苦手のようだ。
日本語部分は別のエディタで書いているがVSCodeと同じファイルを開いていれば
シンクロしてくれている。

VSCodeでFormattingを自動にしておいてしまうとめちゃくちゃになるので切っておく。

問題点、不満

画像投稿が出来ない。
記事を書いている最中画像を用意しつつ記事を書き進めたが、
ローカルからのQiitaへの画像投稿の方法がわからず断念した。

画像投稿は記事投稿後にQiitaで編集をして画像投稿し、
そのURLを記事の.mdファイルに貼り付ければ良いのだろうか？
結構めんどい。

投稿後に通知が来て表示ボタンというのが表示されるが、
Windows環境ではQiita記事を開いてはくれなかった。
（想定していた動作は、Chromブラウザ（デフォルト）から該当のQiita記事が開く。）

記事の投稿が記事を開いているエディタでしか出来ない。
これは逆にpandocで他の拡張子に対応していると投稿できてしまう？
考えてみたが、それは出来ない。
ショートカットが暴発するとまずいので
まずテンプレートを読んでから、テンプレートの形式を見てから投稿できるかどうか判断してほしい。
これはショートカットを押すと右下の最初の通知が
Qiita ID「ユーザー名」に投稿しますと出てきてしまうので一瞬ビクッとなった。
その後で
X 対応していない拡張子のファイルはアップロードできません。:.{拡張子}
と出てきたので、

この投稿コマンドは
最初に投稿するプログラムが走って通知が走り、その後に拡張子を判別、その後Qiitaテンプレートに沿っているかどうかを見ていると思う。
通知は後回しにしてはどうか？反応が早いほうが評価は高くなるのだろうけど。

記事が未更新の場合でも投稿してしまえている
編集履歴を見る限り未更新の場合は投稿扱いになっていないが、
これはQiita側で処理しているのかローカル側で処理しているのかよくわからなかった。

あと大量に記事を更新、投稿する場合に、
右下の通知がいつまでも出たままでは煩わしく、
投稿に成功したのならば、10秒ぐらいで自動で消えればなと思った。
投稿、更新のたびに2回ポチポチと消さなくてはならない。
それともこの通知の表示時間はVSCode側で設定できるのだろうか？

テンプレートにはデフォルト値がほしい true,false
基本的に公開するので private : falseにして欲しい。

参考記事

【vscode・qiita】vscodeからqiitaに投稿する拡張機能を作ってみた - Qiita
https://qiita.com/yuu_1st/items/a4a4d78b20bb1c649e9b