Fitbitのスマートウォッチは、様々な時計の文字盤が提供されていますよね。
無料の文字盤も沢山あり、どれを選んで良いか結構迷います。
でも中々これを使い続けようと思うようなものが無くて、ひょっとしたら自分でも作れるのかなと思って調べてみました。
Fitbitのサイト（Fitbit オフィシャルサイト）を覗いてみると、あったあった、開発者向け（developer）というリンクがありました。
全文英語ですが、ここで文字盤はおろかアプリも自作できるようです。
早速やってみましょう。
私が持っているFitbitスマートウォッチはVersa 2です。これ以降の説明はVersa 2になります。
事前準備として、Fitbitスマートウォッチの設定で使用したスマフォでのアカウントが必要です。
私は、Googleのアカウントを利用しました。
開発者向けのサイト（developer）のStudioをクリックし、Fitbit Studioに移動。
Startをクリックして、Continue with Googleで自分のGoogleアカウントでログイン。
New Projectをクリックする。
Nameに適当な名前を入力し、Digital Clockを選択し、Createボタンをクリックする。
左のファイルリストからpackage.jsonをクリックし、SDK VersionでVersion 4.3を選択し、次いでBuild TargetsでVersa 2を選択する。
次に左のファイルリストのresourcesフォルダ下のindex.viewをindex.guiに、widget.defsをwidgets.guiにファイル名を変更します。
更に左のファイルリスト上で右クリックのメニューからCreate directoryでcompanionとsettingsの二つのディレクトリを作成します。更にその下にそれぞれindex.jsとindex.jsxというファイルを作成します。
companion/inde.jsの例
import { me as companion } from "companion";
if (!companion.permissions.granted("run_background")) {
console.warn("We're not allowed to access to run in the background!");
}
const MILLISECONDS_PER_MINUTE = 1000 * 60;
// Tell the Companion to wake after 30 minutes
companion.wakeInterval = 30 * MILLISECONDS_PER_MINUTE;
// Listen for the event
companion.addEventListener("wakeinterval", doThis);
// Event happens if the companion is launched and has been asleep
if (companion.launchReasons.wokenUp) {
doThis();
}
function doThis() {
console.log("Wake interval happened!");
}
settings/index.jsxの例
function HelloWorld(props) {
return (
<Page>
<Section
title={<Text bold align="center">Demo Settings</Text>}>
<Toggle
settingsKey="toggle"
label="Toggle Switch"
/>
<ColorSelect
settingsKey="color"
colors={[
{color: 'tomato'},
{color: 'sandybrown'},
{color: 'gold'},
{color: 'aquamarine'},
{color: 'deepskyblue'},
{color: 'plum'}
]}
/>
</Section>
</Page>
);
}registerSettingsPage(HelloWorld);
次にSimulatorの設定を行います。
MenuのSelect Phone/Select Deviceをクリックします。
Download Fitbit OS Simulatorをクリックする。
Simulatorのアプリがダウンロードされるので、これをインストールする。
Fitbit OS Simulatorを起動します。
SimulatorのMenuのSettingsを選択し、Device TypeをVersa 2 miraに設定します。
Fitbit OS Simulatorを起動すると、Fitbit StudioのMenunoのPhonesにSimulator、DevicesにVersa 2 Simulatorが現れます。
それぞれを選択すると、ステータスがConnectedになります。
次にMenuのRunボタンをクリックすると、Buildに続いてSimulatorへのインストールを行い、文字盤をシミュレーションすることが出来ます。
同時にsettings/index.jsxで指定したオプション用の設定画面が表示されます。
以上で、Fitbit StudioのDigital ClockのTemprateを使った基本動作の確認をすることが出来ました。
次は、これを元にオリジナルの文字盤を組み込んでいきたいと思います。