Karabiner-Elements + テンキーでショートカット設定をする

こんにちは！
今回の記事は、普段の開発で煩わしさを感じていたアプリケーションの立ち上げを、Karabiner-Elements + テンキーを使って解消した話になります。

この記事で紹介すること

• Karabiner-Elements + テンキーを使ったショートカットの設定方法
• 実際に設定しているアプリケーションの紹介

何に煩わしさを感じていたか？

はじめにも書いた通り普段よく使用するアプリケーションの立ち上げに対し煩わしさを感じていました。
具体的は以下のような作業です。

• 開発したページの画面確認を行うsandboxページが複数あるため、環境毎にURLを変更する必要があるとき
• PullRequest作成時に使用しているQuickTime Playerの画面収録機能を起動するとき
• Maptureという画面キャプチャを行ってくれるアプリケーションのショートカットをたまに忘れたとき
• Macデフォルト機能である、キャプチャのクリップボード保存のショートカットなどの押すキーが多いとき

これらの課題を解消するべく、はじめはKarabiner-Elementsを使ってショートカットを設定しようとしたのですが、普段使用しているキーボードにショートカットを設定すると、またややこしくなりそうです。
そのためテンキーを用意し、テンキーからの入力に対してショートカットを割り当てようという考えにいたりました。

テンキーは無線タイプのものがよかったのですが、まずは実際に設定できるかの調査をしたかったのと、できるだけ費用を抑えたいという理由により有線タイプのテンキーを探しました。

結果以下の商品を見つけました。なんと806円（2024/2/15現在）で購入することができました💴
やったね！
https://www.amazon.co.jp/dp/B00HL8Z6KS

ひとつ購入前の懸念事項として、自分は仕事でもプライベートでもMacを使用しているので、Macに対応しているテンキーが欲しかったのですが、Amazonの商品ページを見てみるとMacについての記載がないためMacには対応していないように見えました。

しかしELECOMの公式ページにあるOS対応表を確認したところ、Macにも対応していそうでしたので購入を決めました。

結果としてMacでも問題なく作動したため、こちらの商品を使って設定を進めました。
自分の環境も記載しておきます。

- チップ: Apple M1 Pro
- OSバージョン: macOS Sonoma 14.0
- Karabiner-Elements バージョン: 14.3.0

（今更ながら）Karabiner-Elements is なに

今更ですが簡単にKarabiner-Elementsの説明をさせていただくと、Karabiner-ElementsはmacOS用のキーボードをカスタマイズできるアプリケーションになります。
これまで文字入力の切り替え（左commandで英字入力、右commandでかな入力）や、キーの割当を変更する（caps lockをcontrol）といった基本的な設定しかしていませんでしたが、自分は長いこと使用しています。

https://karabiner-elements.pqrs.org/

設定

というわけで早速Karabiner-Elementsを使って設定を行っていきます。

ショートカットを設定するまでの手順

1. ショートカットを設定するファイルの準備する
2. テンキーのキーコードの確認する
3. ルールの追加
4. ルールの適用

ショートカットを設定するファイルの準備する

まずはファイルの準備です。
Karabiner-Elementsをインストールすると、ユーザーディレクトリ配下のconfig内に以下のディレクトリが作成されるため、ここにJSONファイルを作成します。
/Users/ユーザー/.config/karabiner/assets/complex_modifications/hotkeys.json
※ファイル名には特に指定がないようなので、今回は、hotkeys.jsonというファイル名で作成しました。

テンキーのキーコードの確認する

次にどのキーが押されたかを判定するために、キーコードの確認を行います。
キーコードは、Karabiner EventViewerというアプリケーションを使用することで確認できます。
Karabiner EventViewerを起動し、テンキーの「0」を入力すると以下のようにキーコードを表示してくれます。

テンキーで「0」を押下した際は、keypad_0というキーコードが送られてくるようなので、こちらで設定します。

ルールの追加

次にルールの追加を行っていきます。
はじめに作成したJSONファイルにルールを追加していくことで、ショートカットの設定を行えるようになります。

ここでは、テンキーの「1」を押したら、Chromeが開き、https://www.google.com にアクセスするという設定を追加します。

公式ドキュメントもあるのですが、自分は以下の記事を参考にさせていただきました！
https://qiita.com/s-show/items/a1fd228b04801477729c

最低限必要な記述は以下になります。

{
  "title": "このファイルの説明を入力", // ここに書いた値が、このあと出てくる作成した設定の追加画面に表示されます。
  "rules": [
    {
      "description": "sandboxページをChromeで起動", // こちらもここの書いた値が、設定の追加画面に表示されます。
      "manipulators": [
        {
          "type": "basic", // 基本はbasicで大丈夫そう。上記の参考URLで別の設定についての説明があります。 https://qiita.com/s-show/items/a1fd228b04801477729c#type
          "from": {
            "simultaneous": [{ "key_code": "keypad_1" }] // 先程取得したキーコードをここに指定。
          },
          "to": [
            {
              "shell_command": "open -a 'Google Chrome' https://www.google.com/" // 上で指定したキーコードが押されたときの挙動を記入。
            }
          ]
        }
      ]
    },
    {
      // 別のルールがあればここに追加していく
    }
  ]
}

上記コードを見れば理解できると思いますが、rulesにあるmanipulatorsの配列に対し、ルールを追加していくイメージになります。

ルールの適用

JSONファイルに上記コードを入力し、Karabiner-Elementsを開きます。
Complex modificationsタブをクリックすると、適用されたルールの一覧が表示されます。

左下にある「Add rule」ボタンをクリックすると、先ほど追加したルールが表示されるので、「Enable」ボタンをクリックします。

すると選択したルールが適用され、このショートカットが使用できるようになります！

自分が設定したアプリケーション

最後に自分が実際に設定しているショートカットの紹介をしたいと思います。
例として、shell_command部分のコードも記載しておきます。

sandboxページをChromeで立ち上げる

こちらは例であげたものと同様です。
ブックマークしておけばよいのでは？という声も聞こえてきそうですが、キー1つで各URLを開けるのは想像以上に快適でした。

"shell_command": "open -a 'Google Chrome' https://www.google.com/"

キャプチャ（クリップボードにコピー）

こちらはMacのデフォルト機能であるキャプチャをクリップボードに保存するものです。
ショートカットキーでいうと、command + control + shift + 4になります。

デフォルト機能は、Appleが開発したAppleScriptというスクリプト言語を使用して設定できるようです。

"shell_command": "osascript -e 'do shell script \"/usr/sbin/screencapture -c -s\"'"

Mapture

Maptureは撮ったキャプチャを画面上に表示できるアプリケーションになります。
https://apps.apple.com/us/app/mapture/id1671995907

自分はマークアップを行う際にMaptureを使ってデザインを画面上に表示して開発を進めたりしています。
キャプチャ上でスクロールすることで透明度を変更できるので、デザインにずれがないかを確認することができとても便利なアプリケーションです。

"shell_command": "open -a 'Mapture-0.0.16.app'"

shell_commandに登録するアプリケーション名は、アプリの「情報を見る」→名前と拡張子に表示されているものを登録すれば良さそうでした。

QuickTime Player（画面収録）

自分はよくPullRequestを送る際に画面のキャプチャをQuickTime Playerで収録するのですが、新規画面収録を立ち上げるまでがとても煩わしかったため、以下の一連の流れをショートカットに登録しました。

QuickTime Playerを起動
↓
はじめに立ち上がるファイル選択のダイアログ？をキャンセル
↓
上部メニューから「新規画面収録」を選択

今回ショートカットを設定するにあたり、シェルコマンド弱者な自分はこの複数のコマンドを登録するのが一番てこずりました😇
が、ChatGPTに質問したところ即返事をくれました。

"shell_command": "osascript -e 'tell application \"QuickTime Player\" to activate'&& osascript -e 'tell application \"System Events\" to key code 53' && osascript -e 'tell application \"System Events\" to tell process \"QuickTime Player\" to keystroke \"n\" using {control down, command down}'"

こんな感じで普段よく使用しているアプリケーションの登録を行いました。

最後に

いかがだったでしょうか？
個人的には、ショートカットを設定したことにより、はじめに抱えていた課題を解決できたように思えます。
特にsandboxページをキー1つで立ち上げられるようになったことと、QuickTime Playerの起動は設定して本当に良かったと思っています！

宣伝

スペースマーケットでは現在エンジニアを募集しております！
ちょっと話を聞いてみたいといったようなカジュアルな面談でも構いませんので、ご興味のある方は是非ご応募お待ちしております！