• LIGの広告成功事例
WEB

“恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!

“恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!

こんにちは~ 仕事が恋人のデザイナー、王です φ(≖ω≖。)♪。
最近海外でもてはやされまくりのテキストエディタ「Sublime Text」と恋に落ちたことをこの場で告白したい!
やっと出会えたぞ!僕が探し求めていた幻のエディタに!!
昨今話題沸騰中の「Sublime Text」エディタについて、ご紹介しましょう!本記事を読んで、ぜひとも他のエディタからSublime Textに乗り換えていただきたいです!

見た目的には、このように、優雅(Sublime)そのもの!

Mac、Windows、Linux 三大プラットフォームで動くのも嬉しいですな!

公式サイトは下記リンクです。

 

それでは、動画やキャプチャーを使ってSublime Textの素晴らしい魅力を伝えていきたいと思います。

Sublime Textのチャームポイント

特色機能

Multiple Selections
cmdキー(windowsならctrl)を押しながら、複数ヶ所を同時に選択して編集することができます!

※動画中で使われたショートカット
cmd+D (次のキーワードを追加選択)
cmd+/ (コメントアウト)

SoftUndo
「選択」「カーソルの位置」なども戻すことができる、便利な「戻る」機能が搭載されております!

※動画中で使われたショートカット
cmd+U (soft undo)

Goto Anything
これはかなり強力な機能です!プロジェクト内の欲しいファイルをリアルタイムでプレビューしながら、スピーディーに探すことが可能です!
曖昧検索なので、検索に使うキーワードはファイルの一部でも問題なく、しかもよく使われるファイルは候補の先頭に来るので、非常に使いやすい!

豆知識:
Goto Anythingパネルを出すショートカットは(cmd+P)
Goto Anythingパネルでこんな記号が使える↓
@ でシンボル(IDとか関数とか)を検索 (cmd+R)
: で指定の行にジャンプする (control+G)
# でファイル内の文字列を検索例えばこんな組合だって可能

例えばこんな組み合わせ:index.css:400 (index.cssファイルの第400行目という意味、地味によく使うw)

Command Palette
コマンドがありすぎてどのコマンドがどのメニューのどこにあるのか・・・・ なんていうときはありませんか?
そういうときのために皆さんは大量のショートカットを必死で覚えているでしょう? 覚えられるに越したことはないのですが、たまに何だっけなぁ?っていうたまにしか使わないショートカットや、そもそもショートカットがない場合もあります。

そんなとき、Command Paletteが役に立つ!cmd+shift+PでCommand Paletteを呼び出し、コマンドを探して実行!! なんかこれ、皆の前でやると相当格好良いぞ!

ファイル管理
通常のIDEと違い、Sublime Textはプロジェクト単位で管理することを強要せず、単体のファイルをそのまま開けます。
勿論プロジェクトでの管理も簡単で、ファルダを画面内にドロップすれば、左側のサイドバーに追加されます。

Minimap
上記の動画でも気づいたのかもしれませんが、SublimeTextの右側にコードの縮小図が表示されてて、全体のコードのどこに位置しているか俯瞰できる。また、ドラッグやクリックで所定の場合に移動もできて便利!

Hotsave
他のエディタであまり見ない画期的な機能の1つです。ファイルを編集した状態でエディタを終了させようとすると「保存しますか?」という確認が出ずにそのまま終了します。勝手に自動保存されたわけではなく、次回、エディタを立ち上げたときに最後に編集された状態が復元されるというわけです!

使いやすい要素、その他にも沢山・・・

  • 自分好みにカスタマイズ可能
  • プラグインによる拡張性が異常
  • 動きがサクサク
  • 上品なUI(←個人的にここ超重要)!
  • ショートカットの設定が自由自在
  • マウスを使わずとも、ショートカットでキャレット(カーソル)を縦横無尽に操れる
  • プログラマーにお馴染みの「Vimモード」にすることができる
  • 各種ソースコードの整形
  • FTP/SFTP機能 (プラグイン)
  • リアルタイムでlint(文法チェック)ができる  (プラグイン)
  • Emmet(Zen Coding)も無論OK! (プラグイン)

という風に、良いことを挙げればキリがないので、ここまでにしておきましょう。

総じて言えば、非常に洗練されたエディタで、カスタマイズ性が高く、性能も抜群! まさに「恋に落ちるエディタ」です!

結論、こいつを味方につければ仕事がはかどること請け合いなのです!!

んで、無料ソフトなのか!??

Sublime Textは有料ソフトです! 当然ですよね!

だけど!
1ライセンスで$59(約4,634円)と比較的に安価(団体購入割引あり)!
そして、異なるプラットフォームで一つのライセンスで大丈夫です。
何よりも、お試し期間が無限にあります(たまに購入を促すような画面はでてくるが、機能制限は一切なし!)。とことん堪能して気に入ってから購入しましょう!

 

Sublime Textを実際に使ってみよう!

物は試し。折角お試し期間に制限がないのですから、とにかく試してみましょう!

まずは公式サイトからSublime Textをダウンロードしましょう。
執筆時点での最新バージョンは2.01で、Retinaスクリーンにも対応済みです。

インストール方法はMacもWindowsも簡単なので、説明するまでもないでしょう。

Sublime Textの機能設定

ちょっと変わった設定方法?

設定というと、チェックボックスをチェックしたり、ラジオボタンを押したりするイメージが強いと思いますが、Sublime TextはそういったUIを持った設定画面がありません! 設定ファイルで設定を行います!
将来的にはUIも出てくるのかもしれませんが、設定可能の項目が大量にあって探すだけでも疲れてしまうので、むしろ設定ファイルのほうが使いやすかと。

ここで急に怖じけ出す人もいるかもしれませんが、大丈夫。すごい簡単ですから!

知っておきたい設定ファイルの基礎知識

設定ファイルには「Sublime Text用」と、「プラグイン用」のがあります。基本的にどちらの設定ファイルでも下記の2種類がセットで提供されています。

  • default(初期設定)
  • user(ユーザー設定)

設定を行うときには原則として、userのほうを編集します。defaultでも構いませんが、userなら設定内容を消せばdefaultのほうの設定にはなりますが、defaultの設定を変更したら初期値がわからなくなります。
もう1つの理由は、プラグイン、或いはSublime Text本体がアップデートされたときにはdefaultの設定ファイルが上書きされちゃうので、userのほうが無難だよってことです。

とりあえず、実際に設定してみましょう

今回はSublimeText本体の設定について書いていきます。

まず、メニューバーで下記の項目をクリックして、設定ファイルを開きます。
Preferences -> Setting-User

開いたら、設定ファイルに下記のようなテキストを書き込んで、保存すれば設定できます。

{
	"font_size": 18.0, //フォントサイズ
	"highlight_modified_tabs": true, //編集が行われたファイルのタブをオレンジ色にする
	"scroll_past_end": true //最後の行を超えてスクロールできる
}


JSをちょっとでもかじったことのある人なら一目で分かると思いますが、そう、設定ファイルはJSONで書かれています。

JSONとかよく分からないというデザイナーさん向けに説明しておきましょう。

JSON(ジェイソン、JavaScript Object Notation)は、JavaScriptにおけるオブジェクトの表記法をベースとした軽量なデータ記述言語である。

とか説明されても何のことやらさっぱりってなりますよね?
簡単に説明すると、下記のようなフォーマットを持つ記述法のことを言います。

{
  "キー": "値",
 "name": "John Smith",
 "age": 33 //数値はダブルクォーテーションで囲まない
}

全体を中かっこでくくり、キーと値のペアをコンマで区切って記述する(空白はあってもなくても一緒)。
非常にわかりやすい記述法ですので、なんとなくわかるはずです。というわけで、Sublime Textはこのような記述法で設定ファイルを書いて、保存することで設定します。

Preferences -> Setting-Default にはデフォルトの設定項目(説明も付いています)がずらりと書かれていますので、そこから設定したい項目を探しだして、user側の設定ファイルにコピペして設定するのが一般的な流れです。
ちなみに、筆者自身は上記の3つの設定しかいじってません! まぁ、デフォルトでも特に問題はないです。

Setting-Defaultファイルの中身↓

ショートカットの設定

さぁ、皆大好きなショートカットの設定ですが、これも上記の「設定ファイル」と同じ要領で行います。
同じく、userとdefaultの2つの設定ファイルが存在しているので、
Preferences -> Key Bindings-User
を開き、例えば下記みたいな設定を書き込んで設定します。

[
  { "keys": ["super+j"], "command": "join_lines" }, //superはMacのcommandを表しています
  { "keys": ["ctrl+F3"], "command": "next_result" },
  { "keys": ["super+k", "super+b"], "command": "toggle_side_bar" }  //cmd+kの後、速やかにcmd+b
]

ここでMacユーザーに注意して欲しいのは、「super」はcommandキーを表していることです。
それから、三番目の設定 [“super+k”, “super+b”] ですが、多分説明なしだと、大半の人は「cmd+k と cmd+bのどっちでも一緒」というふうに認識しちゃうでしょうね。実際は、cmd+kのあと、速やかにcmd+bを押すことを表しているのです!
ショートカットが多すぎても衝突事故が起きない工夫です!

プラグインのインストール

Sublime Textのプラグイン

SublimeTextのプラグインはpythonで書かれており、「Package」とも呼ばれています。
プラグインの一個一個はフォルダで纏められており、Preferences -> Browse packages ですべてのプラグインを確認できます。

プラグインのインストール方法(通常の場合)

Preferences -> Browse packages でプラグインを格納するフォルダを開き、ネットからダウンロードしてきたフォルダをぶち込んで、再起動。

Package Controlによるプラグインのインストール方法(推奨!)

数多く存在するプラグインを探してはインストール、不要になったら削除、アップデートのときいちいちインストールし直す・・・
そういった面倒を解決してくれるのが「Package Control」!
Package Control自身もSublime Textのプラグインの一つで、とにかく便利でこれなしでは生きていけないので、何も考えずにインストールしておこう!
View -> Show Console をクリックし、コンソールを開き、下記のコードをコンソールにコピペして、Enterを押すとインストールが開始されますので、終わったら再起動します。

※インストールのコードにはバージョン差がありますので、ご注意ください。

Sublime Text 2

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

Sublime Text 3

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

ちなみに、公式サイトは下記リンクです。

再起動後、cmd(ctrl)+shift+Pでコマンドパレットを開き、「install」とタイプし、Package Controlの項目が新しく追加されたことが確認できる、「Package Control: Install Packages」を選択してEnterを押すと、インストール可能なプラグインがずらりと出てきます。後は好きなのを選択してEnterをもう一回押せばインストールしてくれます。インストール済みのプラグインの管理に関しては、コマンドパレットで「Package Control」で検索したらコマンドがいっぱい出てきますので、削除なり、一時使用停止なり、更新なり好きにしてください。
注:インストール時に暫く左下に「=」が現れ、ちょろちょろしているのは「インストール中」を意味しています、終わったら消えますので、一回再起動してください。

その他のオススメプラグイン

  • Bracket Highlight
    (HTMLのタグ、JSの括弧のペアをハイライトしてくれる)
  • Side Bar Enhancements
    サイドバーの強化
  • Docblockr
    関数のコメントを自動生成
  • SublimeCodeIntel
    関数・変数が定義されているところにジャンプする
  • Clipboard History
    クリップボードのツール、Sublime内のコピしたテキストを繰り返し利用できる
  • SFTP
    FTPでのアップロードをSublime Textだけでできちゃう
  • WordPress
    Wordpressのコード補完
  • ApacheConf.tmLanguage
    Apache Confファイルの文法ハイライト
  • Emmet
    略称でHTMLやCSSをらくらく記述できるもの(ZenCodingとして知られていたプラグインの新しい名前)
  • abacus
    イコールとかコロンとかを綺麗に揃える
  • CSSFormat
    さまざまな整形規則でCSSを綺麗にしてくれる!(アルファベット順にプロパティを並べてくれて本当に便利)
  • AutoFileName
    imgタグやCSSなどで、パスを入力するときに、ファイル名を補完してくれる素晴らしいプラグイン
  • SublimeLinter
    HTML,CSS,PHP,JSなどのリアルタイム文法チェックを可能にしてくれる
  • Phoenix Theme
    おすすめ!SublimeTextをさらにお洒落にしてくれるテーマ!Retinaもちゃんと対応してるし!

他にも無数にありますが、プラグイン漁りしたい方はこちらからでどうぞ。
読者からお勧めのプラグインがあれば、是非コメントをいただけたら嬉しいです^_^

便利なショートカット

NOショートカットNOライフ! 僕がよく使うコマンドのショートカットをリストアップしておきます。

Windows Mac コマンド
ctrl+u command+u soft undo(カーソルの移動、文字列選択なども含めた「戻る」)
ctrl+space command+space 補完候補を表示
ctrl+shift+k ctrl+shift+k カーソルが止まっている行を削除
ctrl + shift+ enter command + shift+ enter 一つ上の行に改行を追加
ctrl+enter command+enter 一つ下の行に改行を追加
ctrl+shift+up ctrl+command+up 行を一行上に移動
ctrl+shift+down ctrl+command+down 行を一行下に移動
ctrl+d command+d 一回で単語を選択、二回目から選択中の文字列を検索して順次選択
ctrl+k,ctrl+d command+k,command+d 一番最後に選択された文字列をスキップする
ctrl+alt+2 command+option+2 画面を2カラムに分割
command+1~0 ctrl+1~0 N番目のタブを選ぶ
command+plus(+) ctrl+plus(+) フォントサイズを一段大きくする
command+minus(-) ctrl+minus(-) フォントサイズを一段小さくする
command+/ ctrl+/ コメントアウト(コメント解除)
control+t ctrl+t 選択された二箇所の文字を交換する
command+l ctrl+l 行を選択

下記の記事にすべてのショートカットが掲載されてますので、ご参考ください!
Sublime Text 2のキーボードショートカット一覧 (Mac OS X)

この記事を書いた人

王
バックエンドエンジニア 2012年入社
LIGの王です。ウェブの全てを学ぶ為、中国は四川省より日本にやってきました。王という名に恥じぬよう、ウェブ業界のKINGとなるべく日々頑張っております。よろしくお願いいたします。

こちらもおすすめ

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

  • 著者上野正大,杉本 淳,前川昌幸,森田 壮
  • 価格¥ 2,592(2015/10/26 11:38時点)
  • 出版日2014/03/20
  • 商品ランキング29,779位
  • 単行本(ソフトカバー)256ページ
  • ISBN-104844335677
  • ISBN-139784844335672
  • 出版社インプレスジャパン