Mac をやりすぎて Hack になったわね

自分を hacker だと信じて止まない [^1] 一般男性が Mac の画面を広くする記事です。

↓ デスクトップ画面 (常時 **フルスクリーンに匹敵**)

<img width="1440" alt="vscode.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/37df9e31-6928-aec3-df4c-cc3e4f4db383.png">

1. [x] Dock を隠す ([Spacebar] or [simple-bar])
2. [x] ショートカットを設定する ([skhd](https://github.com/koekeishiya/skhd), [Karabiner-Elements](https://karabiner-elements.pqrs.org/))
3. [x] アプリのタイトルバーを (可能な限り) 消す (VSCode, Firefox, qutebrowser)

パクりタイトルでごめんなさい。みんなで優勝しましょう。

# 1. 画面の上下を整理する

## 1-1. Dock を隠す

`Automatically hide and show the Dock` という設定があります[^2]:

<img width="668" alt="dock.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/73a459fc-7c41-8410-a322-e36897c559cc.png">

## 1-2. メニューバーを変える (オプショナル)

これは好みの問題ですが、メニューバーをサードパーティ製ツールに変更できます。

* Mac のメニューバー (デフォルト):
![Screen Shot 2022-02-07 at 18.27.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/ce7b0ec8-6fa1-63bf-456b-a5f2b03bb46a.png)

* [Spacebar]（簡素）:
<img width="1440" alt="dead_title_bar.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/1ed7cfd8-79e0-0bd2-5a9d-93d58c90d06e.png">

* [simple-bar]（最もカラフル、 [yabai] (後述) の導入必須）:
![Screen Shot 2021-09-02 at 21.57.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/86319936-3731-bb81-d978-81186796f120.png)


[Spacebar]: [Spacebar](https://github.com/somdoron/spacebar)
[simple-bar]: https://www.simple-bar.com/en/
[yabai]: https://github.com/koekeishiya/yabai

Mac のメニューバーを隠すには:

* [x] Automatically hide and show the menu bar
<img width="669" alt="hide_menu_bar.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/b0f87a18-e08f-ec40-4d33-23dca01db588.png">

# 2. キーマップを設定する

以下ツールがおすすめです (mac 専用):

* [skhd](https://github.com/koekeishiya/skhd): キー操作でコマンド実行
* [Karabiner-Elements](https://karabiner-elements.pqrs.org/): 特殊なキーマッピングを設定する

## 2-1. CapsLock をハイパーキーに ([Karabiner-Elements](https://karabiner-elements.pqrs.org/))

CapsLock キーが死んでいたので、 `Ctrl+Option+Shift+Command` にリマップしました:

![Screen Shot 2022-02-07 at 18.42.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/9288f655-2f65-ffcd-6152-d82058e2f3b6.png)

> `Add rule` をクリックしたら出てきた設定でした。

## 2-2. Dock / menu bar にフォーカスする

* `CapsLock+[` でメニューバーにフォーカスする
* `CapsLock+]` で Dock にフォーカスする

環境設定 (System Preferences) から設定できます:

<img width="668" alt="dock_menubar.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/084e8f37-be46-6c73-4e15-e4a81b79f276.png">

## 2-3. ワンキーでアプリにフォーカスする

[skhd](https://github.com/koekeishiya/skhd) を導入して、 `~/.skhdrc` を書きます:

```sh
# <キー操作>: <実行コマンド>
ctrl + shift + cmd + alt - z : open -a 'Finder'
ctrl + shift + cmd + alt - x : open -a 'Kitty'
ctrl + shift + cmd + alt - c : open -a 'CotEditor'
ctrl + shift + cmd + alt - s : open -a 'Visual Studio Code'
ctrl + shift + cmd + alt - d : open -a 'Discord'
ctrl + shift + cmd + alt - s : open -a 'Slack'
ctrl + shift + cmd + alt - a : open -a 'Firefox'
ctrl + shift + cmd + alt - q : open -a 'Qutebrowser'
# ~~~~~~~~~~~~~~~~~~~~~~ この部分は CapsLock
```

`skhd --reload` で設定が反映されます。

# 3. タイトルバーを取り除く

アプリ毎に特別な設定が必要だと思います。

## 3-1. ターミナル

### Kitty

長いライブ変換では表示崩れが起きるものの **安定** していておすすめなターミナルです。

設定ファイルに以下を加えます:

```~/.config/kitty/kitty.conf
hide_window_decorations   yes
macos_option_as_alt       no
```

早速タイトルバーが消えました。今度は、デスクトップ全体としては:

<img width="1440" alt="kitty.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/0d180ab8-c028-7115-d259-a07545aef367.png">

### [wezterm](https://wezfurlong.org/wezterm/)

日本語入力 ~~はできない~~ も完全になった GPU 駆動の高速ターミナルです。

タイトルバーとタブバーを消すには:

```sh
mkdir ~/.config/wezterm
vim ~/.config/wezterm/wezterm.lua
```

```lua:~/.config/wezterm/wezterm.lua
local wezterm = require 'wezterm';
return {
    enable_tab_bar = false,
    window_decorations = "NONE",
}
```

![Screen Shot 2022-02-07 at 18.53.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/78f8a438-6da6-646f-6d21-aa2fad695fa6.png)

ただしタイトルバー (window decoration) を消すと、yabai の力を持ってもリサイズできなくなります。 **タフなやつだぜ** 。

> コメントで教えていただいたのですが、 `window_decorations = "RESIZE"` に設定すれば良いそうです！

ウィンドウの初期サイズを FullHD モニタのフルスクリーンにしました:

```lua
local wezterm = require 'wezterm';

return {
    font = wezterm.font_with_fallback({
        "SauceCodePro Nerd Font",
    }),
    font_size = 12.5,
    initial_cols = 260,
    initial_rows = 65,
    enable_tab_bar = false,
    window_decorations = "NONE",
}
```

### [Alacritty](https://github.com/alacritty/alacritty)

日本語入力が ~~冴えない~~ バッチリになった GPU 駆動の高速ターミナルです。

タイトルバーを消すには:

```sh
mkdir ~/.config/alacritty
vim ~/.config/alacritty/alaccrity.lua
```

```yaml:~/.config/alacritty/alacritty.yaml
window:
  decorations: false
```

冴えてますね。

<img width="528" alt="alacritty.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/e5743319-3432-9232-9abe-8818394b8a7c.png">

### iTerm

GUI からの設定を頑張ります (`Cmd+,`)。

## 3-2. エディタ

### VSCode

[Customize UI](https://github.com/iocave/customize-ui) という拡張を使います。拡張のインストール後、 [Settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations) に以下を追加します:

```jsonc
{
  // ~~
  "window.titleBarStyle": "native",
  "customizeUI.titleBar": "inline",
  "customizeUI.activityBar": "wide",
  // ~~
}
```

以下のようになります。タブの厚さの調整法などは分かりません。

<img width="1440" alt="vscode.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/37df9e31-6928-aec3-df4c-cc3e4f4db383.png">


### Sublime Text 3

Sublime は VSCode よりも軽くて良いと思います。ただ、タイトルバーを消す方法は分かりませんでした。

奥義としては、 **フルスクリーンにすることでタイトルバーを消せます** 。また、 [yabai](https://github.com/koekeishiya/yabai) を使えば、 macOS でもアニメ無しで (一瞬で) 仮想デスクトップ間を移動できます。

> [SIP (System Integrity Protection) を無効化](https://github.com/koekeishiya/skhd) した上で [skhd](https://github.com/koekeishiya/skhd) から `yabai -m space --focus 1` などを呼ぶ。

## 3-3. ブラウザ

タイトルバーとアドレスバーを取り除いていきます。

### Firefox

拡張にツリー型タブがあるブラウザです。設定方は、おそらく Firefox の **バージョンによって変わります** (?) 。

2020 年 4 月 (ver. 75.0) 時点では、 `userChrome.css` (要検索) というファイルを有効にして、作成します:

```css:userChrome.css 
/* ~/Library/Application Support/Firefox/Profiles/<name_of_your_profile>/chrome/userChrome.css */

/* hide the tab bar */
#TabsToolbar {
  visibility: collapse !important;
}

/* hide the header of the side bar (Tree Style Tab) */
#sidebar-header {
  visibility: collapse;
}

/* Hide address bar and addon icons */
/* DO NOT USE THIS IF YOU CANT DO WITHOUT THEM */
#TabsToolbar {visibility: collapse;}
#navigator-toolbox {visibility: collapse;}
```

[ツリー型タブ](https://addons.mozilla.org/ja/firefox/addon/tree-style-tab/) (Firefox 限定のアドオン) と組み合わせて、以下のように:

<img width="1440" alt="firefox_css.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/215314a8-6f27-7e7b-83eb-3384f9d246fe.png">

> * https://www.userchrome.org/
> * [TreeStyleTab](https://github.com/piroor/treestyletab) > [Wiki](https://github.com/piroor/treestyletab/wiki) > [Code snippets for custom style rules](https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules)

### Chrome

ツリー型タブが無いので、タブバーを消しても仕方がないと思いました。

### qutebrowser

ちょっと大変です。 [config.py](https://www.qutebrowser.org/doc/help/configuring.html#configpy) に追記します:

```py
c.window.hide_decoration = True
```

ただし、この設定が `True` の間は、ウィンドウの移動・リサイズができませんでした (`yabai` を使っても) 。そこで、上手くアプリをリサイズ・配置してから、 `True` に設定します。

> 何度も失敗するはずなので、コマンドラインからの `:set window.hide_decoration <value>` も役立つと思います。

<img width="1440" alt="qute.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/e3b27686-64b6-d848-79a6-304cc5b69df1.png">

#### Vivaldi

少しずつ良くなっているブラウザです。タブツリーこそ無いものの、タブスタック (1 階層までのタブのグルーピング) があります。

こんな画面を経由して、カスタム CSS を有効にします:

<img width="824" alt="Screen Shot 2020-05-13 at 8.22.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/28dbb2af-ac35-a352-348f-211c866f7934.png">

CSS の内容としては:

```css:vivaldi.css
/* 1. Visit `vivaldi://experiments` and check "Allow for using CSS modifications" */
/* 2. Open preferences and set the "CUSTOM UI MODIFICATIONS" directory */
/* 3. Add this file to the directory and restart Vivaldi */

/* Hide title bar */
#header { display: none; }

/* Set panel width */
#panels-container { width: 220px !important; }

/* Hide header of panels (https://forum.vivaldi.net/topic/39358/hide-header-title-for-vivaldi-panels) */
.panel > header h1  { display: none; }
.panel > header     { padding-top: 0; padding-bottom: 0; }
.webpanel-header h1 { display: initial !important; }

```

最終結果:

<img width="1440" alt="vivaldi_css.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594390/a611173e-bb53-8b16-c4d0-a1f600466244.png">

バグも直ってきた (?) ようですし、しれっと画面分割ができます。良さそう。

## 3-4. Finder

タイトルバーの消し方が分かりません。せめて、フルパスを表示させます:

```sh
$ defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES
$ killall Finder # 再起動
```

# 4. まとめ

常時フルスクリーンのような画面を作ることにより、 Mac の縦長ディスプレイ (16:10) が持つポテンシャルを開放しました。

[^1]: ネタです。微塵も思ったことはありません。
[^2]: この画面の `Prefer tabs when opening windows: True` もおすすめです。たとえば、 Preview でファイルを開くとき、タブが増えていくようになります。 Finder の設定ではないのですね。
[^3]: yabai は Mac の tiling WM です。