Fitbit アプリケーションをコマンドラインで開発する

Posts Published: 2019年8月24日

Fitbit

これまで、Fitbit で動くアプリケーションやクロックフェイス（文字盤）の開発は、Web アプリケーションの Fitbit Studioで行っていました。

Web UI 上からしか Fitbit のアプリケーションを開発できないと思っていたのですが、Fitbit のコマンドラインツールがあることを知りました。今回は、Getting Started with the CLIに沿って、このコマンドラインツールを使ったプロジェクトの作成、既存プロジェクトの移行、ビルド、デプロイを行います。

動作を確認した環境

macOS Mojave 10.14.6
Node.js v12.1.0（8 系以上が必要）
npm v6.11.2

プロジェクトの作成

npx で実行するので明示的なパッケージインストールは不要です。

作業ディレクトリに移動します。
```
cd workspace
```
次のコマンドでプロジェクトを生成します。
```
npx create-fitbit-app <プロジェクト名>
```
これを実行すると、プロジェクト名と同名のディレクトリが生成されます。また、node_modules の下に @fitbit/sdk や @fitbit/sdk-cli を含めた必要なパッケージがインストールされます。
質問形式で設定を聞かれるので、設定していきます。
- 開発対象（アプリケーション or クロックフェイス）です。
```
? What type of application should be created? (Use arrow keys)
❯ app
  clockface
```
- アプリケーション名です。
```
? What should the name of this application be?
```
- Companion コンポーネントの要否です（スマートフォン側の設定画面を作る場合や、外部 API を実行する場合など、Fitbit とスマートフォン間で通信する場合に必要となります）。
```
? Should this application contain a companion component?
```
- 設定画面コンポーネントの要否です。
```
? Should this application contain a settings component?
```
- アプリケーションを動かす端末（複数選択可）です。
```
? Which platforms should this application be built for? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯ ◉ Fitbit Ionic
  ◉ Fitbit Versa
  ◉ Fitbit Versa Lite
```

必要なファイル群が生成されます。

$ tree
.
├── app
│   └── index.js
├── companion
│   └── index.js
├── node_modules
├── package.json
├── resources
│   ├── index.gui
│   ├── styles.css
│   └── widgets.gui
├── tsconfig.json
└── yarn.lock

既存のプロジェクトを CLI で開発する

Fitbit Studio でプロジェクトを開きます。
上部メニューの[Download]から[Export project]を選択します。zip 圧縮されたプロジェクトがダウンロードできます。
圧縮ファイルを展開します。
ディレクトリ直下に移動し、次のコマンドを実行します。
```
npm i @fitbit/sdk --save-dev
npm i @fitbit/sdk-cli --save-dev
```
- @fitbit/sdk はもともと含まれていますが、バージョンを最新化します。

プロジェクトのビルド

次のコマンドを実行します。
```
npx fitbit-build
```
Fitbit の Developer アカウントへの認証を要求されるので、ログインします。
build ディレクトリとともに生成物（app.fba）が作られます。

補足

npx fitbit で Fitbit CLI を起動し、build コマンドでもビルドできます。 Fitbit CLI を起動した時点でログインしていなければブラウザが起動し、ログインが求められます。
```
$ npx fitbit
Logged in as chick-p <[email protected]>
# fitbit シェルが立ち上がる
fitbit$ build
```
Fitbit シェルを抜けるには exit を実行します。
```
fitbit$ exit
```
アプリケーション ID の発行は、次のコマンドで行います。
```
npx fitbit-build generate-appid
```
または Fitbit シェルを立ち上げ、build generate-appid を実行します。
```
$ npx fitbit
fitbit$ build generate-appid
```

シミュレーターへのデプロイ

fitbit OS Simulatorを起動しておきます。

Fitbit シェルを立ち上げ、install を実行します。

$ npx fitbit
fitbit$ install

# No app package specified. Reloading ./build/app.fba.
# Loaded appID:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx buildID:xxxxxxxx
# App requires a device, connecting...
# Auto-connecting only known device: Versa Simulator
# App requires a phone, connecting...
# Auto-connecting only known phone: Simulator
# App install complete (full)
# Companion install complete (full)
# Launching app
# アプリの起動ログが続きます....

ビルドとインストールを同時に行う場合は、次のコマンドを実行します。

$ npx fitbit
fitbit$ bi

端末へのデプロイ

Fitbit シェルを起動します。
```
npx fitbit
```
スマートフォンの Fitbit アプリケーションで[開発者メニュー]から、「Developer Brige」を ON にします。
Fitbit の「設定」アプリケーションで、「Developer Brige」を「Connecting Server」から「Connetcted Server」状態に変更します。

connect xxx を実行して、Phone と Versa 本体に接続します。

fitbit$ connect phone
Auto-connecting only known phone: chick-p iPhone

fitbit$ connect device
Auto-connecting only known phone: chick-p Versa

install を実行してデプロイします。

fitbit$ install

# No app package specified. Using default ./build/app.fba.
# Loaded appID:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx buildID:xxxxxxxx
# App requires a device, connecting...
# Auto-connecting only known device: Versa
# App install complete (full)
# Companion install complete (full)
# Launching app
# アプリの起動ログが続きます....

まとめ

CLI でビルド・デプロイできるようになったので、好きなコードエディタで開発できます。また、npm パッケージも利用できるので、ESLint での構文チェックもできるようになりました。