スマートウォッチFitbit Versa2が届いたので、早速アプリを作ってみる

Fitbit Versa2というスマートウォッチを買いました。

アプリを自作できるスマートウォッチはFitbit以外にもありますが、Fitbitが一番コスパが良いと思ったので買いました。
僕が買った時は、確かAmazonで２１０００円くらいで売ってました。

アプリを自作する

Fitbitのスマートウォッチは自作したアプリを入れることができます。

公式からブラウザで開発できる環境が用意されているので、それを使ってアプリを作ることができます。

開発言語はJavaScriptです。
dev.fitbit.com
↑公式のリファレンス。これだけでも十分ですが、Githubにサンプルコードもあります。
github.com

とりあえず作る

とりあえず心拍数を表示させるだけのものを作ってみます。
SVGで表示画面を作成します。
SVG Guide

<!-- index.gui -->
<svg>
  <text x="150" y="100" font-size="50" fill="white" text-anchor="middle">心拍数</text>
  <text id="hrm" x="150" y="220" font-size="100" fill="white" text-anchor="middle">110</text>
</svg>

widgets.guiはこんな感じです。これはよくわからなかったので他所のサイトからのコピペです。
開発初心者でもできるFitbit Clock Faceの作り方 - Qiita

<-- widgets.gui -->
<svg>
  <defs>
    <link rel="import" href="/mnt/sysassets/widgets_common.gui"/>
  </defs>
</svg>

app/index.js。これも先ほどのサイトを参考にしました。これもほぼコピペですが、参考サイトのままだとリアルタイムの心拍数を取ってこれないのでそこだけ変えています。

//index.js
import { HeartRateSensor } from "heart-rate";
import document from "document";

let hrm = document.getElementById("hrm");

function setHeartRate(val)
{
  console.log("心拍数：" + val);
  hrm.text = val;
}

//心拍数
let hr = new HeartRateSensor();
hr.onreading = function()
{
  let hrVal = hr.heartRate;
  setHeartRate(hrVal);
  console.log("心拍数：" + hrVal);
}

hr.start();

テストしてみる

シミュレーターでテストしてみました。

ちゃんと心拍数が更新されています。

シミュレーターの使い方

ちょっと癖があるので、一応FitbitOSのシミュレーターの使い方を書いておきます。

まずFitbit Studioのselect a Phone select a Deviceをクリックして「Download FitbitOS Simulator」からシミュレーターをダウンロードします。

ダウンロードしたら解凍してインストール、起動します。

起動したらメニューからSettingを選び、Device Typeを自分がシミュレーションしたいデバイスに変更します。

あとはFitbitStudioのselect a Phone select a DeviceからSimulatorを選択すれば使えるようになります。

実機テスト

実機にアプリをインストールして使ってみました。

正常に動作しました。よかった。

特に動作が重くなるということはなさそうですが、バッテリーの消費がどのくらいなのかは分かりません。
作っているうちにわかってくると思うので、そしたらまた記事にしようと思います。

最後に

かなり簡単にアプリを作れることが分かりましたので、次回は心拍の異常を検知してバイブレーションで知らせてくれるアプリを作ってみようと思います。

今回買ったスマートウォッチ。

リンク