- 出版社/メーカー: Fitbit
- 発売日: 2018/06/15
- メディア: エレクトロニクス
- この商品を含むブログを見る
愛用していたPebbleが買収されたので，買収元のFitbitからVersaを買ってみました．スマートウォッチ使いたい，というよりは開発環境が楽しそうなので買ってみたというのが本音です．Pebble時代はWeb上でアプリを開発できて，とてもイケてる開発環境だったのですが，C言語でUIを書くというのがとにかく大変でした．こちらの記事はPebbleでPomodoroを書いた時のもの．
www.jonki.net
VersaではWeb上での開発環境そのままに，JavaScript，CSS，SVGが使えちゃいます．またコンパニオンアプリとのメッセージングやOAuthなどのライブラリは提供されているため，必要最低限のコーディングだけで良いのが魅力的です．またWin/Macのどちらにも実機シミュレータがあり，使い勝手がよいです．トップ画面は今回作ったClockfaceです．アプリは時計アプリであるClockfaceと一般アプリに大別されるようです．
この記事では，具体的な実装方法ではなく，今回のClockfaceを作る上での準備内容，参考にしたページ，ハマったところなどを書いていきます．参考リンクに貼った公式ページがよく出来ていて基本的にコピペで作れます．またコードは下記に公開しています．
https://github.com/jojonki/fitbit-image-clock
環境セットアップ
Getting Startedに従って，Fitbitのアカウントセットアップ及び，Fitbit OS Simulatorをインストールして下さい．開発は，Fitbit Studio上で行います．プロジェクトのテンプレートとしていくつか用意されているので，最初はそれを眺めるのが良いと思います．
- fitbit studio
いわゆるIDEです．ブラウザベースなのですぐに使えます．ここからシミュレータや実機にアプリをインストールしたり，公開用のアプリバイナリを生成できたりします．またログの出力もここで確認できます．
- fitbit Simulator
見たまんまシミュレータです．物理ボタンや画面タッチをマウスで行うエミュレートもできます．
プロジェクト構成
構成はとても簡易なものでわかりやすいです．app/上には実機上で動くjsが配置されます．companion/上にはスマホのコンパニオンアプリで動くjsが配置されます．companionアプリ上では外部リソース（http上の画像とか）を取得してもらったりします．resources/には画像やレイアウト情報を配置します．index.guiはいわゆるindex.html的なものでsvgによるDOMを配置します．cssはその名の通りスタイルシートです．
実機インストール
実機にインストールする場合には，PhonesとDevicesの中からシミュレータでなく，それぞれスマホ（私の場合Sony F5321）及び実機（Versa）を選択する必要があります．コンパニオンアプリからVersaを選択し，[開発者向けメニュー]->[開発者用ブリッジ接続]をオンにします．次にVersa本体のメニューから[Settings]->[Developer Bridge]をタッチし，Connected to ..となるようにします．たぶんPC/Mac，スマホと同じWiFiにいる必要があります．接続できたらfitbit studio上のRunボタンを押すことでインストールできます．（下記の画像はシミュレータを選択しているものなので注意）
うまくつながらないときはfitbit studio上でプロジェクトを開き直したり，コンパニオンアプリのブリッジ接続トグルを入れ直したりして下さい．
アプリの公開
Fitbit Gallery App Managerでアプリプロファイルを作ります．fitbit studio上でDownloadのメニューからpublishを選択すると.fbaファイルがダウンロードできるので，それをアプリ公開ページに添付することで公開できます．ただ実際にはレビューリクエストを経てからなので，ストアに並ぶまでには時間がかかります（私もいま申請中）．アプリインストール用のリンクが生成されるので，それをモバイルから開くことで，限定公開によるインストールも行うことができます．そのため一般公開せずに限定的なリリース（テストとか）もできます．
ハマりどころ
- テキストが一部削られて表示されている
New element text larger than buffer! Consider increasing text-length to avoid truncation. とstudio上で出ていませんか？CSSでtext-lengthを指定して，文字数の上限を指定しましょう．メモリが少ないのでケチケチ削りましょう．
- Simulator上で表示される画像が実機で表示されない
画像の解像度が大きかったり，pngが8bitじゃなかったりすると起きるかも？参考．
Solved: Clockface with images not working - Fitbit Community
- 実機あるいはコンパニオンアプリに繋がらない
studio上でプロジェクト開き直す，PC/Macとスマホが同じWiFiにいるか確認する，WiFi変えてみる．同じWiFiにいても認証が必要なケースとかだと繋がらない場合があるかも．．
ここが辛い
- CSS変更によるリアルタイムでのプレビューができず，毎回インストール（５秒ぐらい）が必要．そのためデザインをシミュレータ上で試行錯誤するのは結構面倒．
- 実機上で画像転送すると遅い．シミュレータでは１秒かかってないような画像取得が実機上だと１０秒ほどかかっていた．シミュレータは実機のパフォーマンス制約を再現しきれていない気がする．
- コードのGit連携できない．.zipでExportはできるが．．．
- fitbit studioでタブが開けないので，ファイルの切り替えが面倒．
参考リンク
SDK Guidesを見ながら開発することになると思います．大体の情報はここに載っています．
- SVG Guide, SVGやCSSについて．UI周り全般．
- Animations Guide, 非力だが簡単なアニメーションもできるっぽい．
- File Transfer Guide, 画像の送受信のサンプル．本体からは直接は画像をダウンロードできないため，予めアップしておくかcompanion経由でアクセスする必要がある
- Messaging Guide, 本体とコンパニオンでのWebsocketのメッセージのやり取り．天気のAPIを叩く例もある．
- User-activity API, ユーザーアクティビティ系（歩数取得とか）
- Power API, バッテリ，充電状態の取得
まとめ
雑多な感じですがまとめてみました．JavaScriptベースなので非常に開発が楽です．また開発環境もシミュレータのみインストールが必要ですが，基本的にはブラウザベースで敷居が非常に低いです．とても今時な開発環境なのでエンジニアの方は触ってみるととても勉強になると思います．また， fitbitを持っていなくてもシミュレータ上で開発できるので，ぜひ皆さんも何か作ってみましょう．