DraftPadのアシストだけでトップページを作ってみました

連日連夜、JQueryMobile祭り。


jQueryMobileを使って自分のサイトを作ってみる Codiqa
コードが分かると、さらに面白い


メニューだけなら、そんなに覚えることはない。ほとんどがテンプレートで済むので、DraftPadのアシストにしてみました。HTML→PAGE→LIST→LINKの順に書いていきます。



DraftPad 1.5.5 App Store
対象デバイス: all
カテゴリ: 仕事効率化   価格: ￥0
販売業者: Manabu Ueno

Title: JQMobile(HTML)
URL: draftpad://self/urldecode?text=<!DOCTYPE html><html><head><meta charset="utf-8">%0A<meta name="viewport" content="width=device-width, initial-scale=1">%0A<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">%0A<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>%0A<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>%0A<title><@></title>%0A</head><body>%0A%0A%0A%0A</body></html>%0A
Option: Cut Current Line or Selection

まず外枠の作成から始めます。タイトルを書き、上記アシストを実行。それだけで、必要なHTMLタグが並ぶ。


Title: JQMobile(PAGE)
URL: draftpad://self/urldecode?text=<div data-role="page" id="page1">%0A    <div data-role="header" data-theme="b" data-position="fixed">%0A        <a data-role="button" data-direction="reverse" data-transition="slide" href="#page1" data-icon="home" data-iconpos="left">HOME</a>%0A        <h3><@></h3>%0A    </div>%0A%0A%0A%0A    <div data-role="footer" data-theme="b" data-position="fixed">%0A        <h3>JQMobile</h3>%0A    </div>%0A</div>%0A
Option: Cut Current Line or Selection

次にページを作ります。bodyにページ名を書き、上記アシストを実行。ページは、同じHTML内に複数作ることも出来ます。「page1」を「page2」「page3」に書き換え、リンク先に使うことでページ切替ができる。


Title: JQMobile(LIST)
URL: draftpad://self/urldecode?text=        <div data-role="content">%0A            <ul data-role="listview" data-divider-theme="b" data-inset="true">%0A                <li data-role="list-divider" role="heading"><@></li>%0A%0A%0A%0A            </ul>%0A        </div>%0A
Option: Cut Current Line or Selection

次にリストビューを作ります。ページ内にリスト名を書いて、上記アシストを実行。themeはa〜eまであるので、お好きなのをお使いください。


Title: JQMobile(LIST)
URL: draftpad://self/urldecode?text=                <li><a href="#page1" data-transition="slide"><@></a></li>%0A
Option: Cut Current Line or Selection

最後にリンクを並べていく。サイト名を書き、上記アシストを実行。リンクは「#page1」となっているところ。ページ番号を書き換えれば、同じHTML内の他ページに移動します。普通にURLアドレスを書けば、そのサイトを開くリンクになります。



HTML Viewで開いて表示の確認。問題なければ、PlainText等でDropboxに転送し、Safariで開くだけ。拡張子はhtmlとしておくこと。あるいは、ScriptPackerで圧縮し「draftpad://self/web?source=」に貼り付ければ、そのまま実行可能なアシストに早変わり。
DraftPadでJavascriptを圧縮するアシスト ScriptPacker


標準のURL Decodeを応用すると、テンプレの埋め込みはとても手軽。そして、テンプレを使うだけで効率よくソースコードを書き込める。説明が分かりにくいかもしれませんが、何度か試すうちにJQueryMobileの素晴らしさは伝わるんじゃないかと思います。他のコンポーネントも、今日のアシストを利用すればすぐ出来そうだな。