gaspanik weblog

先日の100の質問の答えにもちょっと書いたのですが、世の中には「Zen-Coding」なるものが存在しています。ちょっと前にWebデザイン関係の皆さんのTwitterでも「すげえ」とかってビデオが流れてましたけど、実はこれ相当前からあるんですよ（笑）。

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ライクなコーディングが可能かな？、たぶん

Tags: css, editor, productivity, webdesign, zen

This entry was posted on Saturday, January 30th, 2010 at 12:20 AM and is filed under articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.