Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

いいですね。

あとがき

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

aakasaka
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした