経緯

最近、GarminのFenix7Sを購入してテンション爆上がりしたんですが、当然こんな機能モリモリの端末を手に入れたら色々遊んでみたくなりますよね。
なんと、この端末はANT+で心拍数を送信できるようなので「なんかよくYoutuberがやっているような、ゲーム画面の右上あたりの心拍数表示が実装できるんじゃね！？」という感じがしたので、なんか作ってみました。

アプリについて

ひとまず、アプリの使い方とかだけを知りたい人も居るかも知れないので、技術云々は一旦おいておいて説明します。
機能は主に「ANT+で送信された心拍数情報をブラウザに表示するアプリ」です。
また、表示するレイアウトはユーザーが自由にカスタムできるようにしています。（レイアウトのファイルはejsになっているため、基本的なHTMLが書けるのであれば割とどんなレイアウトでも作れるはず）

※ちなみになぜブラウザに表示なのかといいますと、単純にOBS¹でブラウザをソースとして選択できることと、心拍数を取得するライブラリがNode.jsで準備されていたため、作りやすかったからという理由です。

使用方法

基本的にはGithubのリポジトリを確認してください。
一応、MITライセンスですので自由に改変しても大丈夫です。
また、利用には以下の機器が必要になります。
・ANT+にて心拍数を送信できる端末
・ANT+受信用のドングル

環境

・Node.js
・Fastify
・TypeScript
・ejs
辺りの環境で作成しています。
せっかくなので、今まで使ったことがなかったフレームワークとか使おっかな～とか思っていたら、こんな闇鍋みたいな構成になってました…
この構成はネットにも資料が少なく苦労しました。
ちなみに今回のアプリの肝となる心拍数取得部分は「ant-plus」²というライブラリを使用しています。
また、「nexe」にて単一での実行形式ファイルも準備しておいています。

動作確認を行った構成は
・OS：Windows 64bit
・心拍数送信端末：Garmin fenix 7S Sapphire Dual Power
・心拍数受信ドングル：AZ4U ANT+USBドングル ミニタイプ
になります。（もしかしたら他の端末だとうまく動作しないとかあるかも…³）

構成

ページ構成は大体以下のような感じです。

ブラウザ側に情報を保持させるのもあれなので、Node.js（サーバ側）に各種設定値を保持させています。（心拍数表示ページのレイアウトファイル設定や心拍数取得に関わる設定など）
また、ページの描写をリアルタイムで変化させるために一定周期で「心拍数取得用API」にリクエストを投げ、その値を使って動的に要素を制御させています。

感想

趣味で遊んだだけにしては、思ったよりそれっぽいものができたので満足です。
個人的には「どんどん誰か使ってってくれ！」って感じでGithubにおいたので、改変なりしていい感じに皆さんも遊んでいってくれると嬉しいです。⁴（個人でゴリゴリにカスタムしたレイアウトとか見てみたい。）

本当はGarmin IQ用のアプリ開発も手を出して見ようと思っていたのですが、今回割としっかり開発したので流石にしばらく休憩しようかと思います。
あ、あと今回Qiita初投稿記事ですので、マサカリは優しく投げていただけると幸いです。
以上、ここまでありがとうございました。