Archive for the ‘service’ Category

イガイトカンタン -PhoneGapからTitaniumMobileに乗り換えて10日くらいでアプリを作った話

月曜日, 3月 12th, 2012

Phonegap→Titaniumに移行して10日でandroidアプリを作ってリリースしてみました的な記録。
コードは一行も出て来ませんごめんなさい。
そんな面倒なことしないでもっとこうしたらええがな、みたいな突っ込み歓迎です。

つくったもの

ももいろクローバーZの情報をトータルフォローする非公式アプリ「ももクローム!

え、これ何するやつ?

(最近なかなか会えない、になりつつある)今会えるアイドル、週末ヒロインももいろクローバーZの最新情報を1アプリでチェックすることが出来ます。あんまこういう言い方したくないけどようするにファンアプリ的なやつだよ!
現在以下の情報に対応しています。

・メンバーブログ、スタッフブログ、新着ニュース
・公式スケジュール
・アイテム情報
・公式動画

環境

・android端末 HTC X06HT
・titanium studio on windows7 on thinkpad x201
・自身は昔Java、は普段PHPをメインで使っていてJSはjQueryとセットでたまに使う程度

かかった時間と前提条件

・業務時間外の作業(平日の夜+休日)で約10日
・サーバー側の実装はほぼほぼ終わった状態でスタート
・アイコンとか画像全般はももクロファンデザイン出来るやつに外注

PhonegapからTitaniumへ移行した理由

基本的に端末機能をほとんど使わないため最初はPhonrgap+jQueryMobileで開発していた
→割と慣れたjQueryでの開発なので初速は結構でた。↓くらいの状態には一日で出来ました。

当初のUIはこんな感じ。jQueryMobileのテーマローラー使用。割と綺麗。

 

が、以下の理由により断念

・ページ遷移時に同じ位置にあるボタンをタップしてしまう現象を回避できず
→ボタンをタップして画面遷移した際に、同じ位置にあったボタンに対してもタップイベントが走ってしまう。イベント制御を色々試してみたが回避出来ず。
・httpでのサーバーからのデータ取得がこける(これは後に別の問題と判明)
・固定ヘッダの挙動がいまいち(スクロールで再描画される。たまにでない。)
・その他android上での挙動が全般的にイマイチ(ページ遷移時の再描画など)

Titaniumでの実装で時間がかかった部分

・INTENTの機能や、andoridのメニュー機能はサンプルをみながら割とあっさり実装できた
Titanium Mobileで開発するiPhone/Androidアプリのサンプルやネット上のサンプルを参考に書けばおk

・UIの調整にとにかく時間がかかる
参考までに以下UIの変遷

一覧

1)とりあえず一覧表示(サイズ指定がpxなのでやけに小さい)
2)dip指定を覚えて サイズはいい感じに
3)と思ったらgaraxy nexusで端っこがきれてる
4)ロゴと背景画像を分け、背景横幅100%、ロゴをセンタリングで解決

詳細

1)とりあえず詳細表示
2)フキダシっぽくしてみたけど横に張り付き
3)フキダシに収まるようにしたけど実際は横幅いっぱいまでwebviewがあるため中のリンクを踏むと悲しい見た目に
4)なんとかフキダシ内部にwebviewを置くことに成功

記事のプレビューエリアはフキダシにしよう、と当初から決めていましたがここのUI調整だけでえらい時間かかりました。

最終的に
・ベースとなるコンテンツエリアのビューを定義(縦は表示領域の余ってるところ全部)
・その上にヘッダとフッタをイメージビューで配置
・真ん中に背景画像にフキダシの横の線部分を設定したビューを配置。さらにそのうえに左右にマージンをとったwebviewを配置

で解決。
手法としてはCSSで画像使って角丸設定するのと同じような感覚なんだけど、透過部分がうまくいかなかったり、マージンが効かなかったりというのを調整し、その都度実機転送して確認、を繰り返し。

そんな面倒なことをして、わざわざ表示する領域を狭くしてまでフキダシを設置するのもどうなのよ、というコメントを頂いたりもしますが、フキダシにしたほうがこうももかが喋ってるような感じでめっちゃ気持ち伝わるやんけ!
というこだわりによるものなのであしからずご了承ください。

はまった点など

・デバッグ方法
→Titanium Studioのデバッグメニューは「Android Emulator」しか出てこないので、しばらくそれでデバッグしていたんですが、「端末じゃないと再現しない」、「エミュレーター重いしよく落ちる」のでかなりストレスです。
とはいえTi.API.debugから出力したメッセージもみたい、とあれこれやっていたところ、最終的に実機で実行して、android sdk標準のddmsを単体で立ち上げ、フィルターでTi.APIとか指定する方法でデバッグが出来そうだったのでそのようにしました。

余談ですが、Ti.〜とかでログ出していると、他のTitaniumで開発されたアプリが引っかかったりして楽しいです。

・画像のサイズが合わない
→dip指定と100%指定を組み合わせてなんとか乗り切りましょう

・マーケットにあがらない
→最後の最後でマーケットに上がらない現象が発生。アイコンが云々みたいなエラーメッセージを出されるが実際は全然別の原因で、自分の場合はi18n/en/string.xmlが存在しなかったのが原因。全然ちゃうやん・・。他にも「AndroidManifest.xmlの不備」などが原因であがらなかったりするようなのでアップ時には余裕を持ってやりましょう。

・http://〜で指定した画像が出てこない
→android.permission.WRITE_EXTERNAL_STORAGEで書き込み権限を持っていないとダメ。キャッシュの関係なんですが、SDカードの読み書きとか別にしねーし、と思っててもこれ入れとかないと画像が出ません。

今後の課題

・メモリ管理(オブジェクトの破棄とか)、モジュール化などをちゃんとやるようリファクタリング
→リリースしたら終わり、というものでなければこのへんちゃんとやらんとダメね。手を抜いてちゃダメさー
・自身のjsのスキルアップをしつつ、シングルコンテキストな感じで書き直したい
・内部にデータキャッシュ機構を持たせたい

参考リンク

一番役だったのは書籍「Titanium Mobileで開発するiPhone/Androidアプリ」ですが、参考にした諸々のリンク先をあげておきます。
androidアプリ開発のため、偏ってます。

titanium-mobile-doc-ja
基本的な情報は大体ここで

Titanium Mobile API Documents
APIドキュメント

Titanium BBS(JP unofficial)
日本語非公式掲示板。困った時はここで。

【Titanium Advent Calendar 2011:十九日目】Androidアプリも作ろうぜ!~Androidアプリに実装すべきTipsたち
この記事超参考になりました

Community Questions & Answers
本家のQA。英語ですがSDKのクリティカルなバグ情報とか対処法が見つかったりします

その他色々ありましたが見つけたら追記。
余談としてandroid固有の話(たとえばサイズ別画像の用意)などはネイティブのandroid開発資料などが役に立ちます。

まとめ

・Titaniumは結構簡単にアプリを作れるがUI調整には時間がかかる

・実機転送の間の過ごし方をなにがしか考えておく

・必要なのは高いモチベーションと折れない心

・実機はなるべく多くの種類を用意した方がよい。解像度の低い端末ではいきなりアイコンがでかくなったりしてびびる。

特に3つ目の高いモチベーションは大事。
そもそも私はこのアプリを自分が使いたいから、という理由で開発していたわけですが、開発期間中に手に入れたももいろクリスマス in 日本青年館~脱皮:DAPPI~をみたい衝動を抑え開発作業を続けるのは非常な困難を伴いました。
あー俺はなんでこの超いいDVD見るの我慢してこんな地味な作業を続けなければならないんだろう、という不毛な考えが浮かぶようではアプリ開発はままなりません。
必要なのは折れない心です
絶対諦めないwe are!

 


Lilac::図書館蔵書検索モバイルのプレゼン資料

日曜日, 5月 30th, 2010

カーリルのAPIコンテストに出した時のプレゼン資料。

内容的にはそれほど大したことは書いていないのだけれども、折角作ったので公開します(大塚轟子先生に4コマを書いてもらったりもしているし)。

カーリルさんの方からもスライドシェアにプレゼン資料をあげて頂いているのだが、フォントのせいか見た目がちとアレな感じになってしまっているので自前でPDF版をあげます。

資料はこちら

補足1)カーリルさんとは?

リンク見て貰えばわかりますが、全国の図書館の横断検索システムを構築しAPIを公開されているなんかすごいとこです。

補足2)Lilacって?

そのAPIを利用して作ったモバイル版実装(i-mode、ez、softbank対応)です。

位置情報を使ったりしてます。

が、実装自体は実用目的で結構率直な感じ(よく言えば実用指向で悪く言えばやや面白みに欠ける)。

CalilさんのAPIを使ってるのでLilacです。

補足3)なぜ作ったか?

・API自体面白そうなので何かサービスを作ってみたいと思い、折角ならばとコンテスト応募してみた

・図書館の啓蒙の一環として。みんなもっと図書館に手塚治虫の「奇子」とかが平気で置いてあるという事実に気づくべきなんだ。

 

Lilac::図書館蔵書検索モバイル

http://lilac.eg2mix.com/