garmin ウォッチ用のウォッチフェイスを作る(その1)

前回、Garmin Forerunner255を衝動買いした件について書きました。
alasixosaka.hatenablog.com
しばらく使ったらレポートを書こうと思っていたんですが、先にオリジナルのウォッチフェイスを作成するという話になってしまいました。
もちろん、使い始めているのですが、まだいろいろ書くほど使ってないので。レポートはもっと使い込んでから書くことにします。
そして今回のお題ですが、何故自分でウォッチフェイスを作ろうと思ったかというと、ガーミンのオリジナルのウォッチフェイスはバッテリーの残量が数字で表示されないんです、バッテリーの残量はグラフィックスで減っていくのがわかるだけ、よくスマホなんかである残量表示のあれが出てくるのあれです。スマホだと数字も表示されるのが普通ですが、ガーミンウォッチは数字がありません。これはちょっと不便と思ったら、Connect IQというアプリを使うと、いろんな人が作ったウォッチフェイスが使うことができて、その中にはバッテリーの残量が数字で表示できるのもあります。ものすごく沢山のウォッチフェイスがあって選ぶのに困るほどあるのですが、なかなか自分的に気に入ったのが見つからず。ようやく、ちょっと気に入ったのが見つかったのですが、時計表示のフォントがなんとなく気に入らない。それなら自分で作ってしまえということで作成に取り掛かったという次第です。

準備に必要なもの

  • パソコン

自作のウォッチフェイスと作るためにはアプリでは無理で、パソコンが必要です。WindowsでもMacでもできるようです。自分の場合はWindowsでやりました。

  • 開発環境

Visual Studio Code(VSC)かEclipseを使うのが一般的なようです。自分の場合は、プログラミング用のノートパソコンにVSCがインストールされていたのでそっちを使いました。個人的にはEclipseの方が好きなんですが。まあ、その辺は使う人の好みですね。

  • VSC用のMonkey C Extention

Connect IQのプログラミングはMonkey Cという言語を使うようです。それ用のコンパイラと自分では理解しています。

  • Connect IQ SDK

Connect IQを動かすためのSDKです。

これだけそろえれば一応オリジナルのウォッチフェイスを作ることができます。フォントをオリジナルのにしようとするとまた別のソフトが必要ですが、それはまたおいおい書いてみたいと思います。

開発環境を整える

基本的にはこのサイトを参考に作業を進めました。
qiita.com

Monkey C Extentionのインストール

VSCがインストールされている前提で、VSC上でまず、Monkey C Extentionをインストールします。VSCを立ち上げて、左下の四角いアイコンをクリックし、Monkey Cを検索、インストールします。Garmin謹製のものとサードパーティのものがありますが、Garmin謹製のものを選択します。

Connect IQ SDKのインストール

GarminのサイトからConnect IQ SDKをダウンロードし、sdkmanager.exeを起動してインストールします。

Javaが必要

その後の作業は上記の参考サイトの通り進めればよいのですが、Connect IQなのかMonkey CなのかとにかくJavaが必要なようです。自分のノートパソコンにはJavaがインストールされていなかったので、VSCにJavaの場所がわからないんだけどどこ? みたいな表示が出てきました。JavaJREJDKがありますが、JREの方をインストールすればOKです。オラクルのサイトからダウンロードできます。

VSC上での作業

あとは、Monkey C: Verifi Installationの実行。developer keyの作成。Run > Add Configuration。Monkey C: Set Products by Product Categoryの実行とButton WealablesとTouch Wealabelsにチェックを入れ、OK。という手順で準備が完了します。

とりあえずなんか作ってみる。

take4-blue.com
こちらのサイトを参考に、プロジェクトを作ってみます。
プロジェクトの作成ですが、VSCを立ち上げてF1(ないしCntrl+Shift+P)で、Monkey CのNew Projectを選択します。プロジェクト名は適当で。今回はWatchfaceとしました。まず、アプリケーションのタイプを選択する画面が出ます。これから作るのはウォッチフェイスなので、watchfaceを選択します。いろいろ選べるみたいで、ウィジットやデータフィールドなどもオリジナルのが作れるみたいです。データフィールドについても不満点があるので、ウォッチフェイスが無事に出来上がったらチャレンジしてみたいと思います。
それから、アプリケーションテンプレートを指定します。Simpleの方でいいと思います。with setting の方は、ウォッチにもともと入っているウォッチフェイスのようにいろいろ設定できるようにするためのものだと思いますが、たぶん処理が面倒なので今回はSimpleで行きます。
それから、最低バージョンの選択があります。何も考えずに一番新しいバージョンにしました。(不具合があれば後で直せばいいやと思って)
最後に、対応デバイスを選択する画面が出ます。これは、上記の参考サイトに書いてないのですが、自分の場合は、Forerunner255用のウォッチフェイスを作るのでForerunner255にだけチェックを入れました。機種によって画面の形、解像度などいろいろあるので、マルチに対応させるのは結構めんどくさそうです。

対応デバイスはForerunner255を選択

とりあえず動かしてみる。

まずは、Manifestを弄る

左のExplorer画面からManifest.xmlを選択して表示させます。ほとんどの設定はそのままでよいのですが、言語を選ぶ欄があるので、Japaneseを選択します。

日本語を選択

あとは、ビルド、実行すると、じつは、これだけで時刻表示をすることができます。
F1を押して、Monkey C: Build Current Projectを選択。
なにやらごちょごちょ表示されますが、BUILD SUCCESSFULと表示されればビルドが成功しています。何かエラーがある場合はエラーメッセージが表示されます。

ビルドの結果画面

Warningが表示されていて、ランチャーアイコンの画像サイズがちっちゃいよというようなことが書かれていますが、デフォルトで入っているものでウォッチフェイスの表示には関係ないので気にしなくてよいと思います。
ビルドが成功したら、Run->Run Without DebuggingでMonkey Cを選択するとシミュレータがスタートします。
こんな感じ。

シミュレータの画面

文字もちっちゃいし、時刻表示だけなので全く面白くないですが、まずはここから初めて、いろいろアレンジしていきます。