EC studio 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ファイルを作成し、下記のような書き方を試してみてください。

一例ですが、

HTML:
  1. div#content>ul#global.nav>li*3>a

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

すると、

HTML:
  1. <div id="content">
  2.     <ul id="global" class="nav">
  3.         <li><a href=""></a></li>
  4.         <li><a href=""></a></li>
  5.         <li><a href=""></a></li>
  6.     </ul>
  7. </div>

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

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

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

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

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

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  4.     <title></title>
  5. </head>
  6. ~省略~
  7. </html>

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

JavaScript:
  1. 'variables': {
  2.     'lang': 'en',
  3.     'locale': 'en-US',
  4.     'charset': 'UTF-8',
  5.     'profile': 'xhtml',

JavaScript:
  1. 'variables': {
  2.     'lang': 'ja',
  3.     'locale': 'ja',
  4.     'charset': 'UTF-8',
  5.     'profile': 'xhtml',

書き換えた後は再起動すれば反映されます。
今回は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


関連した記事:

この記事へのコメント

Eclipse3.5を新規インストールしてみましたが、Ctrl+Eにショートカットがデフォルトで登録されてるみたいで使えませんでした。この場合、Eclipseのメニューから「ウィンドウ」→「設定」→「一般」→「キー」→「エディタの即時切り替え」のCtrl+Eをアンバインドすることで使えるようになりました。

投稿者: liquidfunc | 2010/2/22 月曜日 22:27:25

コメントありがとうございます!仰る通り、Eclipseのバージョンや環境によってはバインドされてしまっているので変更が必要です。
そのあたり次の記事でも触れています。
http://designblog.ecstudio.jp/htmlcss/zen-coding-shortcut-key.html

投稿者: 谷 拓樹 | 2010/2/22 月曜日 23:53:38

紹介されている方法では、Aptana 以外の Eclipse の標準では Zen-Coding を利用することが出来なかったので、それを可能にする解説記事を書きました。

http://www.otchy.net/20100224/zen-coding-for-general-eclipse/

投稿者: Otchy | 2010/2/24 水曜日 12:17:57

充実した解説ありがとうございます!こちらの記事の中でも紹介させていただきます。

投稿者: 谷 拓樹 | 2010/2/24 水曜日 12:25:16

記事中にもご紹介頂き、ありがとうございました。
Zen Coding に魅せられた勢いで、Perl 実装も書いてみました。
http://www.otchy.net/20100225/zen-coding-for-perl/
全てのエディタで Zen Coding を利用可能にするための第一歩です。

投稿者: Otchy | 2010/2/25 木曜日 22:40:22

すごいですね・・・同じく魅せられたひとりなので、色々と活用方法についても記事をまた書いていきたいとおもいます。

投稿者: 谷 拓樹 | 2010/2/25 木曜日 23:16:10

Web制作に役立つ情報いつもありがとうございます。

ところで、デモ動画で使っている曲、気になっていませんか。投稿者によると、seba & Paradox feat Robert Manosのmove onという曲だそうです。

seba & Paradox feat Robert Manos – move on
http://www.youtube.com/watch?v=cpGW3-voxGs

投稿者: おかず | 2011/3/10 木曜日 14:01:50

ブログをみていただき、ありがとうございます!
かっこいい曲ですが詳しくは知りませんでした。情報ありがとうございます(^^)

投稿者: yoshue | 2011/3/28 月曜日 10:39:07
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.