すーさんだよ

すーさんの健康(?)管理と少々の日常生活

【Fitbit ionic】ド素人の開発奮闘記 環境構築~テンプレートの文字いじり

ド素人すーさんです

 

Fitbit ionicのクロックフェイス開発にチャレンジしてみました。

忘れないようにメモに残そうと思います。

今回は、環境構築~時刻のみのテンプレートを少しいじるところまでのメモです。

開発に慣れている方には退屈な記事になると思います...。

 Javascriptというプログラム言語らしいです。

 

 開発するために準備するものは?

まずは開発環境のメモです。

開発にマストなのはfitbit studioとFitbit OS Simulatorの2つ。

実機のfitbit ionicは持っていなくても開発だけならできます。

fitbit studio

https://studio.fitbit.com/

IEやEdge、GoogleChorome等のブラウザ上で動作するエディタです。

fitbit studioでプログラムを書いていくことで、クロックフェイスを作ることができます。

 

Fitbit OS Simulator

https://dev.fitbit.com/release-notes/fitbit-os-simulator/

これは実際にパソコンにインストールして使用する仮想のfitbitを動作させるエミューレータです。

fitbit studioでプログラム書いて作ったクロックフェイスを仮想のfitbitで実行するためのツールです。


こんな感じで仮想のfitbitが動きます。

 

fitbit ionic実機

言わずもがな、fitbit ionic実機です。

Wifiにつなぐと、fitbit studioでプログラミングしたクロックフェイスを実機で実行できちゃいます。

ただ、実機実行しようとするとfitbit studioで実行ボタンを押すたびにクロックフェイスのインストール動作に入るので

5~10分くらい時間がかかります。

開発中の動作確認はFitbit OS Simulatorの仮想fitbitで試したほうがいいです。

実機は節目の時に見てみる感じの使い方がいいですよ!

Fitbit フィットビット スマートウォッチ iONIC GPS搭載 iOS/android対応 バッテリーライフ最大5日間 睡眠ステージ記録 歩数&距離&カロリー記録 耐水50m仕性能 着信/SMS/アプリ(LINE/Twitter/Facebook)通知 24時間心拍測定 エクササイズモード 女性の体調管理 チャコール/スモークグレー L/Sサイズ【日本正規品】FB503GYBK-CJK

 

 どうすれば開発できるの?

 難しいことは考えず、fitbit studioにfitbitアカウントでログインしてください。

 

まずはクロックフェイス用のテンプレートを呼び出そう

ログインするとNew Project画面なるものが表示されるので、
①「Name」のところに好きな名前を入力

②「Template」から"Digital Clock"を左クリックで選択

③右上の「Create」ボタンを左クリック

 

作成したばかりのテンプレートをFitbit OS Simulatorで動かしてみよう

 Fitbit OS Simulatorを起動しておく。

ダウンロードしたFitbit OS Simulatorを流れに任せてインストールしてください。

途中で聞かれるログインはfitbit studioと同じfibitアカウントです。

この窓が出ていればOKです。

 

いよいよ仮想のfitbit ionic上でテンプレートを実行しよう

テンプレートを作成してすぐの画面でBuildボタンを押してください。

良くわからないですが、書いたソースコードが動くようにするおまじないみたいです。

(ビルドとは。*1

次に「Select a Phones Select a device」を左クリック

Ionic  Simulatorを左クリックしてください。

クロックフェイス開発 Fitbit

「Select a device」と表示されていた部分が「Iobuc Simulator」になったらOKです。

「Run」ボタンを左クリックして実行してください!

クロックフェイス開発 Fitbit

実行後にFitbit OS Simulatorの窓を表示してください。

以下のようになっていたらテンプレート実行成功です!やったー!

赤背景に白文字が作り立てテンプレートのデザインです。

クロックフェイス開発 Fitbit

実際にプログラムを書いてみるメモ

 文字の大きさを変えてみる(font-size)

千里の道も一歩から。

私も理想は色々ありますが、まずは文字の大きさを変えるのが小さくて大きな一歩です。

fitbit studio左側メニューから「resources」フォルダを左クリック

styles.cssを左クリック

すると右側の黒い画面にプログラムのコードっぽいのが出てきます。

ここでFitbit OS Simulatorで表示された背景の赤色や白文字時間に関する設定が書いてあります。

クロックフェイス開発 Fitbit

このテンプレートでは、白文字時間を「myLabel」という名前を付けて管理しているようです。

では、文字の大きさを変えてみます。

font-size: 80; と書いてあるところの 80を 40に変えてみます。

クロックフェイス開発 Fitbit

「Run」ボタンを左クリックしてFitbit OS Simulatorの窓を見てみると...。

クロックフェイス開発 Fitbit

小さくなった~!!

 

文字のフォントを変えてみる(font-family)

fitbit studio左側メニューから「resources」フォルダを左クリック

styles.cssを左クリック

クロックフェイス開発 Fitbit

このテンプレートでは、白文字時間を「myLabel」という名前を付けて管理しているようです。

では、文字のフォントを変えてみます。

font-family: System-Bold; という行の「System-Bold」という文字でフォントを指定しているみたいです。

別のにしてみましょー!

どんなフォントが指定できるかは以下のURLに乗っていました!

https://dev.fitbit.com/build/guides/user-interface/css/#fonts

別の「Tungsten-Medium」というやつに変えてみました!

「Run」ボタンを左クリックしてFitbit OS Simulatorの窓を見てみると...。

クロックフェイス開発 Fitbit

おお、文字の形がかわった!

 

表示できる文字数を変えてみる(text-length)

fitbit studio左側メニューから「resources」フォルダを左クリック

styles.cssを左クリック

クロックフェイス開発 Fitbit

このテンプレートでは、白文字時間を「myLabel」という名前を付けて管理しているようです。

では、表示できる文字数を変えてみます。

text-length: 32;となっているところ4に変えてみます。

これは白文字時間部分「myLabel」に32文字まで入るよ~という設定です。

これを4文字までに変えるとどうなるんだろう...。

現状は14:15みたいに5文字が表示されていますよね。

クロックフェイス開発 Fitbit

4に変えて「Run」ボタンを左クリックしてFitbit OS Simulatorの窓を見てみると...。

クロックフェイス開発 Fitbit

なんとなんと...4文字で切断されるんですな..。
どうやら、アプリの容量節約のためにも、text-lengthの設定は表示される文字数に

ピッタリ合わせたほうが良い見たいです!

時間の形が14:15のようないわゆるMM:SS形なら5にしておくと良いでしょう!

5に変えて再実行したらちゃんと表示されました!よかったー!

文字の位置変更に関わる”軸”の位置を変えてみよう(text-anchor)

fitbit studio左側メニューから「resources」フォルダを左クリック

styles.cssを左クリック

クロックフェイス開発 Fitbit

このテンプレートでは、白文字時間を「myLabel」という名前を付けて管理しているようです。

では、文字の”軸”を変えてみましょう。

text-anchor: middle;のところです。

次章で試す、「文字の位置を変えてみる」に関係するところです。

x、yの値で文字の表示位置を変更するのですが、text-anchor: middle;の設定になっていると

x、yの値を変更したときに文字の中心(middle)の位置が変わります。

text-anchor: start;に設定するとx、yの値を変更したときに文字の左端(start)の位置が変わります。

text-anchor: end;に設定するとx、yの値を変更したときに文字の右端(end)の位置が変わります。

まずは、middleのまま「Run」した場合

クロックフェイス開発 Fitbit

次にmiddleをstartに書き換えて...。

 

クロックフェイス開発 Fitbit

「Run」した場合

クロックフェイス開発 Fitbit

軸が頭にきてるので若干右にずれましたね。

endにして「Run」した場合

クロックフェイス開発 Fitbit

おお、左にずれました!

 

 文字の位置を変えてみる(x、y)

fitbit studio左側メニューから「resources」フォルダを左クリック

styles.cssを左クリック

クロックフェイス開発 Fitbit

このテンプレートでは、白文字時間を「myLabel」という名前を付けて管理しているようです。

では、時間の表示位置をいじってみます。

xとyの値を着かえてみましょう。

両方70%に変えてみました。

クロックフェイス開発 Fitbit

「Run」ボタンを左クリックしてFitbit OS Simulatorの窓を見てみると...。

クロックフェイス開発 Fitbit

変わった!!やったー!
 

 文字の色を変えてみる(fill)

fitbit studio左側メニューから「resources」フォルダを左クリック

styles.cssを左クリック

クロックフェイス開発 Fitbit

このテンプレートでは、白文字時間を「myLabel」という名前を付けて管理しているようです。

では、時間の色をいじってみます。

fill: white;と書いてあるところで指定しているみたいです。

white(白)を別の色に書き換えてみましょー!

どんな色があるかは以下のURLに書いてありました!

https://dev.fitbit.com/build/guides/user-interface/css/#colors


limeにしてみます!

 fill: white;からfill: lime;に書き換えて...。

クロックフェイス開発 Fitbit

 「Run」ボタンを左クリックしてFitbit OS Simulatorの窓を見てみると...。

 

クロックフェイス開発 Fitbit

うおおおお文字色かわったー!

 

 今回は、ここまでにします!

素人でも気軽にプログラミングできる時代すごいです...。

この記事が何か参考になれば幸いです。

心拍数追加とかも次書けたらいいな~

以上

開発奮闘のすーさんでした。

 

 

*1:ビルドとは、組み立てる、建てる、築く、作り上げる、などの意味を持つ英単語。ソフトウェアの分野では、プログラミング言語で書かれたソースコードなどを元に実行可能ファイルや配布パッケージを作成する処理や操作のこと。また、組み立てられた実行ファイルなどの特定の版を指す場合もある。 -IT用語辞典 e-Wordsより