【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をダウンロードします。
    スクリーンショット 2014-12-02 15.41.28
  2. ダウンロードが完了したら解凍します
    スクリーンショット 2014-12-02 15.41.55
  3. ダブルクリックします。すると、既にインストール済みの方は、「プラグイン “Emmet” と置換しますか?」のダイアログが出るので、置き換えます。
    スクリーンショット 2014-12-02 15.44.11 
  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
    スクリーンショット 2014-12-02 16.57.36
     
  6. プラグインをcontrol+クリックして、”パッケージの中身を表示”をクリックします。
    スクリーンショット 2014-12-02 16.59.37
  7. パッケージの中身が表示されるので、更にContents > Resources > snippets.jsonをCodaで開きます。
    フルパスはコチラ → /Users/{ユーザー名}/Library/Application\ Support/Coda\ 2/Plug-ins/Emmet.codaplugin/Contents/Resources/snippets.json
    スクリーンショット 2014-12-02 17.02.04スクリーンショット 2014-12-02 17.05.47
  8. Codaで開いたら、先ほどコピーしておいたemmet snippets.jsonと置き換えます。
    スクリーンショット 2014-12-02 17.10.14ついでにlangとlocaleをそれそれ

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

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

  9. Codaを再起動します。
  10. PHP-HMTLモードのファイルでテストしてみます。
    スクリーンショット 2014-12-02 17.16.00

    スクリーンショット 2014-12-02 17.17.01
    バッチリ展開されてます (^^)

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

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

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

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

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

2件のコメント

  1. 情報ありがとうございます。これでやっとcoda2.5に移行できそうです。
    Emmet.codapluginのリンク先ですが、Issue #18 · emmetio/Emmet.codapluginのページの下の方で
    @nodequeryさんがMatch Pair Tagなどの対策をされてるhttp://cl.ly/153k3Z1s2H1Gのものにしたほうがよさそうです。
    あとはExtensions Pathの設定が効かないのが解決するとほぼ完璧なんですけどね。

    1. ikaさん
      お役に立てて良かったです (^^)
      僕もCoda2.5で喜んでたんですが、Emmetで困ってました。

      >Match Pair Tagなどの対策をされてるhttp://cl.ly/153k3Z1s2H1Gのものにしたほうがよさそうです。
      情報ありがとうございます!! 早速やってみます 😀

ただいまコメントは受け付けていません。