JQueryMobileをZen-Coding風に書くためのDraftPadアシスト ZenMobile
偏った題材を３つ並べてみました。Googleで検索したら、どこもヒットしなかった。
スマホ向けのHTMLを書くとき便利なJQueryMobileというライブラリがあります。いかにもiPhone向けなサイトによく使われている、角丸ボタンにカラフルなリスト表示。これをHTMLタグで書くための仕組みです。カッコ良くまとまるんだけど、なにぶん、覚えるべきことが多く手打ちには煩雑。iPhoneの狭い画面では書きにくい。jQuery Mobile 1.1.0 日本語リファレンス
1.0 ReleaseA Touch-Optimized Web Framework for Smartphones & Tabletsようこそ！ このサイトは jQuery Mobile を学ぶ過程...
けれどそういう場合にこそ、Zen-Codingが威力を発揮するんじゃないだろうか。タグを並べて書くと、その順に入れ子で展開するスクリプトです。これは普通のHTMLタグを想定してるけれど、出力をJQueryMobileに合わせれば便利な気がする。DraftPadアシストでもZen-Codingしてみたい iZen
分かってないけど、作ってみる。今はEmmetになってしまったZen-Coding。HTMLタグの入れ子構造を書くためのお約束ごとです。簡単に言えば「h1」を「＜h1＞＜/h1＞」に置き換えてくれる。書...
そんなコンセプト先行の試作品。基本だけ実装してみました。作った本人がJQueryMobileを分かってないので、未熟なコードを吐き出すと思います。でも「こんなの、あるとなあ」の夢を語っておけば、のちのちの自分が改良してくれると信じてみる。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==%22html%22)op=%22 lang=ja-JP>\n<head>\n<meta name=viewport content=width=device-width,initial-scale=1>\n<link rel=stylesheet href=http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css>\n<scr%22+%22ipt src=http://code.jquery.com/jquery-1.9.1.min.js></scr%22+%22ipt>\n<scr%22+%22ipt src=http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js></scr%22+%22ipt>\n</head%22;if(tag==%22section%22)op=%22 data-role=\"page\" data-theme=\"c\"%22;if(tag==%22header%22)op=%22 data-role=\"header\"%22;if(tag==%22footer%22)op=%22 data-role=\"footer\"%22;if(tag==%22button%22)op=%22 onclick=\"FUNC\" data-role=\"button\"%22;if(tag==%22article%22)op=%22 data-role=\"content\"%22;if(tag==%22ul%22)op=%22 data-role=\"listview\" data-inset=\"true\"%22;if(tag==%22a%22)op=%22 href=\"URL\"%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\"%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>¤t=<@>登録リンクはこちら→ http://tinyurl.com/mzgbs54
タグを並べてアシスト実行。たとえば「html body ul li*3」と書くと、ネット上のJQueryMobileをリンクし、bodyにul形式でliタグを３つ並べてくれます。Zen-Codingはタグを「>」で繋ぐのが正式な書式ですが、入力しにくいので半角スペースでも区切れます。
後は、liタグのところを適当に埋める。
HTML Previewで見ると、JQueryMobileのリスト表示になっています。ヘッダーをつける場合は「header h1」としてZenMobileで展開。とにかくタグを書いて並べる。すると、それっぽい形に仕上がるのがこのアシストのコンセプトです。
後は、対応しているタグを増やすことなんだろうけど、何が不可欠なのかわからないので、ここあたりで。JQueryMobileに限らなくても、HTMLのタグ打ちを省力化できるので、そこそこ有用なんじゃないかと思います。「a」だけ打ってアシストを実行すると、リンク・タグの骨組みになるし、「li*5」でリストの追加。テーブルも「table tr*2 td*3」で 2 x 3 の表が出来上がる。モバイル向けのタグ打ちメソードとして、Zen-Codingには計り知れない可能性を感じます。
