知らなきゃ絶対損するPCマル秘ワザ

daredemopc.blog.fc2.com

まえおき

私は英語が苦手なので Sublime Text は日本語化してあります。
そのため、キャプチャや解説も日本語化した状態のものです。

変則的な分割をしたい

サイト制作のコーディングをする時は上のような画面分割が好みです。

Aptana Studio を使っていた時は
タブをドラッグ＆ドロップするだけで好きな形に分割できました。

一方、Sublime Text の画面分割にはそれらしいメニューがない…。
初期設定のままではできないようです。


しかし、そこはカスタマイズ性に定評がある Sublime Text！
この変則分割を実現する方法がありました。

変則分割のショートカットキーを作る

Origami などのプラグインを使う方法もあるようですが
思い立ったらすぐ一発で変則分割したいので
この分割自体を Sublime Text のショートカットキーに登録します。

1. 「基本設定」→「キーバインド - ユーザ」と進みます。
   
   
   
2. 下記のように記述して上書き保存。
   例では、ショートカットキーを「Alt + Shift + 0」にしています。
   （画面分割に関する記述の詳細は次項で解説します）
   

   [
     {
       "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]] //画面の構成
       }
     }
   ]

   
   
3. 「Alt + Shift + 0」で画面分割ができるようになりました。
   

「rows」「cols」「cells」について詳しく

他の形で分割したい人もいると思うので
「rows」「cols」「cells」の設定について少し詳しく見ていきます。

[
  {
    "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]] //画面の構成
    }
  }
]

まず、「rows」。
列（縦）方向の分割線の位置を、上を「0」，下を「1」として指定します。
例では、上，中央，下 で区切ったので、「"rows": [0.0, 0.5, 1.0]」と記述。
HTML の テーブルタグ <tr> をイメージすると分かりやすいかも。


次に、「cols」。
行（横）方向の分割線の位置を、左を「0」，右を「1」として指定します。
例では、左，左から70％，右 で区切ったので、「"cols": [0.0, 0.7, 1.0]」と記述。


最後に、「cells」。
分割画面の構成を 行（横），列（縦） の分割線を使って指定します。
分割線は始点を「0」として何本目なのかを数えます。
例の「GROUP1」では、始点「行0，列0」，終点「行1，列1」としたので「[0, 0, 1, 1]」と記述。
他も同様に指定し、「"cells": [[0,0,1,1], [1,0,2,2], [0,1,1,2]]」となります。


少し複雑ですが
理屈が分かればそんなに難しくありません。
これで、自分好みの分割ができるはず！