ワイヤード・パンチ

BracketsのEmmetのキーバインドを変更する方法。

Emmetといえば、htmlのタグ入力などを簡略化して、作業を高速化するのに便利なプラグインです。

たとえば上の写真のように、divと書いたあとにコマンドを入れると、自動的に<div></div>に変換してくれます。

しかし、デフォルトで設定されているコマンドがCtrl+Alt+Enterであり、これだと非常に使いづらいので変更したいのですが、変更に手こずってしまいました。

広告

正しいやり方が見つかるまでの経緯も書かれているので、さっさと解決法が見たいという方は、下の方まで移動してください。

なお、今回はBrackets バージョン1.7での話です。

(本当は最新版の1.11を使いたいのですが、1.8以降どのIMEを使っていても、予測変換ウインドウの位置がおかしくなる不具合があるので…。)

打ちやすいコマンドに変えたい。

デフォルトで設定されている変換コマンド、Ctrl+Alt+Enterだと、ボタン3つ同時押しかつ両手を使うことになるので、作業の効率が極端に落ちてしまいます。

よって今回は、Ctrl+Eに変更することにします。

これなら片手で入力できますし、Emmetの頭文字Eを取っているので、わかりやすいでしょう。

しかし面倒なことに、Ctrl+Eはすでにクイック編集に使われています。

そこで今回の手順としては、クイック編集をCtrl+Qにしたあとに、Emmetの変換コマンドをCtrl+Eに変えることにします。

クイック編集の方も、片手で入力できることには代わりないですし、Quickの頭文字のQを取っているのでわかりやすいでしょう。

keymap.jsonで標準機能のキーバインドを編集する。

Bracketsにもいちおう、各コマンドのキーバインドを変更する機能はあるのですが、他のツールのように、キーバインド変更画面というのは備わっていません。

少々面倒ではあるのですが、keymap.jsonというテキストファイルを開いて、それを直接編集することで、上書き保存時にキーが変更されます。

keymap.jsonを開くには、画面上部のメニューから「デバッグ」→「ユーザーキーマップを開く」で開くことができます。

いざここに書き込みたいところですが、どのように書き込めばいいのでしょう。

overriresの欄に、「キーの組み合わせ: コマンド名」という形式で書くのですが、やみくもにコマンド名を入れても変更はできません。

Brackets Shortcuts · adobe/brackets Wiki · GitHub

Bracketsショートカット集 – Qiita

でも、上記サイトにあるショートカット集を見れば、コマンド名が一目瞭然です。

公式ドキュメントもあるので合わせてリンクしましたが英語なので、下の方の日本語まとめを見るといいでしょう。

それによると、今回変えたいコマンドはまずクイック編集なので、そのコマンド名は「navigate.toggleQuickEdit」であることがわかりました。

つまり、keymap.jsonには以下のように書けばいいわけです。

{
	"documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
	"overrides": {
		"Ctrl-Q": "navigate.toggleQuickEdit"
	}
}

これを上書き保存すれば、クイック編集のコマンドがCtrl+Qに変わるはずです。

Emmetのコマンド名がわからない。

Brackets標準のコマンドに対しては上記のサイトからコマンド名がわかるのですが、Emmetはプラグインなので、さすがに載っていません。

コマンド名がわからなければ、キーバインドの変更しようがありません。

そこで次に思いついた方法は、あまり良くないのですが、Emmetのファイルを直接編集する方法

しかし、結論から言いますと、これは失敗です。でも、いちおう経緯を書いておきます。

まずはプラグインの入ってるフォルダを開くために、上部メニューから「ヘルプ」→「拡張機能のフォルダーを開く」へ進みます。

エクスプローラが開くので、「user」→「brackets-emmet」→「keymap.json」へと進んでいきます。

すると、先程のBrackets本体のkeymap.json同様に、コマンド名とキーバインドがずらずら並んだファイルが開かれます。

その中に変換コマンドに当たる行も含まれています。

"expand_abbreviation": "Ctrl-Alt-Enter"

このキーバインドの部分をCtrl+Eに置き換えて、上書き保存したのちにBracketsを再起動してみました。

すると…なぜかCtrl+Eが効きません。上部バーからEmmetのコマンド一覧を開いても、先程のキーバインドがなぜか空白になっています。

もともとCtrl+Eはクイック編集でしたが、それはQに移動させました。だからEは空いているはずなのに…。

なお、Ctrl+0とかだったら変更できました。

つまり、もともとあったコマンドには割り当てられないということでしょうか?

とりあえず、Emmetのkeymap.jsonは、もとの状態に戻しておきましょう

Emmetのコマンドも、Brackets本体のkeymap.jsonから。

Emmetのファイルをいじってもダメ、コマンド名もわからない。

このままお手上げかと思ったのですが、便利なプラグインがありました。

Bracketsのショートカットを変更してカスタマイズする方法 – Qiita

上記のサイトでも紹介されているのですが、「Brackets Key Remapper」というプラグインを使えば、標準機能だけに限らず、Emmetなどのようにプラグインで追加されたコマンドに対しても、コマンド名を調べることができます

上記プラグインをインストールしたあとに、上部メニューから「デバッグ」→「環境設定ファイルを開く」へ進みます。

すると、brackets.jsonが開かれるのですが、その中にはすべてのコマンドに対してのコマンド名が、自動的に追記されています。

その中を探っていると、Ctrl+Alt+Enterに割り当てられているコマンド、つまりEmmetの変換コマンドの名前が「io.emmet.expand_abbreviation」であることがわかりました。

これさえわかれば、あとはkeymap.jsonでキーバインドを変更できます。

もう一度Brackets本体のkeymap.jsonを開いて、下記のように書き換えましょう

{
	"documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
	"overrides": {
		"Ctrl-Q": "navigate.toggleQuickEdit",
		"Ctrl-E": "io.emmet.expand_abbreviation"
	}
}

上書き保存すれば、変換コマンドがCtrl+Eに変わっているはずです。

これでようやく、変換が非常にやりやすくなりました。作業が捗ります。

余談。

変換コマンドをCtrl+Eに変えてから長らく使い続けていたのですが、先日の記事の途中にも書いたように、最近になってOSを再インストールせざるを得ない事態に陥ってしまいました。

なんとかOSは復旧したのですが、あらゆるデータがリセットされてしまい、Bracketsの設定も吹っ飛んだため、今回のようにキーバインドのやり方も探し直すハメに。

キーバインドの変更は長いことやっておらず、やり方をすっかり忘れていたため、改めて調べ直し、今回の記事にまとめるに至ったわけです。

何度もやる作業じゃないにしても、ちょっとややこしそうな作業だなと思ったら、まとめるくせをつけた方がいいかもしれません。