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

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

  • 2010-03-01 (月)
  • Mac

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

Zen-CodingとはHTMLCSSのコーディング作業を快適に、そして高速におこなうための追加機能のようです。
なので、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」と入力してみます。

すると。。。

textmate1.jpg

HTML 4.01 Transitionalで展開されます。

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

textmate2.jpg

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

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

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

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

textmate3.jpg

なかでもやっぱりうれしいのが、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エリアにも手入力してるの?
きっとなにか方法があるはずだ!

動画でZen-Codingを体感してみる。

こもりさんのブログgaspanik weblogに動画があり非常に参考になりますので、ここに掲載させていただきます。

[via]
TextMate+Zen-Codingで超速コーディング? | gaspanik weblog
Zen-Codingでできるあんなことこんなこと | gaspanik weblog

TextMateのcolorについて

全然関係ないんですが、僕のTextMateのtheme colorはMonokai » Blog Archive » Textmate color themeを使っています。

JavaScriptとか結構かっこよく色分けしてくれるので、ずうっとこれ使ってます。

他の色にしたいなら
Themes / UserSubmittedThemes browse -- TextMate Wiki
がオススメです、すごい量のtheme colorがあるので、自分色を探してみるのもよいかもしれません。

■関連リンク
TextMateのGetBundleがうまくいかないときの対処方法 at HouseTect, JavaScript Blog
よく使うTextMateショートカット at HouseTect, JavaScript Blog

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1248
Listed below are links to weblogs that reference
TextMateにZen-Codingを導入して遊んでみる from HouseTect, JavaScriptな情報をあなたに

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

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top