【KLWP】ローマ数字のアナログ時計を作ろう

KLWP

こんにちは、Masaokaです。

今回は「ローマ数字を使ったアナログ時計」を作ってみましょう。

この時計が作れるようになると、レトロ風の壁紙やアイコンにも合わせやすいと思います。

作り方は、以下の通りです。

  1. 文字盤を作る
  2. 時計の針を作る
  3. 仕上げ

それでは始めましょう。

スポンサードサーチ

文字盤を作る

盤面


まず最初に『グループ化(重ねる)』を追加。
この中に、アナログ時計のアイテムを追加していきます。

次に『図形』を追加。
形は何でもいいのですが、今回は「ローマ数字」を使うのが決まっているので、円形がいいでしょう。
色は少し彩度を抑えつつ、黄色を加えた明るめのを。

ベゼル


その上にベゼルとなるパーツを作りましょう。
図形を追加。
僕は先ほど作った文字盤と同じ大きさ +10くらい大きくして、ストロークで太さを10にしました。

簡単ですが、これで盤面は完成です。
あとはお好みに合わせてカスタマイズしてください。

文字

いよいよ本題です。
エディターの「+」ボタンから『連番』アイテムを追加します。

(デフォルトはバッテリーで、横に並んでいるだけになっています)

スタイルタブに移動し、リストの一番上「スタイル」を選択。
そのあと、次のダイアログで『円形』を選びます。

そして連番タブに移動し、モードをタップ。ダイアログの一番下までスクロールし、『自作』を選びます。

このリスト内のアイテムには、とりあえず次のような値を入力してください。

数式 $tc(roman, index+1)$
現在の値 $df(h)%12-1$
12
加工 変更なし
回転 手動
オフセット 30

次のスクリーンショットのようになっていれば、成功です。

(文字色は見やすいように黒に変更しました)

あとはスタイルタブに戻って、お好みの設定にしてください。
モードは『固定サイズ』にした方が、調整しやすいです。

時計の針を作る

実はここもミソだったりします。
初心者の方は、とくに注意してください。

分針

時計の針を表すのに“アイテムを回転”させる必要があります。
その点、Zooper WidgetやUCCWは割と簡単に作れましたが、KLWPは少しコツが必要です。


まず、『グループ化(重ねる)』を追加。ついでに、区別しやすくするため「分針 グループ」などに名前を変えておきましょう。
その中に『図形』を追加し、時計の針っぽくなるように加工します。

終わったら、「分針 グループ」の『レイヤー』タブに移動。そしてリストから『回転』を選択します。
下までスクロールすると、『時針に連動(なめらか)』『分針に連動(正確)』などの選択肢が見つかります。

この『~(なめらか)』と『~(正確)』ですが、「なめらか」の方をえらんでください。

今回は純粋なアナログ時計を作りたいので、例えば『分針に連動(正確)』を選択してしまうと違和感が生じます。

例えば現在の時刻が17:34だった場合、既に30分を回っているのに、時針が5の場所ちょうどを指したままで止まってしまいます

今は分針を作っているので、『分針に連動(なめらか)』を選びます。
『オフセット』はいじらなくて結構です。

針の位置を調節する

お分かりのように、これだと針がどこを指しているのか不明瞭なままです。
そこで、「分針 グループ」の『位置』タブへ移動。

ここがポイントでもあるのですが、『余白(下)』の値だけを加算してください。
その他の値をいじってしまうと、回転の中心がおかしなことになり、混乱します(← 経験済)

あとはお好みのデザインに変更してください。

時針を作る


先ほど作った「分針 グループ」をコピー&ペーストしてください。
そして「時針 グループ」名前を変更したあと、『レイヤー』タブに移動、回転 → 『時針に連動(なめらか)』を選択。

あとは長さやデザインを調整してください。
時針なので、分針よりも短めにすると良いでしょう。


最後に針止めを適当において、時計の完成です。

仕上げ


それっぽい壁紙とアイコンを選び、それらに合わせてデザインや色を調節してみましょう。
結構荒削りですが、僕のはこれで完成です。

最後に

いかがでしょうか。

ローマ数字を表す関数が1年ほど前に追加されていたのは知っていましたが、果たしてどう使うのか、僕も悩んでいました。

今回アナログ時計に使ったのは、かなり有効だったと思います。

ここで少し、今回使用したローマ数字化するKLWPの関数について確認してみましょう。

tc(roman, NUM) NUM(数字)に入れた値を
ローマ数字に変換する。

このローマ数字ですが、フォントを変更していろいろ検証してみたところ、大文字アルファベットの“X”と“I”と“V”を組み合わせたものですね。

ローマ数字専用のフォントなんて多くないでしょうから、ありがたいですね。

是非、あなたのホーム画面にも使ってみてください。