PhoneGapとjQuery MobileとHTML5を使ってJSONをDumpするアプリをサクッと作る
少し前に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で作ってる人にとっては機能がたりないんだろうなと思う。