公式ドキュメント

全部英語です。
以降この記事で貼る公式ドキュメントの記事は、どれも遡っていくと最終的には上記リンクに辿り着くはずです。

まずはMonkeyCの構文を見たいという人は下記をぱらぱら眺めるのがいいと思います。

forどう書くのとかswitchあるんですかとか、基本的なステートメントは全てここにまとまってます(たぶん)。

上記の通りあれこれWebで公開されていますが、SDKをインストールするとローカルにも一通り配置されるっぽいです。

Windows環境だとここです。

C:\Users\xxxx\AppData\Roaming\Garmin\ConnectIQ\Sdks\connectiq-sdk-win-xxxxxxxxxxx\

公式サンプルコード

ドキュメント同様、SDKのインストール先に一通り配置されるっぽいです。前述のディレクトリを覗くと「samples」配下になんかいっぱいあります。

環境構築

ここ見て上手くいったので詳細は割愛します。

公式ドキュメントで確認するならここ。

自作したウォッチフェイスを実機で使う

ここ見て上手くいったので詳細は割愛します。

上記が閲覧できなくなったときのためにざっと要所だけ書いときます。

コマンドパレットからMonkey C: Build for Deviceでビルドする
デバイスをPCに接続するとストレージとしてマウントできるので、ビルドして生成された.prgファイルを配置する
- デバイス名\Internal Storage\GARMIN\Apps配下
PCとの接続を切ると勝手にインストールしてくれる

Tips

あれこれを片っ端から列挙していきます。

コマンドパレットから新規プロジェクトを作成後、とりあえず編集することになるであろうファイル

resource > layouts > layout.xml

WPF経験者は「XAML」と言えばすぐにピンとくるかなと思います。
XMLで書かれており、座標やフォント、色などビジュアル的なパラメータを指定します。表示内容そのものは後述のhogeView.mcで制御します。

source > hogeView.mc

こちらがロジック側で、layout.xmlのノードをidで指定して操作します。

月表示

import Toybox.Time.Gregorian;が必要。

Gregorian.info()で年月日情報を取得できる。渡す値によって取得できる年月日情報の形式が異なります。

View.mc


function onUpdate(dc as Dc) as Void {
	var infoShort = Gregorian.info(Time.now(), Time.FORMAT_SHORT);
	var infoMedium = Gregorian.info(Time.now(), Time.FORMAT_MEDIUM );

	var view = View.findDrawableById("MonthLabel") as Text;
	view.setText(infoMedium.month + "   " + infoShort.month.format("%02d"));

	View.onUpdate(dc);
}

layout.xml


<layout id="WatchFace">
    <label id="MonthLabel" x="center" y="center" font="Graphics.FONT_LARGE" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_BLUE" />  
</layout>

Time.FORMAT_MEDIUMだとStringで取得するっぽいので、format("%02d")を試みるとエラーになります。

数字で受け取りたい場合はFORMAT_SHORTで取得する必要があります。

細かいことは公式ドキュメントのここに書いてある(たぶん)。

曜日表示

こいつもGregorian.info()で取得できて、Time.FORMAT_MEDIUMを渡すとSunとかMonとかで返してくれる。

View.mc


function onUpdate(dc as Dc) as Void {
	var infoMedium = Gregorian.info(Time.now(), Time.FORMAT_MEDIUM );
    (View.findDrawableById("DayOfWeekLabel") as Text).setText(infoMedium.day_of_week);

	View.onUpdate(dc);
}

Time.FORMAT_SHORTだと日曜始まりで1～7を取得するので、MonじゃなくてMoにしたいとか思ったらこんな書き方ができます。

View.mc


function onUpdate(dc as Dc) as Void {
	var infoShort = Gregorian.info(Time.now(), Time.FORMAT_SHORT);
    var dayLabels = ["", "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
    var dayOfWeekString = dayLabels[infoShort.day_of_week];
    (View.findDrawableById("DayOfWeekLabel") as Text).setText(dayOfWeekString);

	View.onUpdate(dc);
}

……なんで0始まりにしてくれないんですかね。

土曜始まりや月曜始まりにも設定できるっぽい。

日本語での曜日表示

言語設定を日本語にしたら火とか水が表示されるのかなと思って試してみたら、豆腐になっちゃいました。デフォで使えるフォントは後述の通りデバイスによって変わるので、場合によってはカスタムフォントが必要だったりするかも。

シミュレータ上でしか試してないので実機でどうなるかは不明。

フォント

layout.xml内のfont="Graphics.FONT_LARGE"を書き換える。
具体的な値については公式のデバイスリファレンスに一覧があります。

XMLに設定する値は「Font Symbol」で、一覧上で対応する書体とサイズでデバイスに表示されます。
一覧はデバイスによって、というか実質的にはたぶん液晶のスペックによって個別に作られており、同じFont Symbolであっても表示される書体やフォントサイズが常に同じとは限らないです。開発者が「こんなサイズ感で」と作ったものを、勝手に他のデバイスでもいい感じで表示できる仕組みになってるっぽい。

手持ちのデバイスだけ見たい

上記リンク、全デバイスなのかやたらとデカいし見にくい。
シリーズ別でわけられたページも実は個別に設けられてまして、たとえば下記にはFenixシリーズと他の似たようなデバイスだけでまとまってます。

フォントサンプルも一緒に載っていて嬉しい。

フォントカラー

layout.xml内のfont="Graphics.COLOR_BLUE"を書き換えます。

表示可能な色は液晶のスペック次第なのでデバイスによって違います。デバイスリファレンスに記載があったり無かったりする。

網羅は出来ていないけど何色か試してみました。

定数で指定できる色はここに一覧があります。

バッテリー情報

System.getSystemStats()で取得できるStatsが持ってます。

View.mc


function onUpdate(dc as Dc) as Void {
	var stats = System.getSystemStats();

    // 残量(%)
    var batteryString = Lang.format("$1$%", [stats.battery.format("%2d")]);
    
    // 残量(日数)
    var batteryInDaysString = Lang.format("$1$days", [stats.battery.format("%2d")]);

    // 充電状況 ※満充電状態でも充電器が接続されていればTrue
    var batteryIsCharging = stats.charging ? "charging" : "not charging";

    // ソーラー強度
    var batterySolarIntensity = Lang.format("$1$%", [stats.solarIntensity.format("%2d")]);

    // --------------------------------------------
        
    (View.findDrawableById("BatteryLabel") as Text).setText(
        batteryString + " / " + batteryInDaysString + " / " + batteryIsCharging + " / " + batterySolarIntensity 
    );

	View.onUpdate(dc);
}

シミュレータ上でのバッテリー情報はSettingsのSet Battery Satusから設定できます。

通知

System.getDeviceSettings()で取得できるDeviceSettingsが持ってます。

View.mc


function onUpdate(dc as Dc) as Void {
    (View.findDrawableById("NotificationCountLabel") as Text).setText(
        Lang.format("$1$",[System.getDeviceSettings().notificationCount])
    );

	View.onUpdate(dc);
}

シミュレータ上での通知数は、SettingsのSet Phone Notificationsから設定できます。

おまけその1

環境構築はVSCodeの使用が前提になっていますが、この記事はHaystackEditorで開発しながら書いてます。

VSCodeからのフォークらしいので拡張機能に互換性があるようで、今のところMonkeyC拡張機能も問題無く動いています。

おまけその2

使わずに済むならvarを使いたくない派ですが、どうもvarでしか宣言できないっぽいです。

小数型であることを明示したいときは1ではなく1.0を代入しましょうとかそういう感じらしい。