PhoneGapとjQuery MobileとHTML5を使ってJSONをDumpするアプリをサクッと作る

iPhone JavaScript jQuery Mobile PhoneGap

少し前にphonegapを知ったのでJavaScriptを使ってiPhoneアプリを作ってみた。



inputにJSON APIのURLを入力するとリスト表示してくれるDumper。
monmon/dump-for-dd · GitHub




試しに作っただけなのでエラー処理とか特にしてないけど、

http://search.twitter.com/search.json?rpp=50&q=twitter

みたいなのを入力して動いたのは確認した。
ブラウザでも試せるようにしたけど、こっちはAjaxで取って来れないのでtextareaにjson文字列入れてdumpできるようにしてある。


PhoneGapを使う

PhoneGapのインストールはdownloadからzipファイル落として、中にあるiOS/PhoneGapLibInstaller.pkgを開くだけでおしまい。
その後はGet Startedにある通り、Xcodeの「User Templates」からPhoneGap用のテンプレートを選びプロジェクトを作ればOK。



あとはwww配下のindex.html内にあるonDeviceReadyでいつも通りJavaScriptを書いていけばいい。
書き終わったらビルドしてシミュレータで確認するだけ。
AccelerometerとかCameraなんかが使いたい場合にはPhoneGapのAPIを見るとサンプルも載ってるのでわかりやすい。


jQuery Mobileを使う

jQuery Mobileはダウンロードページからダウンロードしてindex.html内でjQueryと一緒に読み込めばいい。

	<link rel="stylesheet" href="lib/jquery.mobile-1.0a2.min.css" />
	<script type="text/javascript" src="lib/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="lib/jquery.mobile-1.0a2.js"></script>

あとはhtmlとJavaScriptを書いてく。
そうするとブラウザなりで開いた時にjQuery Mobileが普通のHTMLのページをそれっぽく作り直してくれる。
デフォルト設定の変更とかもできるけど、今回はとりあえずデフォルトで試しました。


まずはページについてのドキュメントを真似しながらページ作り。
ホームのページとなる部分を作成。こんな感じで<body>の中に書く。

	<div id="home" data-role="page" data-theme="c">
		<div data-role="header">
			<h1>JSON Dumper</h1>
		</div>
		<div data-role="content">
			<input type="text" name="url" value="" placeholder="input url">
			<a href="#dump" data-role="button">Dump</a>
			<textarea placeholder="debug"></textarea>
		</div>
	</div><!-- /#home -->

「data-」で始まるattributeでjquerymobileが上手いことやってくれる。
例えばdata-themeでjquerymobileのテーマが選べる。
こことかここに載ってる。



あとは、「data-role="page"」が一つのページを表し、
「data-role="header"」はそのヘッダ部分、
http://jquerymobile.com/test/docs/toolbars/docs-headers.html
「data-role="content"」はメイン部分、
「data-role="footer"」でフッタ部分も付くし、「data-position="fixed"」でそれを固定できたりするんだけどここでは省略。
ヘッダのドキュメントã‚„フッタのドキュメントに色々載ってる。




Dumpする時のボタンの作り方だけど、これはドキュメントにもある通り「data-role="button"」って書くだけでそれっぽいのが作られる。



jQuery Mobileの場合、aタグのhrefで#dumpみたいに指定すると<div id="dump">を探して、
そのdivへ移動する時にページ遷移しているようなアニメーション（デフォルトはslide）が怒るので何も気にしなくていい。
ただ、独自にデータを取得する場合なんかはデータ取得してからページ遷移したいので

$.mobile.pageLoading();        // ローディング開始
$.mobile.pageLoading(true);  // ローディング停止

みたいな感じでローディング画像も入れられる。


さてさて、dumpし終わった後のリスト表示についてですが、
リストについてもドキュメントがあるのでそれを真似すればいい。
普通の

<ul>
<li></li>
</ul>

に.attr('data-role', 'listview')してあげればmobile用のリストができあがる。
リストのテーマについてはここに書いてあるので別のにしたければdata-themeを変えればいい。



あと、.data('role', 'listview')でもいけるかと思ったけど
内部データとして保持するだけで<ul data-role="listview">にはならないみたいで上手くいかなかった。
ただし、リストのフィルタを表示させるためのdata-filter="true"に関しては.data('filter', 'true')で上手くいったので、もしかしたらタイミングのせいかも。



最後にフィルタに関してだけど、入力したとにEnterを押されるとページ遷移しようとしてしまうのでsubmit処理が起こらないようにする。

        // フィルタのsubmitでページ遷移してしまわないように
        // filterが作られたらsubmit処理を上書きする
        $('div').live('pagecreate', function() {
            $('form[role=search]').submit(function(){
                return false;
            });
        });

フィルタ用のformはjQuery Mobileが勝手に作るので、モバイル用のページを作ったタイミング(pagecreate)でsubmit処理を消すようにしている。
他にもpagebeforeshowやpageshowなんかがある。

その他の話

ホントはHTML5のopenDatabaseなんかも試してdumpした履歴管理とかしたかったんだけど、とりあえずlocalStorageだけ使った。
URL入力してdumpしたらそのurlをlocalStorage.ddに入れておいて、次回実行時からはそれを入力しておいてある。


まとめ

JavaScriptをサクッと書いて試せるのは楽。
ただ普段からObjective-Cで作ってる人にとっては機能がたりないんだろうなと思う。