« versaアプリ「HR/LCD clock」の紹介 | トップページ | ココログ_BLOGのCSS設定 »

2019年2月24日 (日)

Fitbit OS Custom Font インストール方法(改版)


Fitbit OS Custom Font インストール方法(fitfont-demoのインストール方法)


2019/2/23


1.概要


Fitbit OS で任意のフォントをインストールする方法があったので実際にカスタマイズしたフォントを表示するデモアプリをインストールしてみた。さらに、そのアプリをベースに新たなフォントをインストールして実行してみた。


2.インストール方法


(1)まずは、デモソフトのソースを以下のようにgitで入手する。


git clone https://github.com/gregoiresage/fitfont-demo.git
cd fitfont-demo

(2)トップディレクトリにあるpackage.jsonを以下のものに差し替える。


{
"fitbit": {
"appUUID": "b57470b3-f234-43ba-bb8f-43e400fea170",
"appType": "app",
"appDisplayName": "fitfont-demo",
"iconFile": "resources/icon.png",
"wipeColor": "#607d8b",
"requestedPermissions": [
"access_activity",
"access_user_profile",
"access_heart_rate",
"access_location",
"access_internet"
],
"buildTargets": [
"higgs",
"meson"
],
"i18n": {
"en": {
"appType": "app",
"name": "Fitfont Demo"
}
}
},
"devDependencies": {
"@fitbit/sdk": "~3.0.0",
"@fitbit/sdk-cli": "^1.5.0"
},
"scripts": {
"build": "fitbit-build"
},
"dependencies": {
"fitfont": "^1.2.5"
}
}

(3)以下を実行する:


npm install
#以下のように自動的にfitfontツールが起動する。
> fitfont@1.2.5 postinstall ...
> node ./bin/install.js
#以下のようにguiファイルをコピーするか聞いてくるのでYを入力する
#デモソフトの場合、既にコピー済みなのでnでも良いかが新規の場合、Yを入力する。
Copy gui files in your resources folder? (Y/n)Y

#あとは通常のアプリのビルド&インストールと同様に以下を実行する。
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 AoyagiSosekiFont2.ttf 80 0123456789.MTWFSabcdefghijklmnopqrstuvwxyz曜日月火水木金土
npx fitfont-generate TakaoGothic.ttf 80 0123456789.MTWFSabcdefghijklmnopqrstuvwxyz曜日月火水木金土

app/index.jsを以下のように修正する。(以下のソースでは本来'土曜日'のところをテストのために'月火水金'としている。AoyagiSosekiFont2を新規フォントとしてインストールした)


app/index.js:


//const DayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
const DayNames = ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','月火水金']

// declaration of the FitFont objects
//const dayLbl = new FitFont({ id:'dayLbl', font:'Market_Saturday_80', halign: 'middle'})
const dayLbl = new FitFont({ id:'dayLbl', font:'AoyagiSosekiFont2_80', halign: 'middle'})


この修正が終わったら通常のアプリのビルド&インストール同様に以下を実行する:


npx fitbit
build
install

4.参考RUL


https://github.com/gregoiresage/fitfont

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

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

フリーで使用できる!3つの隷書体フォント


5.色々なフォントのインストール例(スクリーンショット表示)

original
AoyagiSosekiFont2
TakaoGothic
HakusyuHigerei
HakusyuHKakukuzushi
kusyuSKakukuzushi


以上


|

« versaアプリ「HR/LCD clock」の紹介 | トップページ | ココログ_BLOGのCSS設定 »

linux」カテゴリの記事

Fitbit OS」カテゴリの記事

Fitbit Versa」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: Fitbit OS Custom Font インストール方法(改版):

« versaアプリ「HR/LCD clock」の紹介 | トップページ | ココログ_BLOGのCSS設定 »