Fitbit Sense アプリ開発を始めてみる

Tech全般

言語は?

  • JavaScript(TypeScript)
  • HTML(SVG)
  • CSS

開発環境

Getting Startedに従って進める

Fitbit Development: Getting Started
You'll fit in here. Using JavaScript, CSS, and SVG, developers now have a fast, easy way to build apps and clock faces for Fitbit OS.

目標

任意の背景画像の時計を作成する

準備

必要なもの(ほぼ翻訳)

  • Fitbitのユーザーアカウント
  • Fitbit端末かFitbitのシミュレーター(Mac版, Windows版)
    • シミュレーターは公式サイトからダウンロード可能
    • Mac版はダウンロード -> dmgを開いて、.appをアプリケーションに移動
    • 起動するとログインを求められるのでログイン
  • Fitbitのモバイルアプリの最新バージョンがスマホにインストールされていて、Fitibit端末とペアリングされていること
  • PCがFitbit Studioにアクセスできること
    • Fitbit Studioはブラウザで動く
    • リンクが古い場合は公式サイトにリンクがある
  • Fitbit端末がインターネットにアクセスできること

シミュレーター起動

Fitbit氏ミューレーター

Settingsから端末を変えることができたので、Senseに変更する

Fitbit senseのシミュレーター

ソースコードを実行してシミュレーター上に表示する

Fitbit Studio にアクセスして、New Project で Starter を選択

シミュレーターの選択と実行

  • Phones > Simulator(何が起動してるかわからない)
  • Devices > Sense Simulator(先ほど設定変更したもの)

実行

上記の画像の通りシミュレーターを選択すると Run を選択できるようになっているので実行する

実行成功

時計アプリのテンプレートを試す

プロジェクトの作成

  • New Project > Digital Clock

Run

補足

package.jsonTypeClockface。 Projectテンプレートで Starer や Sensors にすると App になっている。このTypeによってできるできないがある模様。

例えば、 Wipe Color の設定がない。この設定はアプリ起動時に一瞬現れるスプラッシュ画面(アイコン+アプリ名)のような画面に使われる色だと思われる。(簡単に試した感じなので他にもあるかも)

文字盤を変更するにはこれをカスタマイズしていくのが良さそう。

Sensors テンプレートを試す

プロジェクトの作成

  • New Project > Sensors

Run

Sensorsを実行

時計の文字盤に心拍数や歩数などを表示しているアプリが多いが、このSensorsとのDigital clockの組み合わせが必要になりそう。

補足

センサーを使うときはユーザーへの許可が必要になる。その設定を package.json で行っているっぽい。言語だったり地域の設定もできるみたいだが、どこに影響しているのかわからないので今後深掘りしていく。他言語対応とかが可能なのかもしれない。

ディレクトリ構成

Fitbit Development: Application Architecture Guide
You'll fit in here. Using JavaScript, CSS, and SVG, developers now have a fast, easy way to build apps and clock faces for Fitbit OS.

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をすると発生しない。

下記のページで議論されていて修正済みっぽい。。。

Error 22 Invalid value ''
I'm having an odd issue the Studio I'm getting the following errors when running my app from Fitbit Studio: App Closed Error 2 Invalid path 'C:/Users/~/AppData...

今回はこのまま無視する。

Digital Clockの背景に適当な画像を表示する

画像を用意

画像の大きさについて

今回はSense向けなので 336x336 で用意する

Fitbit Development: Multiple Devices Guide
You'll fit in here. Using JavaScript, CSS, and SVG, developers now have a fast, easy way to build apps and clock faces for Fitbit OS.

画像を取得

画像はここから頂いた↓

free images Silhouette of a woman in front of a tree at sunset in the field
Download free images Silhouette of a woman in front of a tree at sunset in the field
正方形にトリミングして336×336にリサイズした

画像を表示

/resources/images ディレクトリを作って、画像をドラッグアンドドロップでアップロード

resources/inedex.view で読み込む

<svg class="background">
  <image href="images/bg_336.jpeg" /> <!-- 追加 -->
  <text id="myLabel" />
</svg>
結果-背景を追加(StudioのScreenshot機能で撮影)-

最後に

JavaScriptやCSSなど普段使っているWeb系の言語で実装できるのは便利。また、ブラウザで開発できるのもサクッと試すのには非常に嬉しい。

任意の画像を背景にした時計はサクッと作れた。時計に心拍数と歩数をつけたいのトライする。実機での確認やFitbitストア(?)での公開などもトライしたい。

コメント