CSS Nite in SENDAI, Vol.5 フォローアップ

CSS Nite in SENDAI, Vol.5」にご来場くださった皆様、関係者の皆様、ありがとうございました。私こもりのセッション「Zen-Codingはみんなのもの」、いかがでしたでしょうか。この場を借りて、あらためてお礼を(深々)。

本セッションで使用したスライドについては、別途実行委員会の方から公開先URLを連絡していただくことにして、セッション中で紹介したことのいくつかをこちらでフォローアップさせていただきたいと思います。

Dreamweaver CS3 でZen-Codingを使用する方法

現在配布中の「Zen-Coding for Dreamweaver」はCS4対応版ということになっています。残念ながら、それをCS3にインストールしても正常に動作しません。

そこで、配布サイトのIssuesにおいて、CS3で現在のバージョンを動作させるために入れ替える「zen-editor.js」というファイルが公開されてます。こちらのファイルをシステム内のDreamweaverのConfigurationフォルダ内にある「Commands → ZenCoding」の中の「zen-editor.js」と入れ替えてください。

展開される内容を変更するには

Zen-Codingでは「en-US(本家はru) / UTF-8」が初期設定になっています。これが影響するのは「html」を展開した際に出てくるlang属性やmeta要素ぐらいですが、気になる場合はあらかじめ上記フォルダ内にある「zen-settings.js」の中の冒頭あたりにある指定を変更すれば大丈夫です。それ以外にも、展開後にあらかじめ属性を入れたい場合などは、こちらのファイルの該当部分を修正しましょう。

Zen-Codingのチートシートの所在

HTMLにしてもCSSにしても、基本的に省略形を入力し展開しなければなりません。HTMLは基本的に要素名と同じのものが多いのですが、中には「:」を使ったオプションもいくつか用意されています。CSSも基本的にプロパティの頭文字の組み合わせになりますが、やはり「:」を使って特定の値まで一気に入力することも可能です。

こちらの省略形やオプション指定については、配布サイトで公開されているチートシート「ZenCodingCheatSheet.pdf」に詳しく載っておりますので参考にしましょう。慣れないうちは、なかなか大変かと思いますが、普段使うものなんて限られてるのですぐ覚えられます(笑)。

Zen-Codingは不定期にアップデートされています

Zen-Codingは実は2年ぐらい前からあるんですが、不定期にバージョンアップされていますので、たまには配布サイトを覗いてみましょう。新しいバージョンが公開されたら、追加された書式の使い方などもあわせてそちらに掲載されます。

Zen-Codingが使用できるエディタなど

そもそも欧米圏で利用者の多いテキストエディタやIDE用のプラグインとして公開されていたZen-Codingですが、国内で利用者の多いエディタやCMSなどにも導入できるようにしたものがいくつか公開されています。Dreamweaver以外でも使いたいな、という方は「使用中のエディタ名 Zen-Coding」といった感じで検索してみましょう。

最後におまけ

先日のセッションでは基本操作を中心に解説したのですが、デモ中で使用していたラフを実際にコーディングしていく様子をPV的に編集したものがあります。あの程度の内容であれば、HTMLとCSSの双方をコーディングし完成させるまで30分ほどあれば大丈夫かと。興味のある方は以下のリンクよりご覧ください。
WebDevelopment with TextMate and Zen-Coding

以上でフォローアップとさせていただきます。
仙台は素敵な街ですね。また遊びに行きます。ありがとうございました。

Tags: , , , , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE