html作成もプログラムもそうですが、いつも同じような構文が出るのは付き物です。

よし！ここに商品リストタグ！

絶対位置のスタイルシート！

ベンダープレフィックス！

ましてはECサイトで商品ページや、特集ページ等でタグをコピペして使いまわす事も多いはず。
まぁやってることは大した変わりませんがね。

でもコピペとは違いちょっとした柔軟性も兼ね備えられるので覚えておくとお得ですよ！

スニペットとは？

スニペットとは、指定した頭文字を入力すると予測キーワードとして選択出来て、たった数文字入力するだけで、決められたテンプレートをどど～んと出力出来てしまうスグレモノです！
Dreamweaverを利用している人は使用している方は多いのではないでしょうか。

例えば、タグ作成中に『item』と打つと

の様に表示させることが出来たり、また『3カラム用や4カラム用』と用途に合わせて登録しておくと、それだけで臨機応変に対応出来ます。

スニペットを作成

Macを持っていないので、申し訳ありませんが、Windowsでの操作のみとなります。

スニペット用ファイルを作成する場所

オリジナルのスニペットを作るには、既定の拡張子を用いたファイルを作成する必要があります。
まずはスニペットが格納されているフォルダにスニペットファイルを新しく作成しましょう。

スニペットとして認識してくれるフォルダは『Preferencesメニュー ＞ Browse Packages…』をクリックするとフォルダの参照が可能です。

開きました。
基本的にはこの中に既定のファイルを作成するだけで、スニペットとして予測キーワードに表示されます。
ただ、ルートにそのまま入れてしまうと管理上よろしくないので、自分が作ったスニペットとしてわかりやすいように新しくフォルダを作ってその中にファイル群を作成してあげると良いかと思います。

スニペット用ファイルを作成

ファイルを作成する場所が決まったら、まず新しくファイルを作成しましょう。
ファイル名は『●●●●.sublime-snippet』です。
『●●●●』はこのスニペットが何なのかわかりやすい名前を付けて上げると良いと思います。
今回は、ファイル名は『item』にしました。

スニペットファイル内のテンプレート

ファイルをが完成したら、ファイル内に必要なコードを入力します。
コードの意味は後ほどご紹介します。

[xml]
<snippet>
<description></description>
<tabTrigger></tabTrigger>
<scope></scope>
<content>
<![CDATA[

]]>
</content>
</snippet>
[/xml]

<description> ～ </description>

このスニペットの説明文です。予測キーワード内に出てくる補足となりますので、分かりやすいモノを付けてあげましょう。

<tabTrigger> ～ </tabTrigger>

予測キーワードとして使用される文字列です。
今回の例でいうと『item』がtabTriggerですね。
こちらも自分が使う際に違和感ないものを使用すると良いです。

<scope> ～ </scope>

表示させたいファイル形式のフィルタを掛ける事が出来ます。
例えば、作成したスニペットをhtmlだけで表示したいのに、スタイルシート作成時とかにも表示されたらまぁ、なんていうかウザイですよね。
絶対に使わない場所でこちらもどうですか？って言われても、いやいや何言っちゃってんの？ってなっちゃいます。
そうならないように、表示させたいファイル形式を制限させてあげる事が出来ます。
<scope />に関してはコチラの記事も合わせてご覧下さい！

[SublimeText3] スコープを正しく指定して、簡潔にスニペットを使う。

<content><![CDATA[ ～ ]]></content>

実際に出力したい文字列を入力します。
tabTriggerで入力した文字列を入力し、そのdescriptionを選択すると、content内容がペッと出てくる感じです。

完成例

上記の通りファイルを作成してみました！
出来上がり例はこんな感じです。

[xml]
<snippet>
<description>2カラム商品</description>
<tabTrigger>item</tabTrigger>
<scope>text.html</scope>
<content>
<![CDATA[
<ul class="item item_2">
<li>
<a href="http://item.rakuten.co.jp/account/code/">
<p class="name">商品名</p>
<p class="price">通常価格</p>
</a>
</li>
<li>
<a href="http://item.rakuten.co.jp/account/code/">
<p class="name">商品名</p>
<p class="price">通常価格</p>
</a>
</li>
</ul>
]]>
</content>
</snippet>
[/xml]

これで『item』とたった最高4文字入力するだけで、これだけのタグを出力する事が出来ます。
楽ちんですね！

スニペットを使いやすく拡張

スニペットを出力時に指定場所を書き換える

例えば上記の例で言うと、2カラムは出来るけど3カラムにしたい時は後でいちいち選択して入力し直すしかないですね。

もちろん、ファイルをコピーして3カラム商品用のファイルを作るのも正解です。
ですが今回は、振られているクラス名を変更するとカラム数が変わると想定したスニペット編集方法をご紹介します。
想定でごめんなさい！

例えば『item_2』の部分を『item_3』にすると3カラムになるスタイルシートが組まれているとします。

と言う事は、『2』の数字の部分を入力時に変更出来るとわざわざマウスで選択する作業が省けますね。

そういった場合は出力後変更したい文字を『$1』の様に『ドルマーク+数字』に変更します。
下記例では、『item_2』の部分を『item_$1』にしました。

これで、出力時にその場所にカーソルが行った状態で出力されますので、そのまま任意の値を入力出来るっていう感じです。

[html]
<ul class="item item_$1">
<li>
<a href="http://item.rakuten.co.jp/account/code/">
<p class="name">商品名</p>
<p class="price">通常価格</p>
</a>
</li>
<li>
<a href="http://item.rakuten.co.jp/account/code/">
<p class="name">商品名</p>
<p class="price">通常価格</p>
</a>
</li>
</ul>
[/html]

出力結果

また『$2』『$3』のように、連番を増やす事で、TABキーを押すごとにその数字順にカーソルが移動します。
複数テンプレート内での変更がある場合に大変便利です！

[html]
<ul class="item item_$1">
<li>
<a href="http://item.rakuten.co.jp/account/$2/">
<p class="name">$3</p>
<p class="price">$4</p>
</a>
</li>
<li>
<a href="http://item.rakuten.co.jp/account/code/">
<p class="name">商品名</p>
<p class="price">通常価格</p>
</a>
</li>
</ul>
[/html]

出力結果

$0の用途

通常は最後までTABキーを押すと出力の最後にカーソルが行きますが、$0を利用すると任意の場所に最終カーソル位置を設定する事が出来ます。
例えば下記の様にすると、一番後ろではなく</li>の後ろを最終カーソル位置に変更出来ます。

[html]
<ul class="item item_$1">
<li>
<a href="http://item.rakuten.co.jp/account/$2/">
<p class="name">$3</p>
<p class="price">$4</p>
</a>
</li>
<li>
<a href="http://item.rakuten.co.jp/account/code/">
<p class="name">商品名</p>
<p class="price">通常価格</p>
</a>
</li>
$0
</ul>
[/html]

出力結果

初期値を設定してカーソル移動

上記の例ではただ、カーソルが移動するだけでしたが、下記の様にすると初期値を設定してカーソル移動が出来るようになります。
例えば、『3カラムの可能性はあるけど、殆どは2カラムだよ』みたいな時に便利です。

初期値を設定するには『${1:値}』の様に入力します。
下記の例では初期値を『2』にしてみました。

[html]
<ul class="item item_${1:2}">
<li>
<a href="http://item.rakuten.co.jp/account/$2/">
<p class="name">$3</p>
<p class="price">$4</p>
</a>
</li>
<li>
<a href="http://item.rakuten.co.jp/account/code/">
<p class="name">商品名</p>
<p class="price">通常価格</p>
</a>
</li>
$0
</ul>
[/html]

これで初期値が既に入力され、かつ選択された状態で出力されます。
あとは、変更する場合は変更し、しない場合はそのままTABキーを押せば、次の値までカーソルが移動します。
これまた便利ですね！

同じ数字を利用した複数箇所の編集

実は上記の数字は、同じ数字をテンプレート内に複数使うと、複数個所を同時に変更が出来るんです。これはマジ便利。
こんな例は業務上意味はないですが、参考までにこういう風な使用が可能です。

[html]
<ul class="item item_${1:2}">
<li>
<a href="http://item.rakuten.co.jp/account/${2:code}/">
<p class="name">$3</p>
<p class="price">${4:1,980}円</p>
</a>
</li>
<li>
<a href="http://item.rakuten.co.jp/account/${2:code}/">
<p class="name">$3</p>
<p class="price">${4:1,980}円</p>
</a>
</li>
$0
</ul>
[/html]

出力結果

これは便利ですね！

さらに細分化して汎用性アップ

ここまでくると番外編ですが、更に細分化してスニペットにスニペットを合わせるとより汎用性の高いスニペットを使用出来ます。
今までの例では、リストデータは2個入って固定ですが、この部分を別に一つスニペットを作れば、個数に捉われないテンプレート化が可能です。

ラップ部分の作成

まずカラム数を変更出来るようにしただけのスニペットを作成。
[xml]
<snippet>
<description>2カラム商品ボックス</description>
<tabTrigger>item</tabTrigger>
<scope>text.html</scope>
<content>
<![CDATA[
<ul class="item item_${1:2}">
$0
</ul>
]]>
</content>
</snippet>
[/xml]

商品部分のスニペットを作成

今までの例でいうと、<li> ～ </li>の部分をスニペットにします。
[xml]
<snippet>
<description>商品データ</description>
<tabTrigger>itemdata</tabTrigger>
<scope>text.html</scope>
<content>
<![CDATA[
<li>
<a href="http://item.rakuten.co.jp/account/${2:code}/">
<p class="name">$3</p>
<p class="price">${4:1,980}円</p>
</a>
</li>
]]>
</content>
</snippet>
[/xml]

出力結果

こうすれば、商品数に変動が出ても、一つ一つのデータで読み込める上、カーソルもそれぞれ移動されるので、より柔軟性の高いスニペット運用にする事が出来ます。

さらに、リスト内を同じにしてラップ部分を違うスニペットを適用等、様々な応用も出来そうです。
ますます便利！

というより、スニペットの観点からしてこちらの方が本来の用途に近いかもしれませんね。

まとめ

今回の例はあくまでも一例ですが、いつも何気なくコピペしている内容や、ファイルをコピーしてきて中身改変…とかの場合は、スニペットにしておくととても便利です。
と言うのも、コピーしてくると変更しなくちゃいけない場所が変更されてなくて、と言った事が頻発して困ったことがあったからです。
よくある体験談です。

あくまでも一例ですが、僕は吹き出し部分のスタイルシートをスニペット化してます。
毎回昔のソースから持ってきて使っていた時にこのスニペット機能の活用を始めました。
こんな感じ。

あとは、よくリンクと画像形式のタグを良く使うので、
[xml]
<snippet>
<description>画像リンク</description>
<tabTrigger>a</tabTrigger>
<scope>text.html</scope>
<content>
<![CDATA[
<a href="${1:#}" target="${2:_top}">
<img src="${3:example.jpg}">
</a>
]]>
</content>
</snippet>
[/xml]
だったりとか、

あとは、ECサイト用のURLだったりとか。
[xml]
<snippet>
<description>キャビネット(サムネイル)</description>
<tabTrigger>cabinet-thumbnail</tabTrigger>
<scope>text.html</scope>
<content>
<![CDATA[
http://thumbnail.image.rakuten.co.jp/@0_mall/account/cabinet/${1:directory}/${2:name}.jpg?_ex=${3:200}x${4:200}
]]>
</content>
</snippet>
[/xml]
ここら辺までくるともう辞書登録に近いイメージになってしまいますね(笑)

こういう細かい運用管理が出来るのもSublimeTextの魅力ですね！

本来部分的なパーツに使用する事が多いですが、使い方次第では楽天市場やYahooショッピング等のサイト運営にありがちな、同じようなほねこを使いまわす作業をまるごとテンプレート化したりと、色々有効活用できると思います。

余談ですが、今は吹き出しのような定型構文は全部sassのmixinで代用しています。
sassの話はまた今度！