ホーム画面にリボンをかけたようなZooper Widgetのスキン

4月1日のエイプリルフールのネタで、ゴチうさのページがなんか変わっていたので、とりあえず画像保存しましたよね。で、とりあえずスマホに壁紙として設定してみましたよね。で、なんとなくそれに合わせてZooper Widgetで時計を作ったら思いの外気にいったのでした。

うん、可愛いですよね。
件のZooper Widgetは右上の黄色いリボンのようなものです。可愛いですよね。ものすごく単純なので、解説も要らないんじゃないかとも思いますが、一応小さなこだわりもあるところを書いていこうと思います。

全体的な設定

基本的にForce Englishにチェックを入れて、英語表記で作業しています。でないと月日の表示で色々と面倒なので。最終的に4つのモジュールで構成されています。

リボン本体部分

リボン本体は単にRectで図形として長方形を傾けて（かなり適当に）配置しています。このとき、グラデーションを使って、片方がわずかに暗くなるようにしています。この僅かなグラデーションがあることによりベタ塗りの野暮ったさを回避しています。ほんの僅かな差ですが、重要な差です。

また、これもほんのりとですが、シャドウをつけています。目立たないくらいにほんのりというのがポイントです。

テキストにも僅かな影を

テキストの内容はどうでもいいのですが、角度はRectに合わせています。
そして、これにもシャドウをつけています。これは色を黒ではなく、リボンの背景と同じ色…を少し濃くしたものを、透明度を少し上げて設定しています。これをX offset / Y offsetの両方とも-1にすることでほんのりと立体感を出しています。

端のステッチ

最後に、端に縫い目のようなラインを入れます。これはProgress Barを使い、SpacingとSplitを調整して点線にしています。この間隔は自分でいろいろ試して納得行くものにすればいいでしょう。

完成

これで完成です。簡単ですね。

ちょっと気をつけること

こういったリボン風の時計は、そういうウィジェットを使えばもっと簡単に設置できます。

ただまぁ、このウィジェットでも上で作ったZooperのものも同じなのですが、ステータスバーとの兼ね合いが難しいです。

最近はステータスバーが透過されているのが当たり前ですが、そこにはウィジェットは描画できないので、妙な間が開いてしまいます。透過させないか、完成例のようにステータスバーを非表示にするのがいいでしょう。もしくはKLWPのように壁紙として作れば、それもいいですね。

スキンファイル

今回は必要ないかと思いますが、一応スキンファイルを置いておきます。これをダウンロードするよりも自分で作ったほうが早いと思いますが。

まぁ、シャロは可愛いよね。