uitspitss blog

プログラミングと音楽とエッセイ ※記載内容は個人の見解であり、所属する組織とは一切関係がありません。

QMK + Rectangle + yabai + skhd で行うウィンドウマネージング

keyboard QMK yabai skhd ウィンドウマネージャ ウィンドウマネージング Rectangle

久しぶりにキーボードネタです。 みなさんはウィンドウの大きさを頻繁に変えたり、画面上に隙間なく配置したりするのが好きですか？ 私は、プログラムを書いたりする都合上、ターミナルとエディタとウェブブラウザを一度に見られるように配置しています。

f:id:uitspitss:20200624061141p:plain
私のウィンドウ配置

このような感じで…

今回は、少しこだわりのウィンドウ配置をするときのウィンドウマネージングについて書きます。

環境

方針

  1. Rectangle で設定したい・設定できるウィンドウ配置設定を設定する
  2. Rectangle にないウィンドウ配置設定を yabai + skhd で設定する
  3. QMKでショートカットを設定する

以上の段取りで進めていきます。

設定

1. Rectangle で設定したい・設定できるウィンドウ配置設定を設定する

後で設定する、yabai + skhd では１つのキーバインド*1に「画面の左半分→画面の左３分の１→画面の左３分の２」というようなサイクリックな動作ができないので、よく使う

  • 画面左半分系
  • 画面右半分系
  • 最大化
  • アンドゥ

等の Rectangle で設定できるものは、 Rectangle で設定してしまったほうがよいかと思います。というのも、ラップトップ単体では最初に出した画像のような複雑なウィンドウ配置は行わないですが、画面半分や最大化は使うことがよくあるので、設定しやすい Rectangle で設定しておいたほうがよいと思われます。

私の設定は、下図のような感じになっています。

f:id:uitspitss:20200624072306p:plain
Rectangle 設定

また、同様のソフトとして 「Magnet*2」もあるかなと思うのですが、画面左半分系等がサイクリックに動かない点が、私の利用法で合っていなかったので、今回は 「Rectangle」を使っています。

2. Rectangle にないウィンドウ配置設定を yabai + skhd で設定する。

では、残りの設定を yabai + shkd で設定していきます。 ここで、簡単に yabai と shkd について説明すると、

  • yabai
    • コマンドラインを使用する強力なウィンドウマネージャー
    • 基本はタイル型ウィンドウマネージャーですが、今回はフロート型として使います
  • shkd

f:id:uitspitss:20200624061141p:plain
私のウィンドウ配置

さて、上図のターミナル、エディタ、ウェブブラウザはそれぞれ

  • ターミナル
    • 横方向サイズ: 画面横方向の６分の１
    • 縦方向サイズ: 画面縦方向と同サイズ
    • 左端は画面左
  • エディタ
    • 横方向サイズ: 画面横方向の２分の１
    • 縦方向サイズ: 画面縦方向と同サイズ
    • 左端は画面左６分の１
  • ウェブブラウザ
    • 横方向サイズ: 画面横方向の３分の１サイズ
    • 縦方向サイズ: 画面縦方向の２分の１サイズ
    • 上端は画面上、画面上２分の１

という感じになっているので、 Rectagle のみだと、エディタなどはウィンドウ移動を別にしなくてはいけないです。 そのあたりの操作を yabai + shkd で代わりにやってもらいます。

yabai + shkd のインストールや設定については、

yabai の設定ファイル（~/.config/yabai/yabairc）は、

#!/usr/bin/env sh

# general space settings
yabai -m config layout                       float
yabai -m config top_padding                  0
yabai -m config bottom_padding               0
yabai -m config left_padding                 0
yabai -m config right_padding                0
yabai -m config window_gap                   0

echo "yabai configuration loaded.."

shkd の設定ファイル（~/.config/skhd/skhdrc）は、

# move window to 6:6:0:0:1:6
f13 : yabai -m window --grid 6:6:0:0:1:6

# move window to 6:6:1:0:3:6
f14 : yabai -m window --grid 6:6:1:0:3:6

# move window to 6:6:0:0:1:6
f15 : yabai -m window --grid 6:6:4:0:2:3

# move window to 6:6:1:0:3:6
f16 : yabai -m window --grid 6:6:4:3:2:3

# move window to 6:6:4:0:2:2
f17 : yabai -m window --grid 6:6:4:0:2:2

# move window to 6:6:4:2:2:2
f18 : yabai -m window --grid 6:6:4:2:2:2

# move window to 6:6:4:4:2:2
f19 : yabai -m window --grid 6:6:4:4:2:2

としています。 （shkd の設定ファイルに f13 のキーバインドがすでに入っていますが、ここまでは適当なキーバインドに当てて設定して大丈夫です。）

3. QMKでショートカットを設定する

QMK は自作キーボード等のキーボードにキーマップを当てるソフトです。 Rectangle で設定したウィンドウ操作は、ラップトップ単体でも使う機会がありそうなので、Alt などのモディファイヤキーの組み合わせたキーバインドにしています。 yabai + shkd で設定したウィンドウ操作は、ラップトップ単体では特に必要ないので、外付けキーボードを使用したPCで使う前提で、F13 ~ F19 にマップしています。

設定の際に役に立つキーコード集はこちら → https://docs.qmk.fm/#/keycodes

そして、キーボードの keymap.c は

// Defines for task manager and such
#define KC_SSFL   LGUI(KC_PERC)
#define KC_SSCB   LCTL(LGUI(KC_DLR))
#define KC_WMHL   LALT(LGUI(KC_LEFT))
#define KC_WMHR   LALT(LGUI(KC_RIGHT))
#define KC_WMFS   LALT(LGUI(LSFT(KC_F)))
#define KC_WM1    KC_F13  // LALT(LCTL(KC_LEFT))
#define KC_WM2    KC_F14  // LALT(LCTL(KC_RIGHT))
#define KC_WM3    KC_F15  // LALT(LGUI(LCTL(KC_UP)))
#define KC_WM4    KC_F16  // LALT(LGUI(LCTL(KC_DOWN)))
#define KC_WM5    KC_F17  // LALT(LGUI(LCTL(LSFT(KC_UP))))
#define KC_WM6    KC_F18  // LALT(LGUI(LCTL(LSFT(KC_RIGHT))))
#define KC_WM7    KC_F19  // LALT(LGUI(LCTL(LSFT(KC_DOWN))))
#define KC_WMUD   LALT(LGUI(KC_Z))

// 中略

[_LOWER] = LAYOUT( \
  KC_EXLM, KC_AT,   KC_HASH, KC_DLR,  KC_PERC,      KC_CIRC, KC_AMPR, KC_ASTR, KC_LPRN, KC_RPRN, \
  KC_TILD, KC_WMFS, KC_WMHL, KC_WMHR, KC_LCBR,    KC_RCBR, _______, _______, KC_PIPE, KC_DQT,  \
  KC_LALT, KC_WMUD, KC_WM1,  KC_WM2,  KC_PLUS,    KC_UNDS, KC_LEFT, KC_DOWN, KC_UP,   KC_RGHT, \
                    _______, _______, _______,      _______, _______, _______                    \
),

// 中略
[_ADJUST] =  LAYOUT( \
  KC_F1,   KC_F2,   KC_F3,   KC_F4,   KC_F5,        KC_F6,   KC_F7,   KC_F8,   KC_F9,   KC_F10,  \
  KC_F11,  KC_F12,  KC_SSCB ,KC_SSFL ,_______,      _______, KC_WM5,  KC_WM6,  KC_WM7,  KC_WM3, \
  RESET,   RGB_TOG, RGB_MOD, RGB_HUI, RGB_HUD,      RGB_VAI, RGB_VAD, RGB_SAI, RGB_SAD, KC_WM4, \
                    _______, _______, _______,      _______, _______, _______                    \
)

という感じにしています。（以前にモディファイヤキー組み合わせのキーバインドを入れてましたが、Fキーに差し替えました）

最後に

この記事を書くまで、Rectangle ではなく、 Spectacle https://github.com/eczarny/spectacle を使っていたのですが、 Spectacle のページを見に行ったら、「メンテしてないから、Rectangle を使って」という旨のノートが入っていたので、 移行しました。 以上、ウィンドウマネージングの記事でした。

*1:ショートカットキーとも言われますが、この記事ではキーバインドに統一します

*2:https://apps.apple.com/jp/app/magnet-%E3%83%9E%E3%82%B0%E3%83%8D%E3%83%83%E3%83%88/id441258766?mt=12