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

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



１. 簡単な Weekday Bar の作り方

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

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

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

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

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

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




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

『mCl○ck』風 Weekday Bar というと、「SMTWTFS」みたいに各曜日が頭１文字で表されて今日の曜日の色が変わる、みたいなのです。
これを「マッチテキスト 」レイヤーでやろうとして、

• ［元の文字列 ］［表示文字列 ］を「SMTWTFS」
• ［対象の文字列 ］［探索文字列 ］を「$EEE$@0/2/@」（曜日３文字のうち、後ろ２文字を削除）

にしても、『マッチテキストの探索は、左から探して最初に見つかったものにマッチする』という仕様から、木曜（Thu.）なのに火曜（Tue.）の「T」にマッチしてしまいます。

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

１．［元の文字列 ］・［対象の文字列 ］のフォントを、組み込みのmonospaceのような等幅フォントにした後、

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

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

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

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

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

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

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

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



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


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

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

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

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

２．［対象の文字列 ］の「探索文字列 」を「#P#@0/1/0@」（バッテリー残量％数値の後ろ１文字を"0"に置換）することで、今の残量を強制的に10％刻みに変えて探索させます。

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

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

３．これで完成です（左の画像は">"が全角になっててカッコ悪いですが…）。



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


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