Chrome OSのLinuxターミナルでfish-shell+Nerd fontsを使う

#目指すもの

これです。特に、git blanch（master）の横に表示されているアイコンを有効にするための作業です。
同じく、vimの画面もこうしたアイコンを使って修飾できるようになります。
Chrome OSでもターミナルでペチペチしたい人向け。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451580/89c97912-97e3-6819-13a5-f921cd726a69.png)

#必要なもの：Nerd font

アイコンは特殊なフォントで書かれた文字です。対応したフォントを使うことで表示されます。
対応していないフォントだと文字化けします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451580/4ce51ba4-630a-14a6-8755-53f8e0228d6d.png)

#作業
##Chrome OSでLinuxターミナルを使う

最新版のChrome OSなら、Linuxを使い始めるのは簡単です。
設定画面を開いたら、左側にある「Linux（ベータ版）」の表記から機能を有効にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451580/13d82b43-916b-d92e-e109-3854a35c6bb8.png)

##fish-shellをインストールしてターミナルを修飾する

Linux（ベータ版）を有効にして再起動したら、インストールされているターミナルアプリを開いて準備を進めます。Linux環境はもうこれで準備OK。
まずはfish-shellのインストール。

```bash
sudo apt update
sudo apt install fish
chsh -s `which fish`
```

oh-my-fishのインストール
https://github.com/oh-my-fish/oh-my-fish

```bash
curl -L https://get.oh-my.fish | fish
```

テキトーに修飾を設定

```fish:~/.config/fish/config.fish
# fishのキーバインドをvi風に
fish_vi_key_bindings
# プロンプトにviのモードを表記
set -g theme_display_vi yes

# 日付を表示
set -g theme_display_date yes
set -g theme_date_format "+%F %H:%M"

# nerdフォントを使う
set -g theme_powerline_fonts no
set -g theme_nerd_fonts yes

# masterでもブランチ名を表示
set -g theme_display_git_master_branch yes

# コマンドの実行時間を表示
set -g theme_display_cmd_duration yes

# shellのタイトルバー表示をカスタマイズ
set -g theme_title_display_user no
set -g theme_title_display_process yes
set -g theme_title_display_path no

# exitステータスを表示
set -g theme_show_exit_status yes

# ■▶の色テーマを設定
set -g theme_color_scheme dracula

# カーソルは■▶の次の行。プロンプトの頭は$。ディレクトリ名は省略表示しない（0）
set -g theme_newline_cursor yes
set -g theme_newline_prompt '$ '
set -g fish_prompt_pwd_dir_length 0
```

##Terminal Emulatorのインストール

デフォルトのターミナルアプリでは設定できるフォントが限られています。
ユーザーがインストールしたカスタムフォントも設定できる別のターミナルをインストールしないと、Nerdフォントは使えません。

どれでもちゃんと動くわけではなさそうなので、こだわる人は色々と試してください。
私は`mate-teminal`でフォントが設定できたので、「もうこれでいいや」とほかを試すのは妥協しました。

```bash
sudo apt install mate-terminal
```

ちゃんとChrome OSのアプリ一覧に加わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451580/f940f280-95e8-31e6-863e-1aaa04a5cf03.png)


##Nerdフォントのダウンロード

ターミナルの準備ができたら、次はフォントです。まずはブラウザからフォントファイルをダウンロードします。

Nerdフォントは特殊アイコンを割り当てたカスタムフォント。
ベースとなるフォントに特殊アイコンを組み合わせてい作られているみたいです。
https://github.com/ryanoasis/nerd-fonts

とてもファイルサイズが大きいので、容量の少ないChromebookで全部ダウンロードするのはおすすめしません。
使うフォントファイルだけダウンロードしましょう。

私が使ったのはMononoki Nerd fonts。
https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Mononoki

とりあえずRegularだけでいいかと思ったので、フォントファイルのあるフォルダを開きます。
https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Mononoki/Regular/complete
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451580/15db841c-dce9-9b09-dfdd-3214eaa576ac.png)

`mononoki-Regular Nerd Font Complete Mono.ttf`と
`mononoki-Regular Nerd Font Complete.ttf`をそれぞれダウンロード。ファイルを選ぶとダウンロードボタンが表示されるので、それでOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451580/3cc85d3b-4772-07bc-7e72-c514f84d5f50.png)

ダウンロードしたファイルは、適当なフォルダに入れてLinuxと共有します（右クリック/二本指クリックから「Linuxとの共有」）。
私は「マイファイル＞Develop」というフォルダを作ってファイルを移動し、Linuxと共有しました。
![Screenshot 2021-02-21 at 05.31.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451580/914d3da9-33c9-992e-0e1a-5a0b9ce2a6fa.png)

##フォントの読み込みと設定

MATE端末（mate-terminal）を開いて、フォントの設定をしていきましょう。
まずはフォントファイルを移動する先を作ります。システム管理領域なので、root権限（sudo）が必要です。
`/usr/share/fonts`配下なら何でも良さそうだけど、truetypeフォルダがあってttfファイルなので`/usr/share/fonts/truetype`配下に`mononoki`ってフォルダを作ってみました。

```bash
sudo mkdir /usr/share/fonts/truetype/mononoki
```

Linuxと共有したファイルは`/mnt/chromeos`配下にマウントされています。
ファイルを先程作ったフォルダに移動させましょう。

```bash
sudo mv /mnt/chromeos/MyFiles/Develop/mononoki* /usr/share/fonts/truetype/mononoki/
```

フォントを再読み込み

```bash
fc-cache -fv
```

MATE端末を再起動したら、`Edit>ProfilePreferences`からフォントの設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451580/8752143e-0198-6c80-e800-95d0ee5b9e55.png)

Generalタブの`Use the system fixed width font`のチェックボックスを外し、先程インストールしたフォントを選んだら完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451580/28c1d380-e6a5-e077-58d3-811c050388ce.png)


---

VS Code？なんですか、それ？
今日もターミナル+VIMが捗ります。