Garmin ウォッチフェイス 開発入門
こんにちは、データ事業本部のキタガワです。
GW なので息抜きがてら Garmin スマートウォッチのウォッチフェイスを自作してみました。手順等含めて備忘録的に残しておきます。
成果物
結論から。こうなりました。
とてもいいですね〜。シンプルさの中に遊び心がキラリと光ります。
この画面で
- 時刻
- 日付
- 標高
- 歩数（上部に一日の歩数目標に対するプログレスバーを表示）
- 電池残量
- 通知
が一目で分かるようになっています。
また下のデータ項目はそれぞれ長押しすることで詳細画面に遷移することもできます。
動機
そもそもウォッチフェイスを作ろうと思ったのは、元々用意されているデザインで自分の好みにピタッとハマるものがなかったからです。
例えば日付に関しては本体の設定を日本語にしていれば 日 3 のような曜日+日付の表示か 3 5月 のような日付+月のどちらかしか選べなかったりします。曜日+日付+月を英語表記で、みたいなことはできなかったわけです。
また今までは基本ディスプレイはオフにしていて手首の動きを感知してディスプレイをオンにするモードにしていたのですが、たまに反応せずに時間が見れないこともあったため、AOD (Always On Display) を活用したいというニーズもありました。AOD の消灯時は時計だけを表示したかったのですが、そういった設定もできなかったです。
その他細々したところのかゆいところに手が届かなかったので、SDKが用意されているのも知っていましたし、いっそのこと自分で作ってしまおうと思いました。
環境構築
ここからは開発端末はmacOS (Tahoe バージョン 26.2)、スマートウォッチは epix Pro (Gen2) を前提にします。
ウォッチフェイスの開発には Connect IQ SDK を使います。
ライセンスに同意し SDK Manager をダウンロードします。SDK Managerを起動し進めると developer account へのログインを求められます。そういうものは作った記憶がなかったので新規作成をしようとしましたが、メールアドレスを入力すると、既に使われているとのことで登録できませんでした。どうやらこれは普段使っている Garmin のアカウントのことらしく、そのメールアドレスとパスワードを使用することで新規作成することなくアカウントにログインできました。
ログインができると SDK とデバイス用のパッケージを設定する画面になります。ここでは最新の Connect IQ 9.1.0 と 手持ちのデバイス用の epix™ Pro （Gen 2） 47mm/ quatix® 7 Pro をダウンロードしました。
SDK Managerをダウンロードすると開発に必要な monkeyc や connectiq も一緒にダウンロードされます。monkeyc は Java 製なので JRE も必要になります。弊端末には入っていなかったので併せて Java をインストールしました。Homebrew では以下でインストールできます。
brew install --cask temurin@17
必要に応じて使用しているシェルに monkeyc や connectiq の PATH を通します。以下が通れば正しく設定できています。
❯ monkeyc --version
Connect IQ Compiler version: 9.1.0
作ったウォッチフェイスをビルドするときには署名が必要になります。次のコマンドで生成できます。
> openssl genrsa -out developer_key.pem 4096
> openssl pkcs8 -topk8 -inform PEM -outform DER -in developer_key.pem -out developer_key.der -nocrypt
作ってみる
まずは動くものから
環境構築が完成したのでウォッチフェイスを作っていきます。といっても開発に使うのは Monkey C という専用の言語で、当然書いたことがないのでコーディングはほとんど Claude Code に任せました。Monkey C は C や Java、JavaScript、Python などその他多くの言語にインスパイアされた言語のようで、どれか一つでも慣れ親しんでいれば簡単に習得できるらしいです。
詳しくは公式サイトをご覧ください。
まずは最低限のデザインで動作するものを作ってどういう実装をするのか見てみることにしました。投げたプロンプトがこちらです。
GarminのWatchフェイスを作りたい。
機種：Garmin Epix Pro Gen 2
ソフトウェアバージョン：26.09
デザインは特に考えていないがシンプルなものでいいです。
データ項目は複数設定できるのと、長押しでそのデータの詳細を見る機能があればい。
AOD対応のためにディスプレイの非アクティブ時は時間だけの省力表示が行えるようにしてほしい。
まあまあざっくりしてますね。それでも Claude Code はモリモリ作業してくれました。
この後何度か会話を往復させて出来上がったのがこちらです。
既にいい感じですし、必要最低限の機能は備わっていました。
ウォッチフェイスの開発では connectiq コマンドでシミュレータを起動し、開発端末上で見た目などをシミュレーションしながら開発を進めることができます。もっとこうしてほしいというところがあれば画面のスクショを撮りながら Claude Code にフィードバックすることができるので想像以上にサクサク進みます。
なおビルドには monkeyc を使用します。例えば次のようなコマンドでビルドできます。
monkeyc -d epix2pro47mm -f monkey.jungle -o bin/SimpleWatchFace.prg -y developer_key
この場合 ./bin にビルド結果のファイルが出力されます。このファイルは次で使います。
実機でテスト
シミュレータ上では良さそうなものができたので実機でテストしてみます。ビルド結果の .prg ファイルを実機に転送すると反映されるらしいので、とりあえず付属のケーブルで開発端末につないでみたんですが Finder などにも特に認識されてなさそうです。
調べてみるとどうやら OpenMTP が必要らしいので Homebrew でインストールします。
brew install --cask openmtp
OpenMTP を開いて Root > GARMIN > Apps に .prg ファイルをドラッグ & ドロップします。ここだと SimpleWatchFace.prg というファイルです。
コピーできたらケーブルを抜いて実機で動作確認を行います。最初の要件としていた
- AOD の消灯時は時刻のみを表示すること
- データ項目を長押しすると詳細画面に遷移すること
などが実装できていることは確認できました。
デザインのブラッシュアップ
ここからはデザインを洗練させていきます。
個人的にはシンプルで少し遊び心のあるものが良かったのでそれを目指します。投げたプロンプトはこんな感じです。
AOD消灯時の文字を少し大きくしたい
ウォッチフェイスが動作することは確認したのでデザインを変えていきたい。
表示したいのは
- Altitude
- Barometer
- battery
- notification
- steps and goal
- date
- hour
- seconds
これをいい感じにデザインしたい。
表示がおかしくなってますね
秒は日付と同じ色合いでいいです。
歩数のプログレスバーは完了部分をベージュにしてください。
必要最低限はクリアしています。
次は遊び心を加えていきたいです。機能は保ったまま、おしゃれさを出していきましょう。
どのような案があるか出してください。
まあまあ丸投げですね。デザインセンスなんてものはないので伝え方も適当です。もし自分がデザイナーでクライアントからこんな依頼が来たら怒り心頭間違いないでしょう。
それでも修正してもらった結果をシミュレータに反映させ、スクショを撮り、また修正をしてもらいというループを繰り返していくとかなり納得のいくものが出来上がりました。
たまには人の手で
コードが蓄積していくと大体どういう風に実装しているのかはソースコードを読むと分かってくるので、Claude Code を使うまでもない細かい修正は自分でも行いました。
例えば標高のアイコンの山みたいなものは以下のように実装されています。
（これです）
// Two-peak mountain silhouette for altitude (left peak taller)
private function drawAltIcon(dc as Dc, cx as Number, cy as Number) as Void {
var s = ICON_SIZE;
var pts = [
[cx - (s * 0.50).toNumber(), cy + (s * 0.40).toNumber()], // base left
[cx - (s * 0.22).toNumber(), cy - (s * 0.42).toNumber()], // left peak (taller)
[cx + (s * 0.05).toNumber(), cy + (s * 0.15).toNumber()], // saddle
[cx + (s * 0.20).toNumber(), cy - (s * 0.05).toNumber()], // right peak
[cx + (s * 0.50).toNumber(), cy + (s * 0.40).toNumber()] // base right
];
dc.fillPolygon(pts);
}
これを次のように変更します。
@@ -382,9 +382,9 @@ class SimpleWatchFaceView extends WatchUi.WatchFace {
var s = ICON_SIZE;
var pts = [
[cx - (s * 0.50).toNumber(), cy + (s * 0.40).toNumber()], // base left
- [cx - (s * 0.22).toNumber(), cy - (s * 0.42).toNumber()], // left peak (taller)
+ [cx - (s * 0.22).toNumber(), cy - (s * 0.35).toNumber()], // left peak (taller)
[cx + (s * 0.05).toNumber(), cy + (s * 0.15).toNumber()], // saddle
- [cx + (s * 0.20).toNumber(), cy - (s * 0.05).toNumber()], // right peak
+ [cx + (s * 0.20).toNumber(), cy - (s * 0.06).toNumber()], // right peak
[cx + (s * 0.50).toNumber(), cy + (s * 0.40).toNumber()] // base right
];
dc.fillPolygon(pts);
}
こうすることで左側の峰が少しだけ低くなり、右側の峰がさらにほんの少しだけ高くなるという、ほんとに些細な修正を行ったりしました。なんとなく山が急すぎて気に入らなかったんですよね...。
まとめ
そんなこんなで Claude Code に相談しながら表示されているデータ項目の追加やデザインのブラッシュアップを行い、冒頭のミニマルかつ機能的で遊び心もあるデザインが出来上がりました。
最初の要件から、ここまでの実装に約 1 週間で、実作業時間で言えばおそらく 10 時間程度でした。Connect IQ SDK や Monkey C の完全初心者でも、Claude Code を使えば好きなようにウォッチフェイスが作れます。素晴らしいですね。
これを読んだあなたも GW の息抜きにお使いの Garmin デバイスをカスタマイズしてみてはいかがでしょうか。
それではまた次の記事でお会いしましょう。
参考
