TitaniumでiPhone/Androidアプリ開発。「サーバのデータを取ってきて表示」をテーマに試してみた。

先日、環境を整えたTitaniumですが、とりあえずなにか形にしてみよう。ということで、「サーバからデータを取ってきて表示。」みたいなとこをテーマに試してみました。

(実際は、JAGKの勉強会で話すテーマだったりするので、切羽詰まって。というとこが理由だったりするのですが。)

サンプルとして、作ったもの

サンプルとして、3画面構成で、[トップ]→[ブログの最新記事リスト]-[ブログ記事]とページ推移するものを作ってみました。なお、ブログの最新記事の情報に関しては、jsonファイルを用意しました。

Titanium サンプルアプリ

Titanium開発の初め方

  1. Titaniumで開発を始めるには、まず、「New Project」をクリックして、「project type」に[Mobile]を選択したら、必要事項を入力して、プロジェクトの新規作成を行います。
  2. プロジェクトを作成すると、基本ファイルが自動作成されます。プロジェクトフォルダは、「Edit」画面の上部に表示されているフォルダのパスをクリックすると開かれます。
  3. TitaniumはIDEではありません。ビルドツールのようなものです。何かしらのエディタを使って、開発します。
  4. TitaniumはResources/app.jsから起動されます。なので、コードはapp.jsを起点に書いていきます。
  5. titanium-mobile-doc-jaを確認しながら進めていけば、結構スムーズにいける感じです。

今回のサンプルのソース

今回作った程度のものだと、app.js内に十分収まってしまうほどシンプルに書けます。

実際のコードです。

var win1 = Ti.UI.createWindow({
  title           : 'FlatLabs',
  backgroundColor : '#fff'
});
var start = Ti.UI.createButton({
  style  : Ti.UI.iPhone.SystemButtonStyle.BORDERED,
  title  : '最新記事をみる',
  font   : {fontSize:16, fontWeight:'bold'},
  height : 124,
  width  : 200
});
win1.add(start);

var win2 = Ti.UI.createWindow({
  title           : '最新記事トピックス',
  backgroundColor : '#fff'
});

var base = Ti.UI.createWindow();
var nav  = Ti.UI.iPhone.createNavigationGroup({
  window : win1
});
base.add(nav);
base.open();

start.addEventListener('click',function(){
  nav.open(win2);
  var http = Ti.Network.createHTTPClient();
  http.open('GET','http://blog.flatlabs.net/topics.json');
  http.onload = function(){
    var listdata = JSON.parse(this.responseText);
    var list = Ti.UI.createTableView({
      data : listdata,
    });
    list.addEventListener('click',function(e){
      var row  = e.rowData;
      var win3 = Ti.UI.createWindow();
      var page = Ti.UI.createWebView();
      page.url = row.url;
      win3.add(page);
      nav.open(win3);
    });
    win2.add(list);
  };
  http.send();
});

これだけです。

クロスプラットフォーム開発環境としては、ちょっと残念

深く追求しているわけではないのであれですが、クロスプラットフォーム開発環境としては、いまいちっぽいとこは、最初大きな期待をもっていただけに、残念な感じがしました。

感想として、いくつか出ていますね。

ただし、iPhoneとAndoridアプリが一気に作れる、とか思ってさわると結構機種依存のコードを書く必要に迫られるので期待を裏切られます。ロジックのコードが共通化できるぐらいに考えていたほうが気楽だと思います。
Titaniumが楽しすぎてやばい – kurainの壺

とはいえ、一番のがっかりポイントは「iPhoneもAndroidもこれでまとめて開発できます!」という売り文句がまるで実用的ではないこと。
噂のTitanium Mobileを丸二日いじってわかったことまとめ&細かーいTipsなどなど – IDEA*IDEA

無計画にAndroid版を作り始めたのも原因ですが、iphoneにはあるけどAndroidではないAPIがあったりして参りました。とくにUI系は互換性がないAPIがあるので、クロスプラットフォームにするつもりの場合は最初から考えておいたほうが良さそう。
TitaniumでAndroid/iPhoneアプリをリリースしました!はてなブックマークリーダー! – Money does not hurt your heart

例として、例えば上記コードをそのままAndroid用にビルドすると、エラーがでます。

コンパイルエラー

で、対応させようと思って、コードを変更したりしたのですが、
今度は、「Not yet implemented for Android.」と出たりして、
なんだか面倒になって止めました。(こんなんなら、普通にjavaで書いた方が早いかな。と。)

Not yet implemented for Android.

ただ、このへんは、慣れてくれば、きれいに書けていけるようになるとこなのかもしれません。

まとめ

上記のようにクラスプラットフォームに対応するには、それなりにノウハウも必要な感じですが、短いコードで、簡単に出来ちゃう。というのは、やはり、メリットではないでしょうか。

ちょっとしたiPhoneアプリを作るとか、使いどころによっては、便利に使えるかもです。

カテゴリー: Android技術, WEB技術のこと, iPhone、iPadのこと   タグ:   この投稿のパーマリンク

トラックバック

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>