5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-12

初書: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を呼び出すことで使用できる。
2つの違いは同期か非同期か。ただパッと使ってみた感じ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に投げていただけると助かります。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?