【Zooper Widgetの使い方】第5回 : テキストの装飾と条件分岐を使って、バッテリー残量でテキストの色を変える

Zooper Widgetの使い方、第5回目はバッテリー残量にともなって色が変わるテキストを作ります。
ここでは、テキストを装飾するBBコードというものと、バッテリーが少なくなった時という条件分岐のやり方を学びます。

BBコードでテキストを装飾

リッチテキストを使って高度なテキスト編集を指定すると、文例の一番上に「Markup/BBCode」というものがあります。ここに書かれているものを使うと、テキストを太字にしたり、一部分の色を変えたりすることができます。

BBコードは、例えば太字なら[b]***[/b]という形で使います。この[b]と[/b]で囲まれた部分のテキストが太字化されます。
他のコードも同様で囲まれた部分にのみ適用されます。

条件分岐

高度なテキスト編集では数式や条件分岐を使うことができます。
条件分岐は「$X=Y?Z:W$」という形式で表され、X=Yの部分が条件式、?Zは条件式(X=Y)が正しいときにZが表示され、:Wは正しくない時にWが表示されます。
X=Yの部分は=だけでなく、<や>、<=>=といったものも使えます。

「$#BLEVN#<50?yes:no$」としたときは、バッテリー残量が50未満ならyesを、そうでなければnoを表示する、ということです。

条件分岐とBBコードを組み合わせる

今回書いた条件分岐とBBコードを合わせて使い、バッテリー残量が0-20%の時は赤、21-59%の時は黄色、60%以上なら青で表示されるテキストを作ってみます。

高度なテキスト編集で、以下のように入力します。

Battery:[c=$#BLEVN#<=20?#cc0000$$#BLEVN#>20&&#BLEVN#<60?#cccc00$$#BLEVN#>=60?#5599ee$]#BLEV#[/c]

ごちゃごちゃしていますが、大きく見ると「Battery:[c=条件で変わる色指定]#BLEV#[/c]」となります。[c][/c]はその間のテキストの色を変えるBBコードです。その[c][/c]で指定される色の部分を条件分岐で変えています。

$#BLEVN#<=20?#cc0000$…バッテリー残量が20以下の時#cc0000
$#BLEVN#>20&&#BLEVN#<60?#cccc00$…バッテリー残量が20以上かつ60未満の時#cccc00
$#BLEVN#>=60?#5599ee$…バッテリー残量が60以上の時#5599ee

2番目の記述では、2つの式を&&で繋げています。これは「かつ」を意味し、繋がった両方が正しい時にその後のものが表示されます。片方だけでも正しい時、いわゆる「または」は||で繋げます。

20%以下の時は#cc0000(赤)

20%以上かつ60%未満の時は#cccc00(黄色)

60%以上の時は#5599ee(青)

まとめ

Zooper Widgetはそのまま表示したいものを選んでいくだけでもある程度は自由にできますが、今回のような条件分岐などのコードを使うことで、より自由度が増します。これらをうまく使いこなせば、面白い効果を産んでくれるかもしれません。

次回は条件分岐をもう少し応用し、1週間のカレンダーを作ってみます。