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のご紹介でした。進捗あり次第また追記します。

2017年12月25日

fitbit ionicのSTAR WARSなwatch face

エピソード8、観てきました。いやー、いろいろと見せ場があり良かったですね。BB-8も大活躍でしたし。娯楽エンターテイメントな映画としては現状最高なのではないでしょうか。ということで、私はこんなwatchfaceを作り腕に巻いて観てきました。前にApple Watchで作ったもの(こちら)をionic用に作り直したものです。


実使用上では表示が小さく見にくいのですが、、まぁ、いい感じです。こういったwatchfaceは縦画面のApple Watchよりも横画面のionicの方が似合いますね。

で、最近はひたすらionicのwatchfaceを作っているのですが(こういう2次創作的なのでなく、オリジナルデザインなもの)、その合間にこういった画像貼るだけで作れるwatchfaceを作ったりしてます。オリジナルなwatchfaceの方はかりできているのですが、現状「待ち」な状態です。じきアップできるかと思いますので、少々お待ちください。
以上、簡単ですがSTAR WARSなwatchfaceを作ったことのアップでした。

2017年12月9日

fitbit ionic のベルトをいろいろ買ってみた。

ionicのApp Storeもオープンし、かなり出遅れた感の中、いろいろとionic用のwatchfaceをデザインしている最中なのですが、その合間に先日購入したベルトをいろいろアップします。

まずはこちら。ベルトと言うよりは本体のカバーも一体になった、ベルト一体型のケースという感じです。amazonの画像を見て、結構いけるかも、と思い購入したのですが、、、クオリティーも低くダメでした^ ^


本体を入れる前の状態。上下のベルトが本体の枠で繋がれてます。


裏面からかなり強引にぐいぐい押し込みます。


で、決定的にダメだったのが、下の画像の様に、固定されたベルトの向きが上下逆だったことですね。普通バックル部分のある方が時計の上側なのですが、何故か手前側にあり、非常につけにくいです。設計する時にionicの上下を間違えてしまった(2つあるボタンが左側になるように設計してしまった)んですかね?ということでこのベルトは付けて撮影してすぐ外してそのままバイバイな感じでした。(よく見るとamazonの画像では上下逆になってませんので、クレーム付けても良いかも。。ionicに表示を上下反転できる機能が入るとまだ対応できそうですが。)


次、革ベルト(左)と穴あきのスポーツタイプの色違いのものです。左から2番目がオリジナルベルトで、それ以外はいわゆる廉価な模造品ですが、オリジナルにはないカラーリングです。


穴あきの黒xライムグリーン。


もうちょっと緑っぽいのを期待したのですが、かなり蛍光イエローな感じです。クオリティーは良いです。


以前にアップした黒x赤スポーツベルト。これも良い出来です。


裏面。よく見ると左右に細いスリットの穴があり、ライムグリーンのものとは微妙に違います。


革ベルト。少し使用したので既にくせがついてますが、これも良い出来です。そもそもオリジナルにこういったカラバリや素直に黒い革ベルトがあればオリジナルを買うのですが。。


裏面。かなりまともではあるものの、既にしわっぽくなってきているので、数ヶ月でダメになるかもしれません。


で、ionic本体への装着部分ですが、どれも非常によく出来ています。この革ベルトタイプもうまくプラスチックの構造体を包み込んでいます。


右の一番下がオリジナルです。本体への着脱感はオリジナルよりもカチッと簡単に付いて良い感じです。ただオリジナルはぐっと押し込んだ後に最後にプチッとクリック感があるので、その分、ベルトと本体の隙間は一番少ない気がします。模造品の方でもほぼ隙間無く付いていますが、よーく見るとやはりオリジナルが一番隙間無く本体に密着して付いています。


最後集合写真。


で、私的にオススメなのは黒の革ベルトです。最初はApple Watchにある様なカラフルなシリコンベルトも良いと思ったのですが、この黒革ベルトを付けて気づきました。良くも悪くもベルトと本体が一体でピシッと直線的なionicのデザインはモノトーンにして、かつてのB&Oの様な、シンプルでミニマルな雰囲気にふってあげるとカッコよく見えると思います。いわゆるフィットネストラッカーにありがちなスポーティーでカラフルでポップな方向で無く、JAOB JANSENの様な、北欧的なシンプルモダンな「スポーツとは無縁な方向」に走ると、丸々して可愛らしいApple Watchのデザインの方向性ともかぶらずに独自の格好良さを構築できるかと思うのですが如何でしょう?フィットネストラッカーはその目的からスポーティーな雰囲気で良いとは思うのですが、スマートウオッチは基本スーツでもいける雰囲気でスポーツをする時はスペアのシリコンベルトに変えて撥水性と雰囲気を変えることも出来るよ、位のスタンスの方が(ionicのデザインと大きさには)良いのでは!?と思います。


以上、最近買ったionicのベルトのご紹介でした。下に私が買ったベルトのamazonへのリンク張っておきます。(一体ケース型のはオススメでないので張りませんでした。しかしどれも1,000円台って安いですね。)

  

2017年11月24日

Fitbit ionicでどうぶつの森のwatch face

Fitbitでのwatchface作り(FitbitはClock Faceと呼んでますが、どうも好きになれないのでwatchfaceと呼びます。)、とりあえず画像を貼れて時刻表示だけできるようになったので、おととい公開されたスマホ用のどうぶつの森のwatchfaceを作りました。フォトショ作業(スクショをionicの画面にちょうどよくなる様にトリミングしたりとか、フキダシの位置を調整したりとか)さえ終わればこんなのならすぐ作れますね。


どうぶつの森は娘がDSでやってるのを横で眺めてた位ですが、なかなかまったりしててよいですね。まったりしているのだけれどゲームをまったりとやる時間が皆無なのが問題ですが。で、こちらはゲーム中に何度も出て来るエラーメッセージのスクショで作ったwatchfaceです。エラーコードに日時分が出ます。


以上、ionicのwatchfaceのアップでした。

iPhone X風watch face

最近になって周りでiPhone Xを所有する人が増えてきましたが、Xが発売される数日前にX風のApple Watchのwatchfaceを作ってました。(最近ブログにアップするの遅くなりすみません。)


まぁ、Xの特徴的な上の凹型のスクリーン風にしただけですが。逆に素直に時刻表示をしているwatchfaceを作ったのは久々かも。

以上、Apple Watchのwatchfaceのご紹介でした。現在はFitbitのionicを入手したので、しばらくApple Watchのwatchface作りはお休みなるかと思います。(いくら作ってもApple Watchではマネタイズの方法が一向にが見えませんしね、、)

CITIZENのアラーム2本目

シチズンのスケルトンモデルの続き、アラームモデルをまた入手してしまいました。少し前に購入したのは(こちら)インデックスが極太でよかったのですが、今回のモデルは逆に凄く細く極めて普通っぽいモデルです。


ラグも細く薄いのですが、そんな華奢なディティールとはお構いなしにごっついリューズが2つもあり、しかも機械式なのにアラーム付き、という普通だけど普通じゃない、「普通っぽい」というとこが良いです。本当はほぼこれと同じでよりインデックスがより細く、文字板のテクスチャーの異なるモデルが私的には1番なのですが、なかなか程度の良いものが見つかりません。。


watchface作り以外では最近はシチズンにはまってますねー。まぁ、安いですし。しかし、シチズンに限らずこの頃のシンプルなデザインの国産機械式時計はかなり程度が良くても比較的安く買えますし、これからくるのでは?と思うのですが、如何でしょう?

以上、シチズンのアラーム付き2本目のご紹介でした。

CITIZENのスケルトン

最近買った機械式時計をさっとアップします。シチズンの70年代の自動巻きのスケルトンモデルです。ステンのヘアライン仕上げのテーパー面のケースに黒ベゼル、黒文字板、金色のムーブメント。カッコイイです。


裏面。半分が自動巻きのローターで隠れてしまいますが裏面もスケルトン。


昔入手した当時のカタログに掲載されていました。


同カタログ別ページと。『ジャストナウなヤングにバッチリきまるシチズンで行こう』のコピーがいかにも70年代ですね。


以前に買ったシチズンのアラーム付きと。どちらもひとくせあるシチズン製品ですね。


以上、安かったのでついぽちってしまった、シチズンのスケルトンモデルのご紹介でした。

2017年11月21日

ionicのFitbit Studioの初めの一歩でつまづいた点

やっとfitbit ionicのwatchface作りにとりかかり、とりあえず下地画像を貼って、時刻を表示させるとこまで来ました。Apple Watchで作ったスピナーのwatchfaceの画像をionicのサイズに合わせたものを貼っただけですが、これからまた新たなプラットフォームでのwatchface作りのスタートです。
が、その前段階でのFitbit Studio(ブラウザーでionicのアプリ等を作る開発環境)を始める極く最初の一歩でつまずいたので注意点を2つ共有しておきます。


アプリ開発の手順として、まずFitbit Studioのサイトでユーザー登録をし、iPhone側のFitbitアプリトップページの左上のionicの画像をタップした後に出るページ(下の画像)に追加される『開発者向けメニュー』をタップし、


出て来るDeveloper Bridgeをオンにすると、めだたく開発が始められるのですが、



注意点の1つ目として、この『開発者向けメニュー』はFitbit Studioにユーザー登録をしないと出てこないということです。Fitbit Studio登録前にこの開発者向けメニューが無い!と探さない様にしましょう。

で、私の場合ひっかかったのはちゃんとFitbit Studioのサイトでユーザー登録をしたのに何故か上の開発者向けメニューが表示されませんでした。(下の画像の状態)


最初この場所に出ることも知らなかったので、アプリ内どこを探してもそれらしいメニューを見つけられず、watchface繋がりの方にヘルプを求めてやっと場所と出ない理由が分かりました。その理由は(おそらく)iPhoneアプリで最初に行ったユーザー登録時と今回web上でのFitbit Studioでのユーザー登録のメールアドレスが違ったから、の様です。しかし、その事を知ってiPhoneアプリのユーザー登録時のメールアドレスをFitbit Studioと同じものに変更しようとアプリ内を探すも登録情報修正のページも無く、、、止むを得ずアプリを一回捨て(これまでのトラッキングデータ全て破棄)、アプリを入れ直し、新たなユーザー登録時に、Fitbit Studioに登録したものと同じメールアドレスで登録しようとしました。が、Fitbit Studioで使用しているメールアドレスは「既に使用されているメールアドレスなので登録出来ない」のアラートが出て登録出来ず(=Fitbit Studioと同じメールアドレスが登録出来ない!)、、、結局iPhoneアプリもFitbit Studioも全て最初から、どちらでも使用していない新たな3つ目のメールアドレスで新規登録し直し、(ついでにionicも初期化)やっと全て繋がる様になりました。

と、とても面倒なことになるので、注意点の2つ目として、まず順番として最初にスマホアプリでメールアドレスを登録し、その次にそれと同じメールアドレスを使ってFitbit Studioでのユーザー登録をしましょう。(まぁ、普通メールアドレスは同じにしますよね。。私はiPhoneアプリで通知の来るメールアドレスと開発用のメールアドレスは変えたかったのでそうしたのですが。。一応、fitbitのこちらにはGet Startedな手順は記載されてます。)

で、以下はご参考まで。watchfaceを作ってめでたくionicに送ると『時計の文字盤』のページに追加されるのではなく、最初の『開発者向けメニュー』内の最下段に追加されるSIDELOADED APPSに置かれます。ので、インストールするとそのwatchfaceしか表示出来ず、プリセットされた他のwatchfaceに戻すにはこのwatchfaceのメニュー(PURGEとあるのは私がwatchfaceに付けた名前です)をタップし、


次に出てくるDelete Appをタップして削除するしかありません。。不便ですね〜これはきっとまだbeta版だからかと思いたいですね。



以上、Fitbit Studioで最初につまづいた点のお知らせでした。

2017年11月18日

fitbit ionic キタ!

先日のカンファレンスで購入したfitbit ionic、ざっくり実機のディティールをメインにアップします。まずはwatchfaceを点灯させた状態の斜視。でかく見えますが実際腕にはめるとそんなにでかい感じはしません。(私がでかい時計ばかりしているからというのもあるかもしれませんが。)


ということでまずは他のスマートウォッチとの大きさの比較から。(ionicはベルトを付けたままだと平置き出来ないのではずしてあります。)左にPebble Time、右にApple Watchです。こう並べるとでかいはでかいですが、そんなにでかくないのが分かります。ひとえに横レイアウトの画面+左右の稜線のRが極めて小さいことが単体で持った時に大きく見せている要因ではないかと思われます。


背面。そう言えばPebble Timeは心拍計はありませんでしたね。外装は左からプラスチック、アルミ、セラミック、です。


斜視。それぞれ手に取るとやはりセラミックケースのApple Watchの出来の良さは別格です。購入から10ヶ月程経ちますが傷も全く付いてません。


しかし厚さはやはりPebble Timeが一番薄いです。電池は一番長持ちなのにw


前述した様に専用のベルトがかなり下向きに付く様になっているので、ionicは机に置いてもベルトが開ききらずに、この位本体が浮いた状態になります。


本体はアルミ製なのですが、あまり金属感が感じられません。サイドにはiPhoneのDラインの様な樹脂のパーツがアルミ外装でサンドイッチされてます。また、左右のボタンのキートップにはミゾが掘られていますが、やるのであればこんな中途半端な入れ方でなく、Pebble Time Steelの様な密度感のある入れ方にすべきかと思います。


本体前面にはよく見ると下の画像赤矢印部に照度センサーがあります。(何故服の袖で隠れやすいこちら側にしたのでしょう?)


背面。大きなテーパー面のシンプルな造形は本体も薄く見せることが出来、良い感じです。ベルト取り付け部にある細長い台形のプッシュスイッチを押してベルトを着脱します。


ベルトを外した状態。着脱の仕組みはバネが丸見えで安っぽく、ちょっと不安になります。また、はめる時は「プチッ」と音がするまで奥まで押し込まないとロックがかからないので、注意が必要です。(ベルトを差し込んで、付いたと思ったらちゃんとロックされておらず、電車の中で外れかけたことがありました。)


ベルトの先端の金属パーツにfitbitのマーク。


ベルトの留め方は普通のベルトと同じですが、先端の金属パーツをベルトの穴にぐいっと押し込んで固定する様になっています。が、それが意外とはめにくく、ionicを手首から外す時もこの金属パーツがバックル部にひっかかり抜き取りにくく、かなり着脱し難いです。


ベルトの表面はよく見るとYをひっくり返した様な面白いパターンをしています。


fitbit alta HRとのツーショット。こう並べると「両サイドの稜線の面取りを貫いた、ベルトから本体を一体で連続させたデザイン」は、fitbit製品として統一させたかったというのは分かりますが、、、そのディティールをスマートウォッチに持って来ると、現状ではどうしても一昔前のSamsungのダメダメなスマートウォッチ臭がして古臭く見えてしまいます。やはりfitbit内でもスマートウオッチのデザインは他のフィットネストラッカーとは切り分けたデザインを考えて欲しいですね。Blazeという毛色の違うデザインの製品も出している訳ですし。無理に新規のデザインを起こせとは言いません、せっかくPebbleを買収したのですから、Pebble Time 2のままで良いですので。


という訳で、まともではあるものの、いまひとつぐっとこない本体をなんとかすべく、まずは別のベルト(オフィシャルでなく、サードパーティー製。amazonでは既にサードパーティー製のベルトがたくさん出ています。)を購入し付けてみました。赤x黒のシリコンベルトで文字板の色も合わせると(大分ピンクっぽいですが)かなり違った雰囲気になり良い感じです。


インスタにアップした画像。この六角形の穴のあるベルトはオフィシャルのデザインですが、色がオフィシャルには無い色です。(要は模造品ですが非常に良い出来です。私が購入したのはこちらです。)


腕に巻いた状態。Pebble 2の赤x黒を思い出します。


ちなみに現状プリセットされてるwatchfaceは以下です。iPhoneのアプリ側で選択し、watchfaceを切り替えます。Pebbleの時と同様にオリジナルのwatchfaceを作ってインストールすることも可能です。


ということで、今度はJava Scriptベースでのwatchface作りの始まりです。なんか、Pebble~Apple Watch~fitbitと、プラットフォームとプログラミング言語を乗り換えながらずーっと同じことを繰り返してる気がしますw

以上、ちまちまと否定的なことを記載してしまいましたが、基本シンプルでまともですし、バッテリー4日程持ちますし、何しろフィットネストラッキング機能(履歴の見易さ等)は断然Apple Watchより良いので、あとはJava Scriptを勉強しながら自作のwatchfaceでカッコよさを補完していければ思います。