投稿日 2016-08-23
著者 staff

Adobe Brackets 覚えると便利！ショートカットで作業を効率化しよう

Blogのカテゴリ制作ノウハウ

こんにちは。うっかりチカッパです。
前回ご紹介したAdobe Brackets。おすすめしたい機能がとても多くて一度では紹介しきれませんでした…。

その中のひとつがショートカット！
Bracketsのショートカットは必要なものだけ搭載されていると言われていますが、既存で十分なほど機能が備わっています。

また、新しいエディタに乗り換えた時に一番戸惑うところはショートカットと機能の違いです。
私は今までSublime Text派だったので、「これBracketsにもあるのかな…」とさぐりさぐり使っていたのですが、案外共通の機能やショートカットが多く、乗り換え後もすぐに親しめました。

また、ショートカットをカスタマイズすることができますので、今まで慣れ親しんだショートカットをBracketsでも使用することができます。

では、まずは私がよく使用しているショートカットからご紹介します。

覚えると便利なショートカット一覧

以下、環境はWindowsとなります。

コーディングに関する基本的なショートカット

コメントアウトする

Ctrl+/

行の先頭や末尾へ移動する

Ctrl+←もしくは→

インデントする

Ctrl+]

行の、どの箇所にカーソルが当たってもインデントしてくれるので便利です

インデントを解除する

Ctrl+[

上記同様、どの箇所にカーソルが当たっていても解除してくれます。

選択に関連するショートカット

1行まるごと選択する

Ctrl+L

選択した行を上下に移動する

Ctrl+Shift+↑もしくは↓

選択範囲と同じ文字列を複数選択する

Ctrl+B （Bを繰り返えせば、同じ文字列を見つけて選択を繰り返します。）

※↑Sublime Textでは Ctrl+Dにあたります。便利な機能ですよね！

上記の複数選択中、スキップしたい時

Ctrl+Shift+B

この部分だけは選択したくない…！という場面に出くわしたら落ち着いてShiftを足しましょう。

選択範囲を繰り返しコピー

Ctrl+D

矩形選択

Altを押しながらマウスの左でドラッグ

※↑Sublime TextではShift+マウスの右でドラッグにあたります。

検索に関連するショートカット

ファイル間を横断して検索する

Ctrl+Shift+F

行を指定して移動する

Ctrl+G

※↑Sublime TextではCtrl+Pの後に:行数を入力するコマンドに該当します。

文字を置換する

Ctrl+H

ファイル間を横断して置換する

Ctrl+Shift+H

ショートカットをカスタマイズする方法

デフォルトのショートカットを変更したい場合は、keymap.jsonというファイルにJSON方式で入力することでショートカットキーをカスタマイズすることができます。
上部のツールーバーから「デバッグ」→「ユーザーキーマップを開く」からkeymap.jsonを開きます。

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

keymap.jsonの二行目のドキュメント User Key Bindingsには詳しいショートカットの変更方法が書いてあります。JSONに慣れていないと一瞬躊躇してしまいますが、変更方法はとても簡単です。

基本的な記述方法JSON方式

{
"documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
"overrides": {
    "ショートカットキー":  "コマンドID"
  }
}

このように、希望のショートカットキーの組み合わせと、コマンドIDをセットすると、既存のショートカットが上書きできる仕組みになっています。

ショートカットのコマンドID一覧はGitHub上に公開されているBrackets Shortcutsから確認することができます。

例えば、「選択範囲と同じ文字列を複数選択する」をCtrl+Dへ変更したい場合は以下のように記述します。

{
"documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
"overrides": {
    "Ctrl-D":"cmd.addNextMatch"
  //「選択範囲と同じ文字列を複数選択する」ショートカットを変更してみました！
  }
}

ショートカットをSublime Textと同じにする

Bracketsでも慣れ親しんだSublime Textのショートカットを使いたい！
そんな時はショートカットをカスタマイズしてみましょう。

先ほどご紹介したUser Key BindingsにはSublime Textと同じショートカットにするためのJSONの記述方法がすでに用意されているので、これをまるっとコピーして”overrides”へ貼り付けます。

このページの下の方にあるImport Mac key bindings from Sublime TextもしくはImport Windows key bindings from Sublime Textの章から自分の環境に該当するJSONのセットをコピーしましょう。

私の作業環境はwindowsですので、以下のようにセットしてみました。

{
"documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
"overrides": {
    "Ctrl-Shift-L":  "edit.splitSelIntoLines",
    "Ctrl-Alt-Up":   "edit.addCursorToPrevLine",
    "Ctrl-Alt-Down": "edit.addCursorToNextLine",
    "Ctrl-Shift-D":  "edit.duplicate",
    "Ctrl-Shift-K":  "edit.deletelines",
    "Ctrl-D":        "cmd.addNextMatch",
    "Alt-Shift-1":   "cmd.splitViewNone",
    "Alt-Shift-2":   "cmd.splitViewVertical",
    "Alt-Shift-8":   "cmd.splitViewHorizontal",
    "Ctrl-R":        "navigate.gotoDefinition",
    "Ctrl-P":        "navigate.quickOpen"
    }
  }

慣れ親しんだショートカットに変更すれば、エディタの乗り換え後の入力ミスを防いでくれるので効率的にマークアップを進めることができますね。

ドキュメント：User Key Bindings（GitHub）

ドキュメント：Brackets Shortcuts（GitHub）