2017年12月28日

fitbit ionicのwatchfaceを作りました。

fitbit ionicの来年1月の日本での発売開始に向けていろいろとwatchfaceを作ってました。ionicのいまいちいけてない本体デザインをなんとかwatchfaceでカッコよく見せることを使命に(だれもお願いしてない)、Pebbleとは違ったionicの横レイアウトの画面+スクエアでシャープなデザインにマッチするものをいろいろ考えてみましたのでご紹介します。

・・・が、現状どれもionicのApp Storeにはまだアップしていません。とりあえず先行してここでのご紹介になります。そもそもfitbitに無料奉仕をする気は無いので、これからApp Storeにアップするにしても文字色変更等のカスタマイズ機能を無くした、機能制限をかけたバージョンをとりあえずアップするかと思われます。機能制限のないフルバージョンのwatchfaceの「販売手段」の目処やApp Storeへのアップが完了したなど、進捗がありましたらまたここでお知らせします。
(しかしionicのApp Storeがオープンしたものの、アプリやwatchfaceの「優秀なもの」がなかなか増えないのはやはりアプリの有料販売機能が無いからでしょうね。作り手が同じ開発時間をかけてアプリを作るなら、課金できるプラットフォームを普通選びますよね。Pebbleの時はスマートウォッチとしては優れているのにマイナーなPebbleをなんとかみんなで盛り上げたい連帯感みたいなのがあって無料でもwatchfaceをいろいろ作ったりしてましたが。)

ということで、ざっくり5つ作ってみたものをご紹介します。

Caution: These watch faces have not been published on the fitbit ionic App Store yet. Please wait a moment.

DIGITAL01
まず1発目は非常にシンプルなデザインのデジタル時計です。時刻のフォントはPebbleのDIGIGRADEの時に作ったものを流用。Pebble同様ionicもフォントをインストールできないのが面倒です。時刻の下にはテキストベタ打ちで日、歩数、カロリー、心拍数を表示しています。


腕に巻いた状態。まずはこういうシンプルなものが欲しくて作りました。



ANALOGUE01
次、インスタにもアップしたアナログ時計です。アナログ時計でカッコよくするのって難しいですね。横レイアウトだと更に左右の余白の埋め具合が難しいです。4隅に機能表示を入れるとApple Watchっぽくなってしまいますし。


8時と10時の長い緑の線はまぁ、その左右の余白の間を持たせる“雰囲気”で特に機能はありません。グラフィカルなアナログwatchfaceです。



SCALE
時刻を3つの目盛りをふったスケールで表示したもの。PATEKのメカデジのCOBRA x LIPの横レトログラードの四角ケース xデジタルって感じですかね。上から時、分、秒を表しており、これで8時14分31秒です。緑の指標は手首を振って出る毎起動時に左から現在時刻位置までにょーっとアニメーションします。

で、ぱっと見、分かりにくいので、画面タップでこの様にテキストで時刻表示もします。直線的なionicのデザインに良く似合うかと思うのですが、如何でしょう?

インストールするとこんな感じ。これで7時55分25秒です。やはりベルトはこのionicオリジナルのグレーのものよりも黒の革ベルトの方が引き締まって良いですね。



OCTA
次、デジアナなwatchfaceです。アナログ部のデザインが八角形(OCTAGON)なのでOCTAと命名しました。機能的にはDIGITAL01にアナログ時計表示とバッテリー残量表示(右下の10個の平行四辺形の四角。現状で80%)を追加したものです。



Pebbleの時にかなり初期に作ったwatchfaceのTECHNO01のデザインをベースに、よりシンプルにしています。現状一番のお気に入りのwatchfaceです。
下の画像は充電中なので電池マークが出ていますね。ていうか、まだプログラミングの途中でアナログ時計部が画像で現在時刻を表示していないバージョンの画像でした。



BOX
最後はApple Watchで作ったwatchface(こちら)をionic用に移植したものです。箱を積み上げていく(ていうか、下から上へ伸びていく)様に時刻表示をします。画像で22時27分57秒です。一見分かりにくいのですが、最下段の横1列の数字を読めば現在時刻です。

画面タップで日にちと歩数と心拍数が出る様にしておきました。


Apple Watchの時のまんまですね。これで7時39分59秒です。


以上、fitbit ionic用に作ったwatchfaceのご紹介でした。進捗あり次第また追記します。