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

August 24, 2019

これまで、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 で実行するので明示的なパッケージインストールは不要です。

  1. 作業ディレクトリに移動します。

    cd workspace
  2. 次のコマンドでプロジェクトを生成します。

    npx create-fitbit-app <プロジェクト名>

    これを実行すると、プロジェクト名と同名のディレクトリが生成されます。 また、node_modules の下に @fitbit/sdk@fitbit/sdk-cli を含めた必要なパッケージがインストールされます。

  3. 質問形式で設定を聞かれるので、設定していきます。

    • 開発対象(アプリケーション 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
  4. 必要なファイル群が生成されます。

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

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

  1. Fitbit Studio でプロジェクトを開きます。

  2. 上部メニューの[Download]から[Export project]を選択します。zip 圧縮されたプロジェクトがダウンロードできます。

  3. 圧縮ファイルを展開します。

  4. ディレクトリ直下に移動し、次のコマンドを実行します。

    npm i @fitbit/sdk --save-dev
    npm i @fitbit/sdk-cli --save-dev
    • @fitbit/sdk はもともと含まれていますが、バージョンを最新化します。

プロジェクトのビルド

  1. 次のコマンドを実行します。

    npx fitbit-build
  2. Fitbit の Developer アカウントへの認証を要求されるので、ログインします。

  3. 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

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

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

  2. 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

端末へのデプロイ

  1. Fitbit シェルを起動します。

    npx fitbit
  2. スマートフォンの Fitbit アプリケーションで[開発者メニュー]から、「Developer Brige」を ON にします。

  3. Fitbit の「設定」アプリケーションで、「Developer Brige」を「Connecting Server」から「Connetcted Server」状態に変更します。

  4. 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
  5. 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 での構文チェックもできるようになりました。