Fitbit Developers and Users Conference 2017 Autumn に参加して先行販売のfitbit ionicを手に入れたので早速Clock Faceを作ってみたという簡易記録。
とりあえず動いたのでアップロード。座標手打ちだから少しずつずれて変なものが見えてる#はじめてのclockface pic.twitter.com/tJvzLabTO0
— たかしすきー (@takashiski) 2017年11月14日
調整した pic.twitter.com/Ed0U5pQa6f
— たかしすきー (@takashiski) 2017年11月14日
遍歴としては、pebble一年くらい、その後pebble2を一年くらい使ってたけど、そういえばwatchfaceはサンプル見たくらいで作ったことはありませんでした。
簡単に制作してみた所感は、SVGとJavaScriptで遊んだことがある人ならすぐできるんじゃないかなー、です。SVGの要素名と動かすための属性名がバラバラで非常にわかりにくいので、遊んだことがない人は「なんで反映されないんじゃい!ちゃんと指定してるだろ!!!」と難儀するんじゃないかなーと思います。d3js...うっあたまが...
最初にやろうとしたことと実際にできたもの
パイチャートを積んだような、円がだんだんかけていく or 満ちていく文字盤がかっこいい気がしたので作ろうとしました。 最終的には、リング半分が回っていくものになりました。
とりあえず知ってる範囲で手早く組み上げたかったのでできないところは仕様を変えて解決しました。 fitbit studioではcircleに背景色と同じ色のrectを乗せることで円を削ることにしました。 そのため、内側に重ねた四角形の角が見えてしまうという問題がありました。 「内接正方形の内接円にすればいいんじゃない?」と思いつき、svgの属性指定間違いで悩みながらなんとか作り上げました。 所要時間は、2時間以上3時間未満くらいです。サンプルがどこにあるか探しながら、どんなの作るかなーどんなの作れるかなーというところからなのでこんなものじゃないでしょうか。
嵌ったり困ったりした点
- スマートフォンが接続されない
- ionicだけ接続しても転送できた
- 最終的に一度もスマートフォンとfitbit studioが接続できていない。なんでだろ。
- 主にcssに予想以上に制限がある
- borderが使えないから外枠をつけるためには要素二重重ね
- border-radiusも当然使えないので角丸不可
- サイズ指定はピクセルか%だが、ピクセルの場合は単位を付けない。つけてrunするとconsoleにinvalid valueと表示される
- borderが使えないから外枠をつけるためには要素二重重ね
- テキスト中に改行入れたら点線豆腐になった
- インテリセンスがないっぽいので文字列を属性に与える必要があるところで誤字で悩まされる。transfromになってたりとか。
- svgの移動系の属性で悩まされる。x,y,cx,cy,transformなど
最後に
そういえばmaskなんて要素があった気がするので、mask使えばパイチャート風Clock Faceいけるんじゃないか?とこの記事書きながら思いつきました。 まず対応しているか確認します。border-radius使えない問題に帰着しそうな気もします。
Webフロントエンドいじれる人にとっては、かなり手軽に文字盤作れるのではないでしょうか。
国内正式販売は1月ですがそのうちエミュレータでるのでとりあえずfitbitのdevelopperアカウントとるのがいいかもしれません。