財布の中のEDC: コームとミラー

Posted 12 months ago by yoosee.
  edc cardtool

久しぶりにEDCの話として、普段から財布に入れているEDCをご紹介。財布にはいるEDCというとやはりカード型ツールというのがいくつもあって、以前にも1つ記事を書いたことがある。

野生で餓死しないためのクレジットカードサイズのサバイバルツール READYMAN Wilderness Survival Card - W3er

今回はそういったものとはちょっと毛色が違い、意図せずしてだが身づくろいの道具が入っている。見ての通り、櫛(コーム)と鏡である。

財布に入っているEDC コームとミラー

コームの方は Go Comb という商品で幾つもバリエーションがあるが、これはステンレス製でコームのみのシンプルなもの。日本だと以前は MOMA Store でも取り扱いがあったのだが最近見当たらなくなった。米国ならば Amazon.com などで売っている。Amazon.co.jp にも取り扱いはあるがかなり高いので、似たような商品 をトライした方がいいかもしれない。使っていないのでお勧めはできないが。

Go-Comb - Wallet Comb - Sleek, Durable Stainless Steel Hair + Beard Comb

ステンレス製なので静電気で髪が絡まるなどはなく、ちょっとした身だしなみを整えたいときにくしが手元にあるのは意外と重宝する。うちの場合はどちらかと言うと自分のよりも子供の髪をとかすのに使うことが多いけど。穴が多いデザインなのでサイズにしては軽量だけど剛性は結構しっかりしていて折れ曲がったりはしないし、エッジがきちんと丸めてあるので髪をとかすときに引っかかる感覚もなく、よくできている。

もう一つはこれもステンレス製なのだが、MoMA ステンレススチールミラー である。これは国内の MOMA ストアや Amazon.co.jp でも取り扱いがある。

MOMA ステンレススチールミラー

ステンレスをポリッシュして作られているらしきミラーなので反射率は多少低いし色味も普通の鏡と比べると少しくすんだ感じだが、手鏡としてちょっとしたチェックに使うくらいであれば細部までクリアに見えるし十分きれいな鏡として使える。またなによりガラスの部分がないので財布に入れて持ち入れても割れる心配をしなくていいのがよい。

ミラーはホイッスルと並んで遭難時にシグナルを送る用途で持っておいた方が良いものなので、EDCキーチェインに付けているチタン製のホイッスルと合わせて防災用品としても役立ちそうだ。なにより財布に入れられると自動的にどこにでも持ち歩く状態になるのが素晴らしい。

 

FitBit Versa 用の 8-bit Grayscale PNG 作成

Posted about 1 year 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 about 1 year 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 about 1 year 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 about 1 year ago by yoosee.
  social

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

社会と個人

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

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

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

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

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

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

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

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