Fitbit Versa では自由にクロックフェイスを開発することができます。
＃Ionic向けにも開発できます
この記事では下記のページを元に Fitbit 用のクロックフェイスの作成手順をまとめる。
1. 開発に必要なもの
2. アプリケーション構造
クロックフェイスをお試しで作るだけなら、この章は読まずに飛ばしてもいいです。
フォルダ構造
アプリケーションは下記フォルダ構造をとる必要がある。
/app/
/common/
/companion/
/resources/
/settings/
/common/、/companion/、/settings/ はオプションで利用できる。
JavaScript
/app/、/common/、/companion/ フォルダには複数の JavaScript (.js) ファイル。
または TypeScript (.ts) ファイルを含めることができる。
JavaScript はビルド時に Type Script コンパイラと rullup.js で自動コンパイルされ最適化される。
このとき、単一の ECMASCript 5.1 ファイルとその他の Companion ファイルが作られる。
/settings/ フォルダには index.jsx という名前の React JSX ファイルを含める必要がある。
プロジェクトフォルダ
アプリケーション ( /app/ )
このフォルダにはデバイスで実行されるアプリケーションロジックを格納する。
フォルダに含まれるコードは Device API にアクセスして、画面表示に直接作用できる。
また、companionと通信を行う、またはSettingsを読み書きする。
コンパニオン ( /companion/ )
このフォルダにはモバイル端末で実行されるコンパニオンロジックを格納する。
フォルダに含まれるコードは Companion API にアクセスして、ネットに直接リクエストできる。
また、application と通信する。
共有コード ( /common/ )
このフォルダには applicatoin と companion で複製を最小化するための共通コードを格納する。
ファイルは ES6 モジュールとして作成されて application と companion にインポートされる。
ビルド時には自動で tree shaking が行われ不要なモジュールが除かれる。
リソース ( /resources/ )
このフォルダにはビルド時に必要なすべてのリソースを格納する。
- /resources/index.gui
これは アプリケーション UI を定義する必須の Fitbit SVG ファイルである。
- /resources/widgets.gui
この Fitbit SVG ファイルは index.gui とともに利用できるシステムウィジェットを制御する。
- /resources/*.css
Fitbit CSS ファイルは index.gui ファイルの によりアプリケーションに組み込まれる。
- /resources/*.png 、/resources/*.jpg
index.gui で利用する
設定 ( /settings/ )
このフォルダには React JSX を使って書かれたアプリケーションの設定の宣言を格納する。
設定はユーザによってアプリの動作を変更するために使われる。
また、ファイルは Setting API にアクセスできる。
3. 開発を始める前に
シミュレータを使う場合
https://dev.fitbit.com/getting-started/#using-the-simulator から
Window版、macOS版それぞれダウンロードできる。
Fitbit OS デバイスを使う場合
まずは Fitbit Studio にアクセスして利用許諾に承諾する。
承諾後は開発者用メニューにアクセスできる。
4. 最初のプロジェクトを作る
4.1. セットアップ
Fitbit Studio にログインする。
4.2. 新しいプロジェクトを作成する
- New Project をクリック
- Name を入力する
- Digital Clock プロジェクトを選択する
- Create をクリック
※ Digital Clock プロジェクトには現在時刻を表示するクロックフェイスが含まれます
4.3. インストール
ほぼこの時点でクロックフェイスのビルドとインストールの準備は完了です。
シミュレータを使う場合はシミュレータを起動して Fitbit アカウントでログイン、
Fitbit デバイスを使う場合はスマホアプリの設定から Developer Bridge を有効にする。
その後、Fitbit デバイス上の設定から Developer Bridge が選択できるようになるので設定する。
※一覧に出てこない場合は Refresh すると出てくることがある。出てきたらクリックして選択。
Phones と Devices が Connected になった状態で Run するとビルド後にデータが転送され、
シンプルな赤い画面に白い文字で時計が表示される。
4.4. クロックフェイスをカスタマイズする
クロックフェイスの背景画像等を変えたければ index.gui を下記のように修正する
※Fitbit Versa の画面サイズは 300 * 300、Ionicの画面サイズは 348 * 250 ピクセル
<svg> <image href="myimage.jpg" load="sync" /> <text id="myLabel"></text> </svg>
画像は Fitbit Studio の resources フォルダへドラッグアンドドロップすればアップロードされる。
時計の数字の色や大きさを変えたい場合は resources フォルダの styles.css を変更する。
5. アプリに変更する
アプリとクロックフェイスの違い
- クロックフェイスはハードウェアボタンを使えないが、アプリは使える。
- クロックフェイスは一度に１つしかインストールできないが、アプリは複数できる。
クロックフェイスからアプリに変更する際は Fitbit Studio から package.json を選択して
その中から Type を App に変更して Wipe Color を好きな色に選択する。
まとめ
Fitbit Studio を使えば簡単にクロックフェイスを作成できます。というか簡単すぎて拍子抜け^^;
これからどんどん新しいアプリやクロックフェイスが出てくると思います。
一足先に自分のアイデアを実現させてみてはいかがでしょう。
＃これをまとめた時点で今日は力尽きました…
- 出版社/メーカー: Fitbit
- 発売日: 2018/06/15
- メディア: エレクトロニクス
- この商品を含むブログを見る
- 出版社/メーカー: Fitbit
- 発売日: 2018/01/18
- メディア: エレクトロニクス
- この商品を含むブログを見る
