Titanium Mobile を最近触り始めたので、スキルアップとともにアプリができる過程を残していきます。
前提
開発環境は、こんな感じ
- mac book air
- Titanium Studio
ちなみに構築手順はこちらがまとまってます。
最初の課題
twitter APIからjsonを読み込んで一覧で表示、というシンプルなアプリはphpmatsuriのワークショップで、すでに動いてましたので、xml読み込みverを作ってみました。
xmlの対象はこのブログのfeedです。
ハマりどころ
xmlのDOM操作も多少苦戦しましたが、何よりデバッグの分かりにくさに苦労しました。
どうも、onload()による遅延ロードに起因して、デバッグがすべて表示されないようです。
デバッグするタイミングが注意ですが、それは下の開発tipsに書いてます。
完成ソース
デフォルトのapp.jsからいじってますので、その名残が多少あります。
// this sets the background color of the master UIView (when there are no windows/tab groups on it) Titanium.UI.setBackgroundColor('#000'); // create tab group var tabGroup = Titanium.UI.createTabGroup(); // // create base UI tab and root window // var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#fff' }); var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1 }); var http = Titanium.Network.createHTTPClient(); http.open("GET", "http://blog.playispeace.com/feed/"); http.onload = function() { var doc = this.responseXML.documentElement; var items = doc.getElementsByTagName("item"); var datas = []; for (var c=0;c0) { row.add(Titanium.UI.createLabel({ text: title.item(0).text, top: 0, left: 0, right: 0, height: 'auto', bottom: 8 })); datas.push(row); } } var tableView2 = Titanium.UI.createTableView({data:datas}); win1.add(tableView2); }; http.send(); http.onerror = function(){ //alert("network error"); }; // // add tabs // tabGroup.addTab(tab1); // open tab group tabGroup.open();
開発tips
開発時に気づいた点などです。
デバッグ箇所に注意
今回のようにhttp.onload()がある場合、デバッグをonload()内で実施すると、確実に見れるような気がします。
ネットワークによる遅延でonload内の処理が遅れて処理される場合が多いのが、その理由かな、と思ってます。
バリバリコンパイルは、iOSで
マシンスペックにもよりますが、Androidのエミュレータや実機でのコンパイルは非常に時間がかかります。
なので、最初はiOSによるコンパイルが効率的です。
ただし、以前の勉強会で聞いたのですが、Androidの方がぶつかる問題が多いらしいので、最初にAndroidで作成し、それからiOS調整するほうがいいという情報もあります。
そこで、私は、ひとまずiOSで進めて、1機能が出来たら一度androidでも実行する、というフローで開発してます。
次の課題
今回は一覧でタイトルを表示しているだけなので、クリックしたら、本文が見れるようにするのを課題とします。
Pingback: xml readerをTitaniumで作る〜簡単なスマホアプリデモ〜 | TowardSomethingNew