初書：2021/04/28
mac : 11.2.3
vscode : 1.55.1
qiita api : v2
curl 7.64.1

前書き

QiitaにはAPIがある事は知っていたが、これを利用して記事投稿などが出来るという発想に至る事が最近(今更)起きたので、
いつもMarkdownをとりあえずvscodeで書いて全コピペしていたのを、拡張機能だけで解決しようと思い作成してみる。

ちなみに、この記事では拡張機能の開発面はあまり触れずに、必要そうな記録を残す。
拡張機能面は、ほぼ同時公開の【vscode】改めてtypescriptで拡張機能を開発してみるを参照

拡張機能紹介

今回作成したものがこちら→vscode_qiitaapi - Visual Studio Marketplace

2021/05/12現在、存在している機能はqiitaへの投稿だけのシンプルなもの。

投稿方法

投稿したいファイルを開き、コマンドパレット(com + shift + P)から「qiitaに投稿する」を選択するだけ。

その後、記事タイトル、投稿範囲、タグなどを指定すれば投稿が出来る。

投稿すると、以下のような文章がファイルの先頭に記述されるが、これを使って投稿情報を管理している。

//********************
  *      ID : xxxxxxxxxxxxxxxxxxxx
  *   title : 記事タイトル
  * private : true
  * istweet : false
  *    tags : タグ1, タグ2
//********************

この管理情報（説明では「qiita テンプレート」と表記）はjsonにするか迷ったが、記事から切り取る良い方法が思いつかなかったために自作。

ちなみにこれは「qiita テンプレートを付与する」を実行することで投稿前に記述しておくことも出来る。（IDが空白かどうかで新規投稿/投稿更新を判断しているため）

開発時メモ

これ以降は開発時に新しく知ったこととかのメモ。

qiita apiを確認する

qiitaのapiは下の方の黒枠にも「API」と書いてあるページから飛ぶ事ができる。

ここに色々なAPIが記述されている。

JSON Schema を利用してみる

少し読んでみると、Qiita API v2にはJSON Schemaなるものが定義されているらしい。
JSON Schemaって何？というのは詳しい説明は他の方に任せるとして、ざっくりいうと仕様書をそのままJSONオブジェクトで書いたもの。

JSON Schemaのすゝめ - Qiita

それで今回Typescriptを使用しているわけだが、せっかくこういうものがあるならapiで受け取ったJSONにも型推測したいよね、と。

参考サイト：JSON-SchemaからTypeScriptの型定義を生成する - Qiita

json-schema-to-typeのインストール

何事もまずはインストールから。

% npm install --save json-schema-to-typescript

インストールが終われば次はこちら

% curl https://qiita.com/api/v2/schema | npx json2ts > qiita-types.d.ts

簡単に説明しておくと、https://qiita.com/api/v2/schemaからデータを読み込んで、qiita-types.d.tsファイルに変換したものを出力

これで完成。あとはqiita-types.d.tsをimportなりrequireなりするだけ。

node.jsからシェルを実行する

今回はpandocを使ってみたかったので、node.jsからシェルを実行してみる

なお、nodejs pandocと検索すると、node-pandoc-promise - npmがヒットしたのだが、typescript型変換非対応＆うまくいかなかったので候補から除外。

ということで使うのはchild_process。デフォルト機能なのでインストール不要。

使い方はとてもシンプルで、

import {execSync, exec} from "child_process";

const data = execSync(`cat index.ts`);
console.log(data.toString());

という風に、execもしくはexecSyncを呼び出すことで使用できる。
２つの違いは同期か非同期か。ただパッと使ってみた感じawait/promise使えなさそう。

またcat index.ts | pandoc -f html -t markdownのような感じで、cat index.tsの部分をTSの変数で渡したい場合は、

import {execSync, exec} from "child_process";

str = "<h1>htmlが~~~~</h1>";

const data = execSync(`pandoc -f html -t markdown`, {input : str});
console.log(data.toString());

という風に、第二引数にoptionで渡すことができる。

Node.js｜シェルコマンドを実行する方法(child_process) - わくわくBank

終わりに

この記事もこの拡張機能を使って投稿しているので、便利ではある。

あとはどこまで機能を追加するか……。

もし不具合とか、何か気付いたこととかがあれば、下のコメントか、marketplaceのQAに投げていただけると助かります。

【vscode・qiita】vscodeからqiitaに投稿する拡張機能を作ってみた

前書き