Titanium Mobileでアプリにバッジを使う方法

Titanium MobileでiOSのバッジをつける方法です。

例えば、iOSのメールアプリの未読数やApp Storeアプリのアップデート件数など、アプリケーションアイコンやタブのアイコンに赤丸の数字がバッジです。

まあ、数字を指定するだけなので非常に簡単に出せるのですが、使える数値の範囲やいくつか制限事項があるので使い方をまとめてみます。

 

バッジの出し方

とりあえず今回はタブにもバッジを出すので、Tabbed Applicationでプロジェクト作成しています。

Ti.UI.iPhone.appBadge = 123;

20121030-app.png

window.containingTab.badge = 123; (window は任意のWindowオブジェクト)

20121030-tab-1.png

どちらもたった1行の記述でOKです。簡単ですね。

 

バッジの制限

アプリケーションアイコン用とタブ用で動作が違ってきますので注意が必要です。

アプリケーションアイコン用バッジ

使える文字の種類は数字のみです。4桁以上の数値の場合、カンマで区切られます。代入時に与える型は数字でも文字でもどちらでもいいのですが、数字以外の文字が現れた時点で表示が切り捨てられます。先頭が数字以外の場合はバッジ自体が表示されません。

なお、数字といっても有効なのは整数部のみで、小数点以下は切り捨てです。負の数は利用できません。表示上3桁カンマ区切りとなりますが、カンマを含む数値を与えるとカンマ以降は異常値になって切り捨てられます。'0123'のようにゼロサプライした文字列を与えた場合は、(123)のようにゼロサプレスされます。

Ti.UI.iPhone.appBadge = 100; // (100)
Ti.UI.iPhone.appBadge = 1.5; // (1)
Ti.UI.iPhone.appBadge = -123; // バッジなし
Ti.UI.iPhone.appBadge = 'A123'; // バッジなし
Ti.UI.iPhone.appBadge = '123A'; // (123)
Ti.UI.iPhone.appBadge = '0123'; // (123)
Ti.UI.iPhone.appBadge = '1,234'; // (1)

なお、数値の範囲は9999までの値でなければ表示桁数の関係上、省略されてしまいます。

20121030-badge9999.png  20121030-badge10000.png

'10…0'のように省略されてしまうと、10,000なのか、10,000,000なのか判断できません。実用を考えれば4桁まで、1万を超えたら9,999と表示させる、というようにすべきでしょうか。

 

タブ用バッジ

タブ用のバッジはアプリケーションアイコン用のものよりも幅も広く柔軟です。小数や負数も表示できます。数字だけでなくアルファベットや記号、漢字も利用できます。というか、タブ用は与えられた文字列をそのまま出力しているだけのようです。そのため、アプリケーションアイコン同様の表示にしたければ数値のカンマ区切りなどは自分で行う必要があります。

window.containingTab.badge = 12345678;

20121030 tab4

window.containingTab.badge = 'Ab.12+あ亜';

20121030-tab1.png

漢字なども出せるので、アイデア次第で面白い使い方ができるかもしれません。

ただしバッジに使われるのは可変幅フォントになりますので、例えば'i'と'W'では同じ1文字でも幅にかなりの違いが生じてしまいます。表示はできるのですがバッジから文字がはみ出てしまうのでとてもカッコ悪いです。

window.containingTab.badge = 'iiiiiiii';

20121030-tab3.png

window.containingTab.badge = 'WWWWWWWW';

20121030-tab2.png

まあ… 数値利用だけにしておくのが無難かもしれませんね(笑)