2011年7月25日月曜日

[Glaeja] ギンギラギンにさりげなく

というわけで、『Glaeja』のスキンチュートリアルです。
今回は「マッチテキスト 」レイヤーを使ってイロイロやります。



1. 簡単な Weekday Bar の作り方

他のカレンダー系ウィジェットでよく見る「曜日がズラーッと並んだ中で、今日の曜日だけ色とか違ってる」っていうアレです。
『Glaeja』の「マッチテキスト 」レイヤーのデフォルト設定もそうなっていますが、それを一から作ってみましょう。

1.Weekday Bar は横に長いので、ここでは横4×縦1のウィジェットを置き、「マッチテキスト 」レイヤーを新規追加します。




2.[元の文字列 ]の[表示文字列 ]が密接しているので、それを「Sun. Mon. Tue. Wed. Thu. Fri. Sat.」とピリオド付きで間隔をあけたものに書き換えます。
また、[文字の色]を白、「文字サイズ」を12 sp.に、好みでフォントを「Chunk.ttf」に変えました。





3.[対象の文字列 ]の「探索文字列 」を、ピリオドも含めるため「$EEE$.」に変更します。
ロケール ]が「英語」であるのを確認し、[文字の色 ]を赤、その他サイズやフォントを[元の文字列 ]のものに揃えます。





4.これで完成。サンプル画像をクリックして日付偽装ダイアログから、曜日を変えて確認してください。



5.[元の文字列 ]の[表示文字列 ]を「日 月 火 水 木 金 土」に、[対象の文字列 ]の「探索文字列 」を「$E$」、[ロケール ]を「日本語」に変えると、左のような日本語の Weekday Bar にすることもできます。




2. 『mCl○ck』風 Weekday Bar の作り方

mCl○ck』風 Weekday Bar というと、「SMTWTFS」みたいに各曜日が頭1文字で表されて今日の曜日の色が変わる、みたいなのです。
これを「マッチテキスト 」レイヤーでやろうとして、
  • 元の文字列 ][表示文字列 ]を「SMTWTFS」
  • 対象の文字列 ][探索文字列 ]を「$EEE$@0/2/@」(曜日3文字のうち、後ろ2文字を削除)
にしても、『マッチテキストの探索は、左から探して最初に見つかったものにマッチする』という仕様から、木曜(Thu.)なのに火曜(Tue.)の「T」にマッチしてしまいます。

そこで、かなり面倒くさい等幅フォントしか使えない、のですが以下のようにしてみましょう。

1.[元の文字列 ]・[対象の文字列 ]のフォントを、組み込みのmonospaceのような等幅フォントにした後、

 ・ [元の文字列 ][表示文字列 ]を「Sun      」("SMTWTFS"の日曜をSunに、他曜日をスペースに置換)
  ・ [元の文字列 ][文字の色 ]を完全透明
 ・ [対象の文字列 ][探索文字列 ]を「$EEE$」
 ・ [対象の文字列 ][置換して表示する ]をチェック
 ・ [対象の文字列 ][置換文字列 ]を「$EEE$@0/2/@」(曜日3文字のうち、後ろ2文字を削除)

にします。
これで、今日が日曜なら、「Sun」にマッチし、「Sun」が「S」に置換されて表示されます。
(日曜以外なら「文字の色 」が完全透明なので何にも表示されません)

2.上で作った「マッチテキスト 」レイヤーを複製して追加します。








3.複製した「マッチテキスト 」レイヤーの[元の文字列 ][表示文字列 ]を「 Mon     」("SMTWTFS"の月曜を"Mon"に、他曜日をスペースに置換)に変えます。
これでこのレイヤーは、今日が月曜なら「Mon」にマッチし「M」に置換されて表示され、それ以外の曜日なら何も表示されません。

ここまででスキン全体としてみると、日曜なら1.のレイヤーが「S」と表示し、2.のレイヤーは表示なし。月曜なら1.のレイヤーは表示なし、2.のレイヤーが「M」と表示します。このときに等幅フォントでないと、表示がキレイに重ならないわけです。

4.「マッチテキスト 」レイヤーを複製して追加し、同様に「火水木金土」を(面倒くさいですが)作っていきます。
これで、全曜日に対応したわけですが、今日の曜日以外に何も表示されないのは寂しいですネ。






5.そこで、[表示文字列 ]が「SMTWTFS」な[テキスト ]レイヤーを新規追加し、スキンの一番上(表示順は一番最初)にもっていきます。
アンカーポイントを上記「マッチテキスト 」レイヤーと合わせて、「マッチテキスト 」レイヤーの曜日表示と重なるようにすれば完成です。

このとき、等幅フォントでも微妙にスペースの幅が文字幅と異なるものだと、文字がズレますw



…ぶっちゃけ、ここまで手間かける価値があるほどカッコいいスキンとは思えませんが……


3. バッテリー残量Bar の作り方

Mini○alistic T○xt』風の「0 10 20 30 40 50 60 72> 80 90 100」みたいなバッテリー残量バーを作ってみましょう。

1.「マッチテキスト 」レイヤーを新規追加し、[元の文字列 ][表示文字列 ]を「0 10 20 30 40 50 60 70 80 90 100」にします。

フォントは何でもイイのですが、好みで『Comfortaa』のボールドにしてみました。





2.[対象の文字列 ]の「探索文字列 」を「#P#@0/1/0@」(バッテリー残量%数値の後ろ1文字を"0"に置換)することで、今の残量を強制的に10%刻みに変えて探索させます。

そして、「置換して表示する 」をチェックし、「置換文字列 」を「#P#>」として、1%刻みの今の残量%を表示させます。

後は、[対象の文字列 ]のフォントや色を整えたら、


3.これで完成です(左の画像は">"が全角になっててカッコ悪いですが…)



横置きのは、上述したようにエラく簡単なんですが、縦置きのを作ろうとするとレイヤー1つでは済まずに、2.みたいに各10%刻みのバッテリー残量ごとに「マッチテキスト 」レイヤーを1つずつ作って重ねてやらないとイケませんorz…


これらの他にも、[対象の文字列 ]「探索文字列 」を「$MMM$」(3文字の月名)にした「Month Bar」とか、「$HH$」(時)や「$mm$」(分)にした「Hour/Minutes Bar」とか、イロイロと作れると思います。

11 件のコメント:

  1. いつもお世話になってます。
    バッテリーを縦に並べる場合ですが #P#@0/1/0@だと 10%台の時に100%の'10'まで拾ってしまいます。何か回避する方法はありますでしょうか?

    返信削除
  2. いつもお世話になってます。
    バッテリーを縦に並べる場合ですが #P#@0/1/0@だと 10%台の時に100%の'10'まで拾ってしまいます。何か回避する方法はありますでしょうか?

    返信削除
  3. …書かれた文章だけでは内容がよくわからないのですが、以下のようなことをしたいのでしょうか?

    「MinimalisticText」の縦置きバッテリーバーみたいに、「0, 10, 20, ... , 80, 90, 100」と数字が縦に並んでいて、現在の残量のところだけを「72」とかに変えたい

    そこで、
    ・[元の文字列]:「10」
    ・[探索文字列]:「#P#@0/1/0@」
    ・[置換文字列]:「#P#」
    とした「マッチテキスト」レイヤーを、[元の文字列]を[0, 10, 20, ... , 80, 90, 100]と変えたものを11個作って縦に並べてみた

    こうすると、現在の残量が20%台とかなら思ったように動作するが、10%台(例えば13%)のときには、

    ・[元の文字列]:「10」のものは正しく「13」となるが、
    ・[元の文字列]:「100」のものまで「130」となってしまう

    という現象のことでしょうか?

    返信削除
  4. 上記のような現象だとして、回避策を考えてみました。

    一番簡単な回避策は「数字全部3桁にそろえてしまえ」です。

    ・[元の文字列]:「000」
    ・[探索文字列]:「#PPP#@0/1/0@」
    ・[置換文字列]:「#PPP#」
    とした「マッチテキスト」レイヤーを、[元の文字列]を[000, 010, 020, ... , 080, 090, 100]と変えたものを11個作って縦に並べます。

    こうすることで「"100"の中の部分文字列"10"にマッチしてしまう」ことは回避できます。
    …「先頭にゼロいれるのカッコ悪い」って考えなら使えませんが。

    「先頭にゼロいれないで済む」手は次に書きます。

    返信削除
  5. 「先頭にゼロいれないで済む」手は、「@...@」による演算を駆使しないとイケナイのでちょっと難しいです。

    残量が0~9%のときの「マッチテキスト」レイヤーを、
    ・[元の文字列]:「#P#@p@0@p@>=@x@#P#@p@10@p@<@x@and@x@0,HIT@0/-1/\m@」
    ・[探索文字列]:「HIT」
    ・[置換文字列]:「#P#」
    と設定します。

    同様に10~19%のときの「マッチテキスト」レイヤーを、
    ・[元の文字列]:「#P#@p@10@p@>=@x@#P#@p@20@p@<@x@and@x@10,HIT@0/-1/\m@」
    ・[探索文字列]:「HIT」
    ・[置換文字列]:「#P#」
    と設定します。

    以降も同様に、20~29%のときなら、
    ・[元の文字列]:「#P#@p@20@p@>=@x@#P#@p@30@p@<@x@and@x@20,HIT@0/-1/\m@」
    ・[探索文字列]:「HIT」
    ・[置換文字列]:「#P#」
    というように、[元の文字列]の上記太字部分を適宜書き換えて、[20-29, 30-39, ... , 80-89, 90-99]まで作ります。

    最後に100%のときだけマッチさせるために、
    ・[元の文字列]:「#P#@p@100@p@==@x@100,HIT@0/-1/\m@」
    ・[探索文字列]:「HIT」
    ・[置換文字列]:「#P#」
    と設定した「マッチテキスト」レイヤーを作成します。

    これらは要するに、
    ・残量がある範囲のときだけ「HIT」に、そうでなければ「0, 10, ...」と[元の文字列]を表示し、
    ・「HIT」なら「#P#」に置換する
    という動作をさせているわけです。

    このテクは、チュートリアル「[Glaeja] かたつむり 」の一番最後の作例「6.5. バッテリー残量に応じてフォント色を変える作例」で紹介されているもので、使い方が理解できれば表現の応用範囲がかなり広がることかと思います。
    http://bananawani-mc.blogspot.jp/2011/10/android.html

    返信削除
  6. 早速の回答ありがとうございます。
    質問の内容は推測された通りです。
    また、実際に100%のレイヤーに上記の@...@の演算の文字列をいれたら正常になりました。
    ありがとうございます!

    返信削除
  7. お忙しいところ申し訳ございません。
    バッテリーのところなのですが、端末のバッテリー残量として色をつけた数字が、他の数字と比べ、半分くらいの大きさになってしまっています。このサイトで言っていることを忠実に行いました。
    なにか、改善方法を教えてください。お願いします

    返信削除
    返信
    1. どのレイヤーのどういうパラメータをどうしてどんな文字列を入力したか等の詳細がわからないとどうにもなりません。

      削除
    2. すいません。
      0 10 20 30 40 50 60 70 80 90 100
      の文字列にしました。
      探索文字列は、#P#@0/1/0@
      で、置換文字列は、#P#です。

      削除
    3. 当方の環境(docomo SO-02F 4.4.2)では、小さくなる現象は確認されませんでした。
      探索文字列のフォントやサイズはちゃんとしたものになっていますか?

      削除
    4. ありがとうございました。
      結局、よくわからなかったので再起動してみたところ、対象の文字列の方のサイズがほかの数字のサイズと合っていなかったのが判明しました。
      ご協力ありがとうございました。

      削除