kaz_konno's blog: walkthisway

Titanium Mobileの事など。

Repeated BackgroundImageモジュールが素晴らしい!

f:id:kaz_konno:20111116032042p:image:left
f:id:kaz_konno:20111116023752p:image




https://marketplace.appcelerator.com/apps/823
今回は、AppceleratorのMarketplaceでモジュールをリリースしている数少ない日本人デベロッパの一人@atsusyさん作の「Repeated BackgroundImage」モジュールを紹介します。


このモジュールを使うと、名前の通り、背景画像をリピート配置することができます。パターン柄の背景画像には最適でしょう。


更に、私は知らなかったのですが、ナビゲーションバーのbarImageにも利用できます。

Titaniumでアプリをデザインする際、barColorを指定することで簡単に色合いを変更することはできます。
しかし、こんな感じでテカリの付いた規定のグラデーションを変更することができません。

f:id:kaz_konno:20111116032043p:image:left
※例) barColor: '#777'



個人的にはマット系なグラデーションを使いたい。そのため、自分でbarImage用に下のような画像を用意していました。

f:id:kaz_konno:20111116031105p:image


もしWebだったら、下のような幅の狭い画像を用意してCSSでリピートするのが普通だと思います。

f:id:kaz_konno:20111116031106p:image

ところが、Titaniumでは画像のリピート配置に対応していません。
そこでRepeated BackgroundImageモジュールの出番です。


モジュールの使い方は簡単です。

1) Repeated BackgroundImageモジュールの購入。
 購入にはPaypalアカウントが必要です。

2) 購入処理が完了すると、MY PRODUCTS内に「Repeated BackgroundImage」モジュールが登録されます。
f:id:kaz_konno:20111116032044p:image

3) MY PRODUCTS内の「Repeated BackgroundImage」モジュールアイコンをクリックすると、ダウンロードすることができます。(2011/11/16日現在では「jp.msmc.repeatedbackgroundimage-iphone-1.2.zip」というファイルがダウンロードされるはずです。)

4) このzipファイルを下の自分のTitaniumプロジェクトフォルダに移動します。
f:id:kaz_konno:20111116032045p:image

5) tiapp.xmlを編集します。
初期の状態では、となっているので、以下のように編集します。


jp.msmc.repeatedbackgroundimage

6) barImageの設定を変更します。
 barImage: 'navbg.png'と指定しているところを以下のように修正します。

repeatedBarImage:'navbg.png'

とっても簡単です!
※このモジュールでは、require指定は必要ありません。

この後、エミュレータで動かしてみてください。
ビルドを行うと、zipファイルだったモジュールが自動的に以下のように展開されます。
f:id:kaz_konno:20111116032046p:image

ビルド時、コンソールに以下のログが出ているか確認してください。

[DEBUG] Detected module for iphone: jp.msmc.repeatedbackgroundimage 1.2 @ /Users/kazkonno/Documents/Titanium Studio Workspace/NewTemplate/modules/iphone/jp.msmc.repeatedbackgroundimage/1.2


[INFO] Detected third-party module: jp.msmc.repeatedbackgroundimage/1.1

この通り、barImageに画像をリピート配置することができました!
f:id:kaz_konno:20111116032047p:image





さて、ここからが重要です!


TitaniumでbarImageを利用している人なら皆知っている事だと思いますが、barImageを使っていると、背景画像の初回読み込み時に、ピカっとフラッシュします。画像の読み込み方が良くないせいだと思います。
もし気付いていない場合は良く見てください。

普段から仕事で開発に携わっている自分としては、このクオリティーはどうしても許せませんでした。そのため、自分でアプリを作る際は、navBarを使わず、自前のviewを作成して対応していました。

たまたま@atsusyさんからbarImageで利用できることを教えてもらい、試したところ同じ問題がありました。
しかし、@atsusyさんに相談したところ、この問題をモジュールレベルで解決してくれましたーーーー!

@atsusyさん、本当感謝です!ありがとうございました!

皆さんもAppStoreに出すアプリでbarImageを利用しているなら、現状のクオリティーに満足してはいけません。
ユーザーは細かいところが気になるものです。ユーザーに気持ち良く使ってもらうためにも、このRepeated BackgroundImageモジュールはオススメです!いや、必須だと思います!