【Coda2 Advent Calendar 2014】Coda + Emmetプラグイン復活!!

Coda2 Advent Calendar 2014 二番手の @marushu です。初Advent Calendaです、よろしくお願いします。

Codaを使い始めたきっかけは、2007年にCoda+Transmitのセットでディスカウントをしていた頃がありまして、それ以来Codaを使い続けています。
2007年といえば、丁度僕がWebのお仕事を始めた頃でして、更に言うと、Macを購入した頃です、いや、懐かしいw

前置き長くなりました。。Coda2.5になって何を書こうかなぁとおもってたら、昨日解決したEemmetに関する情報を書こうと思います。

Coda 2.5とEmmet

Eemmetとは？

Emmet — the essential toolkit for web-developers

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow:

簡単に言うと、ショートカットでHTMLやCSSをスニペットっぽくサクサク書き込んでいくツールでしょうか。わかりにくい？…^^;

例えば、

[code]ul#data-list>li*5>a>img[/code]

と書いて、展開用のコマンドを入力すると、

[code]
<ul>
<li><a href=""><img src="" alt="" /></a></li>
<li><a href=""><img src="" alt="" /></a></li>
<li><a href=""><img src="" alt="" /></a></li>
<li><a href=""><img src="" alt="" /></a></li>
<li><a href=""><img src="" alt="" /></a></li>
</ul>
[/code]

のようにサクッとHTMLを書き出してくれるツールです。便利過ぎます。

上記URLにアクセスすると、デモVideoがあるのでそちらをご覧ください。
EemmetはCoda以外にも沢山のテキストエディタ用があります。

僕も普段から便利に使っていたのですが、Coda2.5になってからEmmetが使えなくなっていました。
正しくは、きちんと展開できなくなっていたのです…。
（※言語モードがPHP-HTMLの場合です。）

[html]ul#data-list>li*5>a[/html]

と書いてコマンドを打ち込んでも、

[html]<ul><li><a><img></img></a></li><li><a><img></img></a></li><li><a><img></img></a></li><li><a><img></img></a></li><li><a><img></img></a></li></ul>[/html]

のように、imgタグなどはタグ自体が正しくない状態でした。

僕は仕事の大半がWordPressのテンプレート作成だったりするので、言語モードPHP-HTMLで使うことがほとんどです。
言語モードがHTMlだと問題なく動くんですが…。

Coda2.5になって起動や動作も随分軽くなって喜んでいたのに、Emmetが使えないととても困ります。何か解決策がないかとネットを彷徨っていると、ありました !!

Latests Coda 2 ß Crash on launch if Emmet plugin enable · Issue #18 · emmetio/Emmet.codaplugin

wethecodeさんのコメントによると、FROLoffさんの作られた修正版を更に修正すると、Coda2.5のPHP-HMTLモードでも問題なくEmmetが動作します。それではちょっと長いですが、行ってみましょー!! 😀

修正方法

1. 先ずは、Emmet.codapluginをダウンロードします。
   
2. ダウンロードが完了したら解凍します
   
3. ダブルクリックします。すると、既にインストール済みの方は、「プラグイン “Emmet” と置換しますか？」のダイアログが出るので、置き換えます。
    
4. Latests Coda 2 ß Crash on launch if Emmet plugin enable · Issue #18 · emmetio/Emmet.codaplugin
   の”Here is my full snippets.json”にあるリンク先のsnippets.jsonを丸ごとコピーします。
   https://gist.githubusercontent.com/wethecode/1f79baf168680afb0f2d/raw/755f9fb71dcc34df811b4bc26448d88a0f97f34d/snippets.json（こちらの方がコピーしやすいです。）
5. 次に、Codaにインストール済みのEmmetプラグイン内のsnipets.jsonの中身を置き換えます。Emmetプラグインの場所は、/Users/{ユーザー名}/Library/Application\ Support/Coda\ 2/Plug-ins/Emmet.codaplugin
    
6. プラグインをcontrol+クリックして、”パッケージの中身を表示”をクリックします。
   
7. パッケージの中身が表示されるので、更にContents > Resources > snippets.jsonをCodaで開きます。
   フルパスはコチラ → /Users/{ユーザー名}/Library/Application\ Support/Coda\ 2/Plug-ins/Emmet.codaplugin/Contents/Resources/snippets.json
   
8. Codaで開いたら、先ほどコピーしておいたemmet snippets.jsonと置き換えます。
   ついでにlangとlocaleをそれそれ

   [code]
   "lang": "ja",
   "locale": "ja-JP",
   [/code]

   にしておくと、html:5とかで便利かも。

9. Codaを再起動します。
10. PHP-HMTLモードのファイルでテストしてみます。
    

    

以上です。ちょっと長かったかな…

これで今まで通り、快適にテンプレート作成できますね 😀
友志の皆さんに感謝です!! 僕もこういう協力ができるようになりたいっすね。

以上でCoda+Emmet復活は終わりです。いかがだったでしょうか。Codaは一番手に馴染んだツールだからかも知れませんが、使っていて気持ち良いです。

サーバのファイルを直接触れたり（あまりオススメできないですが…）、ファイルを監視して、編集あったファイルだけサクッとSFTPでアップロードできたりと、外にも便利な機能が沢山あります。

Coda使いの皆さん、外にもこんなのあるよ〜とか教えてくださ〜い!! 明日はまたまた@gatespace_kさんです 😀