第6回　文字盤表示をいじってみる【Garmin Connect IQ】

ここから連載10回くらいで一つWatchFaceがつくれたらいいなーと思っています。
かなりできること限られてそうにも感じましたが、実際のところどうなんでしょう？
今回のところは、まず適当にいじってみて、どうなるか。

現状

あ、これはサムネイル詐欺なのではないか。

現状がこちらです。

夢がなく、希望だけが一人佇んでいる状態です。
いや、まあこういうのも嫌いじゃないけど、見辛いし。

で背景画像とか表示するにはいろいろ事前に学ばなければいけないことが多そうなんですが、ここまでインストールやら初期設定やらで疲れたので、まずはプログラミングっぽいことやりましょう！

コードをいじってみる

とりあえずこんな部分があると思います。24行目ですね。
ない場合は、new projectの時にSimpleではなく、Simple with settingsを選んでしまった可能性があります。

function onUpdate(dc) {
       // Get and show the current time
       var clockTime = System.getClockTime();
       var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%02d")]);
       var view = View.findDrawableById("TimeLabel");
       view.setText(timeString);

       // Call the parent onUpdate function to redraw the layout
       View.onUpdate(dc);
   }

いろいろ書いてあってよくわかりませんが、試しに、var timeString = ・・・
の部分で"$1$:$2$"を"$1$@$2$"にしてみます。

var timeString = Lang.format("$1$@$2$", [clockTime.hour, clockTime.min.format("%02d")]);

実行。あ、セーブをお忘れなく。（Ctrl＋SあるいはFile>Saveですね）

おお！時計としては意味不明ですが、とりあえずちゃんとこちらのやったことに反応してくれてます。よしよし。

じゃあここを変えれば時計の表示はいじれそうです。

秒を表示してみる

次。例えば、

var timeString = Lang.format("$1$@$2$:$3$", [clockTime.hour, clockTime.min.format("%02d"),clockTime.sec.format("%02d")]);

"$1$@$2$"　→　"$1$@$2$:$3$"
[clockTime. ・・・ .fromat("%02d")]
→　 [clockTime.・・・.format("%02d"),clockTime.sec.format("%02d")])

＊1、2と来てるんだからとりあえず3もいれてみるか、
というのと、
hour、minと来てるんだからとりあえずsec入れれば秒が出るんじゃない？
というざっくりしたイメージです。実行。

ほーらね！
ならなかった人はプロジェクトの保存を忘れずに。Ctrl＋Sです。

書き方（書式）についてテスト

じゃあ次。

var timeString = Lang.format("$1$@$2$:$1$", [clockTime.hour, clockTime.min.format("%02d"),clockTime.sec.format("%02d")]);

$3$を$1$にしただけです。

なるほど、なるほど。時間hourが最初と最後に同じくでてきてます。
使い方としては、

と言うことですね。適当な文章に番号つきの箱を用意しておいて、中身を別で書く。

プログラミングを日常的にやってる方からすると当たり前なのかもしれませんが、なるほど、という感じです。

あとは、clockTime.min自体もformatがかけられてますが、そちらはまた少し違う形のようです。これは後でやろう。

とりあえずここまでで、今回はおしまい。
Garminの反応を楽しんだので、次回はちゃんと勉強して、WatchFaceの基本構造を理解、絵が表示できるようになりたいです。

あ、・・・

日本語、表示できないのかー・・・。