今回は自分が愛用しているエディタ「SublimeText3」の画面分割について、独自のレイアウトにカスタマイズする方法を紹介する。
最終的には以下のレイアウトに分割する方法を紹介する。

コンテンツ
デフォルトで用意されている画面分割
SublimeText3は、元からいくつかのパターンで画面分割をおこなうことができるので、まずはそれらを紹介しておく。
2列に分割(option + command + 2)

3列に分割(option + command + 3)

4列に分割(option + command + 4)

2行に分割(option + shift + command + 2)

3行に分割(option + shift + command + 3)

2行2列に分割(option + command + 5)

設定ファイルを編集して自由なレイアウトを定義する
ここまで紹介したとおり、元々様々なレイアウトが用意されているが、設定ファイルを編集することで更に自由度の高いカスタマイズを行うことができる。
まずは「Preferences -> Key Bindings」を開く。

すると、JSON形式の設定ファイルが開かれるので、ファイル内に以下のコードを追記する。
※角括弧 [ この中 ] 内に追記する。
{
"keys": ["alt+shift+0"], //ショートカットキー
"command": "set_layout", //コマンド
"args":
{
"rows": [0.0, 0.5, 1.0], //列方向の分割位置
"cols": [0.0, 0.7, 1.0], //行方向の分割位置
"cells": [[0,0,1,1], [1,0,2,2], [0,1,1,2]] //画面の構成
}
}
ここまで書いて保存すれば、定義したショートカットを呼び出せば以下のように画面が分割される。

軽くコードの解説をしておこう。
まず、「keys」で任意のショートカットキーを定義することができる。
SublimeText3には多くのショートカットキーが定義されているので、重複のないよう注意が必要だ。
レイアウトについては「args」の値で定義される。
「rows(行)」には、0.0〜1.0までの値をカンマ区切りで複数定義することができ、行方向の分割位置を指定している。
「cols(列)」も、0.0〜1.0までで列方向の分割位置を指定。
最後に「cells」で分割構成を定義するが、こちらが少々難しい。
枠ごとに始点(左上)と終点(右下)を指定するのだが、例えば分割なし(1画面)の場合は「[0, 0, 1, 1]」となる。
配列内の1番目の値が始点の列、2番目が始点の行、3番目が終点の列、4番目が終点の行に該当する。
例えば以下の表(2行2列)のような構成にしたい場合、cellsに指定する値は次のとおりとなる。
[0, 0, 1, 1] | [1, 0, 2, 1] |
[0, 1, 1, 2] | [1, 1, 2, 2] |
これを使うと、次のようなレイアウトも自分で定義することができるようになる。

参考までにコードも載せておこう。
{
"keys": ["alt+shift+0"], //ショートカットキー
"command": "set_layout", //コマンド
"args":
{
"rows": [0.0, 0.3, 0.6, 1.0], //列方向の分割位置
"cols": [0.0, 0.3, 0.6, 1.0], //行方向の分割位置
"cells": [
[0,0,1,1], [1,0,2,1], [2,0,3,1],
[0,1,1,2], [1,1,2,2], [2,1,3,2],
[0,2,1,3], [1,2,2,3], [2,2,3,3],
] //画面の構成
}
}