動画デモ

Zen-Codingをブラウザ上で触って、リアルタイムプレビューが出来るものを作成してみました。
エディター持って無くてもブラウザだけあればOkですよ！

• kzms2 zen-coding editor

対応ブラウザなど

見た限りですとIE、Firefox3.5、Chrome4、Opera10、Safari4などで動くようです。
※ただし、Webkit系はHeader内に書いた要素がうまくリアルタイムにプレビューされない模様です。styleタグをbody内に書けば表示されます…

使い方や詳細は続きから

Zen-codingの概要

Zen-codingはショートカットキーを用いることでコーディングする時間を早めることが出来るソフトのようなものです。

TextMate-and-ZenCoding from komori, masaaki on Vimeo.

以下のリンクが詳しいです。

• HTMLコーディングが3倍速くなる？「Zen-Coding」

ショートカットキーについて

公式にある、PDFのチートシートを印刷して見て置くと良いと思います。
html形式で見たい方は以下の2リンクを見ればよいと思います。

• HTML
• CSS

今回作ったものの説明

やっとこさ今回作ったkzms2 zen-coding editorの説明をしたいと思うのですが、基本的にはzen-codingの形式でコーディングを行えるリアルタイムプレビューつきのエディターになります。

主な機能

• Zen-codingを用いたコーディング
• マルチブラウザ対応（大体のブラウザで動くと思います）
  ※ただし、モバイルなどを除く
• エディターの文字サイズ変更
• エディター内容をHTML形式でダウンロード保存

並べてみるとこんなものでしょうか。

ショートカットキーについて

メニューのhelpを押せば説明が出てきますが、一応ある程度説明をしておきます。（MetaというのはWindowsだとCtrl、Macだと…なんていうんですかアレ）

• Meta+E（Tabも可） — Zen-coding用タグの展開
• Meta+D — タグ内の要素を外側に順番に選択
• Shift+Meta+D — タグ内の要素を内側に順番に選択
• Shift+Meta+A — 任意のタグで囲む
• Ctrl+Alt+→ — 次点の編集場所へ移動
• Ctrl+Alt+← — 前点の編集場所へ移動
• Meta+L — 今居る位置の行を選択
• Meta+Shift+M — 今いる要素内を1行にする
• Meta+/ — 今居る位置の要素をコメントアウト、インする
• Meta+J — 今居る位置の要素をくっつける
• Meta+K — 今居る位置の要素を削除する

あとは適当に触ってみてください。
※特に裏側とつなげてはいないので、オフラインでも動きますが、リロードすれば消えちゃいますので注意してください！

まとめ

• iframe内にhtmlを吐き出すのに苦労した
• 結構さくさく動いて使いやすいかも
• zen-coding変換をするとtextareaの一番上に行くのがちょっと使いづらいかも（Zen-coding側の仕様…）
• まだまだプロトタイプ

とこんな感じかと思います。
需要があればどんどん機能を足して行きたいと考えているので、コメントやTweetをいただければと思います！

目指せなんちゃってエディター！