KLWP/KWGTで必要な文字だけが光ってテキストで時刻を表現するWord Clockを作ってみる

orefolder

2018年06月27日

KWGTでWord Clockを作ってみました。普通にウィジェットとしていくつかのアプリが公開されているので自分で作る必要性はあまりないのですが、練習も兼ねています。

本記事は広告およびアフィリエイトプログラムによる収益を得ています。

Word Clockとは

Word Clockというのは、数字ではなく文字で書かれた時計のことです。無数の文字の中から必要な部分だけが光って現在時刻を表します。浮かび上がるような演出がカッコいいですね。

アプリやウィジェットとしてもいくつも公開されています。

Word Clock Widget: 制作: Carsten Wilhelm

価格: 無料 (2018/6/8 時点)

ダウンロード

word clock – Google 検索

以前書いたTajmのような時計と似ていますが、この形式のWord Clockの多くは5分刻みで、少しアバウトな時計です。とりあえずこれを作ってみたいと思います。

完成形

最終的にこんな感じにできました。コンポーネントとして公開します。

WordClock2: 制作: orefolder

価格: 無料

ダウンロード

グローバル変数でフォントサイズや色、枠線の種類や有無を選択できます。編集できるようになっているので、適当に中を見たり修正できます。

Word Clockとしての基本的な形からいろいろ変更してあって、説明するにはちょっと複雑になってしまいました。なので、もっと簡略化したものを考え方として次項から説明していきます。

基本の考え方

5つのブロックに分ける

Word Clockにはたくさんのアルファベットが書かれています。一見ランダムに並んでいてその中に文字が隠れているように見えますが、実は結構単純です。

この時計で表示される典型的な例は以下のようなものです。

It is Quarter past three（3時15分）
It is Ten past Three（3時10分）
It is Five to Four（4時5分前：3時55分）
It is Half to Five（5時まで30分：4時30分）
It is Seven O’Clock（7時）

文字列は5つのグループに分けることができ、それが上から並んでいるだけです。

第1グループ: 最初のIt isです。AboutをいれたりIt’sとしたり、表記は様々です。
第2グループ: Quarter / Ten / Twenty / Half / Five / Twenty Five の6種類+表示なしです。*から*分、*まで*分、の何分という部分です。
第3グループ: past / to 30分より前ならpast、後ならtoです。
第4グループ: 「時」の部分です。30分をすぎると次の「時」になります。
第5グループ: 0分のときに表示されるO’Clockです。

これらを1つ1つ作っていけば良さそうです。

事前準備

作り始める前に、後々のことを考えてグローバル変数を5つ作ります。

font1（フォント）
color1（表示するときのテキスト色）
color2（非表示のときのテキスト色）
fontsize（フォントサイズ）
time5（計算用）

フォントは等幅フォントにしておくといいでしょう。英語だと「monospace font」で検索するといろいろ出てきます。今回は「Fira Mono」を使いました。

計算用のtime5には以下の計算式を入れておきます。

$mu(floor, df(m)/5)$

今回の時計が5分刻みなので、これで現在の分を0から11の数字で表せます。

第2グループを作成

第1グループは「It is」でテキストを作るだけなので省略。次の第2グループを作ります。

このグループは、Quarter / Ten / Twenty / Half / Five / Twenty Five、そして表示なし（0分）の7種類のパターンがあります。Twentyが被るので、実際には Quarter / Ten / Twenty / Half / Five / Five を表示し、該当時間はカラーA、それ以外はカラーBと変化するように作ります。