未分類スキン・テーマ

Glaejaサンプル -Typoclock-

iPhoneのアプリでTypoclockというものがあります。(androidのほうのTypoClockとは別物です。)これがなかなかカッコよくて、いいなーと思ってました。

そういえば今ならGlaejaがあるから、ある程度はできるかもな…と思って幾つか模倣して作ってみました。いい機会なのでGlaejaのスキンサンプルとして公開します。なお、Typoclockの全パターンについては下記の記事を読むと見やすくていいです。
TypoClockがアップデートして20パターンになったのです | crocodile notebook


typo01

細い円と時・分を白い丸で表現しています。元ネタでは一番小さな丸は秒ですが、さすがに秒まではGlaejaで表示できない(表示はできても1秒ごとの更新はされない)ので、今回は1日で1周する丸を表現しています。

サイズ:4×2
フォント:CaviarDreams, Hero Light(曜日部分)
時と分の●は画像で作成しています。

typo02

曜日部分はマッチテキストを使って、当日の日付とマッチするときのみ色を白にしています。曜日1つで1行使っています。位置調整などがけっこう面倒でした。

サイズ:4×4
フォント:Hero Light

typo03

SiMiClockでもあるような時と分の間のラインは電池残量にしてみました。今見るといらなかった気がしますが…。
曜日の白背景部分はバーで作ってあります。現在地となる項目を$f$(週における曜日。日曜が0、土曜が6)に設定し、領域の開始・終了を現在の%からの相対位置にしてあります。そして転送モード「重なった部分を描画しない」で文字抜きにしてあります。

サイズ:4×2
フォント:DIN-Medium

typo04

一番下の段がなかなか締まらないですが…。
一番上段の2にかかっている曜日部分は、バーと転送モード「既存領域の重ならなかった部分のみ描画」を使っています。
サイズ:4×4
フォント:aOVELNeo

typo05

曜日を2行にしている部分、1行目は$EEE$で最初の3文字を表示しています。2行目はマッチテキストで元の文字列を$EEEE$にして、対象の文字列に$EEE$を指定、置換して表示するにチェックを入れて置換文字列を空欄にしています。これによって最初の3文字部分を何も無しに置換することができ、残りの文字だけ表示することができます。

ちなみに、私の環境ではADWで4列5行設定でステータスバーを出すとGlaejaの領域の左右に微妙な隙間が生まれ、消すと幅いっぱいに表示されるようになりました。そのため、このスクショだけステータスバーを消してあります。

サイズ:4×4
フォント:Arial Black (Windowsに標準で入ってると思います。)

typo06

普通のアナログ時計の文字盤部分を遊んでいます。マッチテキストで、その時間帯になると白くなります。本当は白くなったときに一番上のレイヤーに持ってきたいのですが、その方法が思いつきませんでした。まぁ全体を画像にしてしまって、画像を12個用意すればできますが…。

また、下の方でスキンファイルを公開していますが、ミスがありました。10,11,12のマッチテキストで探索文字列が$h$になっていますが、このままだと1時にそれぞれの10の桁の1も色が変わってしまいます。なので$h$を$hh$に変更するとこれが解消します。

サイズ:4×4
フォント:Droid logo font, DIN-Medium

typo07

最後はiPhoneのTypoclockの模倣ではなく、androidのTypoClockの模倣です。特に工夫したところはありません。

サイズ:2×2
フォント:Arial Black, Arial Bold (Windowsに標準で入ってると思います。)

いかがだったでしょうか。これらのスキンファイルを以下にまとめて置きました。(zip圧縮されています。)ダウンロードして使ってみたり改造してみたりしてください。SDカードのcom.gmail.kanitawa.glaejaファルダにコピーすれば使えるはずです。

http://ux.getuploader.com/orefolder/download/42/com.gmail.kanitawa.glaeja.zip

ただし、これらのファイルは解像度480*854の端末で、ホームアプリADW、4列5行の環境で作成したものです。端末の状態によっては同じように表示されない可能性もありますが、そのときは各自で微調整していただければと思います。