Glaeja小ネタ2

2012年04月07日

　Glaejaを使っている時のちょっとしたテクニック?応用できそうな例をご紹介します。

本記事は広告およびアフィリエイトプログラムによる収益を得ています。

バッテリー残量に応じて色を変化させる

　バッテリーを数値やバーなどで表示している時、その残量によって色を変えたいことがあると思います。例えば残量が20%以下になったら赤で表示したい、というようなものです。
これにはいくつかの方法があると思いますが、2種類の方法を書いておきます。

■0-20%は赤、21-60%は黄色、61-100%は青で表示

残量%によってきっかりと色を分ける方法です。これにはマッチテキストレイヤーを使います。0-20%で赤、21-60%で黄色、61-100%で青という3つのレイヤーを作成します。

　まずはバッテリー残量が20%以下なら赤で表示、という部分を作成します。
元の文字列の「表示文字列」に「#P#@p@20@p@<=@x@.0@P@」と入力します。#P#はバッテリー残量です。これは#P#の値が20以下であれば1、そうでなければ（21以上なら）0を表示する、というものです。これで場合分けができました。

　次に対象の文字列に移ります。「探索文字列」に「1」と入力し、「置換して表示する」にチェック、「置換文字列」に「#P#」と入力します。さきほどの元の文字列で#P#の値が20以下であれば1が表示されていました。この1が表示された時に「1」をバッテリー表示に戻す、ということです。

　あとはこのときの文字のスタイルを決めて入力すれば「バッテリー残量が20以下の時」の表示が完成です。ただ、元の文字列でバッテリー残量が20以下でない場合はそのまま0が表示されてしまいます。これは邪魔なので元の文字列の「文字の色」を「#00000000」などにして透明にします。これでバッテリー残量が20以下なら赤で表示、それ以外なら表示しない、というレイヤーが出来ました。

　できたレイヤーを複製して、今度はバッテリー残量が61以上なら青で表示、という部分を作成します。
今度は元の文字列の「表示文字列」を「#P#@p@60@p@>@x@.0@P@」とします。先ほどと似ていますが不等号の部分が違います。これは#P#の値が60より上であれば1、そうでなければ（60以下なら）0を表示する、というものです。あとは20以下の時と同じように61以上の時のスタイルを設定します。

　最後に「21-60%は黄色」の部分を作成します。
先ほどと同じようにレイヤーを複製します。そして今度は元の文字列の「表示文字列」を「#P#@p@20@p@>@x@#P#@p@60@p@<=@x@and@x@.0@P@」とします。これは#P#の値が20より大きい「かつ」60以下なら1を、それ以外なら0を表示するというものです。あとはこれまで同じようにこの範囲のときのスタイルを指定します。
この部分の数字を弄って複製すればもっと細かい場合分けをすることができます。

　これで「0-20%は赤、21-60%は黄色、61-100%は青でバッテリー残量表示」ができました。レイヤーは場合分けの数だけ、今回なら3枚使っています。

■バッテリー残量が少なくなるにつれ、段々と色を変化させる

　今度は何%でどの色、と決めないで徐々に色が変化していくバッテリー表示です。
まずは色は気にせずにバッテリー表示を作ります。

　次に、色を変えたいレイヤーの上に「色と透過度」レイヤーを置きます。そしてRGBのそれぞれの値に「#P#」と入力します。するとバッテリー残量が100%のときは100となり、これは16進数で64なので■#ff646464の色になります。80%の時は■#ff505050、65%の時は■#ff414141と段々と黒■#ff000000に近づいていきます。

　この値の部分は数字だけでなく@…@なども使えるので様々な表現が可能です。バッテリー残量が100%の時は255(FF)で0%の時に0(00)にしたいときは「#P#@p@2.55@p@*@x@.0@P@」とします。これはバッテリー残量×2.55という計算式です。もちろん、RGBの数値を揃える必要はありません。

　また、「色と透過度」は色だけでなく透過度も同様に変化させることができるので、例えば画像を2つ重ねて用意し、バッテリー残量の変化とともに上に乗せた画像が透けていく、なんていうものも作ることができます。透子さんのバッテリーメーターみたいなものですね。

端の丸まったバッテリーバー

　「バー」で作るバッテリー残量バーは端が角になっています。これを丸ませたいとき、「多角形」レイヤーを使います。「多角形」レイヤーは各頂点の座標にエスケープキャラクタを使うことができますので、バッテリー残量によって頂点座標を移動させればいいのです。

　例えば「開始点」の座標が水平「10」、垂直「30」のとき、次の頂点を水平「#P#@p@10@p@+@x@.0@P@」、垂直「30」とします。これでバッテリー残量が30%のときは(10,30)の位置から(40,30)の位置まで線が引かれます。#P#に10を足しているのは、始点の水平値が10だからです。これがないと0%の時はマイナス方向に線が伸びてしまいます。

■バーの端にくっついてくる残量表示

　バーだけでは実際の数値がわからないので、テキストで「#P#」として残量表示を出してみます。それだけではつまらないので、常にバーの先端部に表示される（残量変化とともに数値の位置も変化する）ものを作ってみます。

　先ほどのバッテリーバーの例では頂点の位置を「#P#@p@10@p@+@x@.0@P@」としましたが、それだと最大でも100dpの長さしかないのでちょっと改造して「#P#@p@2@p@*@x@30@p@+@x@.0@P@」としました。初期位置も少しずらしています。これでバッテリー100%の時は200dpの長さのバーになります。

　まず、「テキスト」レイヤーで「#P#」とし、バッテリー残量を表示させます。そしてそのアンカーポイント（位置）を水平30とバーの初期位置と合わせます。揃え方を中央揃えにすれば文字列の中央とバーの始点が揃います。

　続いてそのテキストレイヤーに「変形と移動」レイヤーをつけます。そして「マトリクス前の並進」に「#P#@p@2@p@*@x@.0@P@」と入力します。これでバッテリーバーの動きと同じだけテキストレイヤーも移動するはずです。

　ここまでの色や位置の変化などを使うと、こんなバッテリー表示もできます。

指定日までのカウントダウン

■日数で表示

　例えば2012年12月21日まであと何日か？というものです。カウントダウンですね。これには$j$を使います。これはユリウス通日というもので、詳しくはwikipediaの「ユリウス通日」を読んでください。2点の日数を計算するのに便利なものらしいです。

　指定した日のユリウス通日がわかれば、そこから現日時のユリウス通日を引くと指定日までの日数がわかります。ある時点でのユリウス通日がいくつになるのかは計算式があるようですが、面倒です。「ユリウス通日変換」で検索すれば変換してくれるサイトが出てくるので、そこで西暦をユリウス通日に変換しましょう。

　あとは簡単です。「テキスト」レイヤーで「2456282.5@p@$j$@p@-@x@.0@P@」とすれば2012年12月21日0時0分までの日数が表示されます。（2456282.5は2012年12月21日0時0分のユリウス通日）

■年月日数で表示

　すいません、先に言っておきますがこれは自信ありません。どこか間違ってるかもしれないですし、もっといい方法があるかもしれません。

　日数の計算ということでcaladdを使います。ただ、何も考えずに指定日から今日の日付を引くとおかしな日付が出てきます。2012年04月07日00時00分から2012年04ヶ月07日00時間00分を引くと0年0月0日0時0分…ってそんな日付ないですからね。紀元前になるのでしょうか。私はもともと日付の計算が苦手なのでこの辺で考えるのをやめました。

　で、結局のところ「201401220000@p@-$yyMMddHHmm$@p@caladd@x@.0@P@@p@101010000@p@-@x@.0@P@@8/0/年@@6/0/ヶ月@@4/0/日@@2/0/時間@分」としました。これで2012年12月21日0時0分までのカウントダウンになっている…と思うのですが、どうだろう…？まぁ1日くらいズレてたって…。最初の「201401220000@p@」のところ、ここは指定日に1年1ヶ月1日を足したものを入力します。（2012年12月21日0時0分に1年1ヶ月1日を足して2014年1月22日0時0分）これでマイナスになるのを防いでいる…つもり。で、計算結果の数字からあとで101010000を引いて帳尻合わせしている…つもりです。なんかすごい穴がありそうですが、こんな感じで。