動画デモ

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

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

普通のFollow Meじゃつまらないので

息抜きでcss3を使ってアニメーションするFollowMe作りました。
サンプル…といいたいところですが、このページの右側にあります。
マウスオーバーしてみれば動きがわかるかと思います。

対応ブラウザ

一応色々なブラウザで動きますが以下の順番でいい感じの動きになります。

1. Chrome４→縦表示、回転、ズーム、アルファが効きます
2. Safari4→縦表示、回転、ズーム、アルファが効きます（ちょっとぼやける）
3. Firefox3.5→縦表示、回転、ズーム、アルファが効きます
4. その他→かろうじて表示されます

html5で書いていたのですが、どこぞのブラウザさんで表示出来ないので泣く泣くhtml4に切り替えました。
どのブラウザとは言いません。9でもダメなIEあの子です。

それでもこのFollow Meを使ってみたい場合は続きから。

まず初めに。

ご自由に使って頂いて構いませんが、htmlの?の部分、cssのコメント部分は残して置いて頂けると幸せです。
カスタマイズできる部分は以下の箇所になります。

1. ラベルのボーダー、背景色、グラデーション
2. FollowMeの文字色
3. ?の文字色・背景色

といった部分が調整が可能となっています。
cssに詳しい方はソースをちょくちょくいじってもいいかもしれませんね。

コピペ用のソース

下のソースを</body>の直前に明記するだけで実装が可能です。
色設定と、自分のアカウントへのURLの変更（http://twitter.com/kzmsの部分）をお忘れなく。
変えたほうがいい部分は赤色で指定してあります。

<div id="kzms2twitter"><span><a href="http://kzms2.com/2009/12/02/followme_css3/" title="このFollow Meについて" id="kzms2twitis">?</a><a href="http://twitter.com/kzms2">Follow Me</a></span></div>
<style type="text/css">
/* 色のカスタマイズ
**********************/
/* ラベルの色設定 */
#kzms2twitter span{
/* グラデーション非対応の背景色設定 */
background-color:#0f58aa !important;
/* グラデーション背景色設定 */
background-image:-webkit-gradient(
linear,
left top,
left bottom,
/* 開始色 */
from(#083a73),
/* 終了色 */
to(#0f58aa)
) !important;
/* 枠線色設定 */
border-color:#083a73 !important;
}
/* Follow Meの設定 */
#kzms2twitter span a{
/* 文字色設定 */
color:#fff !important;
}
/* ?の設定 */
#kzms2twitter #kzms2twitis{
/* 文字色設定 */
color:#0f58aa !important;
/* 背景色設定 */
background-color:#fff !important;
}
/*
* date 09/12/01
* var 0.01
* kzms2 All Rights Reserved.
******************************/
/* base setting
=================*/
#kzms2twitter{
position:fixed;
_position:absolute;
top:50%;
right:0;
z-index:99999;
margin-top:-6.5em;
*margin-top:-1em;
font-size:12px;
}
#kzms2twitter span a{
text-decoration:none;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transform-origin:0 50%;
-moz-transform-origin:0 50%;
}
#kzms2twitter span a:hover{
text-decoration:underline;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
}
#kzms2twitter span{
display:block;
padding:0.5em 1em 0.5em 0.5em;
border-style:solid;
border-width:1px;
font-weight:bold;
text-decoration:none;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-webkit-box-shadow:2px 2px 7px #333;
-moz-box-shadow:2px 2px 7px #333;
}
#kzms2twitter span:hover{
margin-top:2em;
*margin-top:0;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:0;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:scale(2);
-moz-transform:scale(2);
}
/* about kzms2
=================*/
#kzms2twitter #kzms2twitis{
position:absolute;
bottom:0;
right:0;
width:1em;
text-align:center;
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:"alpha(opacity=50)";
font-size:80%;
-moz-border-radius:5px 0 0 0;
-webkit-border-top-left-radius:5px;
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
}
#kzms2twitter #kzms2twitis:hover{
opacity:1;
filter:alpha(opacity=100);
-ms-filter:"alpha(opacity=100)";
-webkit-transform:scale(2);
-moz-transform:scale(2);
text-decoration:none;
}
/* follow me setting
=================*/
#kzms2twitter span a:nth-of-type(1):hover + a{
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:"alpha(opacity=50)";
}
#kzms2twitter span a{
display:inline-block;
}
</style>
cssの上部は、カスタマイズ用の部分が抜き出してあります。

その他

htmlに詳しい人は、styleタグの中身を外部ファイルにするなどして各自修正を加えてしまってください。このままだとhtmlが穢れてしまうので…！

使った方でご意見やご感想などお待ちしておりますっ

はー　久々に息抜きになったなった。
こういうやつの方がやりやすいですね。