こんにちは。
小林です。
今日も、SublimeTextの便利な使い方を、一緒に覚えていきましょう。
今回は、「スニペット」についてです。
DreamWeaverやEclipse等のIDEをご利用の方にはおなじみかと思われますが、
まずは、「スニペット」とは何ぞやというところから。
スニペットとは？
snippet 【名詞】
切れ端、断片
切れ端や断片で何ができるのかといいますと、例えば、何かものを作る際に、よく使う部品を簡単に利用出来る様に準備しておくとどうでしょう？とっても効率がいいですよね？
三輪車を作る時に、タイヤを三つそれぞれ一から作っていたら、大変だし、出来上がりもばらつきが出たりしますよね。タイヤを作るものを準備してポポーンとタイヤを三つつくっちゃいたいところですよね。
こういう考え方でしょうか。
DRYってやつですかね。
DRY【Don’t Repeat Yourself. 】
ソーサリーリングも天鱗も一発で出せばいいじゃない。
つまり、スニペットを使いこなすと、ものごとをとっても効率的にすすめられるようになるはずです。
どんなスニペットを作ればいいの？
例えば、cakePHPのViewを実装する場面を想定しましょう。CMSでおなじみの管理画面からデータを放り込んだら反映されるといった感じのものです。
だいたい、こんな書き方をしますよね。
<h3><?php echo h( $title ); ?></h3>
<h4><?php echo h( $subtitle ); ?></h4>デザインや、管理するデータ量によっては、ひたすらこのような記述を繰り返さなければいけない場合があったりします。こんなときこそスニペットの出番ですよ。
SublimeTextでのスニペットの使い方
まずはスニペットファイルを作ります。
Macの場合以下のパスにスニペットファイルを保存します。
~/Library/Application Support/Sublime Text 2/Packages/
Windowsなら
%APPDATA%/Sublime Text 2/Packages/
ファイル名は、何スニペットなのかわかりやすい名前をつけましょう。そして、拡張子には必ず「.sublime-snippet」を指定してください。SublimeTextは、起動した際に、先のパスの以下にあるこの拡張子を持つファイルを自動的にロードします。
したがって、同じ様な用途のスニペットはフォルダを作成して、その以下にまとめおいたりするといいかもしれません。言語別とか、フレームワーク別とかで。それでは、作成したスニペットファイルを開いて、その内容を記述しましょう。
<snippet>
<content><![CDATA[<?php echo h(${1:var}); ?>]]></content>
<tabTrigger>h</tabTrigger>
<scope>text.html.basic</scope>
<description>CakePHP: echo h()</description>
</snippet>例えばこれは、先ほどのcakePHPでよく使う書き方をさくっと、記述してくれるやつです。この記述を利用したいところで、hをタイプしてTABをッターンすれば、OKです。
ちょっと説明しますと、
- content
- 出力される内容です、この書き方ですとカーソル位置を$の後ろにあわせてくれます。
- tabTrigger
- こちらが入力された状態で、TABキーを押せば展開されます。
- scope
- このスニペットが有効になるモード（ちなみに現在のモードは、cmd + opt + pで確認できます。）
- description
- このスニペットの説明とかですかね。
どうですか？
SublimeText用のスニペットはいろいろなところで公開されていたり、配布されています。そういったものを参考にしながらご自身にあったものを作成したりされるといいと思います。
とっても便利ですよ！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
