Fitbit_OSアプリ作成のヒント集(2019年3月版)

2019/3/3

2019/1/5

Fitbit OS App Hints

Fitbit_OSアプリ作成のヒント集(2019年3月版)

0.概要

Fitbit_OSアプリ作成において参考になるような情報をまとめた。
公開されているソースから参考になるものを抜粋したり、実際に作成してみた気がついたことをまとめたものである。

1.古いSDKのバージョンでエラー無しでビルドできたものがSDKのバージョンを上げたらエラーになった。

(1)解決方法
　ディレクトリのデフォルト設定が変更になったらしいので以下のような変更をするとエラーが解消する。

修正例：

import * as hrm from "hrm";

→

import * as hrm from "./hrm";

2.画面タッチとBACKボタンでの画面切り替え

BACKボタンはscreen1画面以外のときに有効となる。

(1)resources/index.gui

<svg>

  <svg id="screen1">

    <svg>

　　　　　　#scrren1用の画面をSVGで記述する。

    </svg>

    <rect id="button1" pointer-events="all" width="100%" height="100%" fill="red" fill-opacity="0.0" />

  </svg>

  

  <svg id="screen2" display="none">

 

    <svg>

　　　　　　#screen2用の画面をSVGで記述する

    </svg>

    <rect id="button2" pointer-events="all" width="100%" height="100%" fill="blue" fill-opacity="0.0" />

  </svg>

  <svg id="screen3" display="none">

    <svg>

     #screen3用の画面をSVGで記述する

    </svg>

    <rect id="button3" pointer-events="all" width="100%" height="100%" fill="green" fill-opacity="0.0" />

  </svg>

</svg>

(2)app/index.js

import document from "document";

let screen1 = document.getElementById("screen1");

let screen2 = document.getElementById("screen2");

let screen3 = document.getElementById("screen3");

let button1 = document.getElementById("button1");

let button2 = document.getElementById("button2");

let button3 = document.getElementById("button3");

function showScreen1() {

  console.log("Show screen 1");

  screen1.style.display = "inline";

  screen2.style.display = "none";

  screen3.style.display = "none";

}

function showScreen2() {

  console.log("Show screen 2");

  screen1.style.display = "none";

  screen2.style.display = "inline";

  screen3.style.display = "none";  

}

function showScreen3() {

  console.log("Show screen 3");

  screen1.style.display = "none";

  screen2.style.display = "none";

  screen3.style.display = "inline";

}



button1.onclick = function() {

  showScreen2();

}

button2.onclick = function () {

  showScreen3();

}

button3.onclick = function() {

  showScreen1();

}



document.onkeypress = function(evt) {

    if (evt.key === "back") {

      if (screen3.style.display === "inline") {

        // Go to screen 2

        showScreen2();

        evt.preventDefault();

      } else if (screen2.style.display === "inline") {

        // Go to screen 1

        showScreen1();

        evt.preventDefault();

      } else if (screen1.style.display === "inline") {

        // Default behaviour to exit the app

      }

    }

  }  

(3)参考ＵＲＬ

https://community.fitbit.com/t5/SDK-Development/Wanted-example-of-multiple-UI-views-and-back-navigation/m-p/2300847

Wanted: example of multiple UI views and back navigation

3.マスク用png画像はグレースケールであること

アニメーションの画像用のpng画像はグレースケールである必要がある。
画像編集ソフトなどで修正するとデフォルトがRGBモードが場合、自動的にＲＧＢモードになり
見かけ上、区別がつかないので、そのまま保存して、組み込んだ場合、期待したアニメショーンが動かないことになる。

　したがって修正した画像を保存する場合、グレースケールに変換して保存すること。
ちなみにＧＩＭＰ画像エディタの場合、以下の操作で行なう：

(1)画像ウィンドウのメニューより、「画像 → モード → グレースケール」でグレースケールに変換する

(2)「ファイル→名前を付けてエクスポート」で画像名を付けてpngで保存する

4.exportした変数には外部モジュールからは代入はできない(read-onlyになる)

最近のjavascriptの言語仕様でexportした変数に外部モジュールから参照するとread-onlyになり代入はできない。
代入したい場合、関数として定義して、その定義の中で代入を行なう。

例

//app/foo.js

export let abc=123;

export function assigenABD(val) {

   abc = val;

}

//app/othesrs.js

import * as foo from './foo'

consoole.log(foo.abc); // 123が出力される

foo.abc = 456; // エラーになる

foo.assignABC(456); // エラーにならず代入が可能

5.installで失敗してinternal-errorが出るようになった場合

いったんスマフォ側でuninstallしたほうが良いようだ。そうでないと新たにインストールできないようだ。

6.シミュレータでは問題なくインストールできるが、実機(Versa)でのインストールが不安定である。

この場合、接続に使っているネットワークのWiFiの電波が弱くて実機のインストールが不安定になっている可能性がある。iPhone,AndroidやPCでは問題が起きていないので気が付きにくいが、実機のアンテナの性能が悪く受信感度が悪いようだ。(筐体の小型化、省電力化で、しかたない部分があるとは思うが。。。)

解決方法としては、スマフォ(Andorid,iPhoneなど)を実機の近くに置き、そのスマフォをテザリングで、開発用PCと実機を接続する。この状態でインストールする。

個人的な経験ではあるが、見違えるほど、インストール時間の短縮され、安定する。

7.不完全インストール

インストールが不完全に終わった場合、経験的な言い方になるが以下のような現象が出るようだ：

(1)原因不明のNaN

プログラムで、fs.readFileSyncなどでファイルを読み込んで変数の値などをリストアしているときは、
読み込むファイルの中身が壊れていて変数の値をリストアできない場合にNaNが出ることがある。

(2)時刻が頻繁に狂い、その結果として同期が多発する。

(3)HRが動作しないなど

インストールが不完全だと、システムにも悪影響を与えるようで、HR(心拍数)が動作しなくなったことがあった。
versaの設定で、心拍数がオフになっている場合もあるが、それをオンにしても動作しなかった。

以上の現象の解決方法としては、実機、シミュレータとも、コンパニオン（スマフォ）からアプリをいったんアンインストールしてアプリを再インストールすると解決する。
実機のアンインストールは、以下のやり方で確実なものにする必要がある：

(1)[Developer Menu]に入り、sideloaded-appsをリストアップする。（時間がかかるので辛抱強く待つ）

(2)sideloaded-appsが表示されたら、アンインストールしたいapp名をタップする。

(3)タップ後、表示された画面の最下行に「Delete App」があるので、これをタップする。

　タップ後、「Delete App」が一瞬点滅する。

(4)[<Back]をタップして元の画面に戻る。最下行に「Refreshing Apps」が表示されるので、
　このメッセージが消えるまで（辛抱強く）待つ。

(5)再度、表示されたsideloaded-appsのリストからapp名が消えていればアンインストールが完了したことになる。

再インストール時に以下のようなメッセージが出る：

fitbit$ install

No app package specified. Using default ./build/app.fba.

Loaded appID:　<省略> buildID:<省略>

App install complete (full)　

Companion install complete (full)

#上の２つの行の(full)の部分が(partial)となるようだと

#アプリのアンインストール(削除)が正しく行われたかったことになる。

Launching app

8.Versaの時刻が正しくない

確信は持てないが上書きインストール(=patialインストール)時に時刻が狂う現象が起きている印象がある
解決方法は以下：

(0)partialインストールしたアプリがあるようならアンインストールする。

(1)Fitbit ロゴが画面に表示されるまで、BACKおよびDOWNのボタンを長押しする。

(2)ロゴが表示されたらボタンを離す。

(3)Fitbit アプリのダッシュボードから、[アカウント] アイコンをタップする。

(4)[詳細設定] をタップする。

(5)[自動タイムゾーン] オプションをオフにする。

(6)[タイムゾーンの選択] をタップして、適切なタイムゾーンを選択する。

(7)Fitbit デバイスを同期する。

同期に異常に時間がかかることがあるので、辛抱強く待つ。

9.SVG仕様の差分

Fitbit OSは、画面設計のコーディングにSVGを採用しているが、PC(web)などのSVG仕様と差がある。全てではないが、気がついた差分を以下に記する：

(1)CSSの単位px(Fitbit OSでは付けない)

Fitbit:

.line0p {

　font-family: System-Light;

  fill: yellow;

  text-anchor: middle;

  text-length: 32;

  font-size: 70;

}

PC(web):

.line0p {

　font-family: System-Light;

  fill: yellow;

  text-anchor: middle;

  text-length: 32;

  font-size: 70px;

}

(2)属性名(Fitbit「.text」vs PC(web)「.textContent」))

Fitbit:

const line0 = document.getElementById("line0");

...

line0.text = "Hello,Versa";

PC(web):

const line0 = document.getElementById("line0");

...

line0.textContent = "Hello,Versa";

9.画面がスリープしなくなるコード

 import { display } from "display";

 ...

 display.autoOff = false;

 display.on = true;

切り替える形での実装例(THE-clockfaceからの抜粋)

app/index.js:

//THE-clockface

import {display} from "display";

function $(s) {

  return document.getElementById(s);

}

$("top_half").onclick = () => {

  if(display.autoOff === true) {

    display.autoOff = false;

    $("bklight").style.display = "inline";

  } else {

    display.autoOff = true;

    $("bklight").style.display = "none";

  }

};

resources/index.gui:

透明(opacity="0")の領域を重ねて、そこでイベントを発生させている。

 <image id="bklight" class="color2" x="50%-15" y="20%-15" width="31" height="31" href="bklight.png" fill="#5682b4" display="none" />

  <rect id="top_half" width="30%" height="30%" x="35%" y="5%" fill="#ffffff" opacity="0" pointer-events="visible" />

以上