Apple Watch の全11種類の Complication を確認できる Watch face の対応表

Apple Watch の Complication は Series 5 の現在で**11種類**あり、Watch face は**33種類**あります。めちゃくちゃ多いですねｗ

今回、[私が会社で担当するアプリ](https://timetreeapp.com/)の Complication の修正をすることになり、修正後いざ全11種類の Complication が正しく動いているか確認しようとしました。そのときに、一体どの Watch face を見ればどの Complication を確認できるんだ！？というのが全然分からなかったので、対応表を作ることにしました。

一応、[Apple の HIG](https://developer.apple.com/design/human-interface-guidelines/watchos/app-architecture/complications/) を見ると書いてあるのですが、Watch face のキャプチャがなかったり HIG表記と`CLKComplicationFamily`列挙型 の case表記が一部違ったりしてパッと見分かりづらかったので、より私のような初心者にもわかりやすいようにまとめました。以下ででてくる**7種類**の Watch face を設定すれば、**全11種類**の Watch face を確認できるようになっています。

# 確認環境

- Apple Watch Series 5
- watchOS 6.1.2

# Complication と Watch face の対応表

全11種類の Complication と、それを確認できる7種類の Watch face の対応表です。
[HIG表記](https://developer.apple.com/design/human-interface-guidelines/watchos/app-architecture/complications/)と、[CLKComplicationFamily の case](https://developer.apple.com/documentation/clockkit/clkcomplicationfamily) との対応も確認できます。
「本記事内略称」というのは、以降の Watch face のキャプチャで使用している各Family の略称です。

| HIG表記 | CLKComplicationFamily の case | 本記事内略称 | 対応 Watch face |
|:-:|:-:|:-:|:-:|
| Modular Small | .modularSmall | MS | モジュラー |
| Modular Large | .modularLarge | ML | モジュラー |
| Utility Small | .utilitarianSmall | US | シンプル |
| 表記無し | .utilitarianSmallFlat | USF | アストロノミー |
| Utility Large | .utilitarianLarge | UL | アクティビティデジタル、アストロノミー |
| Circular | .circularSmall | CS | アクティビティデジタル |
| Extra Large | .extraLarge | EL | 特大 |
| Graphic Corner | .graphicCorner | GCor | インフォグラフ |
| Graphic Bezel | .graphicBezel | GB | インフォグラフ |
| Graphic Circular | .graphicCircular | GCir | インフォグラフ、インフォグラフモジュラー |
| Graphic Rectangular | .graphicRectangular | GR | インフォグラフモジュラー |

# 7種類の Watch face とそれぞれが内包している Complication

全種類の Complication を確認できる7種類の Watch face のキャプチャと、それぞれがどの Complication を内包しているかの一覧です。

## アクティビティデジタル

| キャプチャ内略称 | CLKComplicationFamily | 個数 |
|:-:|:-:|:-:|
| CS | .circularSmall | 2 |
| UL | .utilitarianLarge | 1 |

![アクティビティデジタル.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25254/85ef8e74-a7c6-29d0-b266-0ec31978bc6d.png)

## インフォグラフ

| キャプチャ内略称 | CLKComplicationFamily | 個数 |
|:-:|:-:|:-:|
| GCOR | .graphicCorner | 4 |
| GB | .graphicBezel | 1 |
| GCir | .graphicCircular | 3 |

![インフォグラフ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25254/9d738ec6-9e4f-2540-7578-a224d5ee89e9.png)

## インフォグラフモジュラー

| キャプチャ内略称 | CLKComplicationFamily | 個数 |
|:-:|:-:|:-:|
| GR | .graphicRectangular | 1 |
| GCir | .graphicCircular | 4 |

![インフォグラフモジュラー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25254/1fe609fa-784b-9151-9eb4-953aee52fe72.png)

## モジュラー

| キャプチャ内略称 | CLKComplicationFamily | 個数 |
|:-:|:-:|:-:|
| ML | .modularLarge | 1 |
| MS | .modularSmall | 4 |

![モジュラー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25254/3ea234dd-bc43-c1c7-5d42-dee85a82e99c.png)

## アストロノミー

| キャプチャ内略称 | CLKComplicationFamily | 個数 |
|:-:|:-:|:-:|
| USF | .utilitarianSmallFlat | 1 |
| UL | .utilitarianLarge | 1 |

![アストロノミー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25254/c0bbcfee-8c6a-1398-5c5c-d21a11d7edda.png)

## 特大

| キャプチャ内略称 | CLKComplicationFamily | 個数 |
|:-:|:-:|:-:|
| EL | .extraLarge | 1 |

![特大.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25254/a815145d-5ac8-2ea6-dfd1-c7a1cbd2e704.png)

## シンプル

| キャプチャ内略称 | CLKComplicationFamily | 個数 |
|:-:|:-:|:-:|
| US | .utilitarianSmall | 4 |

![シンプル.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25254/3773bcd8-cc63-c13f-6e66-0664e8d4e589.png)

# 参考リンク

- [Apple - Human Interface Guidelines - Complications](https://developer.apple.com/design/human-interface-guidelines/watchos/app-architecture/complications/)
- [Apple Watch Series 4 の新しい Complication Families の実装を試してみる](https://qiita.com/MilanistaDev/items/6a09bb787d9eee509c0d)
- [watchOS2の新機能 complication詳細解説](https://qiita.com/motokiee/items/dc5b08d034449994ddb4)