Sublime Text入門（3）
特におすすめしたい、Sublime Textのパッケージ
Sublime Textのさまざまなパッケージの中から、利用シーン別におすすめのものを紹介。また、Sublime Textのパッケージの基本的な使い方として導入方法や有効化／無効化、削除の方法も説明する。
今回はSublime Textのさまざまなパッケージの中から、特におすすめのものを紹介する。
Sublime Textのパッケージ
Sublime Text自体はオープンソース・ソフトウェアではないが、内部機能を操作するためのAPI（API Reference - Sublime Text 3 Documentation）が公開されている。また、メジャーなスクリプト言語であるPythonのランタイムが搭載されているので、誰でもパッケージを作成できる。
そのため、パッケージの作成は盛んで、2014年12月時点登録されている公式パッケージは2600以上となっている（Package Control - the Sublime Text package manager）。その内容は、機能の追加、入力補完、ファイル操作やネットワークへの接続など多岐にわたっているので、それらを組み合わせることで、Sublime Textをより効率的に活用できるようになる。
パッケージの導入方法
第1回で解説しているので、そこを参考に設定を行う。バージョン2と3では設定するコードが違うので注意すること。
インストールしているパッケージの確認方法
コマンドパレットでPackage Control: List Packagesを選択すると、インストールしているパッケージの一覧が表示される。
パッケージの無効化
パッケージのバッティングなどで予期しない挙動が起きた場合など、確認するために一時的に無効化する場合は、コマンドパレットでPackage Control: Disable Packagesを選択すると有効なパッケージの一覧が表示されるので、そこで選択すると無効化される。また、Preferencesのignored_packagesの項目に追記することでも無効化できる。
パッケージの有効化
上記で無効化したパッケージを再度有効化する場合。また、アプリケーションの起動時にプラグインの読み込みや自動更新の不調などが発生したときに、まれに自動的にパッケージが無効化されることがある。それらのパッケージを有効化するには、コマンドパレットでPackage Control: Enable Packagesを選択すると、無効化されているパッケージの一覧が出るので、対象のパッケージを選択すればよい。また、メニューバーの［Preferences］－［Settings - User］から開ける（ユーザー用）設定ファイルのignored_packagesの項目から、該当するパッケージ名を削除することでも有効化できる。
パッケージの削除
パッケージの削除は、コマンドパレットのPackage Control: Remove Packagesから対象のパッケージを選択する。
パッケージの紹介
ここで、パッケージの紹介を行うが、あくまでも一部なのでWeb上のさまざまな情報や、書籍（例『Web制作者のためのSublime Textの教科書』）などで、有効そうなパッケージがあれば試してみるのがよいだろう。
プログラミング言語パッケージ
Sublime Textはデフォルトでさまざまなプログラミング言語をサポートしているが、それ以外の言語についてはパッケージで追加が可能だ。すでにサポートされている言語でも、より充実したパッケージを利用することもできる（例：AndyPHP - Packages - Package Control）。また、Ruby on Rails（rails - Search - Package Control）やjQuery（jquery - Search - Package Control）、Angular（Angular - Search - Package Control）、WordPress（wordpress - Search - Package Control）など、フレームワークやプロダクトに特化したパッケージも数多く登録されている。
必須系パッケージ
SideBarEnhancements
Sublime Textのサイドバーのコンテキストメニュー（＝右クリックで出るメニュー）を拡張するパッケージ。正直なところデフォルトでは機能が非常に貧弱なので、このパッケージは必須と言っていいだろう。
パッケージによって追加はされるが、機能は少ない。
ファイル操作や検索などの機能が追加される。
ConvertToUTF8
Sublime Textは、基本的に文字コードはUTF-8のみの対応なので、日本語で用いられてきたShift_JISやEUC-JPといった文字コードに対応していない。そこで、それらの文字コードに対応するパッケージがConvertToUTF8だ。これも国内では必須に近いパッケージといえるだろう。なお、Mac／LinuxではCodecs33（バージョン2の場合はCodecs26）パッケージが必要となる。
テキストエディターでの開発に有効なパッケージ
BracketHighlighter
文字通り、ブラケット（＝かっこ）をハイライトするパッケージ。デフォルトでもかっこの関係を表示するが、BracketHighlighterを利用するとより目立つようになり、また行番号を表示する領域にも現在編集中のスコープのブラケットやクオートなどを表示する。また、HTMLの入力時には対応するタグを表示する機能も提供される（図3.1）。また、対になっていないブラケットとなっている場合は、その旨を表示する。
ハイライトを行う機能自体はデフォルトでも利用できる。
ブラケットの範囲がより分かりやすくなる。
HTMLタグの範囲も明示される。必然的に入れ子構造になるHTMLでは有効だ。
ブラケットのサーチ範囲の設定
ブラケットの範囲が大きい場合などに、Sublime Textが対応するブラケットのサーチを続けることで負荷が大きくなることを防ぐために、デフォルトでは最大で5000文字以上は対応するブラケットのサーチを行わないようになっている。それで不都合が起きる場合は、メニューバーの［Preferences］－［Package Settings］－［Bracket Highlighter］－［Bracket Settings - User］を選択し、設定を行う。例えば、最大文字数を増やして対応する場合は、
|
{
"search_threshold": 50000 // サーチ範囲を5万文字（10倍）に広げる
}
{
"ignore_threshold": true // サーチ範囲を限定しない
}
|
などと記述する。
他にも強調表示の形状や、ブラケットを判別する条件などを設定可能なので、必要がある場合はメニューバーの［Preferences］－［Package Settings］－［Bracket Highlighter］－［Bracket Settings - Default］で確認し、その項目をユーザー設定として上書きすればよい。
Alignment
プログラミングで変数や連想配列を定義する際に=の位置をそろえるパッケージだ。同様のパッケージとしてAbacusもある。
「=」以外でも動作させる
Alignmentは基本的に=を目印にそろえるので、例えばJavaScriptのオブジェクトの定義に利用する:には対応していない。そのため、メニューバーの［Preferences］－［Package Settings］－［Alignment］－［Settings - User］で開かれるユーザー用の設定ファイルを下記の設定内容に変更すると、:でも動作する。
|
{
"alignment_chars": ["=",":"],
}
|
他の記号などを追加する場合には、上記のコードを追記すれば動作する。
JavaScriptのオブジェクトの定義などでも使えるようになる。
EditorConfig
EditorConfigは、Sublime Textだけでなく、異なるエディター／IDE間で共通するコーディングルールを規定する.editorconfigファイルに対応するためのパッケージだ。詳しくはEditorConfigのサイト（英語）を見てほしいが、現在、次の画面に示す主だったテキストエディターやIDEなどで採用が進んでいる。
ソフトウェアの垣根を超えてルールの共通化を行える。
記述も容易に行える。
OmniMarkupPreviewer
マークダウン（Markdown）形式文書などのドキュメントをブラウザーでプレビューするパッケージ。マークダウンで記述する際に、Ctrl＋Alt＋Oキー（Windowsの場合）／Command＋Option＋Oキー（Macの場合）を押すと、編集中のマークダウンをHTMLに変換したものがブラウザーで表示される。入力中も反映されるので、リアルタイムプレビューとして活用できる。また、Ctrl＋Alt＋Xキー（Win）／Command＋Option＋X（Mac）を押すと、変換されたHTMLファイルが保存されるので、これをドキュメントとして活用することも可能だ。マークダウンからのドキュメント変換はPandocが有名だが、手軽に利用できるものとしてOmniMarkupPreviewerも十分使えるだろう。
リアルタイムの反映は、ファイルの保存を行わなくても行われる。
Smart Delete - Packages - Package Control
小品的なパッケージだが、意外と作業効率に関わるのがSmart Deleteだ。行末で［delete］キーで削除した際に、次の行の先頭にあるインデントも同時に削除する。このプラグインがあるとないとでは、作業の手数が変わってくるので導入しておこう。
Terminal
開いているファイルや、サイドバーの右クリックから、そのファイルやディレクトリの場所をターミナルで開くことができる。
Sublime Files
Sublime Textでのファイル操作をキーボード主体で行うパッケージがSublime Filesだ。通常、サイドバーを利用するときなどは、マウスを利用したファイル操作になるが、Sublime Filesを利用すると、Ctrl＋Alt＋Nキー（Win）／Control＋Command＋Nキー（Mac）で、パレットが開き、ディレクトリの移動やファイルの操作、ターミナルの起動が行えるようになる。キーボード主体で作業を行いたい場合は有効なパッケージだろう。
ファイル／ディレクトリの一覧が表示される。
［・ Directory actions］を選択
ターミナルでのオープンなどが行える。
Web制作に有効なパッケージ
Emmet
Web制作に関わる人で、Sublime Textを利用する人はまず入れているだろうパッケージだ。公式サイトのインストール数の集計でもPackage Controlについで2位ということで、実質的に最も利用されているパッケージだろう。
詳細についてはEmmetのサイトを見てほしい。提供している機能は、HTMLのマークアップをショートハンドの入力で行えることが大きな特徴だ。基本的にCSSでのセレクターの拡張という方向性のショートハンドの構成なので、日常的にマークアップを行っている人には覚えやすいだろう。また、CSSのショートハンド入力も可能だ。
HTML入力の例
変換はデフォルトの状態ではTabキーもしくはCtrl／Command＋Eキーで行う
|
!
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
|
|
ul>li.menu-$$*4>a{メニュー$$}
|
|
<ul>
<li class="menu-01"><a href="">メニュー01</a></li>
<li class="menu-02"><a href="">メニュー02</a></li>
<li class="menu-03"><a href="">メニュー03</a></li>
<li class="menu-04"><a href="">メニュー04</a></li>
</ul>
|
CSS入力の例
|
bg#f
|
|
background: #fff;
|
|
m10-20
|
|
margin: 10px 20px;
|
|
w50p
|
|
width: 50%;
|
|
bsh
|
|
-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
|
Hayaku
EmmetはHTML／CSSの入力補助パッケージだが、HayakuはCSSの入力補助に特化したパッケージだ。変換例などはリンク先のパッケージのドキュメントを参照のこと。
EmmetのCSS入力機能がフレシキブルになったので、Hayakuの特色が目立ちにくくなったが、いまだにEmmetよりもフレシキブルな入力補完を好む層は（筆者も含めて）一定層存在する。変換例などはリンク先のパッケージのドキュメントを参照のこと。
Emmetとの共存時の設定
HayakuもEmmetも変換がTabキーなので、CSSの入力時にはバッティングする。そのため、CSS（プリプロセッサー含めて）を記述するときにはEmmetのTabキーでの変換を無効にする。
これには、メニューバーの［Preferences］－［Package Settings］－［Emmet］－［Settings - User］で、Emmetの（ユーザー用）設定ファイルを開き、
|
{
"disable_tab_abbreviations_for_scopes": "css,less,sass,scss,stylus"
}
|
と入力して保存する。この状態でもCtrl／Command＋EキーでのEmmetの変換は有効なので、場合に応じて使い分けも可能だ。
AutoFileName
画像や外部スクリプト、スタイルシートなどを呼び出す際の入力補助を行う。例えば<img>タグのsrc属性でプルダウンからファイルが選択できるようになり、その対象が画像ファイルであれば自動的にwidth属性とheight属性も入力してくれる。オーサリングツールなどでは必ずと言っていいほど提供されている機能なので、こちらも導入しておこう。
この例では［sass-less.png］を選択すると……
widthとheightの表示順の入れ替え
AutoFileNameは画像の自動挿入を行う場合、デフォルトの設定ではheight属性→width属性の順で入力される。実際の表示などには影響はないが、普段が逆で違和感があるという場合はメニューバーの［Preferences］－［Settings - User］で、ユーザー設定ファイルを開き、
"afn_insert_width_first": true
を追記する。
Nettuts+ Fetch
Nettuts+ Fetchは名前から機能が連想しづらいが、非常に有効なパッケージだ。事前によく利用するライブラリやファイルパッケージなどを登録しておくことで（図9.1）、Sublime Textでダウンロードから展開までを行える（図9.3）。
ZIPファイルは自動的に展開するので、.zipファイルをダウンロードできるURLでよい。
エディターの下部に表示される入力欄に、
展開先のディレクトリを指定してEnterキーを押す
View In Browser
HTMLソースを編集している画面からブラウザーを起動するパッケージ。デフォルトではCtrl＋Alt＋Vキー（Win）/Control+Option+Vキー（Mac）でブラウザーが起動する。また、次のように設定することで、デフォルトのブラウザー以外で開くことも可能だ。
|
[
{ "keys": [ "ctrl+alt+v" ], "command": "view_in_browser" },
{ "keys": [ "ctrl+alt+f" ], "command": "view_in_browser", "args": { "browser": "firefox" } },
{ "keys": [ "ctrl+alt+c" ], "command": "view_in_browser", "args": { "browser": "chrome" } },
{ "keys": [ "ctrl+alt+i" ], "command": "view_in_browser", "args": { "browser": "iexplore" } },
{ "keys": [ "ctrl+alt+s" ], "command": "view_in_browser", "args": { "browser": "safari" } }
]
|
このファイルは、メニューバーの［Preferences］－［Package Settings］－［View In Browser］－［Settings - User］で開ける。
プログラミングに有効なパッケージ
DataConverter
CSV形式のデータをさまざまな形に変換するパッケージ。変換の対象は、JSONやYAMLといったデータ形式だけでなく、PHPやRubyといったプログラムの連想配列や、SQL文、HTMLの<table>タグなど幅広く変換が行える。
［DataConverter: to HTML table］を選択
バージョン管理システム対応パッケージ
バージョン管理システムのSVNのクライアントラッパーパッケージとして、
- Mac／LinuxはSVN
- WindowsはTortoiseSVN
がある。SVNは有料パッケージ（無期限の評価利用可能）。TortoiseSVNは同名のソフトウェアのラッパーとして動作する。
また、Gitに対応したパッケージでは、
があり、TortoiseGITは同名ソフトウェアのラッパーとして動作する。
ファイル転送対応パッケージ
FTPSyncは無料のパッケージだが、SFTP接続には対応していない。SFTPは有料（無期限の評価利用可能）だが、SFTP接続にも対応しており高機能なパッケージだ。
Sublime Textの利用に有効なパッケージ
FindKeyConflicts
パッケージを追加していくと出てくる問題として、ショートカットキーの重複がある。その問題を解決するために、各パッケージのショートカットキーの設定を見比べるのは現実的ではない。その場合にはFindKeyConflictsパッケージが有効だ。
ショートカットキーの重複の抽出と、対応の方法
例えばMac版であれば、［Goto Definition］へのショートカットはOption＋Command＋↓キーに割り当てられている。だがEmmetをインストールすると、Emmetのrun_emmet_actionの機能（＝実際には数値を10ずつ下げるという機能）が同じキーに設定されているので、ショートカットキーが衝突することになる。この問題を回避するには、以下の手順で［Goto Definition］がOption＋Command＋↓キーで起動するように再設定すればよい。
- ［Goto Definition］のショートカットが利かなくなった時点で、コマンドパレットから「FindKeyConflicts: All Conflicts」を起動する
- 該当の機能またはショートカットキーに関する出力内容を確認すると、Emmetの
run_emmet_actionが衝突していることが分かる - メニューバーの［Preferences］－［Key Bindings- Default］を選択し、
goto_definitionの設定部分をコピーする - メニューバーの［Preferences］－［Key Bindings- User］を選択し、コピーした設定を貼り付ける
- 上記のユーザー用の設定が最終的に上書きされるので、［Goto Definition］のショートカットキーが優先される
- また、Emmet側の機能を別のショートカットキーで利用する場合は、同様にEmmetのショートカットキー設定をコピーし、ユーザー設定の中で書き換えて利用する
Project Manager
Sublime Textのプロジェクト管理は、プロジェクトごとに*.sublime-projectファイルを生成して管理する方式だが、管理しているプロジェクトの数が多くなると、やや見通しが悪くなってくる。その問題の解決をサポートするのがProject Managerパッケージだ。プロジェクトの保存と呼び出しがすぐに行えるので、プロジェクトの管理に困ることがあれば活用しよう。
コマンドパレットで「Project Manager」を実行すると、この画面のようなプロジェクト管理機能が選択できる。
■
ここまでの全3回で「Sublime Text入門」は終了する。本連載で説明したのは、基本的・代表的な機能のみだ。もっと多くの機能があるので、いろいろと見つけて、よりSublime Textを活用してほしい。
1. テキストエディター「Sublime Text」の導入
Sublime Textが選ばれている理由とは？ バージョン2と3はどちらを使えばよいかや、インストール方法、お勧めの環境設定など、Sublime Textの導入に関するポイントをまとめる。Windows＆Mac対応。
2. プログラミングやマークアップで特に役立つ、Sublime Textの標準機能
Sublime Textでは、一般的なテキストエディター機能に加えて、プログラミングやマークアップに有効な機能も提供されている。その中でも特に便利な機能をピックアップして紹介する。
3. 【現在、表示中】≫ 特におすすめしたい、Sublime Textのパッケージ
Sublime Textのさまざまなパッケージの中から、利用シーン別におすすめのものを紹介。また、Sublime Textのパッケージの基本的な使い方として導入方法や有効化／無効化、削除の方法も説明する。
