読者です 読者をやめる 読者になる 読者になる

TitaniumMobile勉強記

Web系エンジニア向けのキャリアアドバイザーやってましたが現在はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連(Node.js、Titanium)あたり

TiQiita ver1.1をリリースしました。

と呟いてたようにver1.1を申請してましたが、今朝審査通った通知が来ました。

最初にTiQiitaリリースしてすぐに、バグ、具体的には、ユーザ認証で利用するQiitaAPI通じて取得するTokenを毎回起動時に誤って初期化するという不具合があったので、その修正対応をしながら、いくつか細かい機能を加えてver1.1としてリリースしました。

変更点としては

  • フォローしてるユーザの投稿情報を取得して1つのタイムラインとして表示する機能
  • iPhone5のスクリーンサイズ対応
  • AdMobモジュール導入して広告を挿入

という感じです

ver1.1の実装に関連して

大して機能追加してないですが、実装する際にちょっとハマった所があったので、自分用のメモも兼ねていくつかまとめておきます

リモートの画像を表示する時にアプリが落ちる不具合に悩まされる

しっかりと検証しきれてないですが、別のアプリ開発していても似た症状があったので、簡単にまとめておきます。

症状

以下のように、QiitaのユーザアイコンをImageViewを使って生成しそれを、TableViewRowに配置している処理をしてます

f:id:h5y1m141:20130508071104p:plain

今回のver1.1から、Titanium Mobile SDKを、2.1.4から3.0.2にアップして作業していたのですが、投稿情報を取得した後に、TableViewにデータをセットする瞬間にアプリが落ちる不具合に悩まされました

原因は?

調べていく中で、ImageViewを配置しない場合にはアプリは正常に起動したのでどうもImageViewに起因してるようでした。

もう少し深く切り分けてみた所

  • 正常に起動するパターン:ローカルにある画像を読み込む場合
  • アプリが落ちるパターン:リモートの画像を読み込む場合

というのがわかりました。

回避策

きっかけは正直覚えてないのですが、何となくパフォーマンスの問題かなと思い、ひとまずTitanium MobileのAPIリファレンス眺めてたら、たまたまdefaultImageというものが目に止まりました

ここで設定した画像をひとまず表示して、リモート画像取得が完了したら差し替わるので

# CoffeeScriptのソースコード
iconImage = Ti.UI.createImageView
  width:40
  height:40
  top:5
  left:5
  image:json.user.profile_image_url

というコードを

# CoffeeScriptのソースコード
iconImage = Ti.UI.createImageView
  width:40
  height:40
  top:5
  left:5
  defaultImage:"ui/image/logo-square.png"
  image:json.user.profile_image_url

という形に書き換えたら、アプリが起動するようになりました。

※ Titanium Mobile SDK 3.0.2の環境です。SDK 2.1.4では発生してなかったので、それぞれのSDKでのImageViewの生成に関するソースコードをチェックするとしっかりとした原因がわかりそうですが、そこまでのスキル&モチベーションがなくチェックしてません。

iPhone5のスクリーンサイズ対応

[プロジェクトフォルダ]/Resources/iphone

にDefault-568h@2x.pngというファイルを準備すればOKというのを知らず、数日費やました・・

知ってしまうとどうってことないんですけどね

フォローしてるユーザの個々の投稿情報を取得してから投稿日順にソートする

以下の図のようにフォローしてるユーザの個々の投稿情報を取得して、それをまとめて表示する際に、投稿日の新しい順番に表示したほうがそれっぽいかと思って頑張って実装してみました。

f:id:h5y1m141:20130508080619p:plain

ソートしたい配列の構造は

[{"id": xxxx,
 "uuid": xxxx,
 "user":
  {"name": xxxxx,
   "url_name": xxxx
 "title": xxx,
 "body": xxxx,
 "created_at": "2012-10-03 22:12:36 +0900",
 "updated_at": "2012-10-03 22:12:36 +0900",
},
{"id": xxxx,
 "uuid": xxxx,
 "user":
  {"name": xxxxx,
   "url_name": xxxx
 "title": xxx,
 "body": xxxx,
 "created_at": "2012-10-03 22:12:36 +0900",
 "updated_at": "2012-10-03 22:12:36 +0900",
}]

という感じになってます。

この類の処理は色々な場面で出てきそうなので、Underscore.jsのようなライブラリでそれっぽいメソッドがあるかと思って調べていたのですが、http://d.hatena.ne.jp/yatemmma/20110723/1311534794というとても参考になる情報があったのでそちらをそのまま活用することにしました

# CoffeeScriptのソースコード
_items.sort( (a, b) ->
  (if moment(a.created_at).format("YYYYMMDDHHmm") > moment(b.created_at).format("YYYYMMDDHHmm") then -1 else 1)
)

最後に

広告を挿入するのは結構悩んだのですが、こういうアプリの広告収入というのがどの程度になるのか、肌感覚で知っておくのは勉強になりそうだと思ってAdMobモジュールを導入しました。

当面は他にやりたいことがたくさんあるのでver1.2の開発は当面おあずけにしようと思ってますが、実装するとすると

  • はてブへの投稿時にコメントをいれられるようにする
  • Qiita&はてブへの投稿と同時に、Evernoteへの投稿も出来るようにする
  • フォローしてるユーザの個々の投稿情報を取得してから投稿日順にソートする部分の実装見直し
  • 左側メニューでフォローしてるタグを折り畳んで表示できるようにする
  • (気が向いたら)Android対応

という感じですかね