なんでも、このWebPuttyはオンラインのCSSエディタでありながら、CSSのファイルのホスティングも兼ねているようです。さらには「Sass」や「Compass」もサポートしているらしく、そっち系を使ってらっしゃる方でも使える、と。ちなみに、公開時のファイルはちゃんとMinify & Gzipされるようです。

何はともあれ、Googleアカウントでログインだ

登録に特別なことは必要なく、Googleアカウントでログインできます。

ログインするとこんな画面。左が保存されたCSS、右に新規サイトの登録のボタンが並んでいます。右上の「HELP」を押せばいろいろ教えてくれます。

こんな感じですね。で、開いてみると…。

左ペインにプレビュー画面（公開されてる画面）、右ペインにCSSのソースコードが表示されます。表示はCSSのソースコードの上のボタンで変えれるのかな。

CSSのサンプルソースの上にSassの書き方でもOKよ、とかCompassの@importとかが入ってますね。参考にしてください。

で、編集が終わったらPublishをポチッと。そんな流れ。

link要素とscript要素をHTMLにペタッと

新規サイト登録時には特に何も言われないのですが（サイト登録とユーザー管理ぐらい）、編集したCSSはWebPuttyの用意しているホスティングからMinify & Gzipされて配信されます。HTML側には、指定されたコードを貼り付けておけば良いみたいですね。

読み込みのコードを確認するには左ペインの上のボタンをクリック。

こいつをHTMLに貼っておくわけですね。

どうでしょう。割と動作も軽快ですし、Sassのセットアップもいりません。日本語サイトのプレビューまでは試していませんが、WebPuttyいかがでしょうか？

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

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

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でどうこうしないと書き換えられないかもしれませんね。

HTMLのストラクチャ的なものがわかっていれば、特定の記述をして展開すると一気にコードが書けちゃったりします（どちらかと言えば、こっちが本当のZen-Codingなんでしょう）。

ということで、今回はその特定の記述とやらの話をしてみましょう。ここまで使えるようになってくると実に速い…（はず 笑）。

文書構造がわかってれば、1行書いて一気に展開できる

Zen-Codingは、前回紹介したような登録された略語を使ってHTMLとCSSのコードを展開する使い方だけでなく、特定の記述を使って構造を書き上げて一気に展開することができます。TextMateを使っている方はこちらのリストにある「Zen.Coding-TextMate.v0.5.zip」も忘れずに入れておきましょう。

たとえば、上図の中段下あたりにある

div#coding>h1#textmate-with-zen+p.tagline

を入力して、「Cmd+E（Coda版とDWのMXP版は、Ctrl+,）」で展開すると下記のコードがどーんと入ります。

<div id="coding">
 <h1 id="textmate-with-zen"></h1>
 <p class="tagline"></p>
</div>

この書式を見てすぐ気付く方もいると思いますが、まるでCSSのセレクタを書くかのように、「#」でid属性、「.」でclass属性、「>」で階層、「+」で隣接している要素を繋げられます。つまり、HTMLの文書構造が明確で頭の中で書くことが決まっている場合は、1行で書いて展開した方が圧倒的に速いってわけです。
※idは「Cmd+3」、classは「Cmd+2」のショートカットもある。

同じ事の繰り返しは「*」、数字を付けるなら「$」

構造がわかっていればこのように簡単に展開できますが、HTML文書というのは同じ要素の繰り返しというのも結構な確率で登場します。たとえば、ナビゲーションのli要素だったり、定型のdivとhとpの繰り返しだったり。

そんな時は「*繰り返す回数」を付け加えればオッケイ。

ul#nav>li*3>a

と書いて展開すれば、

<ul id="nav">
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
</ul>

こんな感じでコードが展開されます。TABキー（Shift+TAB）で、それぞれのhref属性とa要素の中身を移動できるので入力もスムーズィー。楽勝です（笑）。

まだあります。時には、連続する同じ要素にidやclass属性を割り当てて、それぞれの属性値に連番を付与しておきたい、といったことも考えられます。そんな時は変数的な意味の「$」を付ければ、自動的に番号が振られます。素敵ですね。

もろもろを組み合わせるとこんな感じになります。

div#box$*3>h3+p*2

と書いて展開すれば、

<div id="box1">
 <h3></h3>
 <p></p>
</div>
<div id="box2">
 <h3></h3>
 <p></p>
</div>
<div id="box3">
 <h3></h3>
 <p></p>
</div>


ほーら、使いたくなってきたでしょー（笑）。

というわけで、前回エントリーの続きということで、単純な略語ベースの展開だけではなくZen-Codingをさらに使いこなすためのいくつかの書式の紹介でした。ほかの記述についてはこちらで確認してみてください。

※一応今回もまた簡単なデモをアップしておきました（どう書こうかなって思いながらなので、なかなか指が進んでませんが 笑）。

Zen-Coding Ext. from komori, masaaki on Vimeo.

Zen-CodingとはもともとTextMateとNetBeans用に書かれたプラグインのことです。HTMLとCSSのコーディング作業をより高速におこなうための機能追加をしてくれるものですね。前述の2つ以外に、AptanaやCoda、Espressoといったエディタ、最近ではDreamweaverのMXPファイルもダウンロードできるようになってます（*1）。

というわけで、今回はボクが普段使っている「TextMate」とZen-Codingの組み合わせでコーディングがどう変わるのかをご紹介しようかと。タイトルに超速とか書いてますけど、まぁどうでしょうかね。

TextMateって何よ

Zen-Codingの話の前に「TextMateがなんぞや」ってところから話しておきますか。TextMateは、欧米のプログラマさんやエンジニアの方の間では超有名なというか大好きな方が多いテキストエディタです（よくビデオのデモなんかでも登場します）。

単純に入力補完ができるぐらいならDreamweaverや他のエディタでも十分なわけですが、このTextMateはあらかじめ登録された略語（といっても頭文字的な）を入力してタブキーで展開することで、必要なコードを一瞬で書ける素敵なエディタなんです。要は最初からマクロだスニペットだが入ってると。もちろん自分の登録したコードに書き換えることもできます。

もちろんHTMLとCSSだけではなく、PHP、JavaScript、Ruby、Pythonなどをはじめ数え切れないほどの言語に対応してます。それぞれの言語毎にバンドル（プラグインみたいなもの）が公開されてるので、新規で追加したりアップデートすればどんどん拡張していくことができるのも特徴のひとつでしょうか。ちなみにこの方法を模したWindowsのエディタに「InType」ってのがあります。

ただ残念なことにこのTextMate、現在のバージョンでは日本語の取り扱いが下手でして…（*2）。それをどうにかするには、SafariStandなどでも有名なhetima.comさんで公開されているプラグイン「CJK-Input.tmplugin」を導入してどうにか…なんですね。実際、骨組みだけ作る段階ではあんまり関係ないんですけどね、日本語。

とまぁ、そんなエディタです。

TextMateの基本的な使い方

このTextMateを使ってコーディングするとこういう風になります。

例えば、「doctype」と入力してTABキーをポチッと、

こんな感じで展開されます。ここまではDreamweaverなんかでも見慣れた感じではないでしょうか。で、このリストから目当てのものを選択すると、

こうなっちゃうんですね。

他にも、h1 → TABキーで「<h1 id=”"></h1>」が入力され、カーソルは開始タグと終了タグの間に移動します。その状態で文字列をちょちょっと入力すると自動的にid属性にも同じ内容が入っていくと。複数の属性間の移動もTABキーです。

このような略語ベースの入力以外に、選択範囲を作って後から任意の要素でラップしたり、終了タグやコメントを挿入したりはショートカットでできます。できることを挙げ始めればキリがないぐらい。もちろんこれがHTMLやCSSだけじゃなくて、PHPやJavaScriptでも同様に動作します（*3）。

特定の要素を入れることでそれに適用できる属性が補完され、その中から選択して入力して〜みたいな流れよりは、おそらく数段早いかなぁと。Dreamweaverのスニペットをショートカットなどで反映させるのともちょっと違いますね。

そんなわけでボクは辞書登録（*4）もしてないし使い回しできるコードみたいなのも何も用意してません（作るモノは全部違うしね）。TextMateさまさまです（笑）。

さらにZen-Codingを追加すると…

TextMateにはもともとHTMLとCSSのバンドルがありますが、Zen-Codingはさらにそれらを拡張したものです。冒頭でも書いたようにプラグインの形で公開されているので、ファイルをダウンロードしてダブルクリックすれば自動的にインストールされます（TextMateでもCodaでも）。

では、拡張されてる例を。「html:4t」を展開すると、

こんな感じ。HTML 4.01のTransitionalの文書型からはじまる一連のコードが入ります。これを「html:5」とするとHTML 5のコードがどーんと入力されます（※軽くHTML5のコードも入ってる）。

この「略語:ほげほげ」の記述が良い働きをします。TextMateの標準バンドルでは「html」だけだと開始タグと終了タグしか入りません。「:ほげほげ」は言ってしまえばオプション指定。例えば「link:css」だとスタイルシート、「link:rss」だとRSSのコードが自動的に展開されます。

同じ要領でCSSのスタイル指定もちゃっちゃっと書いていけちゃいます。

他にも標準のバンドルに足りない部分とかも補足されて至れり尽くせり。もう素敵すぎザマス。こういうものを公開してくださって誠にありがとうございます（多謝）。

と、こればっかりは使ってみるか目の前で実演でもされない限り、いまいちわかりにくいんですよね…。ってことで超簡単でのんびりですが4分弱のビデオを撮ってみましたのでそれでもご覧ください（コントローラーで大きくした方がわかりやすいかな）。

TextMate-and-ZenCoding on Vimeo.

最後に。TextMateはOS Xのみですし有償です（トライアルはあり）。Windowsの皆さんはZen-Codingは使えないけどTextMateと同じスタイルで書けるInTypeなど（もう一個あるんだけど失念…）を使ってみると良いかも。

＃InTypeは今月発売のWeb creatorsにちろっと書いておきました。

*1: Codaのプラグインは現在「TEA for Coda」としてメンテされてるのかな？、フルサポートとされてますがTextMateで使うのとは操作が異なります。MXPの方は一部サポートってことですが、正直なところあんまり…（笑）略語から展開する、構造を展開するなどの機能は実装されているようです（うちのCS3ではもっさり動いてます 笑）

*2: 次期バージョンで2バイト文字にも対応するといった感じでしたが、残念ながらいつリリースされるかわかりません…

*3: PHPはSmarty、JavaScriptはjQueryやPrototype、YUIなど用のバンドルも公開されています。バンドルの追加やアップデートはSubversionでやると簡単です

*4: IMEへの単語登録とかは文字数制限とかがあるのでコードをまるっと全部入れることができなかったりします。OS Xな方は「TextExpander（日本語化済）」というユーティリティを使えば、任意の略語を展開してカーソルを移動するといったことが可能です。オフィシャルで公開されているHTMLやCSSのスニペットファイルもあるので、これをベースに改良を加えればTextMateとZen-Codingライクなコーディングが可能かな？、たぶん