Home > Mac > TextMateにZen-Codingを導入して遊んでみる

TextMateにZen-Codingを導入して遊んでみる

2010-03-01 (月)
Mac

つい最近cipher @ Ustream.TV - こもりですさんがZen-Codingのやり方をustで流していたのが新しいですが、TextMateを使うと簡単にZen-Codingが楽しめるのでその導入方法をまとめときます。（ほぼ自分用ｗ）

Zen-CodingとはHTMLやCSSのコーディング作業を快適に、そして高速におこなうための追加機能のようです。
なので、Editorに追加でプラグインを入れてZenなCoding環境を構築する必要がありそうですね。

では一応TextMateの日本語化の部分から解説します。

TextMateを日本語化

TextMateはデフォルトではマルチバイトに対応していません。
なので、プラグインを入れて日本語を打てるようにする必要があります。

以下のリンクに詳しくまとめてありますので、参考にしてみてください。
Railsに最適なテキストエディター「TextMate」を入れて日本語化してみた

TextMateにZen-Codingを導入する

ではZen-Codingを行うためのプラグインを導入してみましょう！

まずは以下のサイトからzipファイルをダウンロードし解凍しときます。

TextMate.Zen.CSS.1.3.1.zip
TextMate.Zen.HTML.1.3.1.zip

zen-coding - Project Hosting on Google Code

Zen.Coding-TextMate.v0.6.zip

Downloads - zen-coding - Project Hosting on Google Code

そして以下のディレクトリに3つのtmbundleファイルを配置します。

/Users/hoge/Library/Application Support/TextMate/Bundles

これでZen-Codingのプラグインの導入はおわりです。

Zen-Codingしてみる

まずはTextMateを起動します。
そしてHTMLを入力するので、Option + Command + hを押します。

これでZenなHTMLモードになります。

ためしに「html:4t」と入力してみます。

すると。。。

とHTML 4.01 Transitionalで展開されます。

また、「html:5」と入力すると。。。

とHTML5モードで展開されます。

実は今までも、メニューから「File -> New From Templete -> HTML」と選択していけば同じようなテンプレートを呼び出せたんですが、
毎回新しいhtmlを作成するときにメニューに行くのは面倒でした。
なので、Zen-Codingでhtmlの雛形を一気に生成できることは、htmlコーダーやJavaScripterの人に大きな恩恵をもたらすと思います。

さらに適当なhtmlを入力してみます。

div#ならid指定、div.ならclass指定の要素が展開されます。

なかでもやっぱりうれしいのが、table+やdl+でしょう。
いちいちtableタグを作ってその中にtr作ってとやっていた作業が1パツで展開されます。
グルーピング系のhtmlタグはBlogの記事を書くときにも使うので、非常に楽になるのではないでしょうか。

ちなみに僕はBlogの記事をすべてTextMateで作成しています。
blockquoteと入力してタブを押せばタグが展開されたり、もう便利なのです！

追記：2010-05-12
読み直してみて一番大事なことを書いていないことに気がついたので追記しときます。すいません...

Zen-CSSとZen-HTMLの両方もかなり強力なんですが、TextMateでZen-Codingする際に重要なのが、「Zen.Coding-TextMate.v0.6.zip」です。
このバンドルのCommand + Eが強力で、これのために入れたといっても過言ではないです！

Option + Command + HでHTML Zenモードにして、以下を入力します。

div#hoge$*3>h2+span*2

そしたらCommand + Eを実行してみると以下のようにHTMLが展開されます。

これはハンパじゃない機能ですよね！
まぁ1個目のdivを作って、その後に2回コピペしてもいいんですが、こちらのほうがあきらかに速いと思います。

あまり関係ないんですが、Zen-Codingを入れる前は「Command + E」を押してから「Command + F」で選択している範囲を検索ボックスのFindの部分入れてくれてたんですが、Zen-Codingを入れることでこの機能が使えなくなりました。
みんなどうやって置換とかしてるのかな？
Findエリアに手入力して、Replaceエリアにも手入力してるの？
きっとなにか方法があるはずだ！