LoginSignup
2

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-14

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

完成品

こんなのができます。

dots.gif

環境構築

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);

まわる

dots.gif

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);

実演

monkey.gif

いいですね。

あとがき

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

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
2