CodaにZen-Codingを入れてみると…

前回前々回とTextMateをベースにZen-Codingの話をしたわけですが、一番最初にも書いたようにTextMateは日本語の処理がうまくないので、導入したくても導入できない方も多いかもしれません。

でも、Zen-CodingをTextMate以外で使おうとするとグッと選択肢が減ります。Mac使いの皆さんがお使いのエディタといえば、CodaやskEdit、miあたりが有名どころです。良かった!Codaならコマンドの違いはありますが、その恩恵にあずかれますよ(笑)。

(追記)Zen-CodingのDreamweaver用のMXP(ダウンロードはこの辺で)でも、以下の操作と同じショートカットで略語や構造の展開はできるみたいです。

Codaでやるなら「TEA for Coda」をインストール

tea-for-coda

前々回のエントリーにも書いておきましたが、現在Coda用のプラグインは「TEA for Coda」という名前で公開されていますので、とりあえず公開されているファイルをダウンロードしてダブルクリックなりでインストールしましょう。

このTEA for Codaは、もともとはテキストエディタのアクション集でZen-Codingも使えるようにしてるって感じなんでしょうか。細かい操作方法についてはマニュアルを読んでいただくとして、TextMate用のZen-Codingとは、ショートカットキーなどが若干違うとこがありますのでその辺のフォローをしてみましょう。

展開のショートカットは、「Ctrl+,(カンマ)」

一番最後に用意したデモの冒頭ではわざとらしく略語ベースのスニペットを展開できないフリを入れてしまってますが、CodaでZen-Codingの略語を展開するには「TAB」や「Cmd+E」ではなく「Ctrl+,(カンマ)」を入力します。

たとえば、link要素でCSSの参照を指定したければ、「link:css」と書いて「Ctrl+,」を入力すれば展開されます。それ以外の略語ベースの展開もこのショートカットを使います。「div」を展開すれば「<div></div>」が入るってわけです。

前のエントリーで紹介したHTMLの文書構造を書いてそれを展開する方法も同様です。記述さえ合っていればちゃんと展開されますので、オフィシャルサイトのマニュアル(そもそものZen-Codingのも)を参照してください。

では、最後におまけでCodaでやってるとこを。
※フルスクリーンにしてScalingをOFFにすると見やすいですよ

Coda with TEA for Coda from komori, masaaki on Vimeo.

#余談ですが、TextMateのそれと違って、Coda版の略語や展開されるコードはプラグインのファイルの中に格納されてます。.pyになってるのでPythonでどうこうしないと書き換えられないかもしれませんね。

Tags: , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE