最近なにやらちらほら見かけるエディタ、SublimeText2。
勉強会とかあったみたいですし、その影響もあるでしょう。
(あ、WordCampOsaka行かれた方、お疲れ様でした。僕は行けませんでしたけど(つДと)。)

そこらへんの事情はいまいちわかってませんが、とりあえず『恋に落ちる人が出るくらいのエディタ』らしいです。
霙さん(@xxmiz0rexx)なんて爆速で恋したみたいですので、「恋させてみろや!」ぐらいの勢いで使ってみることにしました。

【参照サイト】

”Sublime Text 2”というエディタ

さて、件のSublimeText2ですが、エディタなんです。
何を隠そう、僕にはEmEditorという長年連れ添ったエディタがいるんですよね。
そんなに簡単に恋になんて落ちるもんですか( ´Д`)=3

でも、最近チラチラと視界に入ってきて気になるのです。
幸い、無料で使ってみれますのでちょっと試してみようかな、とダウンロードしにいくことに。
浮気じゃないんだからねっ

エディタって?

あまり馴染みのない方にはわかりにくいかもしれませんが、有名所だと秀丸エディタとかTeraPadみたいなテキストデータを編集するソフトです。
わかりやすく言えば豪華版”メモ帳”ですね。

ダウンロードとインストール

普通に公式サイトのDownloadから自分のプラットフォームに合うものを選択してダウンロードし、インストールします。
ここは何も難しいことはありません。

インストールしたら起動しましょう。(途中までスクリーンショットを誤ってセピアに保存してしまいましたが、内容に問題ないのでそのまま使ってます。ご了承くださいね。)

うん、言うだけあって優雅かも。

Sublime Text 2にパッケージプラグインを入れておく

このエディタ、プラグインで拡張が可能なんですが、その際にパッケージ化されたプラグインをインストールするためのプラグインがあるので、先にインストールしてしまいます。

インストールするにあたっては、SublimeText2で(Windowsの場合)Ctrl+@(`)のショートカットでコンソールを呼び出して下記コードをコピペしてEnterをおもむろに叩きます。
もしくはファイルメニューから「View -> Show Console」で同様の画面が出せますのでそちらからでもOKです。

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 2を再起動します。

ちなみに他にもいろんなパッケージをリリースされているみたいなので、時間があるときに見てみるのもいいかもしれませんね。

Emmet(Zen-Coding)プラグインをインストールする

さて、お次はコーダーの強い味方、Zen-Codingをインストールしたいわけですが、Zen-Codingの後継であるEmmetが開発版ながらインストールできますので、どうせなのでそっちを試すことにしました。

Sublime Text 2で「Ctrl+Shift+P」を押すとコマンドパレットが開きますので「install」と入力します。

すると再度入力欄がでます。

ズラズラ出てますが、「emmet」と入力しEnterを押すとインストールが完了します。
プラグインが入ったところで、Sublime Text 2を再起動しましょう。

もしも間違ったパッケージをインストールしたら?

プラグイン、アンインストールしたくなるときありますよね。
基本的に使わないものをインストールしておくっていうのは嫌いなので、PCにしてもWPプラグインにしても使わないものはアンインストールするようにしている私ですがSublime Text 2でもそこは同じです。
プラグインをアンインストールする場合はコマンドパレットから、「Remove」と入力するとRemove Package」が出てくると思いますので、インストールした時と同じ要領で行うことができます。
また、リポジトリを増やしたりその他の設定も出来るようですので、詳しくはSublime Package ControlのUsageを参考にするといいでしょう。

Emmetを使ってみる

さて、Emmetを使ってHTMLを書いてみることにします。
Sublime Text 2でコマンドパレットを開いて「html」と入力すると、「Set Syntax : HTML」が候補にあがりますので選択します。

後は普段通り、使うだけ。(ここでは例としてよくありそうな画像リンクを作ってみてます)

Tabを押すと…はい、展開されました。

プラグインの設定ファイルをいじりたい!

こんなときもままあります。
どんなキーが有効なのか調べたいときとか、出力内容を変えたいときとか。

他の多くのアプリケーションと同じく、設定ファイルは(Win7だと)ユーザーディレクトリの中にあります。いわゆる「Document and Settings」ってやつですね。
ちなみにWindows7におけるデータの場所は

%UserProfile%\AppData\Roaming

です。具体的には「C:\ユーザー\(ユーザー名)\Appdata\Roaming」ですね。XPだと「C:\document and settings\(ユーザー名)\Application Data\」でしょうか。もちろんフォルダオプションで隠しファイル見えるようにしておいてくださいね。

最初にWin7を触ったときはApplicationDataのフォルダひらけねぇ!とか思ったもんです。いやはや懐かしい。

【補足リンク】

で、中にSublime Text 2のフォルダがありますので、「Packages/Emmet」と進みます。

ここに並んでいるファイル群が「Sublime Text 2においてEmmetを使用するときに使われるファイル」なので、Emmet自体の設定に手を加える場合は更に「Emmet」内部に進みます。
スニペットの内容はsnippets.jsonにjson形式で記述されていますので、それに則って変更していけば貴方色に染まってくれることでしょう。
言語の部分とかだとファイル先頭にvariablesで定義されてるので書き換えも楽ですね!


そんなわけでSublime Text 2の導入でした。
ざっくり触った感じだと「な、なかなかやるじゃねーの…」って感じです。わかりにくいですね。

Sublime Text 2にしてもEmmetにしてもこれからもどんどんドキュメントが増えていくでしょうし、そんなに頭を悩ませるほど難しいこと(主に英語的な意味で)があるわけでもないと思うので、じっくりじっくり触っていければいいなぁと思う次第でした。