Own products

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

Introduce

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

この記事の読了時間：約6分1秒

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

先週くらいから爆発的な注目を集めている、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、個人的にはオススメですよー。

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

関連する記事

同じカテゴリーの記事

コメントを投稿する

お名前

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

コメント

CAPTCHA


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

Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate