Own products

  • 新規事業のアイディア創造機

Introduce

2010
03/03

いろんなエディタのzen-codingプラグインをまとめてみました

この記事の読了時間:約61

  • このエントリーをはてなブックマークに追加

先週くらいから爆発的な注目を集めている、HTML/CSSショートカット用ライブラリ「zen-coding」。

zen-coding」とは、カンタンな記述で構造化されたHTML/CSSが生成されるという、コーダー感涙の超絶便利なライブラリです。

その便利さ、コーディングが驚くほど簡略化されるというコトで、AptanaやDreamWeaverをはじめ、WordPressやCodaにもzen-codingプラグインが続々と登場しております。

そこで今回のエントリーでは、そんなzen-codingの各種エディタ用プラグインをまとめてみました。

まだ触ったコトの無いコーダーさん!もし自分の愛用エディタのプラグインがあったら、ぜひ騙されたと思って導入してみてください♪

zen-codingとは

先ほども書きましたが、zen-codingとは「カンタンな記述で構造化されたHTML/CSSが生成される」というモノです。

文章だけでは伝わらないと思うので、早速ですが実例を。

<div id="header">
	<h1></h1>
	<ul id="topmenu">
		<li class="menulist"><a href=""></a></li>
		<li class="menulist"><a href=""></a></li>
		<li class="menulist"><a href=""></a></li>
	</ul>
</div>

上記のような雛形HTMLを作りたい場合、下記を入力します。

div#header>h1+ul#topmenu>li.menulist*3>a

たったコレだけを入力して、あらかじめ決められたショートカットキー(F4 とか Ctrl+, とか)を押すだけで、上にあったHTMLが瞬時に生成されます。

軽く説明しますと、”>”は入れ子関係を表し、”+”は兄弟関係を意味します。

idは”#”、classは”.”というCSSと同じ表記になり、”*”は繰り返す回数を表します。

単純計算ではありますが、フツーにコーディングすると186回のキータッチ(タブや改行も含む)を必要としますが、zen-codingを使えば40キータッチ、約4.5倍もの差になります!

また、DOCTYPEなんかも一瞬で記述が可能です。

html:xt

たった7文字を入力するだけで、下記の文言が生成されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>

</body>
</html>

ね?もはや自動生成と言っても過言じゃないほどのラクチンさ。これは使いこなせば絶大な効率化になりますよー!

細かな使い方に関してはホスト先のGoogle Project HostingにあるZen HTMLセレクタ一覧にてご確認下さい。

というワケで、以下より各種エディタのzen-codingプラグインのまとめ + 具体的な解説をなさっているブログエントリーになります。

いろんなエディタのzen-codingプラグイン

Dreamweaver

Dreamweaverでzen codingを使ってみた。 | vayu : soft true fossil
zen codingは超便利!Dreamweaverで使ってみました。 | VIVID COLORS + BLOG

秀丸

秀丸マクロでZen-Coding(via exoego.net)
Zen-Codingを秀丸マクロで試しました。 – E-riverstyle Vanguard

Vim

Big Sky :: zen-coding for vim を pure vimscript だけで書いてみた。
Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力 : Serendip

WordPress

WordPressにZen Codingを導入するプラグイン「WP Zen-Coding」 – Rewish
WordPressでzen-codingを使えるようになるプラグイン・WP Zen-Codingが凄く便利 – かちびと.net

Movable Type

MT Zen-Coding に名前を変えてちょっとパワーアップさせました – かたつむりくんのWWW

EmEditor

EmEditorで Zen-Coding | trapon

Emacs

簡単な入力するだけでHTMLタグを生成してくれるZenCoding | Happy My Life

Coda

Coda で Zen-Coding を使う – p15.jp

TextMate

TextMate+Zen-Codingで超速コーディング?  |  gaspanik weblog

Eclipse

Aptana 以外の Eclipse で Zen-Coding を有効にする方法 – OTCHY.NET

Aptana Studio

Aptana Studio 2.0 日本語化とzen-coding|skuare.net

こーやってみると、テキストエディタもたくさんあるんですね。

ちなみに自分は「EmEditor」と「さくらエディタ」とWINDOWSデフォルトのメモ帳を使い分けてます。

有料版EmEditor、個人的にはオススメですよー。

  • このエントリーをはてなブックマークに追加

コメント一覧

3 Responses to [いろんなエディタのzen-codingプラグインをまとめてみました]

zen codingって便利 – webarton blog より:

2010/09/19 7:44 AM

[…] つけたし いろんなエディタのzen-codingプラグインという記事で、秀丸でもマクロで使えるということを知りました!早速使ってみたらさくらエディタと同じように使えました。私は普段 […]

[…] いろんなエディター用のバージョンがあるんですが、 僕はPythonで作られたVim用のZen Codingを使います。 ソースコードも気になりますし。 […]

[…] ITキョスク : いろんなエディタのzen-codingプラグインをまとめてみました […]

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Favorite feeds

    Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate