ブラウザで動くZenCodingEditorを作りました!

Webアプリ, 作品

動画デモ

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をいただければと思います!

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

10 Comments »

  1. [B!] なにこれすごい RT @shi_ge_twi: めも【ブラウザで動くZen-Coding】 http://bit.ly/9LlE9k ブラウザで動くZenCodingEditorを作りました! | kzms2 – html,css,javascript

    トラックバック by 桜ヶ丘 — 2010/2/19 金曜日 @ 4:24:12

  2. さすが仕事が速いなぁ…。v0.6にも対応してたw http://bit.ly/bkjI11

    トラックバック by komori, masaaki — 2010/2/19 金曜日 @ 7:17:44

  3. RT @cipher: ブラウザで動くZenCodingEditorを作りました! | kzms2 – html,css,javascript http://bit.ly/bkjI11

    トラックバック by madoa — 2010/2/19 金曜日 @ 16:43:44

  4. zen-coding というのがあるらしい。HTMLたくさん書く人には良さげ: ブラウザで動くZenCodingEditorを作りました! | kzms2 – html,css,javascript
    http://is.gd/8Nt9C

    トラックバック by sonota — 2010/2/20 土曜日 @ 14:49:25

  5. RT @kzms2: 【記事書いた!】ブラウザで動くZenCodingEditorを作りました! http://bit.ly/9jP5MH #zencoding #editor #webapp

    トラックバック by TA90EBISU — 2010/2/23 火曜日 @ 16:09:41

  6. [webサービス][Zen-Coding] ブラウザで動くZenCodingEditorを作りました! | kzms2 – html,css,javascript http://kzms2.com/2010/02/19/zencoding-editor/

    トラックバック by WDScratch — 2010/2/24 水曜日 @ 1:36:26

  7. RT @wdscratch [webサービス][Zen-Coding]ブラウザで動くZenCodingEditorを作りました! | kzms2 – html,css,javascript http://bit.ly/a7Thfs

    トラックバック by 和彦 — 2010/2/24 水曜日 @ 1:47:21

  8. しくった。これ http://kzms2.com/2010/02/19/zencoding-editor/

    トラックバック by くっしぃ — 2010/2/24 水曜日 @ 1:59:57

  9. RT @wdscratch: [webサービス][Zen-Coding] ブラウザで動くZenCodingEditorを作りました! | kzms2 – html,css,javascript http://kzms2.com/2010/02/19/zencoding-e

    トラックバック by 麗[Reigh] — 2010/2/24 水曜日 @ 2:09:03

  10. @kzms2さんのZenCodingEditorいいなー。「ブラウザで動くZenCodingEditorを作りました! http://kzms2.com/2010/02/19/zencoding-editor/」

    トラックバック by mrgoofy33 — 2010/2/24 水曜日 @ 16:00:57

コメントを入力

コメント欄

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー
  • 読み込みエラーです。しばらく経ってから確認してみてください。

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。