GarminのWatchFaceアプリで背景デザインを変更！

# はじめに

GarminのWatchFaceを開発する際にサンプルとして開発したときの手順をまとめます。

また、前回の記事「[GarminのWatchFaceアプリでHello,world!](https://qiita.com/nyanko5656/items/6177de3f5cd4d57fd7ca)」の続きとなります。

# 前提条件
* [GarminのWatchFaceアプリの開発環境を構築する](https://qiita.com/nyanko5656/items/eaf73ffa81b7c51e206f) での設定が完了していること
* 前回記事内の「[動作確認(シミュレーター起動)](https://qiita.com/nyanko5656/items/6177de3f5cd4d57fd7ca#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E8%B5%B7%E5%8B%95)」まで実施

# 手順
## デバイスの解像度等を確認
[Garmin公式サイトのデバイス一覧](https://developer.garmin.com/connect-iq/compatible-devices/)から自分のデバイスを見つけます。
その中に、解像度・サポートしている機能・採用している液晶の種類・APIのどのレベルに対応しているか、記載されています。
私のデバイスの場合は下記のとおりです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/95402285-9949-a836-4a37-436936f371d6.png)
※ここまでやって初めて対応しているAPIの対象レベルを知りました。。

## 背景画像を作成
 先ほど確認した解像度を元に背景を作ります。
 私の場合は360 x 360pxの画像が必要になります。
 
 とりあえずざっくり用意したのがこちらです。
![時計背景.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/1eb8ac1f-7d29-9c7c-2ed4-21b332017cd4.png)
 CLIP STUDIO ASSETSへ素材投稿をしてくださっている方へ心より感謝申し上げます。
 液晶がround形(円形)のため、背景四隅は見切れるため書き込まないことをおすすめします。
 
## 背景画像を設定
背景画像を下記ディレクトリに配置します。
[resources]>[drawables]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/9d19e093-5328-1d96-9030-993e19331080.png)

続いてlayout.xmlに背景画像を表示させる行を追加します。
layout.htmlは、上から書かれた順に描画されていくため、最後の「id="TimeLabel"」(時計の文字盤)が最前面に表示されます。
```diff_xml:layout.xml
<layout id="WatchFace">
    <drawable class="Background" />
+   <bitmap id="watchBackImage" filename="../drawables/watchBackImage.png" />
    <label id="TimeLabel" x="center" y="center" font="Graphics.FONT_LARGE" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_BLUE" />
</layout>
```
ビルドを実行すると、下記エミュレータ結果になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/91b0c9ec-942c-99c4-f0c4-02a67f43f46b.png)
YATTA！

# 自分のGarminで動かしてみる
## デバイス用のファイルを生成
ctrl+shift+P で表示される項目に「Monkey C: Build for Deviceと入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/86eb948f-ace7-3f40-f205-5ef0924e8ee9.png)

出力先を聞かれるため、指定し選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/edc7569a-e6d2-dfba-f59e-3d852924824e.png)

DebugとRelaseのどちらにするか聞かれますが、
今回はお試しということも有り、Debugで作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/ee703fb5-269f-6813-5f94-2746f5d0f422.png)

そうすると、シミュレータが起動はしないのですが、同じようにターミナルウインドウに文字列が流れ、該当のフォルダにファイルが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/791266c4-de7f-9cd8-0620-b97e9aa99354.png)

この中の.prgファイルが作成したWatchFaceになります。
(添付画像の場合、sampleFace02.prgとなります。)

## 生成ファイルをデバイスに配置
Garminの付属のケーブルを使ってデバイスをPCに接続してください。
そうすると、HDDたちと同じようにストレージへアクセスすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/522431d6-deef-b2c1-d646-69007841f73c.png)

ストレージの下記フォルダへ移動してください。
> デバイス名\Internal Storage\GARMIN\Apps
>
> ※添付画像の場合：PC\Venu 2S\Internal Storage\GARMIN\APPS

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/cc876f67-7760-fc98-b3a2-85bc970cf99c.png)

そしてこのフォルダ内へ生成した.prgファイルを配置してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/664578d2-3f7d-2a85-c685-494bd82fb7df.png)

これで作業は完了のため、ケーブルからデバイスを外してください。

## 動作確認

画面に作成した画面が表示されれば完成です！
![ZXDWCI22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/2d571115-dbd3-ec19-3d38-4a4e5f23b1db.png)
＼YATTA!／

実機に移すと色味が変わったりするので、微調整を行ってください。

フォルダへ配置したのに画面が表示されない場合、
過去にConnectIQアプリで作成した画面デザインが干渉している可能性があります。

端末によって操作方法が異なるかと存じますが、デバイス内からウォッチフェイスの変更を行ってください。

私のデバイス(Venu 2S)の場合、右下のボタンを長押し後「ウォッチフェイス」をタッチします。
![mRRz0zae.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/bfb7c4a2-fe3e-fc38-b426-741c719e84ba.png)

表示される画面デザインを横にスライドさせ、
変えたい画面デザインをタッチで変更確定になります。
![Kuk66wgf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320059/815af213-4ddc-3600-a64c-aa493061934e.png)

# 終わりに
今回はここまでにします。
次回はフォント変更を目標にしたいと思います。

# 参考リンク

https://note.com/run_bike_other/n/n9bdc41d733ae

https://note.com/run_bike_other/n/n9569cd2d8806