皆さん、エディタは何を使っていますか？
今回は海外でも日本でも大人気、一度使ったら恋に落ちるエディタ「Sublime Text」について紹介いたします。
Sublime Textは「見やすい」、「書きやすい」、「使いやすい」の三拍子揃った万能なエディタになります。
この記事を最後までお読みいただければ、インストールから便利な機能まで、簡単にマスターすることができるので、今使っているエディタに不満がある、使いやすいエディタを知りたい方は、ぜひ参考にしてください。
インストール
Sublime TextはWindowsとMacの両方で使うことができますが、使うためには、インストールする必要があります。
現在（2017年10月15日）の最新バージョンは「Sublime Text 3」になり、ダウンロードするためには公式ホームページにアクセスしてダウンロードします。
http://www.sublimetext.com/3
（公式ダウンロードページ）
ダウンロードが終わり、インストールしたSublime Textを起動させるとこのような画面が表示されます。
このように表示されたら、問題なくインストールされています。
これだけは覚えたいショートカットキー
基本的なショートカットキーからSublime Textで使える便利なものまで紹介します。
ショートカットキーを覚えるだけで何十倍も効率良くなるので、マスターできるようになりましょう。
・コピー
[ctrl]+
・ペースト
[ctrl]+[v]
・検索
[ctrl]+[f]
・置換
[ctrl]+[shift]+[f]
・上書き保存
[ctrl]+[s]
・名前を付けて保存
[ctrl]+[shift]+[s]
・新しいタブを作成
[ctrl]+[n]
・タブを閉じる
[ctrl]+[w]
・文字を大きくする
[ctrl]+[shift]+[+]
・文字を小さくする
[ctrl]+[-]
パッケージコントロールをインストール
パッケージコントロールとはSublime Textの機能拡張するためにインストールしたパッケージを管理するツールです。
Sublime Textの機能を十分に発揮するためには必ず必要になるツールになるため、インストールしましょう。
下記のリンクからパッケージコントロールをインストールします。
URL：https://packagecontrol.io/installation#st3
リンク先に移動したら、必要な箇所をコピーします。
コピーした次は、Sublime Textに移動してコンソールを開きます。
コンソールの開き方は以下の2つの方法があり、どちらでも構いません。
・ショートカットキー・・[ctrl]+[`]（「`」の入力方法は[shift]+[@]）
・画面選択・・[View]→[Show Console]
一番下の空欄に先ほどコピーしたコードをペーストします。
正しくペーストできたら、Enterキーを押して実行します。
プログラムが実行されると、処理が始まるので、処理が終わるまで待ちます。
処理が完了すると、[Sublime Text]→[Preferences]を選択、[Package Control]が表示されていたらインストール完了です。
以上がパッケージコントロールのインストール方法です。
ここまではあくまで下準備の段階になり、次は拡張機能について説明します。
日本語化
インストールが完了した次はSublime Textを日本語化しましょう。
初期設定では言語が英語になっており、そのままでも使用することはできますが、言語を日本語に設定することで直感的に使うことができます。（英語の方が使いやすい方は初期設定のままで問題ありません。）
WindowsとMacで設定手順が違います。
日本語化の設定手順（WindowsとMac共通設定）
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）でコマンドパレットを表示させます。
コマンドパレットに「install」と入力すると「Package Control: Install Package」が表示されるので選択します。
次に「japanize」と入力すると日本語化するファイルが表示されるので、これを選択します。
ファイルのインストールが終了すると、このようなメッセージが表示されます。
このメッセージはWindowsの日本語化の手順が記載されているので、Windowsをお使いの方はこちらを参考に適用してください。Macの手順は記載されていませんので、ここからはMacの手順を紹介します。
Mac版日本語化適用手順
具体的な手順は以下の3つになります。
STEP1. Finderを開き、ホームフォルダを表示させる
STEP2. ホームフォルダにライブラリを表示させる
STEP3. 必要なファイルを移動させる
STEP1. Finderを開き、ホームフォルダを表示させる
Finderのサイドバーのデフォルトの設定ではホームフォルダは表示されていませんので、サイドバーにホームフォルダを表示させるようにします。
デフォルトの設定を変更するためにメニューバーの[Finder]→[環境設定]を選択します。
Finder環境設定の中からサイドバーを選択します。
この中からアイコンが「家」になっている、ホームフォルダにチェックを入れることで、サイドバーにホームフォルダを表示することができます。
STEP2. ホームフォルダにライブラリを表示させる
先ほどサイドバーに追加した、ホームフォルダを選択します。
メニューバーの[表示]→[表示のオプションを表示]を選択します。
以下のようなウィンドウが表示されるので、下の方にある「“ライブラリ”フォルダを表示」にチェックを入れます。
チェックを入れると、ホームフォルダの中にライブラリが表示されます。
STEP3. 必要なファイルを移動させる
Finderのサイドバーから[ホームフォルダ]→[ライブラリ]→[Application Support]→[Sublime Text 3]→[Packages]を選択します。
先ほどダウンロードした「Japanizeフォルダ」があることを確認すると、「Japanizeフォルダ」と同じ階層の中に「Defaultフォルダ」を作成します。
Japanizeフォルダを選択、フォルダ内にある以下のファイルをコピーします。
・Context.sublime-menu.jp
・Indentation.sublime-menu.jp
・Main.sublime-menu.jp
・Side Bar Mount Point.sublime-menu.jp
・Side Bar.sublime-menu.jp
・Tab Context.sublime-menu.jp
コピーした次は、Defaultフォルダにファイルをペーストして、全てのファイルから拡張子である「.jp」を削除します。
Sublime Textのメニューバーを見ていただくと、適用前は英語表記でしたが、適用後は日本語表記に変わっています。
ここまでがMacにおけるSublime Text日本語化の手順になります。
スペースとタブを表示させる
デフォルトの設定ではスペースとタブの空間には何も表示されません。
日本語化の次は、スペースとタブを可視化できるようにしましょう。
特にプログラミングをする方はインデント揃えるために多用するので、必ず設定しておきましょう。
まずは、コマンドパレットを表示させるため、メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）を選択します。
「setting」と入力すると、「Preferences: settings」が表示されるので、選択します。
「Preferences.sublime-settings」ファイルが開かれるので、「”draw_white_space”: “all”,」を追記します。
これで設定は完了です。
正しく設定できていれば、半角スペースとタブの空間が表示されています。
Sublime Textオススメプラグイン
Sublime Textの優れているところは、使いやすさだけでなく、便利なプラグインがたくさんあり、簡単に拡張機能できるところです。
数多くのプラグインの中から、本当に役に立つ便利なプラグインだけを紹介します。
IMESupport
Windowsの端末でSublime Textを使用する場合、テキスト内に文字が入力されません。
テキスト内に文字入力するためにつくられたのが、IMESupportです。
インストール方法
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → →[IMESupport]を入力して、選択すれば自動的にインストールされます。
ConvertToUTF8
日本語の文字化けを防ぐ、プライグイン。
特にSublime Textを使用して、執筆するライターの方は必ず入れておいてください。
インストール方法
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [ConvertToUTF8]を入力して、選択すれば自動的にインストールされます。
Emmet
このプラグインを使用することで、プログラミングのスピードが急激的に早くなります。
スニペットの記述とショートカット機能を使用することで自動的にコードを生成してくれます。
文章だけではイメージが難しいと思いますので、例えをあげると、div>aと入力後、カーソルを一番文末にした状態で[ctrl]+[e]押下すると、以下のようにコードが生成されます。
<div><a href=""></a></div>
この他にもたくさんの種類のタグを使用することができ、使えるタグやショートカットはチートシートにまとめられているので、使い方を覚える必要はなく、コーディングするときに見ながら使うことで時間短縮することができます。
チートシートURL：https://docs.emmet.io/cheat-sheet/
インストール方法
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [Emmet]を入力して、選択すれば自動的にインストールされます。
All Autocomplete
このプラグインはコードの補完機能になります。
元々、Sublime Textには補完機能が搭載されていますが、All Autocompleteを適用することで、自分で記述した定数、関数、変数を自動的に補完してくれます。
インストール方法
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [All Autocomplete]を入力して、選択すれば自動的にインストールされます。
BracketHighlighter
タグの閉じ忘れを防ぐためのプラグインになり、開始と終了をハイライトで表示してくれます。
イージーミスをしないためにも必ず導入しましょう。
インストール方法
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] →[BracketHighlighter]を入力して、選択すれば自動的にインストールされます。
Color Highlighter
CSSのプロパティ値の色を視覚的に判断することができるプラグインになり、わかりづらいカラーコードに迷う必要がなくなります。
インストール方法
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [Color Highlighter]を入力して、選択すれば自動的にインストールされます。
Sublime Linter
このプラグインはHTML、CSS、PHP、Javascriptなどコード記述してるときに、タイプミスや文法に誤りがあると、記述している途中で、リアルタイムにミスのある部分を教えてくれます。
プログラミングにありがちなのが、些細なミスを見つけるのに、何時間も費やしてしまうことです。
このプラグインを導入しておけば、無駄な時間を省略することができます。
インストール方法
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [Sublime Linter]を入力して、選択すれば自動的にインストールされます。
注意点として、このプラグインはインストールしただけで、使用することはできず、各言語によって設定する必要があります。
PHP
PHPの設定手順は以下のようになります。
STEP1.メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [Sublime Linter-phplint]と[Sublime Linter-php]を入力して、両方ともインストールします。
STEP2.Macを使用している方はターミナル、Windowsを使用している方はコマンドプロンプトを開きます。
STEP3.ターミナル（コマンドプロンプト）に「 npm install -g phplint」と入力、インストールします。
STEP4.Sublime Textを再起動。
インストールが完了すると、PHPの構文を自動的にチェックしてくれます。
Javascript
Javascriptの設定手順は以下のようになります。
STEP1.公式サイトにアクセスして、「Node.js」をインストールします。
STEP2.メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [Sublime Linter-phplint]と[SublimeLinter-jshint]を入力して、両方ともインストールします。
STEP3.ターミナル（コマンドプロンプト）に「 npm install -g jshint」と入力、インストールします。
STEP4.Sublime Textを再起動。
これでJavascript設定は完了です。
wpseek.com WordPress Developer Assistant
WordPressで設定されている関数を自動補完してくれるプラグインになり、WordPressの記事投稿の下書き用に使う方にオススメです。
インストール方法
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [wpseek.com WordPress Developer Assistant]を入力して、選択すれば自動的にインストールされます。
Advanced New File
新規のフォルダやファイルを素早く作成することができます。
使い方は、[ctrl]+[alt]+[n] のショートカットキーを使用すると、ダイアログが表示されるので、そこにディレクトリやファイル名入力することで作成されます。
インストール方法
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [AdvancedNewFile]を入力して、選択すれば自動的にインストールされます。
ColorPicker
イラストや写真加工など経験したことのある方は、カラーピッカーに馴染みがあるのではないでしょうか。
SublimeTextにはデフォルトではカラーピッカーが導入されていませんので、使用する場合はプラグインをインストールする必要があります。
インストールした後は[ctrl]+[shift]＋でカラーピッカーを立ち上げることができます。
インストール方法
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [ColorPicker]を入力して、選択すれば自動的にインストールされます。
SFTP
WordPressなどでFTPなどのファイル転送サービスを使用したことのある方も多いのではないでしょうか。
プライグインを導入することで、SublimeTextにFTPと同じ機能を追加することができ、自動的にサーバーにファイルを保存することができるので、面倒な手間を省くことができるすごく便利なプライグインです。
STEP1.プラグインをインストール
メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [SFTP]を入力して、選択すれば自動的にインストールされます。
STEP2.Sublime Textにプロジェクトを開く
自動アップロードしたいファイルをSublime Textで開きます。
STEP3.Map to Remoteを選択する
自動アップロードしたいファイルの上で右クリックして、「SFTP/FTP」→「Map to Remote」を選択します。
STEP3.SFTPの設定
Sublime TextとSFTP/FTPを繋げるにはホスト名やユーザー名などを変更する必要があります。
以下を参考に編集してください。
{
// The tab key will cycle through the settings when first created
// Visit http://wbond.net/sublime_packages/sftp/settings for help
// sftp, ftp or ftps
"type": "sftp",←SFTPもしくはFTPどちらかを選択します。
"save_before_upload": true,←アップロード時に保存していないファイルを保存する
"upload_on_save": false,←ファイル保存と同時にファイルをアップロードする（trueに変更すると保存と同時にアップロードされるので注意が必要）
"sync_down_on_open": false,
"sync_skip_deletes": false,
"sync_same_age": true,
"confirm_downloads": false,
"confirm_sync": true,
"confirm_overwrite_newer": false,
"host": "example.com",←サーバーのホスト名
"user": "username",←ユーザー名
//"password": "password",←パスワード（コメントアウトを削除して、パスワードを入力すると自動ログインされる）
//"port": "22",←接続するポート番号
"remote_path": "/example/path/",
"ignore_regexes": [
"\\.sublime-(project|workspace)", "sftp-config(-alt\\d?)?\\.json",
"sftp-settings\\.json", "/venv/", "\\.svn/", "\\.hg/", "\\.git/",
"\\.bzr", "_darcs", "CVS", "\\.DS_Store", "Thumbs\\.db", "desktop\\.ini"
],
//"file_permissions": "664",
//"dir_permissions": "775",
//"extra_list_connections": 0,
"connect_timeout": 30,接続アウトまでの時間（単位は秒）
//"keepalive": 120,
//"ftp_passive_mode": true,
//"ftp_obey_passive_host": false,
//"ssh_key_file": "~/.ssh/id_rsa",
//"sftp_flags": ["-F", "/path/to/ssh_config"],
//"preserve_modification_times": false,
//"remote_time_offset_in_hours": 0,
//"remote_encoding": "utf-8",
//"remote_locale": "C",
//"allow_config_upload": false,
}
この設定が終わると、sFTP/FTPを使用することができます。
プラグインの削除方法
「プラグインをインストールしたけど、使用する機会がない。」このような場合は、プラグインを削除しましょう。
インストールしたプラグインを削除する方法は以下のようになります。
プラグイン削除方法
STEP1.メニューバーの[Tools]→[Command Palette]（ショートカットキーは[ctrl]+[shift]＋[p]）→ [Package Control: Install Package] → [package Control: Remove Package]を入力します。
STEP2.インストールされているプラグイン一覧が表示されるので、削除するプラインを選択するれば自動的に削除されます。
まとめ
SublimeTextのインストール、設定、オススメのプラグインなどを紹介させていただきました。
有料ソフトですが、機能制限が一切なく、無期限で無料使用することができます。（購入を促すポップアップの画面が時々表示されます。）
最大の長所は機能拡張が豊富にあり、使えば使うほど自分の使いやすいエディタに自然と変化します。
今回紹介したプラグインの他にも便利な機能はたくさんあるので、様々なプラグインに触れることをオススメします。
一度、SublimeTextを使うと他のエディタを使うことができなくなる人は数え切れません。
無料なので気軽に使い始めることができるのでぜひ試してみてください。