Fitbit versaの文字盤をJavaScriptで自作する方法

今回はFitbit versaの文字盤をJavaScriptで簡単に自作する方法について書きます。

開発環境

SDKへアクセス

https://studio.fitbit.com/

こちらのリンクからfitbitアプリを開発するためのSDKにログインします。ログイン情報を入力し、利用規約に同意したらアプリ開発のダッシュボードに行くことができます。

この時に、プロジェクト名を入力し、Digital Clockのボタンを押して文字盤開発のプロジェクトを作成します。

するとプロジェクト管理画面はこのようになります。おそらくメインでいじることになるであろうapp/index.jsファイルの中身を確認して見てください。

デバッグ

Before you get started, you’ll need the following prerequisites to develop apps or clock faces with the Fitbit SDK:

  • Fitbit user account. Sign up here.
  • A Fitbit OS device, or the Fitbit OS Simulator for Windows or macOS.
  • The latest Fitbit mobile application for AndroidiOS or Windows Phone, paired with your Fitbit device.
  • A computer with access to Fitbit Studio.
  • A wireless network to provide the Fitbit device a connection to the internet.

公式のGetting StartにはPC上でfitbitデバイスを動かすためのシミュレーターのリンクが貼ってあります。

  • Mac  macOS
  • Windows Windows

以下のリンクからシミュレーターをダウンロードしてください。この記事ではMacの動作を説明して行くので、Windowsユーザーにとっては少し異なる点があるかもしれないことはご了承ください。(多分ほとんど同じです)

シミュレータ起動

シミュレーターが起動されるとこのようなウィンドウが現れます。シミュレーターが起動したことが確認できたら、先ほどのSDKの管理画面に戻って操作を行います。

この画面の上の方にあるバーにSelect a PhoneとかSelect Deviceとか書かれたボタンがあると思うのでそれを押してください。

すると、現在使用可能なデバイスの一覧が表示されると思うので、先ほど起動したIonicシミュレーターを選択します。

Select Deviceの右側にあるRunボタンを押すと、開発した内容がシミュレーターにビルドされはじめます。少し待つと先ほどのシミュレーターが起動したウィンドウが以下のように変わると思います。

この画面はデフォルトで作られている文字盤であると考えられます。一応これでウォッチフェイスを作るための開発環境は整いました。

あとはこの画面を編集して自分の好きなデザインにするだけです。

作り方

https://dev.fitbit.com/build/guides/clockfaces/

The Clock API allows developers to easily update their app’s display based on the current date and time. AlthoughsetInterval() could be used in a similar fashion, the Clock API handles tick events at the correct precision and timing.

公式の説明ではClock APIを使う開発方法が示されています。

ファイル構成

まずは、このデフォルトのプロジェクトのファイル構成を理解して、どこをいじればどういう風に画面が変わるのかを確認していきましょう。

画面の骨組み

画面を構成する成分である基本的な骨組みは、resources/index.gui ファイルです。これはwebで言う所のhtmlの役割をしています。

スタイル

画面がどのように表示されるかを設定しているスタイルシートは、resources/styles.css に書かれています。このファイルを編集することで基本的なデザインは変更できます。

例えば先ほどシミュレーターで表示したデフォルトの画面の背景色を変えるためには、cssのbackgroundクラスを編集します。試しにredと書かれているものをblackにして見た後に、もう一度Runボタンを押してデバイスを起動して見てください。画面の色が赤から黒に変わっているのがわかると思います。

この要領でcssを書き換えていけば、画面のデザインを変えてオリジナルのデザインを適用することができます。

まとめ

Fitbit versaの文字盤をJavaScriptで自作する手順のイメージはつきましたでしょうか?デフォルトのファイル群は時計を動かすための最小構成ですので、もっと凝ったデザインや機能を追加したい方は、cssとjsを使って自由にカスタマイズして見てください。

https://dev.fitbit.com/build/reference/

一応Fitbitの開発用APIのリファランスを貼っておきます。

Fitbitはまだまだ日本では誰しもが知る有名なサービスではないと思いますが、ここまでカスタマイズできる機能が用意されているので、是非オリジナルのスマートウォッチを作って見てはいかかでしょうか?

Fitbit versaを使って健康管理をしている方!多数の芸能人やモデルが通う本格派のパーソナルトレーニングジムで元ライザップトレーナーのレッスンを受けてみませんか?


こちらのジムは全額返金制度があるので万が一結果が出なかった場合も安心です!月々3,000円から始められるジムで健康を追求してみませんか?

Fitbit versaで睡眠管理!夜通し着用してみた感想

2018.09.20

Fitbit versaを簡単に再起動させる方法

2018.09.19

最新オシャレスマートウォッチ「Fitbit versa」を発売前に個人輸入してみた

2018.05.30

ABOUTこの記事をかいた人

「お金をかけないサバイバル術」に関する記事を書きます。証券アナリスト資格(CCMA)を持っています。Ethereum信者です。温泉と餃子とv系バンドが好きです。プログラミングが得意です。趣味はメルカリです。好きな言葉は「最小構成」