Sublime Text入門(3)

Sublime Text入門(3)

特におすすめしたい、Sublime Textのパッケージ

2014年12月17日

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を選択すると、インストールしているパッケージの一覧が表示される。

図1.1 パッケージリストの呼び出し
表示されたパッケージのリスト
図1.2 表示されたパッケージのリスト

パッケージの無効化

 パッケージのバッティングなどで予期しない挙動が起きた場合など、確認するために一時的に無効化する場合は、コマンドパレットで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のサイドバーのコンテキストメニュー(=右クリックで出るメニュー)を拡張するパッケージ。正直なところデフォルトでは機能が非常に貧弱なので、このパッケージは必須と言っていいだろう。

図2.1 デフォルトのサイドバーの(フォルダーなどに対する)コンテキストメニュー

パッケージによって追加はされるが、機能は少ない。

図2.2 SideBarEnhancements導入後

ファイル操作や検索などの機能が追加される。

ConvertToUTF8

 Sublime Textは、基本的に文字コードはUTF-8のみの対応なので、日本語で用いられてきたShift_JISやEUC-JPといった文字コードに対応していない。そこで、それらの文字コードに対応するパッケージがConvertToUTF8だ。これも国内では必須に近いパッケージといえるだろう。なお、Mac/LinuxではCodecs33(バージョン2の場合はCodecs26)パッケージが必要となる。

テキストエディターでの開発に有効なパッケージ

BracketHighlighter

 文字通り、ブラケット(=かっこ)をハイライトするパッケージ。デフォルトでもかっこの関係を表示するが、BracketHighlighterを利用するとより目立つようになり、また行番号を表示する領域にも現在編集中のスコープのブラケットやクオートなどを表示する。また、HTMLの入力時には対応するタグを表示する機能も提供される(図3.1)。また、対になっていないブラケットとなっている場合は、その旨を表示する。

BracketHighlighter導入前
図3.1 BracketHighlighter導入前

ハイライトを行う機能自体はデフォルトでも利用できる。

BracketHighlighter導入後
図3.1 BracketHighlighter導入後

ブラケットの範囲がより分かりやすくなる。

HTMLのハイライト
図3.1 HTMLのハイライト

HTMLタグの範囲も明示される。必然的に入れ子構造になるHTMLでは有効だ。

ブラケットのサーチ範囲の設定

 ブラケットの範囲が大きい場合などに、Sublime Textが対応するブラケットのサーチを続けることで負荷が大きくなることを防ぐために、デフォルトでは最大で5000文字以上は対応するブラケットのサーチを行わないようになっている。それで不都合が起きる場合は、メニューバーの[Preferences]-[Package Settings]-[Bracket Highlighter]-[Bracket Settings - User]を選択し、設定を行う。例えば、最大文字数を増やして対応する場合は、

JSON
{
  "search_threshold": 50000 // サーチ範囲を5万文字(10倍)に広げる
}

{
  "ignore_threshold": true // サーチ範囲を限定しない
}

などと記述する。

 他にも強調表示の形状や、ブラケットを判別する条件などを設定可能なので、必要がある場合はメニューバーの[Preferences]-[Package Settings]-[Bracket Highlighter]-[Bracket Settings - Default]で確認し、その項目をユーザー設定として上書きすればよい。

Alignment

 プログラミングで変数や連想配列を定義する際に=の位置をそろえるパッケージだ。同様のパッケージとしてAbacusもある。

図4.1 入力後の状態で、適用したい行を指定する
図4.2 適用した状態

「=」以外でも動作させる

 Alignmentは基本的に=を目印にそろえるので、例えばJavaScriptのオブジェクトの定義に利用する:には対応していない。そのため、メニューバーの[Preferences]-[Package Settings]-[Alignment]-[Settings - User]で開かれるユーザー用の設定ファイルを下記の設定内容に変更すると、:でも動作する。

JSON
{
  "alignment_chars": ["=",":"],
}
「=」以外でも動作させる設定(ユーザー用の設定ファイル)

 他の記号などを追加する場合には、上記のコードを追記すれば動作する。

図4.3 「:」を利用できるようにした状態

JavaScriptのオブジェクトの定義などでも使えるようになる。

EditorConfig

 EditorConfigは、Sublime Textだけでなく、異なるエディター/IDE間で共通するコーディングルールを規定する.editorconfigファイルに対応するためのパッケージだ。詳しくはEditorConfigのサイト(英語)を見てほしいが、現在、次の画面に示す主だったテキストエディターやIDEなどで採用が進んでいる。

図5.1 EditorConfigが対応しているエディター/IDE

ソフトウェアの垣根を超えてルールの共通化を行える。

EditorConfig設定例
図5.2 EditorConfigの設定例

記述も容易に行える。

OmniMarkupPreviewer

 マークダウン(Markdown)形式文書などのドキュメントをブラウザーでプレビューするパッケージ。マークダウンで記述する際に、CtrlAltOキー(Windowsの場合)/CommandOptionOキー(Macの場合)を押すと、編集中のマークダウンをHTMLに変換したものがブラウザーで表示される。入力中も反映されるので、リアルタイムプレビューとして活用できる。また、CtrlAltXキー(Win)/CommandOptionX(Mac)を押すと、変換されたHTMLファイルが保存されるので、これをドキュメントとして活用することも可能だ。マークダウンからのドキュメント変換はPandocが有名だが、手軽に利用できるものとしてOmniMarkupPreviewerも十分使えるだろう。

図6.1 OmniMarkupPreviewerの動作画面

リアルタイムの反映は、ファイルの保存を行わなくても行われる。

Smart Delete - Packages - Package Control

 小品的なパッケージだが、意外と作業効率に関わるのがSmart Deleteだ。行末で[delete]キーで削除した際に、次の行の先頭にあるインデントも同時に削除する。このプラグインがあるとないとでは、作業の手数が変わってくるので導入しておこう。

Terminal

 開いているファイルや、サイドバーの右クリックから、そのファイルやディレクトリの場所をターミナルで開くことができる。

Sublime Files

 Sublime Textでのファイル操作をキーボード主体で行うパッケージがSublime Filesだ。通常、サイドバーを利用するときなどは、マウスを利用したファイル操作になるが、Sublime Filesを利用すると、CtrlAltNキー(Win)/ControlCommandNキー(Mac)で、パレットが開き、ディレクトリの移動やファイルの操作、ターミナルの起動が行えるようになる。キーボード主体で作業を行いたい場合は有効なパッケージだろう。

Sublime Filesのメニュー
図7.1 Sublime Filesのメニュー

ファイル/ディレクトリの一覧が表示される。

[・ Directory actions]を選択

Sublime Filesのディレクトリ操作画面
図7.2 Sublime Filesのディレクトリ操作画面

ターミナルでのオープンなどが行える。

Web制作に有効なパッケージ

Emmet

 Web制作に関わる人で、Sublime Textを利用する人はまず入れているだろうパッケージだ。公式サイトのインストール数の集計でもPackage Controlについで2位ということで、実質的に最も利用されているパッケージだろう。

 詳細についてはEmmetのサイトを見てほしい。提供している機能は、HTMLのマークアップをショートハンドの入力で行えることが大きな特徴だ。基本的にCSSでのセレクターの拡張という方向性のショートハンドの構成なので、日常的にマークアップを行っている人には覚えやすいだろう。また、CSSのショートハンド入力も可能だ。

HTML入力の例

 変換はデフォルトの状態ではTabキーもしくはCtrl(Win)Command(Mac)Eキーで行う

Emmet
!
▼ 変換後
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>
Emmet→HTMLの例(1)
Emmet
ul>li.menu-$$*4>a{メニュー$$}
▼ 変換後
HTML
<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>
Emmet→HTMLの例(2)

CSS入力の例

Emmet
bg#f
▼ 変換後
CSS
background: #fff;
Emmet→CSSの例(1)
Emmet
m10-20
▼ 変換後
CSS
margin: 10px 20px;
Emmet→CSSの例(2)
Emmet
w50p
▼ 変換後
CSS
width: 50%;
Emmet→CSSの例(3)
Emmet
bsh
▼ 変換後
CSS
-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
Emmet→CSSの例(4)
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の(ユーザー用)設定ファイルを開き、

JSON
{
  "disable_tab_abbreviations_for_scopes": "css,less,sass,scss,stylus"
}

と入力して保存する。この状態でもCtrl(Win)Command(Mac)EキーでのEmmetの変換は有効なので、場合に応じて使い分けも可能だ。

AutoFileName

 画像や外部スクリプト、スタイルシートなどを呼び出す際の入力補助を行う。例えば<img>タグのsrc属性でプルダウンからファイルが選択できるようになり、その対象が画像ファイルであれば自動的にwidth属性とheight属性も入力してくれる。オーサリングツールなどでは必ずと言っていいほど提供されている機能なので、こちらも導入しておこう。

AutoFileNameの入力補完
図8.1 AutoFileNameの入力補完

この例では[sass-less.png]を選択すると……

ファイル指定後、widthとheightが自動的に挿入される
図8.2 ファイル指定後、widthとheightが自動的に挿入される

widthとheightの表示順の入れ替え

 AutoFileNameは画像の自動挿入を行う場合、デフォルトの設定ではheight属性→width属性の順で入力される。実際の表示などには影響はないが、普段が逆で違和感があるという場合はメニューバーの[Preferences]-[Settings - User]で、ユーザー設定ファイルを開き、

  "afn_insert_width_first": true

を追記する。

Nettuts+ Fetch

 Nettuts+ Fetchは名前から機能が連想しづらいが、非常に有効なパッケージだ。事前によく利用するライブラリやファイルパッケージなどを登録しておくことで(図9.1)、Sublime Textでダウンロードから展開までを行える(図9.3)。

図9.1 コマンドパレットから「Fetch: Manage」を開く
図9.2 対象のファイルやパッケージをダウンロードできるURLを設定する

ZIPファイルは自動的に展開するので、.zipファイルをダウンロードできるURLでよい。

図9.3 コマンドパレットから「Fetch: Package」を開く
導入するパッケージを選ぶ
図9.4 導入するパッケージを選ぶ

エディターの下部に表示される入力欄に、
展開先のディレクトリを指定してEnterキーを押す

対象ディレクトリを指定すると、自動的にダウンロードされ配置される
図9.5 対象ディレクトリを指定すると、自動的にダウンロードされ配置される
View In Browser

 HTMLソースを編集している画面からブラウザーを起動するパッケージ。デフォルトではCtrlAltVキー(Win)/Control+Option+Vキー(Mac)でブラウザーが起動する。また、次のように設定することで、デフォルトのブラウザー以外で開くことも可能だ。

JSON
[
  { "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" } }
]
デフォルトブラウザ以外を開くときの設定例(View In Browser.sublime-settingsファイル)

このファイルは、メニューバーの[Preferences]-[Package Settings]-[View In Browser]-[Settings - User]で開ける。

プログラミングに有効なパッケージ

DataConverter

 CSV形式のデータをさまざまな形に変換するパッケージ。変換の対象は、JSONやYAMLといったデータ形式だけでなく、PHPやRubyといったプログラムの連想配列や、SQL文、HTMLの<table>タグなど幅広く変換が行える。

CSVの文字列に対して、コマンドパレットから変換対象の書式を選択する
図10.1 CSVの文字列に対して、コマンドパレットから変換対象の書式を選択する

[DataConverter: to HTML table]を選択

例えばHTMLを選ぶとtableに変換する
図10.2 例えばHTMLを選ぶとtableに変換する
バージョン管理システム対応パッケージ

 バージョン管理システムのSVNのクライアントラッパーパッケージとして、

がある。SVNは有料パッケージ(無期限の評価利用可能)。TortoiseSVNは同名のソフトウェアのラッパーとして動作する。

 また、Gitに対応したパッケージでは、

があり、TortoiseGITは同名ソフトウェアのラッパーとして動作する。

ファイル転送対応パッケージ

 FTPSyncは無料のパッケージだが、SFTP接続には対応していない。SFTPは有料(無期限の評価利用可能)だが、SFTP接続にも対応しており高機能なパッケージだ。

Sublime Textの利用に有効なパッケージ

FindKeyConflicts

 パッケージを追加していくと出てくる問題として、ショートカットキーの重複がある。その問題を解決するために、各パッケージのショートカットキーの設定を見比べるのは現実的ではない。その場合にはFindKeyConflictsパッケージが有効だ。

ショートカットキーの重複の抽出と、対応の方法

 例えばMac版であれば、[Goto Definition]へのショートカットはOptionCommandキーに割り当てられている。だがEmmetをインストールすると、Emmetのrun_emmet_actionの機能(=実際には数値を10ずつ下げるという機能)が同じキーに設定されているので、ショートカットキーが衝突することになる。この問題を回避するには、以下の手順で[Goto Definition]がOptionCommandキーで起動するように再設定すればよい。

  1. [Goto Definition]のショートカットが利かなくなった時点で、コマンドパレットから「FindKeyConflicts: All Conflicts」を起動する
  2. 該当の機能またはショートカットキーに関する出力内容を確認すると、Emmetのrun_emmet_actionが衝突していることが分かる
  3. メニューバーの[Preferences]-[Key Bindings- Default]を選択し、goto_definitionの設定部分をコピーする
  4. メニューバーの[Preferences]-[Key Bindings- User]を選択し、コピーした設定を貼り付ける
  5. 上記のユーザー用の設定が最終的に上書きされるので、[Goto Definition]のショートカットキーが優先される
  6. また、Emmet側の機能を別のショートカットキーで利用する場合は、同様にEmmetのショートカットキー設定をコピーし、ユーザー設定の中で書き換えて利用する
Project Manager

 Sublime Textのプロジェクト管理は、プロジェクトごとに*.sublime-projectファイルを生成して管理する方式だが、管理しているプロジェクトの数が多くなると、やや見通しが悪くなってくる。その問題の解決をサポートするのがProject Managerパッケージだ。プロジェクトの保存と呼び出しがすぐに行えるので、プロジェクトの管理に困ることがあれば活用しよう。

Project Managerの画面
図11.1 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のパッケージの基本的な使い方として導入方法や有効化/無効化、削除の方法も説明する。

イベント情報(メディアスポンサーです)

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社