ブラウザで動くZenCodingEditorを作りました！
動画デモ
Zen-Codingをブラウザ上で触って、リアルタイムプレビューが出来るものを作成してみました。
エディター持って無くてもブラウザだけあればOkですよ！
対応ブラウザなど
見た限りですとIE、Firefox3.5、Chrome4、Opera10、Safari4などで動くようです。
※ただし、Webkit系はHeader内に書いた要素がうまくリアルタイムにプレビューされない模様です。styleタグをbody内に書けば表示されます…
使い方や詳細は続きから
Zen-codingの概要
Zen-codingはショートカットキーを用いることでコーディングする時間を早めることが出来るソフトのようなものです。
TextMate-and-ZenCoding from komori, masaaki on Vimeo.
以下のリンクが詳しいです。
ショートカットキーについて
公式にある、PDFのチートシートを印刷して見て置くと良いと思います。
html形式で見たい方は以下の2リンクを見ればよいと思います。
今回作ったものの説明
やっとこさ今回作った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をいただければと思います！
目指せなんちゃってエディター！
