FitBit Versa 用の 8-bit Grayscale PNG 作成

Posted 4 months ago by yoosee.
  versa fitbit

FitBit Versa SDK に Image Grayscale Magic! という「8-bit Grayscale PNG を用意してSVGから <image> で読み込むと fill プロパティで色指定が出来るよ!」とうのがあってですね、実際に ImageMagick で変換したんだけどまあうまくいかなくて軽くハマったのでメモ…

% convert original.png -colorspace gray tmp.png
% convert tmp.png -background white -flatten tmp.png

要は Alpha channel があるとちゃんと表示されないらしい。将来のSDKでは直るのかもしれないけど…。

ちなみに FitBit SDK の SVG で fill で塗られる色はどうやら白色らしいので、元が白(ないし透明)地に黒のアイコンの場合は白黒反転させる。

% convert tmp.png -negate dest.png

なお結果はこんな感じになるのが正解っぽい。

% identify dest.png
dest.png PNG 64x64 64x64+0+0 8-bit Gray 256c 1619B 0.000u 0:00.000
% file dest.png
dest.png: PNG image data, 64 x 64, 8-bit grayscale, non-interlaced

before convert

after convert

ここで gray+alpha になってたりするとうまくいかなかった。8-bit Grayscale Gray じゃなく 8-bit Gray 256c の方が問題なく動く気がするけど気のせいかも。なんにしてもこんなのはすんなり使えて欲しい。

おまけでサイズ変更もする場合。ここでは元の画像を縮小し、正方形の 64x64 アイコン画像にしている。

% convert original.png -colorspace gray tmp.png
% convert tmp.png -resize 64 -background white -flatten tmp.png
% convert tmp.png -gravity center -extent 64x64 tmp.png
% convert tmp.png -negate dest.png

この辺、ImageMagick の常ではあるんだけど、コマンド引数や実行の順番を守らないと画像が何故か2値になって色がつぶれたり Versa で認識できなくなったりなんだりあってきっと理由はあるんだけど黒魔術をこれ以上追う元気がない。なお複数ファイルに一括で処理を回すなら convert の代わりに mogrify を使うなり shell 内で for / foreach で回すなりしましょう。

 

FitBit Versa 用ウォッチフェイスの開発

Posted 4 months ago by yoosee.
  programming versa fitbit

FitBit Versa 用ウォッチフェイス Obsidian を書いた際に使った FitBit Dev の開発概要を以下にざっくり記載する。基本的には dev.fitbit.com がそれなりに充実しているので (痒い所に手が届かない感はあるのだが) そちらを参考すればよい。

FitBit Versa 向けの開発環境

FitBit Versa (とIonic) 向けの開発環境は dev.fitbit.com にSDKやReferenceなどの開発情報がまとまっていて、 Pebble のようにオンラインの開発環境 FitBit Studio が用意されているので開発自体は簡単に始められる。Cloud Pebble と比べると、Github などへの連携がないことと、シミュレーターが外付け(Windows用アプリがある)なこと等が違いで、特に Github 連携は早く対応して欲しい。なお開発は全て FitBit アカウントに紐ついて利用できる。

FitBit Studio

開発自体は Pebble と比べるとだいぶ今どきで、基本は全て JavaScript で、UIはSVG(XML)で記載する。UI の操作は基本的にSVGに対するJavaScriptによるDOM操作で行い、画像や文字、Shape などオブジェクトの操作を行う。色やフォントなどはCSSで設定できることもあり、感覚的にはほぼHTML UIのプログラミングだ。JavaScript も最近の版、少なくともES6相当で、const, let や fetch() なども普通に使える。

実機デバッグ

開発は基本 Simulator をインストールすれば実施できるが、timing issue などで実機に入れると動かなくなったりすることがあったので一応実機確認した方がよいかも。実機試験はスマホ側で FitBit App から Developer Menu の Developer Bridge を有効にするのと、Versa の設定から同じく Developer Bridge を有効にしてから FitBit Studio で接続先を選択すればよい。この際、スマホだけでなく Versa も Wifi 接続している必要があるようなので要注意。また FitBit Gallery App Manager に .fba ファイルをアップロードすると作成されるアプリのリンクを使ってインストールすることもできる。この直接リンクは FitBit が Review for Publish を Approve する前から利用できる。

フォルダとファイル構成

基本的にどのファイルがどういう用途で呼ばれるかのディレクトリ構成が決まっていて、概ね以下のようになっている。これ以外のファイルのおき場所は任意で、相対パスで呼び出せばよろしい。

  • app/index.js : アプリ起動時に呼ばれる main ファイル。他の実行時ファイルは基本的にここから呼び出す
  • companion/index.js : スマホ側で実行されるコンパニオンのファイル。インターネットアクセスや設定呼び出し時の処理など
  • resources/ : GUI関係のファイル用フォルダ。画像ファイルなどのリソースも一般的にはこの下
    • resources/index.gui : GUI設定のSVG定義
    • resources/widgets.gui : GUI設定時に外部からの import や、<use> で再利用する定義を記載
    • resources/styles.css : SVGの id や class 定義用CSSファイル。x, y などの座標もCSS側で設定可能
  • settings/index.jsx : 設定画面の定義ファイル。React っぽく書く。Companion 側での処理記載が必要
  • packages.json : 謎の拡張子JSON。Permission や UUID などを記載する。FitBit Studio であればUIで設定可

例えばSVGファイルの resources/index.gui で秒針を定義して

<g id="secs" pointer-events="visible" transform="translate(50%,50%)">
   <rect x="$-2" y="-120" width="2" height="120" class="secondhand" />
</g>

動作は app/index.js (及びそこから呼ばれるファイル)で定義して ”tick” イベントからの Callback で秒針を動かす。

let secHand = document.getElementById("secs");
...
const clockCallback = (data) => {
...
  secHand.groupTransform.rotate.angle = data.secondsAngle;
};

アイコンなどの画像素材は Fitbit/sdk-design-assets から利用可能になっている。イメージファイルは 8-bit grayscale png で作るとsvgでの色指定が適用されるので、アイコンや時計の数字などはそうしたフォーマットで作るといいっぽい。

固有の部分としては Versa 本体とスマートフォン側の Companion に処理分割があり、アプリの設定やインターネットへの接続が必要な場合などは Companion 側に処理を message を使って投げ込み、また message で受け取ってやり取りする。message 処理を含め非同期処理が結構多いので、予め用意された Event 処理や、EventListener に callback を登録していく形が多い。

  clock.addEventListener("tick", tickHandler);
messaging.peerSocket.addEventListener("message", function(evt) {   
  console.log("Weather in weather/main onmessage: " + JSON.stringify(evt.data));
  weather.update(evt.data);
  onweatherupdated(weather);
})

とかこんな感じ。

実装のサンプルコード

実際のこの辺りは FitBit がサンプルコードを公開しているのでそれを参考にするのが手っ取り早い。ヘルス情報付きの時計は Fitbit/sdk-moment に大体の機能があるのでこれを基本にいじっている。天気の取得などは Pebble のコードを流用しつつ書いているが、OpenWeather を使った実装もサンプルがあるのでさほど難しさはない。

などと書いているが実際には本来 Callback で書くべきを平たく書いたせいで呼び出しのタイミングがおかしくなって動かなかったり、onmessage() のような Singleton を複数定義してしまって定義が上書きされて挙動がおかしくなったり、 Simulator では動いたのに実機テストで動かなくて四苦八苦したりと、いろいろとハマりポイントはあったのだった。実機の接続がまた不安定だったり side loading が失敗したりとか問題だらけでこれが…

とは言え複雑なことをしなければ時計を書くこと自体は大変簡単なので、興味ある人はトライしてみるとよいかと。自分のデザインした時計が自分の手首で動いているのは結構楽しくて、画面を表示させてはニヤニヤしてしまうよ。

 

FitBit Versa 用のウォッチフェイス Obsidian を公開

Posted 4 months ago by yoosee.
  smartwatch versa fitbit

スマートウォッチを使う楽しみの一つは自分で作ったウォッチフェイスを使えることだと思っていて Pebble 用にも
Obsidian Watchface for PebbleZirconia Watchface for Pebble などを作って自分で使っていたが、FitBit Versa を買ったのでそちら用にもひとつ作ってみた。正直なところ Pebble に比べても時計のバリエーションが少なくて(実際こんな感じなので)かつヘルス情報を前面に出したものばかりで気に入った時計がなかったのが動機のひとつではある。

作ったのは「アナログ時計 + 天気と気温 + ヘルス情報」という Pebble でもやっていた組み合わせで、同じ Obsidian という名前にした。Pebble と比べてヘルス情報の種類が増えているので ‘‘cycleview`` でタップ時にローテーション表示するようにして、心拍数は別途表示した。画面が四角いので四角い角丸フェイスを作るのが一番面倒だった気がする。別途 ruby でスクリプト書いてSVGを作ったけど画像で作ったほうが早かったかも。コードは以下の Github で公開してある。

FitBit App Gallery へのリンクは以下。Android なりの FitBit App が入った環境で開くと時計のインストール画面に飛ぶはず。

Obsidian
FitBit App Gallery (Obsidian clockface) へのリンク

デジタルウォッチも作ろうかと思ったのだが、FitBit SDK は今のところ未だカスタムフォントが使えないようなので保留している。まあ数字とアルファベット程度ならフォントから画像(8bit grayscale png)化して使えばカスタムフォントと同様に使えるのでひと手間だけの問題ではあるので、そのうちやるかも。

開発関係の話は “FitBit Versa 用ウォッチフェイスの開発- W3er” に別途記載した。

 

社会問題を語るときはマクロとミクロの問題は分けて話そう

Posted 5 months ago by yoosee.
  social

主旨はタイトルの通りでそれ以上でも以下でもないのだが、社会問題について話す際には意識して「マクロ:社会全体として解決するべき問題」と「ミクロ:個人が主に自己防衛のために行うべき行為」は分けた方がよい。

社会と個人

実例でいえばこういう話のこと。

  • マクロ: 社会として、女性が夜中に外出しても問題のない治安のよい安全な街づくりをするべきである
  • ミクロ: 個人として、危険を避けるために女性は夜中に出歩くのを避けたほうがよい

これらマクロとミクロの意見は問題なく両立・並立しあえるのだが、混合してしまうと得てして特にミクロの意見に対して「女性が夜出歩くなというのは本質から目をそらした指摘だ」「全ての女性に不利益を強いるのか」みたいな話になったりする。

(なおミクロの意見も「全員が必ずそうすべきだ」と主張する人はいて、それはマクロの立ち位置での主張と扱うべきだろう)

最近話題の働き方改革と過労死(の個人責任論)についてもマクロとミクロでの意見があり得る。

  • マクロ: 過労死が発生しないよう企業での適切な労働環境とそのための法規や行政指導が必要である
  • ミクロ: 過労死が発生するような職場からは労働者は積極的に逃げたほうがよい

面倒なことにこれは観点次第でどちらも正しくなり得るため、双方が「なぜこんな自明に正しい主張が納得されないのか」というすれ違った認識のまま不毛な議論を続けることになりがちだ。

自分がそうした状況に陥った際はマクロとミクロが混合されていないのか確認したうえで、自分がどちらの側に立っているのか、相手の意見も別観点からは受け入れられるのかどうかを見直して話を立て直すことが役に立つと思う。

 

FitBit Versa レビュー

Posted 5 months ago by yoosee.
  smartwatch versa fitbit

少し前から「買収したPebbleの遺伝子を引いている」との評判がある Fitbit Versa を使っているので簡単に利用感をレビューする。スペックなどは Versa製品ページ を参照のこと。なお先行発売されている海外では、絶賛まではいかないまでもそこそこ評判は良いようす。

Fitbit Versa

総評としては、バッテリー寿命が長く重さも軽めで防水、といった特徴のお陰で基本付けっぱなしにできるのが煩雑さがなくてよい。個人的にスマートウォッチに求める機能は「時計」「通知」「ヘルストラッカー」で、これらの用途はきちんと満たしてくれる。そうした使用感の快適さは確かに Pebble にあったもので、UI やスマホ側アプリのつくり方を見ても確かに Pebble ぽいなあと思うところは少なくない。

ただそうなると残念なのは画面の常時表示がないことで、時計を見るときや通知が来たタイミングで腕をひねったりボタンを押したりして画面を点灯させるアクションを取らないといけないのは Pebble に慣れた身には本当に鬱陶しい。後述するが、せめて通知が来たタイミングでの自動点灯くらいは設定可能にして欲しい。

Versa用アプリはあまり充実していないのでスマートウォッチに色々な夢と希望を求めている人には向かない気がするが、そういう人は Apple Watch なり Samsung Gear でも買ったらよろしい。あれはあれでよく出来てるし。

良い点

  • サイズが(スマートウォッチとしては)小さめで軽量、デザインもシンプルで悪くない
  • バッテリー寿命が公称4日間、実質でも24時間で20%前後の消費量
  • アプリケーション通知は個別にカスタマイズ可能で Quick Reply も可能
  • 300x300の解像度と高い輝度で通知の文字も見やすい
  • タッチスクリーンと大きなボタン3つの使いやすいUI
  • プールでも利用可能なレベルの防水
  • ヘルストラッキングが優秀
  • 時計のバンド交換は簡単で、標準の22㎜バンドが使える

総評にも書いた通り、バッテリー寿命が長いのが使い勝手の煩雑さをかなり軽減してくれているのが利用体験としてはかなり重要に感じる。ヘルストラッキングの性能も高く、特にスリープトラッキングが面白い。バッテリーが十分に持つので、夜中は外して充電なんていうルーチンを考えなくていい事も重要だ。

Health Status Tracking Sleep Tracking

睡眠状態の記録を見ると睡眠時間中でも実際には覚醒していて睡眠時間にカウントされていない時間があって(図の赤い部分)、睡眠時間が思ったより短く出ていて悲しい気分になったりもする。これもう1時間早く寝ないといけないということなのか。ちなみに上の記録は欧州に出張中にメラトニンを飲んで寝ているので冒頭きちんとDeep Sleepなのに明け方に覚醒状態になっていて典型的な時差ボケ時の睡眠っぽい。

残念な点

  • 画面が常時表示ではない
  • Androidのスマホ管理用アプリ(Fitbit App)があまりいけてない
  • 今時のスマートウォッチが持つようなリッチな機能(音声命令や通話やナビなど)を求めても無い
  • 充電が Qi など標準規格ではなく専用アダプタかつ接触端子なので腐食しないか不安

画面が常時表示出ないのは今どきの殆どのスマートウォッチがそうなので仕方がないことではあるが、Pebble からの移行組が一番ストレスを感じるのはこれだろう。またまだしも「通知が来た時に画面が自動的にONにならない」のは不具合としか思えないのだが、FitBit forum でも Make Ionic and Versa screen stay on longer to read notifications という Suggestion に大量の Vote が付いたのでそのうち改善されるかもしれない。

ちなみに 3rd Party 製のウォッチフェイスに「常時点灯」オプションがあるものがあったので試したが、バッテリーが1時間あたり 8-10% 程度減るのと、常時点灯設定なのにいつの間にか画面が消えていたりして、やはり使い物になる感じではなかった。画面輝度を最低に固定すると多少はバッテリーの持つ時間が伸びるが、屋外での視野性が壊滅的になるのでお勧めできるものではない。こればかりは物理デバイスとしての特定によるところなので、残念ながら将来のデバイスに期待するしかない。

スマホ側アプリのいけてなさ、特にクロックフェイスギャラリーの使いにくさは特筆される酷さで、Clock Face の選択が1つしかできず気に入った時計を簡単に切り替えられないとか、人気のフェイス順などのフィルタもないとか、またそれ以外でもアプリと時計との同期がしばしばしくじっているとか、スマホの通知エリアの通知内容がダサいとか、いけてない感が強いのが多い。とは言えソフトウェアなので改善が期待できるところではある。これこそ Pebble のアセットでなんとかすればいいのにと言いたくなるものではあるが。

また海外出張でタイムゾーンが変わる際に、スマホがローミングの電波で時計が変わったら時計も即座に変更されて欲しいのだが、どういうわけか変更されて1時間程度は時計のタイムゾーンが追従してくれない。ForumSupport などでやり取りした限りでは、Account 設定 > Advanced Settings > Automatic time zone をいったん Off にして手動で Timezone を選んでから手動で Sync すると追従させられるようだが、タイムゾーンを合わせるためには自動タイムゾーンをオフにする、とかもう頭悪いとしか言いようがなく、こんな事をしなくても時計が合うのがスマートウォッチの良いところでであり、このださい仕様は本当に何とかして欲しい…

まとめ

正直に言えば Pebble Time Round を使い始めたときのような感動には至らなかったし、スマートウォッチとしての出来はアプリ側を含めて甘い部分も多い。とは言え「時計」「通知」「ヘルストラッカー」という3つの目的はきちんと果たしているし、長い電池寿命を含めてユーザ体験が快適に作りこまれている感はあり、時計として身に着けて使ってストレスにならないという地味だが最重要な項目をきちんと満たしたスマートウォッチは貴重じゃなかろうか。

Pebble と比べると常時点灯がないなどストレスに感じる部分もあるが、ヘルストラック部分は流石 FitBit だけあってちゃんと作られており、有意な点が無いわけでもない。さほど値段も高くないこともあり、個人的には他人にお勧めしてもいいクォリティだとは言える。