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

Blog 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 <chick-p@example.com>
# 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での構文チェックもできるようになりました。