1. aakasaka

    Posted

    aakasaka
Changes in title
+コンソールで処理中にグルグルするやつをFirebase CLIから借用する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,155 @@
+Firebase hostingに CLIからデプロイするときにコンソールでグルグルするやつ(スピナー?)がかっこいいから使わせてもらおうと思いました。
+
+## 完成品
+
+こんなのができます。
+
+![dots.gif](https://qiita-image-store.s3.amazonaws.com/0/211332/b54cbc55-af8b-0d85-aebe-9e22097e745c.gif)
+
+## 環境構築
+
+Firebase CLI のjsソースをそのまんまぱくって、node上で動かしてみることにします。
+
+[cli-color](https://www.npmjs.com/package/cli-color)というパッケージを使うので、npm installしておきます。
+
+あとは適当に index.js みたいな、エントリポイントとなるファイルを作っておきます。
+
+## Firebase CLIのソースを探る
+
+[firebase-tools](https://github.com/firebase/firebase-tools)のソースを探していくと、[deploy/hosting/deploy.js](https://github.com/firebase/firebase-tools/blob/master/src/deploy/hosting/deploy.js) にお目当ての処理を見つけました。
+
+ほんとうに必要なところだけを抜き出すと以下のような感じです。
+
+```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++;
+}
+```
+
+これを適当なメッセージで呼び出す
+
+```js
+setInterval(() => {
+ _updateSpinner("ローディング中です");
+}, 200);
+```
+
+まわる
+
+![dots.gif](https://qiita-image-store.s3.amazonaws.com/0/211332/b54cbc55-af8b-0d85-aebe-9e22097e745c.gif)
+
+## cli-spinners
+
+firebase-toolsのパッケージ依存をたどっていくと、直接は使ってなさそうですが、 [cli-spinners](https://www.npmjs.com/package/cli-spinners)という魅力的な名前のパッケージを見つけました。
+
+何かと思ったら、実体は `spinners.json` というJSONファイルだけっぽい。
+
+しかしこのJSONファイル、見るだけで胸がトキメキます。
+
+一部だけ抜粋
+
+```json
+{
+ "dots": {
+ "interval": 80,
+ "frames": [
+ "⠋",
+ "⠙",
+ "⠹",
+ "⠸",
+ "⠼",
+ "⠴",
+ "⠦",
+ "⠧",
+ "⠇",
+ "⠏"
+ ]
+ },
+ "circle": {
+ "interval": 100,
+ "frames": [
+ "◜",
+ "◠",
+ "◝",
+ "◞",
+ "◡",
+ "◟"
+ ]
+ },
+ "bouncing": {
+ "interval": 80,
+ "frames": [
+ "[ ]",
+ "[ =]",
+ "[ ==]",
+ "[ ===]",
+ "[====]",
+ "[=== ]",
+ "[== ]",
+ "[= ]"
+ ]
+ },
+ "monkey": {
+ "interval": 300,
+ "frames": [
+ "🙈 ",
+ "🙈 ",
+ "🙉 ",
+ "🙊 "
+ ]
+ },
+ "clock": {
+ "interval": 100,
+ "frames": [
+ "🕐 ",
+ "🕑 ",
+ "🕒 ",
+ "🕓 ",
+ "🕔 ",
+ "🕕 ",
+ "🕖 ",
+ "🕗 ",
+ "🕘 ",
+ "🕙 ",
+ "🕚 "
+ ]
+ }
+}
+```
+
+さきほどのをちょっといじって
+
+```js
+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](https://qiita-image-store.s3.amazonaws.com/0/211332/d4cd667b-9a37-bfa7-afe0-77888f2dbebf.gif)
+
+いいですね。
+
+## あとがき
+
+※ この記事は個人の見解であり、所属する組織を代表するものではありません。