Githubのトレンドにvadimdemedes/inkというツールが上がっており、CLIといえばchjj/blessedやReact版のYomguithereal/react-blessedとかあったなぁ、と懐かしみつつそういえばPowerlineもシェルのアスキーアート的に表現されてるんだよな、どうやってパンくずっぽいもの描画してるんだろう?というのが気になったので調べてみたらおもったより面白そうだったので遊んでみました。作ったもの記事にも貼っていきますが、ソースはこちら(TODO)から見れます。上記画像のようなものを1つずつ作っていきますフォントに注意その前に注意点です。以下の文字は文字化けせずに表示されてますでしょうか。この後の内容に欠かせない重要パーツたちです。して表示するとこんな感じです。これらの文字をコピーしてターミナルに貼り付けても表示できていますでしょうか。Proであればおそらく表示できていると思います。Proだとマルチバイトが省略されているそうで、文字化けします。iTerm2をお使いの場合は、以下の画像のようにフォントを設定すればおそらく表示できると思います。表示できていたら、フォントを適当に変えてみてください。だいたい文字化けすると思います。これらの特殊文字は対応しているフォントが少ないため、ターミナルのフォント設定に強く依存するという点にご注意ください。ターミナルで色付き文字を出力するbash_profileとかをいじったことある人ならおそらく触れたことあると思いますが、[\e[00;34m]とかそういうやつです。Blogそのままechoしてもいいのですが、コードとして分かりにくいので、npmのchalkというパッケージを使用して色名を使ってコードを書いていきます。chalk.whiteBright('!'))スピナーに使えそうな文字npm本家のスピナーが好きなので、それの簡易版を作ってみます。npmのソースを見てみたところ、内部で使用しているのはiarna/gaugeというライブラリでした。これらの文字をくり返し表示することで、ぐるぐる回っているっぽいアニメーションを作ります。スピナーを作る下準備さっそくアニメーションを実装する前に。昔CLIでマリオが走るアニメーションを実装したことがありましたが、そのときは複数行をアニメーションさせるためにカーソル操作もやってました。今回は1行だけをアニメーションさせればいいので、簡単に\rと空白を出力することで、その行の表示済みの内容をクリアする手法をとります。スペースは消したい文字の数分だけ入れる。今回は1文字のアニメーションなので1文字で足りる。\r')なお、console.logだと改行されてしまって予期したとおり動いてくれないので、process.stdout.writeを使用していますスピナーを作ってみるではアニメーションを実装してみます。最近はinkなどのCLIに向けたライブラリが色々出てますが、今回はシンプルに原理を理解するため愚直に書きます。FPS)動かしてみるとこんな感じです。Powerline的なUIに使えそうな文字さて、本題のPowerlineです。)や他にもアイコン相当の文字などが見つかりました。こんな文字どこから見つけてきたんだよ。いうツッコミを入れたくなるほどレパートリーがあります。ちなみに、普通に「さんかく」と打って変換できる文字では文字サイズがテキストと同じなのでパンくずっぽい見た目になりませんでした。これらの文字と背景色を組み合わせて、PowerlineっぽいUIを実装してみます。背景色を理解しないとそれっぽいUIにならないので、それを説明します。ターミナルで文字に背景色をつける先程リンクを貼ったCLIでマリオが走るアニメーションでは、半角スペースに背景色を付けてドットっぽく扱っています。今回はそれよりもう少し難しいですが、概念は同じです。今回作りたいモノはのように、パンくずリストっぽいものです。色の変わり目がミソです。いう見た目になるかというと、の文字色と背景色を設定することでレイヤーっぽく扱っているからです。(白文字背景緑)...という全体構成になってます。1つ目のつなぎ目()であれば、「文字色=黒、背景色=赤」で表示することでいい感じに繋がります。を使ってしまうとどうしても図形っぽく認識してしまうと思うので、スペースを開けたりつなぎ文字を変更してみると、イメージが付きやすいかもしれません。chalk.black(''))背景色の設定は、先ほど紹介したchalkでできますchalk.black.bgRed('')と言った具合に。Powerline的なUIを作ってみる概念的な部分はお話したので、コードに移ります。いえ、つなぎ目の文字色と背景色をハードコードせずに計算したり、多少クラスに分けたりした程度です。コードの全文を載せると長いのでこちらを参照して下さい。}))powerline.add(stack)console.log('\n\n\n')console.log(powerline.render())console.log('\n\n\n')適当にアイコンとかも公式のソースから引っ張ってきてみました。あとがき「なんでそんな文字あるんだよ...」という文字が思っていたより色々あって、夢が広がると思います。HTMLの実体参照なんかもかなりの種類があるので、ユースケースによっては画像やフォントアイコンではなくそれらを使ってみるのも面白いかもしれませんね。