starship用のアイコンを外字エディタで作ってみたけど微妙だった

starshipというクロスシェルプロンプト(色んな種類のシェルで動作するプロンプト、プロンプトはコマンド打つとき左側にユーザ名とかディレクトリ名とか表示される部分)があって、モジュールという機能で、色んな言語やgitの他、awsやazureのちょっとした情報表示ができます。

https://starship.rs/ja-JP/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/02355cb9-815f-41a3-89af-346968ae9c54.png)

言語系だと、例えばjavaのclassファイルを置いたディレクトリに行くとコーヒーアイコンとpathの通ってるjavaのバージョンが表示されるとか、gitだとブランチ名やステータスを表示してくれたり、awsだと現在設定されてるプロファイル名やリージョンを表示してくれたり。面白どころだと、メモリの使用率やバッテリ残量なんかも。
で、terraformに対応してるみたいで、僕の環境はAWS+terraformでIaCしてるので、ディレクトリ名やgitの情報の他に、awsとterraformをプロンプト表示してみました。アイコン表示、可愛いなと。
terraformの何かをプロンプトに出してくれるといっても、バージョンとワークスペースくらいです。まあバージョンを常に出す必要はないし、僕はワークスペースは使ってないので機能的にはそうでもないんですけど、terraformが実行できるディレクトリにきたときにアイコンが表示されるのはなんかオシャレなのではないかと試してみました。

デフォルトで、各モジュール(starship上の設定項目のこと)にNerd Fontからそれっぽいアイコンが割り当てられていて、awsはデフォルトの雲アイコンがばっちりなのですが、terraformはsymbol(starship上でアイコン的なやつ)が微妙です(💠) ※←端末にインストールされてるフォントによって見た目が変わります(もしくは```?```か豆腐?)。caskaydiacoveをインストールした僕のマシンではこう見えてます![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/7f2955ab-302f-6ee0-f72d-3059531f0b62.png)(画像)



terraformのsymbolが微妙なのは、Nerd Fontにterraformのアイコンがないのと、terraformに動物的なシンボルがいないせいで適当なものがなく、形が近いものが適当に割り当てられてるからな感じがします(近くもないですが..)。
なんとなく、このアイコンって自作できないのかな??と思い、外字エディタで自作してみました。
(外字エディタという存在を初めて知りました。外字、字の自作、しぶい..)
starshipでの各言語のアイコンはemojiではなくフォントになってるので、同じようなのがいいかなと。

結局、外字エディタで自作したアイコンは、シェル上では表示が小さく見づらいため、ボツかな..と思ってます。
その後調べてみると、たぶんfontforgeでフォントを作ってNerd Fontに追加(パッチを当てる?)的な方法が良さそうです。

外字エディタがメモリ不足エラーでうまく動かずトラシューで燃え尽きたので、fontforgeはまた気が向いたら..
とりあえず外字エディタで作ってstarshipで利用するとどんな感じなのか残します。

結論、starshipでterraformを実行できるディレクトリに行くと、プロンプトがこうなります
(以下は適当にファイルを作ってコミットする操作です。ちなみに左からディレクトリ、AWS_PROFILE、terraform、gitブランチ、git statusです)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/826883b2-37af-ecd3-5ee0-25e964e72484.png)

分かりづらいのですが、ここです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/8d68c617-a270-38bf-d2ae-eed63fae6a7a.png)

この左側のterraformのアイコンが、Windowsの外字エディタで自作した外字です。
(アイコンの右側はterraformのバージョンとワークスペース名です)

外字エディター上はこのようなドット絵になっていて、文字コードはunicodeのU+E020で登録してあります
(U+E000から私用領域という自由に使える領域なのですが、私のwsl/ubuntu18.04では、U+E000～U+E009まで他の字に利用されていました。最初外字エディタでU+E000で登録したのですがwslで元々登録済みの文字しか表示されず、予約済であったことに気づいてからU+E020に変更しました)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/1e4edf92-7de4-9240-27a8-4d18c63e0315.png)

本家と比べても我ながら頑張ってると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/139862de-a711-3ecb-a96c-691c092461c1.png)
https://www.terraform.io/

ドット絵書くのひっさびさなのですが楽しいです。
小学生の頃マリオペイントにハマって、ドット絵でスト2のキャラ選択のときの各キャラのアイコンを完全再現したスタンプを作って、意味なくペタペタしてました。
(ドット絵ずっと書いてたら現実世界がドットで見えるようになって、怖くなってやめました)

初回ざっくりそれっぽいterraformアイコンを２分くらいでさっと書くことができ(直線引いて中塗るだけなので笑)、プロンプトに出力してみたところ、四角と四角の間隔が1ドットだと四角がつながって見えるので2ドットにし、四角につけた傾斜がアイコン化して利用してみると意外ともっとつけた方がいいなという感じだったので傾斜をきつくしたりしました。
(この修正のときに、外字エディタでメモリ不足エラーがでて、しばらく不本意な外字エディタのトラブルシューティングが必要になりました。かかった時間はドットの微調整に30分、トラシューに30分って感じです)

ただシェル上での色味は、terraformが寒色のため、再現性を高くしようとするとちょっと見づらいです。
(背景色が黒だと少しくっきり見えるのですが、ターミナルの背景色と重なってせっかくstarship.tomlで設定したリボン?的なstyle感が薄れてしまうので、背景色にdark-blue系をうっすら乗せています。でももうちょい明るくしようかなあ)

# 外字のサイズについて

ドット絵の細かさは拡張できるのですが、文字のサイズ自体は変更できないので、外字では対応できなそうです。
で、デフォルトで各言語に割り当てられてるsymbolのアイコン見ると以下のような感じなのですが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/7e3d9db9-a67e-ad05-c7a5-c04f528b6c8a.png)

字のサイズがでかいのが結構あるんですよね。
golangとかnix_shellとかpythonとか分かりやすくでかいなと。
で、Nerd Fontでアイコン検索してみると、同じアイコンあるので、starshipは単純にこれ使ってると。

https://www.nerdfonts.com/

例えばpythonだとこの辺を使ってるのかなと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/b9c6d6da-809a-c62d-a5a0-5170cd99bdb6.png)

外字エディタで作ったアイコンだとサイズが小さく視認性が低いのでボツかなという感じで、他のsymbolのアイコンみたいに大きいサイズで自作するには冒頭に書いたようにfontforgeでフォントを作ってNerd Fontに追加、的なやつができれば良さそうです。

# 色々

ローカルに外字登録してると、文字コードと文字をブラウジングするサイトではローカルからフォントデータを拾っているようで、ローカルの外字がwikipediaなどのサイト上で表示されるのが面白いです(図のE020のところ)

[https://ja.wikipedia.org/wiki/Unicode一覧_E000-EFFF](https://ja.wikipedia.org/wiki/Unicode%E4%B8%80%E8%A6%A7_E000-EFFF)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/295258ec-e7a8-2de7-96b1-2e9d4e65eabc.png)

[0g0.org Unicode(ユニコード)一覧とURLエンコード検索・変換サイト](https://0g0.org/unicode/E020/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/7a3abe1a-6717-4ee7-32f2-c565f3aad18e.png)

ちなみに0g0.orgは、```文字をクリックボードにコピー```ボタンがあって、なんとなくここからコピーして、シェルにペーストして利用してました。
シェルで普通に表示されるし、こんなことも普通にできます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620712/7f9581ce-9262-5dc5-12c2-b23aa35c4c2c.png)

# 一応環境

- win10+caskaydiacove
- Windows TerminalでUbuntuの外観/フォントにcaskaydiacoveを設定
- WSL2+Ubuntu18.04
- fish+starship

# 必要要件

今回みたいにローカルのWindows環境で完結してる場合は、適当にNerd Font系のフォントをWindowsに入れてWindows Terminalに設定すれば、wsl上で外字を使える感です

- Nerd Font+Windows Terminalで指定+wsl
    - たぶん..
    - WindowsにNerd Font(僕が入れたのはcaskaydiacove)入れてて、Windows Terminalで指定してることで、Windows Terminal上で、外字エディタで作ったやつをそのままコピペで動かせるのではないかなと..
    - フォント対応できてないターミナルソフトだとNGだと思ふ..
    - wsl/ubuntu側にNerd Fontsを入れたかは失念

# 必要なかったこと

- wslのfontsディレクトリにフォントファイル(EUDC.TTE, EUDC.EUF)をコピーすること
    - ~/.fonts/配下(システム全体のときは/usr/share/fonts/truetype/らしい)
- Windows TerminalでNerd Fontを扱えるようにしてあれば不要なのかなと

# 外字エディタ作成時のナレッジ

- デフォルトsjisだが、unicodeを選んだほうがいいと思う
- 特定のフォントでの利用でなければ、フォントもすべてを選ぶのかなと
- ドットは64x64だが、レジストリで最大256x256まで精密にできるらしい(今回はなめらかにしても意味ないので試してない)
- トラブルシューティング
    - メモリが不足しています、と表示される(メモリは10GBくらい空いてる)
    - ググってみたけど解決策なし(Windows98以前で作成した外字を扱う場合にエラーがでるような情報はあるけど、今回はWin10で一から作ってるので該当しない。あと、フォントのリンクで別フォントに一度逃がして再作成～みたいなやつはなんでそのやり方が良いのか分からなかった)
    - 結局WindowsOS再起動で直った()
    - 一応試したのは
        - 外字エディタの停止/起動
        - sjis/unicode両方に2つずつくらい外字登録済みだが、それらを外字ファイルごと葬って再作成
            - 外字エディタを終了
            - コマンドプロンプトを管理者起動して、c:\Windows\Fontsフォルダ配下のEUDC.TTEとEUDC.EUFを削除
            - 外字エディタを起動すると初期状態から開始になるので、作成済みの外字を取り込む
- 外字の退避/取り込み直しの仕方
    - 外字エディタで外字を開いて、範囲選択(左のアイコン一覧の下から３つ目)をクリックして、左上から右下まですべてのマスを選択
    - 編集タブ -> コピー
    - ペイント(mspaint)を起動し、サイズを1x1にする(ここは64x64でも良いかもしれない)
    - ペイントに貼り付ける
    - モノクロビットマップとして適当なフォルダに保存(バックアップになる)
    - 外字エディタを開き、適当な文字コードを選択して編集画面にする
    - 編集タブ -> 貼り付けで、上記のmspaintへのコピー操作でクリップボード上にコピーされてるビットマップデータが外字エディタ上にペーストされる
    - あとは続きをやって保存する

# その他

starship.tomlのカスタマイズについてはまた今度書きたい..