EC studio 企画デザインブログ

最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？
Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。
独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。

Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。
※音が出ますのでご注意ください。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo

一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。

Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studioでの設定の仕方を説明します。
※弊社の場合は Eclipseのプラグインとしてインストールしていますが、それでも問題はありません。

[追記：2010/02/24]
AptanaプラグインをつかっていないEclipseでも導入できるようです。（otchyさんありがとうございます。）
http://www.otchy.net/20100224/zen-coding-for-general-eclipse/

※導入後の使い方などは次の記事を参照ください。
Zen-Codingのショートカットをまとめてみました
Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法

Zen-Codingのダウンロード

Downloads - zen-coding - Project Hosting on Google Code
http://code.google.com/p/zen-coding/downloads/list

色々なテキストエディタ、オーサリングツール向けに提供されていますが、今回はfor Aptanaを選択。
（2010/02/19現在の最新は Zen Coding for Aptana v0.6.0.1）

ファイルを展開すると、中には様々なjsファイルがあると思います。
これがZen-Codingの中身です。

AptanaにZen-Codingのプロジェクトを作る

Aptana（またはEclipse）で新規のプロジェクトを作ります。
プロジェクト名は何でも良いですが、今回は「zen-coding」とします。

（ファイル > 新規 > プロジェクト）

作成した「zen-coding」プロジェクトに「scripts」というフォルダを作ります。

そしてその中に先程ダウンロードしたファイル一式を格納します。
※Windowsの場合、「__MACOSX」というフォルダも存在するかもしれないですが、それは不要です。

するとこんな感じになりますね。

これだけで完了です。簡単ですね。
ここまでできたら、一度Aptana（Eclipse）を再起動しましょう。

少しだけ使い方をレクチャー

ここまでの手順を終えたら、AptanaでHTMLファイルを作成し、下記のような書き方を試してみてください。

一例ですが、

こちらのような一行の末尾で、「Ctrl+E」を押してみてください。
（Macの場合は「Command+E」だと思います）

すると、

上記のようなコードが展開されましたか？
Zen-Codingではこのように、省略して書いたコードを構造的なHTMLに変換してくれます。

[2010/02/22 追記]
環境によって、Ctrl+Eでは実行できません。その場合の対処は次の記事にて紹介しています。

このような技が他にも色々あるのですが、そちらは記事最後に詳しい記事リンクをまとめますので今回は導入編として修正すべき箇所ひとつ追加説明しておきます。

日本語向けにスクリプトの一部を修正をする

デフォルトではHTMLが英語圏向けの内容になっています。

xml:lang="en"とcharset=UTF-8"のところですね。
こちらを修正するには、先程「scripts」フォルダにあるzen-setting.jsというファイルを開き、その中の11行目あたりにある記述を書き換えてください。

↓

書き換えた後は再起動すれば反映されます。
今回はecからjaへの修正例ですが、必要があればcharsetも変更してください。

まとめ

以上がAptanaに導入するための手順と設定です。
今回の記事タイトルに偽りなく、マスターすると本当にコーディングのスピードがあがります。

実際に導入して使ってみよう！という方のためにマニュアルや参考リンクをまとめておきます。

基本記法

Zen Actions
http://code.google.com/p/zen-coding/wiki/Actions
こちらについては次の記事で解説しています。
Zen-Codingのショートカットをまとめてみました

Zen HTML Elements
http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn

Zen HTML Selectors
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

Zen CSS properties
http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

WordPressプラグイン

WordPressにZen Codingを導入するプラグイン「WP Zen-Coding」 - Rewish
http://rewish.org/wp/zen_coding
Wordpressの投稿画面でZen-Codingが使えるようになります。

MovableTypeプラグイン

MT Zen-Coding - Movable Type プラグイン
http://www.tinybeans.net/blog/download/mt-plugin/mt-zen-coding.html
MovableTypeの記事投稿画面やテンプレート編集画面などでZen-Codingが使えるようになります。

その他

gaspanik weblog
http://blog.gaspanik.com/
こもりさんについては、不定期でライブコーディングを
Ustreamでおこなわれています。
実際に見てみると感動ですよ！

基本記法について、H20スペースのたにぐちさんも分かりやすくまとめられています。
Zen-Condingの基本文法をおさらい
http://h2o-space.com/blog/2002

関連した記事：

• Zen-Codingのショートカットをまとめてみました
• 見出しをCSSでシンプルに装飾するtips
• ページネーションのマークアップ考察
• ブラウザ上でWebページをリアルタイム編集できる簡単な方法
• Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法