Repeated BackgroundImageモジュールが素晴らしい!
https://marketplace.appcelerator.com/apps/823
今回は、AppceleratorのMarketplaceでモジュールをリリースしている数少ない日本人デベロッパの一人@atsusyさん作の「Repeated BackgroundImage」モジュールを紹介します。
このモジュールを使うと、名前の通り、背景画像をリピート配置することができます。パターン柄の背景画像には最適でしょう。
更に、私は知らなかったのですが、ナビゲーションバーのbarImageにも利用できます。
Titaniumでアプリをデザインする際、barColorを指定することで簡単に色合いを変更することはできます。
しかし、こんな感じでテカリの付いた規定のグラデーションを変更することができません。
個人的にはマット系なグラデーションを使いたい。そのため、自分でbarImage用に下のような画像を用意していました。
もしWebだったら、下のような幅の狭い画像を用意してCSSでリピートするのが普通だと思います。
ところが、Titaniumでは画像のリピート配置に対応していません。
そこでRepeated BackgroundImageモジュールの出番です。
モジュールの使い方は簡単です。
1) Repeated BackgroundImageモジュールの購入。
購入にはPaypalアカウントが必要です。
2) 購入処理が完了すると、MY PRODUCTS内に「Repeated BackgroundImage」モジュールが登録されます。
3) MY PRODUCTS内の「Repeated BackgroundImage」モジュールアイコンをクリックすると、ダウンロードすることができます。(2011/11/16日現在では「jp.msmc.repeatedbackgroundimage-iphone-1.2.zip」というファイルがダウンロードされるはずです。)
4) このzipファイルを下の自分のTitaniumプロジェクトフォルダに移動します。
5) tiapp.xmlを編集します。
初期の状態では、
jp.msmc.repeatedbackgroundimage
6) barImageの設定を変更します。
barImage: 'navbg.png'と指定しているところを以下のように修正します。
repeatedBarImage:'navbg.png'
とっても簡単です!
※このモジュールでは、require指定は必要ありません。
この後、エミュレータで動かしてみてください。
ビルドを行うと、zipファイルだったモジュールが自動的に以下のように展開されます。
ビルド時、コンソールに以下のログが出ているか確認してください。
[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に画像をリピート配置することができました!
さて、ここからが重要です!
TitaniumでbarImageを利用している人なら皆知っている事だと思いますが、barImageを使っていると、背景画像の初回読み込み時に、ピカっとフラッシュします。画像の読み込み方が良くないせいだと思います。
もし気付いていない場合は良く見てください。
普段から仕事で開発に携わっている自分としては、このクオリティーはどうしても許せませんでした。そのため、自分でアプリを作る際は、navBarを使わず、自前のviewを作成して対応していました。
たまたま@atsusyさんからbarImageで利用できることを教えてもらい、試したところ同じ問題がありました。
しかし、@atsusyさんに相談したところ、この問題をモジュールレベルで解決してくれましたーーーー!
@atsusyさん、本当感謝です!ありがとうございました!
皆さんもAppStoreに出すアプリでbarImageを利用しているなら、現状のクオリティーに満足してはいけません。
ユーザーは細かいところが気になるものです。ユーザーに気持ち良く使ってもらうためにも、このRepeated BackgroundImageモジュールはオススメです!いや、必須だと思います!