DraftPadアシストでもZen-Codingしてみたい iZen

分かってないけど、作ってみる。


zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting
Follow us on Twitter @zen_codingZen Coding is an editor plugin for high-speed HTML, XML, XSL (or any...
今はEmmetになってしまったZen-Coding。HTMLタグの入れ子構造を書くためのお約束ごとです。簡単に言えば「h1」を「<h1></h1>」に置き換えてくれる。書いたタグを<>で囲って対にしてくれるわけです。こういうのこそ、iPhoneで重宝するんじゃないだろうか。単純なルールなので、Markdownよりも表現できることが多いです。


DraftPad 1.6.2
分類: 仕事効率化,ユーティリティ
価格: 無料 (Manabu Ueno)

そうは言っても未完成ですけどね。基本だけ押さえてみました。特殊変換も組み込もうとしたところで、そこまで要らない気もしたので省いています。

draftpad://self/web?source=<script>function main(x){clip=br=nul=%22%22;s=x.current.replace(/>/g,%22 %22);part=s.split(%22 %22);for(k=part.length-1;k>=0;k--){s=nul;list=part[k].split(%22+%22);for(i=list.length-1;i>=0;i--){op=nul;e=list[i].split(%22*%22);r=(e[1])?e[1]:1;e=e[0].split(%22.%22);c=(e[1])?%22 class=\"%22+e[1]+%22\"%22:nul;e=e[0].split(%22#%22);id=(e[1])?%22 id=\"%22+e[1]+%22\"%22:nul;tag=e[0];if(tag==nul)tag=%22div%22;suffix=%22</%22+tag+%22>%22;if(tag==%22a%22)op=%22 href=\"URL\" target=\"_blank\"%22;if(tag==%22style%22)op=%22 type=\"text/css\"%22;if(tag==%22iframe%22)op=%22 src=\"URL\" frameborder=\"0\"%22;if(tag==%22form%22)op=%22 action=\"STR\"%22;if(tag==%22hr%22)suffix=nul;if(tag==%22br%22)suffix=nul;if(tag==%22img%22){op=%22 src=\"URL\"%22;suffix=nul}if(tag==%22meta%22){op=%22 http-equiv=\"Content-Type\" content=\"text/html,charset=UTF-8\"%22;suffix=nul}if(tag==%22link%22){op=%22 rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\"%22;suffix=nul}if(tag==%22embed%22){op=%22 src=\"URL\" type=\"TYPE\"%22;suffix=nul}if(tag==%22input%22){op=%22 type=\"text\" value=\"VALUE\"%22;suffix=nul}text=%22<%22+tag+op+id+c+%22>%22+br+clip+suffix;s=text+s;br=%22\n%22}clip=nul;for(j=0;j<r;j++){clip+=s+%22\n%22}}draftpad.replaceCurrent(clip)}location=%22draftpad:///webdelegate?load=main%22</script>&current=<@>

登録リンクはこちら→ http://tinyurl.com/ltv6bv7



使い方は、タグ名を並べてアシスト実行。並べた順に入れ子構造にします。入れ子の指定は「>」で区切るのが本則ですが、入力しやすいように空白区切りもサポートしました。たとえば「body script」と書いて実行すると下記のようになります。

<body>
<script></script>
</body>



同じタグを繰り返す場合は「*3」のように、アスタリスクで回数を付加します。たとえばテーブルを作るとき「table tr*2 td*3」とすると下記のようになります。

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>


基本タグにはオプションも組み込まれています。たとえば「a img」を展開すると下記の通り。「URL」のところをダブルタップすると、アドレスの書き込みが簡単になると思います。また、idをつけたい場合は「a#name」、classの場合は「a.name」と記述する方法も組み込みました。「.name」だけだとdivタグになります。

<a href="URL" target="_blank">
<img src="URL">
</a>


他にも本家には、@とか()とか+とかあるんですが、そこまではまだ実装していません。現バージョンで、実際使うかどうか試してみてから考えます。