Emmetのおさらい

Emmet

HTMLやCSSの記述を簡略化することで、高速なコーディングを実現するプラグインです。
Coda2のみならず、SublimeTextなどでも利用することができます。

EmmetをCoda2にインストールする方法は下記記事を参照してください。
もっとコーディングが早くなる「Emmet」の環境設定（coda2）

SublimeTextにEmmetをインストールした場合、かなり強力な補完機能が付いています。
また、スニペットを拡張するメニューもGUI上に用意されています。

しかしながら、Coda2の場合は補完機能も貧弱（例えばCSSの場合、簡略記法をプロパティごとに覚える必要があります。SublimeTextの場合は部分一致で候補が表示されます。）ですし、スニペットを拡張するようなメニューがありません。

自分流にスニペットをカスタマイズしたい場合、
ターミナルからsnippets.jsonというファイルを修正・拡張していく必要があります。
※ json形式なので非常に拡張性が高いです

Coda2.5に上げてEmmet使えなくなったんだけど？

OSのバージョンによって対応方法が違います。注意してください。
また、対応方法を誤るとCoda2.5がぶっ壊れる可能性があります。自己責任で操作を行ってください。
※ Coda2.5をインストールし直せば使えるようになります。最悪OSリカバリすry

・OSX Mavericks 以下の場合

こちらの記事最下部に対応方法が書いてあります。
Coda2.5にしたらEmmetプラグインが使えなくなった

  cd ~/Library/Application Support/Coda 2/Plug-ins/
  open . # Finder で現在のディレクトリを開く操作
  

Plug-insディレクトリを表示したら、
Emmet.codapluginを右クリック→「パッケージの内容を表示」。

そのまま Contents → Info.plist をエディタで開いてください。
※ ターミナルから直接 ~/Library/Application Support/Coda 2/Plug-ins/Emmet.codaplugin/Contents/Info.plist を vi しても大丈夫

ファイルを開くとxml形式でデータが記述されているはずです。
「CFBundleShortVersionString」のバージョンを1.0.1に書き換えて保存します。

これで対応完了です。Coda2.5を再起動して次へ進んでください。

・OSX Yosemite の場合

下記URLからパッチ版をダウンロードして、公式と同じ方法でインストールするだけです。
Coda2.5用 Emmetパッチ版

snippets.jsonを開く

Coda2でEmmetが使える状態になったら、まずはターミナルからsnippets.jsonを参照します。

  cd ~/Library/Application\ Support/Coda\ 2/Plug-ins/Emmet.codaplugin/Contents/Resources/
  cp -rp snippets.json snippets.json.orig # オリジナルのバックアップ
  open . # Finder で現在のディレクトリを開く操作
  

snippets.json の場所がFinderで表示されるはずです。エディタで開いてください。
※ Coda2で開いて大丈夫です

json形式でずらずらと設定が記述されているはずです。
これで準備は完了です。

CSSのスニペットを追加する

前もって言っておくと、snippets.jsonを修正したあとのCoda2の再起動は必須です。
忘れないようにしてください。

ファイルの中から以下の行を探してください。

  "css": {
    "filters": "html",
    "snippets": { // ここからがCSSスニペットの設定
      
      /* 中略 */
      
      "wfsm": "-webkit-font-smoothing:${antialiased};",
      "wfsm:a": "-webkit-font-smoothing:antialiased;",
      "wfsm:s": "-webkit-font-smoothing:subpixel-antialiased;",
      "wfsm:sa": "-webkit-font-smoothing:subpixel-antialiased;",
      "wfsm:n": "-webkit-font-smoothing:none;",  // 前行の末尾へ「,」の追加を忘れずに
      
      // ここに独自のスニペットを追加していけばOK
    }
  

例えば、次のような「hoge」というスニペットを加えます。

   "css": {
    "filters": "html",
    "snippets": {
      
      /* 中略 */
      
      "hoge": "font-family:\"hogefont\"";
    }
  

以下のように展開できます。

※ 例のように「”」を出力したい場合はバックスラッシュでエスケープする必要があります。

記述ミスがあると、展開されずにtabスペースが生成されるだけなので安心してください。
その場合は、設定をもう一度見なおしてみましょう。

CSSのスニペットを修正する

個人的には「m:a」（margin: auto;）のように、コロン入力が必要な既存のスニペットが面倒なので、
「ma」に変更したいと思います。また、「margin: auto;」ではなく「margin: 0 auto;」として
展開されるように変更します。
※ margin: 0 auto; を使う機会のほうが多いので…

   "css": {
    "filters": "html",
    "snippets": {
      
      /* 中略 */

      "m:a": "margin:auto;",  // これを
      "ma": "margin:0 auto;", // このように修正しました
    }
  

上記と同様の手順で、スニペットを自由に修正することができます。

CSS以外のスニペットも追加・修正したい場合

例えば、HTMLのスニペットを書き換えたいときは下記を探します。

  "html": {
		"filters": "html",
		"profile": "html",
		"snippets": {  // ここからがHTMLスニペットの設定
  

という具合です。手順はCSSと一緒なので、すぐにわかると思います。

特殊な記法について

    // CSSのスニペットに下記を追加
    "border-test": "border: ${1:px} ${2:type} ${3:color};"
    

    // CSSのスニペットに下記を追加
    "border-test": "border: 1px solid #|;"
    

BEM用のテンプレを吐かせてみました

CSS設計規則の『BEM』でコーディングする際のテンプレを吐かせるテスト。
snippets.json側は下記のような設定にします。

  "less": {
    "extends": "css",
    "snippets": {
      "init": "/**************************************\n  Variable\n**************************************/\n@basecolor: #fff;\n@maincolor: #000;\n@subcolor: #323232;\n@highlight: yellow;\n@highlightBgColor: #323232;\n@highlightBg: yellow;\n\n/**************************************\n  Common\n**************************************/\nhtml {\n\tfont-family:\"Hiragino Kaku Gothic\" Meiryo, sans-serif;\n\tfont-size: 62.5%;\n}\n\nbody {\n\tfont-size: 100%;\n}\n\n/**************************************\n  Block, Elements, Modifire\n**************************************/\n\n/**************************************\n  Utility\n**************************************/\n\.u-content {\n\twidth: 1024px !important;\n\tmargin-left: auto !important;\n\tmargin-right: auto !important;\n}\n\n\.u-ib {\n\tdisplay: inline-block !important;\n}\n\n\.u-ibchild \> li {\n\tdisplay: inline-block !important;\n}\n\n\.u-textleft {\n\ttext-align: left !important;\n}\n\n\.u-textcenter {\n\ttext-align: center !important;\n}\n\n\.u-textright {\n\ttext-align: right !important;\n}\n\n\.u-fade {\n\t-webkit-transition: opacity \.3s ease-out !important;\n\ttransition: opacity .3s ease-out !important;\n\n\t &:hover {\n\t\topacity: .7 !important;\n\t}\n}\n\n\.u-highlight {\n\t-webkit-transition: color \.3s ease-out !important;\n\ttransition: color .3s ease-out !important;\n\n\t &:hover {\n\t\tcolor: @highlight !important;\n\t}\n}\n\n\.u-highlight--bg {\n\t-webkit-transition: color \.3s ease-out, background-color \.3s ease-out !important;\n\ttransition: color .3s ease-out, background-color \.3s ease-out !important;\n\n\t &:hover {\n\t\tcolor: @highlightBgColor !important;\n\t\tbackground-color: @highlightBg !important;\n\t}\n}"
    }
  },
  

※ めちゃくちゃ横に長いけどjsonは改行させるとエラーになってしまうので仕方ないｗ

これで「init」と入力して展開するだけで下記のようなテンプレが吐き出せました。

独自のmixinなんかもスニペットとして登録しておくと捗りそうですね。

おわりに

日本語環境の設定も合わせて行っておくとよいです。
snippets.json先頭の「variable」を修正します。

  "variables": {
    "lang": "ja",
    "locale": "ja-JP",
    "charset": "UTF-8",
    "indentation": "\t",
    "newline": "\n"
  },
  

あとは自分の好きなようにカスタマイズして色々と試してみてください。
きっと作業効率が上がりますよ！