言語は？
- JavaScript(TypeScript)
- HTML(SVG)
- CSS
開発環境
- ブラウザ(Fitbit Studio) or CLI(VSCodeなど)
- この記事ではブラウザ
- 実際に進めていくならGitで管理したいのでローカルで準備したほうがいいかも。
- 公式ドキュメント → https://dev.fitbit.com/build/guides/command-line-interface/
Getting Startedに従って進める
https://dev.fitbit.com/getting-started/#overview
目標
任意の背景画像の時計を作成する
準備
必要なもの(ほぼ翻訳)
- Fitbitのユーザーアカウント
- Fitbit端末かFitbitのシミュレーター(Mac版, Windows版)
- シミュレーターは公式サイトからダウンロード可能
- Mac版はダウンロード -> dmgを開いて、.appをアプリケーションに移動
- 起動するとログインを求められるのでログイン
- Fitbitのモバイルアプリの最新バージョンがスマホにインストールされていて、Fitibit端末とペアリングされていること
- PCがFitbit Studioにアクセスできること
- Fitbit Studioはブラウザで動く
- リンクが古い場合は公式サイトにリンクがある
- Fitbit端末がインターネットにアクセスできること
シミュレーター起動
Settingsから端末を変えることができたので、Senseに変更する
ソースコードを実行してシミュレーター上に表示する
Fitbit Studio にアクセスして、New Project で Starter を選択
シミュレーターの選択と実行
- Phones > Simulator(何が起動してるかわからない)
- Devices > Sense Simulator(先ほど設定変更したもの)
実行
上記の画像の通りシミュレーターを選択すると Run を選択できるようになっているので実行する
時計アプリのテンプレートを試す
プロジェクトの作成
- New Project > Digital Clock
Run
補足
package.json の Type が Clockface。 Projectテンプレートで Starer や Sensors にすると App になっている。このTypeによってできるできないがある模様。
例えば、 Wipe Color の設定がない。この設定はアプリ起動時に一瞬現れるスプラッシュ画面(アイコン+アプリ名)のような画面に使われる色だと思われる。(簡単に試した感じなので他にもあるかも)
文字盤を変更するにはこれをカスタマイズしていくのが良さそう。
Sensors テンプレートを試す
プロジェクトの作成
- New Project > Sensors
Run
時計の文字盤に心拍数や歩数などを表示しているアプリが多いが、このSensorsとのDigital clockの組み合わせが必要になりそう。
補足
センサーを使うときはユーザーへの許可が必要になる。その設定を package.json で行っているっぽい。言語だったり地域の設定もできるみたいだが、どこに影響しているのかわからないので今後深掘りしていく。他言語対応とかが可能なのかもしれない。
ディレクトリ構成
https://dev.fitbit.com/build/guides/application/#project-folders
Digital Clock テンプレートに秒を追加する
index.js に追加と変更する
// index.js
import clock from "clock";
import * as document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
// Update the clock every minute
clock.granularity = "seconds"; // 変更
// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");
// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
let today = evt.date;
let hours = today.getHours();
if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = util.zeroPad(hours);
}
let mins = util.zeroPad(today.getMinutes());
let secs = util.zeroPad(today.getSeconds()); // 追加
myLabel.text = `${hours}:${mins}:${secs}`; // 変更
}
コンソールにエラーが出ている
[15:17:01]Error 22 Invalid attribute 'data-size' in animate-in mnt/sysassets/widgets_common.gui:301,1
ビルドとインストールをするときに発生する模様。ソースコードの変更なしにRunをすると発生しない。
下記のページで議論されていて修正済みっぽい。。。
https://community.fitbit.com/t5/SDK-Development/Error-22-Invalid-value/td-p/2677948
今回はこのまま無視する。
Digital Clockの背景に適当な画像を表示する
画像を用意
画像の大きさについて
今回はSense向けなので 336x336 で用意する
https://dev.fitbit.com/build/guides/multiple-devices/#hardware-differentiators
画像を取得
画像はここから頂いた↓
画像を表示
/resources/ に images ディレクトリを作って、画像をドラッグアンドドロップでアップロード
resources/inedex.view で読み込む
<svg class="background">
<image href="images/bg_336.jpeg" /> <!-- 追加 -->
<text id="myLabel" />
</svg>
最後に
JavaScriptやCSSなど普段使っているWeb系の言語で実装できるのは便利。また、ブラウザで開発できるのもサクッと試すのには非常に嬉しい。
任意の画像を背景にした時計はサクッと作れた。時計に心拍数と歩数をつけたいのトライする。実機での確認やFitbitストア(？)での公開などもトライしたい。
コメントを残す