コンソールで処理中にグルグルするやつをFirebase CLIから借用する

Firebase hostingに CLIからデプロイするときにコンソールでグルグルするやつ（スピナー？）がかっこいいから使わせてもらおうと思いました。

完成品

こんなのができます。

環境構築

Firebase CLI のjsソースをそのまんまぱくって、node上で動かしてみることにします。

cli-colorというパッケージを使うので、npm installしておきます。

あとは適当に index.js みたいな、エントリポイントとなるファイルを作っておきます。

Firebase CLIのソースを探る

firebase-toolsのソースを探していくと、deploy/hosting/deploy.js にお目当ての処理を見つけました。

ほんとうに必要なところだけを抜き出すと以下のような感じです。

var clc = require("cli-color");

var SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];

var spins = 0;
function _updateSpinner(newMessage) {
    process.stdout.write(clc.erase.line + clc.move.left(9999));
    process.stdout.write(clc.bold.cyan(SPINNER[spins % SPINNER.length] + "  ") + newMessage);
    spins++;
}

これを適当なメッセージで呼び出す

setInterval(() => {
    _updateSpinner("ローディング中です");
}, 200);

まわる

cli-spinners

firebase-toolsのパッケージ依存をたどっていくと、直接は使ってなさそうですが、 cli-spinnersという魅力的な名前のパッケージを見つけました。

何かと思ったら、実体は spinners.json というJSONファイルだけっぽい。

しかしこのJSONファイル、見るだけで胸がトキメキます。

一部だけ抜粋

{
	"dots": {
		"interval": 80,
		"frames": [
			"⠋",
			"⠙",
			"⠹",
			"⠸",
			"⠼",
			"⠴",
			"⠦",
			"⠧",
			"⠇",
			"⠏"
		]
	},
	"circle": {
		"interval": 100,
		"frames": [
			"◜",
			"◠",
			"◝",
			"◞",
			"◡",
			"◟"
		]
	},
	"bouncing": {
		"interval": 80,
		"frames": [
			"[    ]",
			"[   =]",
			"[  ==]",
			"[ ===]",
			"[====]",
			"[=== ]",
			"[==  ]",
			"[=   ]"
		]
	},
	"monkey": {
		"interval": 300,
		"frames": [
			"🙈 ",
			"🙈 ",
			"🙉 ",
			"🙊 "
		]
	},
	"clock": {
		"interval": 100,
		"frames": [
			"🕐 ",
			"🕑 ",
			"🕒 ",
			"🕓 ",
			"🕔 ",
			"🕕 ",
			"🕖 ",
			"🕗 ",
			"🕘 ",
			"🕙 ",
			"🕚 "
		]
	}
}

さきほどのをちょっといじって

var clc = require("cli-color");
var spinners = require('cli-spinners');

var spins = 0;
function _updateSpinner(frames, newMessage) {
    process.stdout.write(clc.erase.line + clc.move.left(9999));
    process.stdout.write((frames[spins % frames.length] + "  ") + newMessage);
    spins++;
}

var spinner = spinners.monkey;

setInterval(() => {
    _updateSpinner(spinner.frames, "ローディング中です");
}, spinner.interval);

実演

いいですね。

あとがき

※ この記事は個人の見解であり、所属する組織を代表するものではありません。