月曜日クソプラグイン制作委員会 - コミュ障だから明日が僕らをよんだって返事もろくにしなかった

とうとう月曜日が来てしまった

ちょっと前まで月曜日になるとクソゲー制作委員会の進捗報告とかやってた気がしたんですけど、いつまでたってもゲームが完成しない……。ちゃんとゲームづくりの進捗挙げられれば僕としてもうれしいんですけど何もしていない……。何をしていたかと言えばVSCodeのクソプラグインを作ってた。どうしてこうなった……。

ということで、何か動くものをさくっと作りたい焦りから今日はゲーム作りでなくVSCodeのプラグイン作っていきます。このブログをご覧になっている皆様は息を吐くようにプラグインを作っている方ばかりで説明不要と思いますが、VSCodeのプラグインの大まかな作り方は下記リンクの通りです。
Your First Extension | Visual Studio Code Extension API

本格的な作り方はこれからつくるのでしらんがとりあえずYeomanが必要らしいのでインスコしてみる。ちなみにYeomanはフロント部分の環境構築ツール。色々なテンプレートの設定もできるので応用が利くらしいですがそんなものは知らん、今日はプラグインをつくるんじゃ～ぁ。

# yeomanとジェネレータのインストール
$ npm install -g yo generator-code

# yeoman実行
# なにか色々設定聞かれるのでお好みの設定にYes/Noで答える
$ yo code
     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create?
? What's the name of your extension?
? What's the identifier of your extension?
? What's the description of your extension? 
? Initialize a git repository?
? Which package manager to use? 

# VSCode 実行
$ code ./***

そんな感じに実行するとファイルが色々生成されます。色々生成されますがメインでいじるファイルはsrc/extension.tsとついているファイルです。なのでそこをいじっていきます。

Yeoman公式
The web's scaffolding tool for modern webapps | Yeoman

// extension.ts
import * as vscode from 'vscode';
import * as https from 'https';

let StatusBarItem: vscode.StatusBarItem;
export function activate({subscriptions}: vscode.ExtensionContext) {
	let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {

	StatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 999);
	let body = '';

	const req = https.request('https://teratail.com/api/v1/questions', (res) => {
		res.on('data', (chunk) => {
			body += chunk;
		});
		res.on('end', () => {
			let chunkString = body.toString();
			let obj = JSON.parse(chunkString);
			console.log(obj.questions[0].title);
			statusText(obj.questions[0].title);	
		});
	});
	req.on('error', (e) => {
	  console.error(`エラー： ${e.message}`);
	});	
	req.end();

	function statusText(display: string){
			StatusBarItem.text = display;
			StatusBarItem.show();
	}

	// メッセージ HelloWorldサンプルの残渣
	// vscode.window.showInformationMessage('Hello World!');
	
	subscriptions.push(disposable);
	});
}

export function deactivate() {}

MSのツールだけあってTypeScript推しなのでそれで書きました。途中雑なのはTypeScript慣れてないからです（言い訳）*1。それでこれを実行すると以下のようにTeratailの質問を取得して右下に表示するプラグインができます。需要とかは知りません。APIキーとか使わずに良い感じに使えそうなのがこれだったってだけです。

f:id:andron:20190315214127p:plain
本当は5分ごとに変化するとかまでやっていきたかったんだけど、また調子にのって適当にAPI叩いてたら制限オーバーしたんでこれで……。最悪上のひな型まで作れれば今日の天気取得とか今日のニュース取得とかできるだろうし、これでいいやって……。