Versaアプリ「Kanji Clock」紹介

Versaアプリ「Kanji Clock」紹介

2019/3/2

1.概要

Fitbit OSでは任意のフォント(.tff)をインストールして表示できるので、それを利用して毛筆体で漢字だけで時計表示するアプリ「Kanji Clock」を作成した。
ソースからのビルドとインストール方法ならびにフォントのインストールについて説明する。「時刻」と「月」に関しては大字(だいじ)と言われる画数の多い漢字を使っている。

大字(だいじ)解説

アラビア数字と漢字(大字)の対応表：

0	1	2	3	4	5	6	7	8	9
零	壱	弐	参	肆	伍	陸	質	捌	玖

実際の表示例：

３月２日	３月２１日	１２月１２日	9:11	21:34
参二	参二一	壱弐一二	零玖壱壱	弐壱参肆

2.インストール方法

(0)まずは、本件のソースを以下のURLから入手して解凍する。

Versa_KanjiClock.zip

(1)トップディレクトで以下を実行する：

npm install

#あとは通常のアプリのビルド＆インストールと同様に以下を実行する。

npx fitbit

build

install

3.カスタマイズフォントのインストール方法

今回のソースでは既にカスタマイズフォントはインストール済みなので特に実行すべきことはないが

機能追加などで新規フォントをインストールする場合、以下を実行する：

(1)まずはトップデレクトリにインストールしたいフォントファイル(.ttf)を置く.

(2)次に以下のツールを実行して必要なフォントをpng画像に変換してresourceフォルダに置く。

npx fitfont-generate [font_name.ttf] [font_size(pixel)] [表示したい文字を含む文字列]

実行後、resourceフォルダに、[font_name]_[font_size]の名前のフォルダが生成され、その中に必要なフォントのpng画像ができる。

以下、実行例：

npx fitfont-generate KouzanBrushFont.ttf 70 0123456789.MTWFSabcdefghijklmnopqrstuvwxyz零壱弐参肆伍陸質捌玖拾一二三四五六七八九十時分秒月日曜火水木金土

npx fitfont-generate KouzanBrushFont.ttf 90 0123456789.MTWFSabcdefghijklmnopqrstuvwxyz零壱弐参肆伍陸質捌玖拾一二三四五六七八九十時分秒月日曜火水木金土

4.カスタマイズフォントの表示コード例

従来のフォントの表示コード例:

import document from "document";

...

const line0 = document.getElementById("line0");

...

line0.text = "金曜日"; 

カスタマイズフォントの表示コード例：

import { FitFont } from 'fitfont';

...

const line0 = new FitFont({ id:'line0', font:'KouzanBrushFont_70', halign: 'middle'});

...

line0.text = "金曜日"; 

上の例を見て分かるようにimportに関した部分は異なるが、表示するコードは全く同じになる。
(resources/*.gui,resources/style.cssなどは異なるので注意のこと)

5.参考URL

https://github.com/gregoiresage/fitfont

https://github.com/gregoiresage/fitfont-demo

【商用利用可】毛筆体の日本語フリーフォント26選

以上