2012/12/06

[iPhone|Android] enabled Design Tips by Titanium

これは、Titanium Mobile Advent Calendar 2012 の参加エントリです。

Titanium Mobile 3.0 RC がつい最近リリースされ、新バージョンが目前ですね。
今年の前半は 4ヵ月くらい Titanium Mobile を触りました。何もないところから流儀を身につけてそれなりのコードを書き、2ヵ月半くらいで [iPhone|Android] アプリの両方をリリースしました。

今回はその経験を踏まえて、自分なりの iPhone, Android 両対応の Titanium Mobile における設計の流儀をまとめておこうと思います。「設計の流儀」としたのは、Titanium のバージョンがそれなりにあがっても自分的に通用しうるな、と思ったものだけをまとめたものだからです。 コードを書くときも様々なトラップを踏んだ覚えがありますが、それは別途まとめてみようと思います。

自分が作った経験に基づいていますので、以下のような内容になります。念頭に置いてお読みください。

  A)  Native 部分とスマホ向けのWebサイトを組み合わせたハイブリットアプリ向け 
  B)  ゲームアプリではないので、3D などのTipsは含まれていません。
  C) Titanium に限らず、スマホアプリを作るときはいつも当てはまるだろう、という事項も含まれています。


1. Android -> iPhone の順で設計する

iPhone より Android の方が出来ることが少なく、また Titaniumでの実装上の罠も 2.x 系では多い気がしました。よって、こちらをベースに先に作業した方が後々苦しまなくて済むと感じました。

UI は当然のことながら全然違うし、APIによって使える使えないが勿論存在するので、両対応を考えるなら汎用的に使えるコンポーネントで組み立てた方があとあと楽になれるかもしれません。そうした「使えそうなコンポーネント」を選ぶにあたって使えるのが御存知 「KitchenSink」です。

KitchenSink は iPhone, Android の両方で(できれば実機で)動かしてみることを強くお勧めします。それによって、それぞれのプラットフォームにおける見た目や動きが把握でき、しかもその中身がサンプルコードとして見ることができるからです。本やWebでコンポーネントの情報を把握することもよいのですが、実機での動きに勝るものはありません。

2. Titanium で出来ることと出来ないことをきちんと把握しておく

当たり前だろう、と石が飛んできそうですが、出来ることの限界が意外にわかりづらかったり、作っている途中で「これはできない」とわかったりするのが Titanium の世界だったりすると自分は思っています。。そうでもないですかね(´ー`; )

当たり前のことですが、Titanium Mobile を使えば iPhone や Android で使える機能が全部使えるとか考えてはいけません。対応していない機能は [Objective-C|Java] でモジュールを書く必要があるため、それなりの労力が必要になってきます。

Titanium のバグで動かない API をモジュールで代替せねばならない場合もあります。自分の場合は、 Android で 音声認識機能 を Intent 経由で呼びだそうと思ったらうまくいかなかったので、モジュールを書いた経験があります。

https://github.com/mumumu/Titanium-Android-VoiceRecognition

また、出来ることと出来ないことについての限界を知る目的でも、上で述べた KitchenSink は大変役に立ちます。骨の髄までしゃぶりつくしましょう。

3. iOS 向けの対応ハードはきちんと吟味する

これは Titanium に限ったことではありませんが、iOS 向けの場合は、必要な機能によっては使えるハードが限られてしまうので、iPhone や iPod、 iPad のどの世代から使えるのか、設計および実装時にきちんと吟味しておきましょう。

iTunesConnect Developer Guide にハードごとの機能互換性が表になっています。

http://developer.apple.com/library/ios/#documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/B_DeviceCompatibilityMatrix/DeviceCompatibilityMatrix.html#//apple_ref/doc/uid/TP40011225-CH17-SW1

最近はそれぞれに世代も進んできたので、差は小さくなっているのかもしれませんが。
自分の場合はカメラのオートフォーカスが弱いことが理由で一部機能が iPod Touch や iPad で使えなかったりした経験があります。

4. Webサイトが既にあり、組込む予定がある場合は、Webサイトとアプリでやることをはじめに切り分ける

アプリから組み込みブラウザでスマホサイトを呼び出せますが、組み込みブラウザのパフォーマンスはそんなに期待できません。WebView にモバイルサイトを表示させれば全て快適に動くなんていうハッピーな世界は期待してはいけません。特に3G では通信速度の問題もありますし、一気に張れるコネクションの数がそんなに多くないからです。LTE ではまた違うかもなのですが。

ハードの機能が必要な部分のみアプリで、という思考に行きがちですが、その点は以下のような態度がよいのではないかと思いました。

スピードが必要な部分ではアプリで。それで面倒な仕組みのみ、スマホサイトに任せる方式が現実的

5. アプリから組み込みブラウザ(WebView) を用いて、Webサイトを呼び出すときの注意

上で述べた通り、組み込みブラウザのパフォーマンスはそんなによくありませんし、自分がアプリを作ったときは 3G の通信ではかなり遅く感じました。なので、以下のような流儀が役に立ちました。

 ・できうる限り通信の本数は最小にする

  1本あたりの通信がとても重いです。そのため、以下の流儀が役に立ちます。

   a) 小さなモバイル向けの画像については、data スキームを大いに活用しましょう。
   b) CSS や JS も可能な限りHTML内部に収めましょう
   c) jQuery Mobile はダウンロード・実行ともにとても重かったのでキャッシュが効
     かない iOS 向けではminifyした上でアプリ内部に納め、ページロード後にeval
     させるという荒業を使った経験があります。

 ・テキストのコンテンツは gzip 圧縮する

   やむを得ず js, css などをダウンロードさせざるを得ない場合は、必ず圧縮して転
   送しましょう。jsonも当然対象です。

「HTML5 Web アプリケーションのつくりかた」というエントリもとても参考になります。
----

まとめ

なんだか基本的なことばっかりのような気もしますが、Titanium は Android が特に罠が多いように思います。それぞれのプラットフォームの特徴を見極めながら作るのは経験も必要だとは思いますけど、予備知識がそれなりにあれば大分違うよね、という思いでまとめてみました。何かのお役に立てれば幸いです。

では明日の担当 @h5y1m141 さんにバトンタッチします! よろしくお願いします。

2012/11/30

Dirty code is allowed?

http://kyuns.hatenablog.com/entry/2012/11/30/143037

汚いコードでいいから云々は基本的に「経営者の論理」なんだけど、そういう経営者の論理と折り合いをつけつつうまくエンジニアリングを引っ張っていくのがCTOの役目だと自分は思う。そういう意味で上記の筆者は非常に良心的だ。

こういうしっかりしたCTOがいる会社はまだ良くて、「経営者の論理」に抗し切れない、またはそれに抗しきれなかったコードがひとたび書かれてしまうと、それがずるずると引きずられ、メンテするエンジニアが泣くハメになる。それはいつしかその会社のエンジニアリングの文化になり、それを変えることは容易ではない環境になる。
 
だから「はじめが肝心なのだ」なんていうつもりは毛頭ない。重要なのは、そうした文化があってもチャンスを見つけてそれを少しでも突破しようと意識することだ。それには、自分が動かなければ始まらない。と自戒を込めて思う。そして、上記のエントリにも書かれている、以下の目的を見失わないようにすることが重要だなとおもいます。まる。

----
 
「よりよい実装をすることによって開発の効率化を進め、開発サイクルを早めてより素早くプロダクトをリリースし、最終的にユーザーに満足してもらうことが目的である。」

2012/11/28

Goma-tarou And Fox-zirou

http://ja.wikipedia.org/wiki/%E3%81%97%E3%82%8D%E3%81%9F%E3%82%93

我が家には10年以上置いてあるぬいぐるみがある。いわゆるしろたん(タテゴトアザラシ) のぬいぐるみである。相方がどっかから買ってきて抱き枕として使用していたものの、結婚してからはソファーの上に鎮座している。

昔は「ごまごまん」と呼んでいたのだが、最近は「ゴマ太郎」と呼ぶようになった。見た目が素直でとてもよろしい。尚、このしろたん関連グッズが我が家には至る所にあり、枕や置物など様々な用途に活用されている。

ちゃんと調べてみて、これがオリジナルキャラだというのをはじめて知った(´ー`;)
 
----

http://foxkeh.jp/

昨日そのゴマ太郎に加えて、Mozilla Firefox の「フォクスケ」が やってきた。Android 版 Firefox のキャンペーンがあり、それに応募して当てたものだ。うちにアザラシ以外のぬいぐるみが来ることは極めて珍しいので「フォク次郎」という名前を早速つけた。相方からも尻尾のモフモフ具合がよいと好評である。

ひょんな縁でやってきた新しいぬいぐるみ。我が家もよりにぎやかになりそうである(*´~`)

2012/10/16

[memo] blogger android app enhanced

常用している Blogger の Android公式アプリにちょっと不満がある。ある意味ニッチな不満なので久々にアプリを書いてみるか、と思いつつ不満に思っていることをメモ。

----

1. 投稿日時をコントロールできるようにしたい
2. あるエントリを複製して新しいエントリを起こしたい
3. ラベルを過去に投稿したものから選択できるようにしたい
4. 特定のエントリをアプリからWebViewを経由せずにオフラインで見られるようにしたい
5. 上記をラベルで絞ってみたい

2012/10/12

Returns kindle 4th generation(2)

http://d.hatena.ne.jp/s-fridge/20101124/1290604325

以前返品した Amazon Kindle 第4世代が何の理由もなく戻ってきたよ( ;´Д⊂ヽ

日本の業者ってリチウム電池を運ぶのにいろいろとあるらしく、Amazon.comに直でメールしたらUPS経由で返すように案内されますた。

けど、配送料を調べたら普通に5k超えることがわかったので大人しく他の方にお譲りすることにしました。。上の id:s-fridge さんは 9000円したとか。よく返品する気になったなあ、、と。

----

ということで、新品の Kindle第4世代(Wifi版、広告なし)を欲しい方コメントよろですー。5000円でこうちくれると嬉しいのです(´ー`; )