Apple Watchのコンプリケーションファミリー

## コンプリケーションファミリーとは

[Apple Watchのコンプリケーションについてざっくりと紹介](https://qiita.com/toshi586014/items/effa32dc1aa6dd54f031)で紹介したコンプリケーションには、ファミリーと呼ばれるグループがあります。

たとえば、下のユーティリティ文字盤をご覧ください。

![コンプリケーション01.PNG](https://qiita-image-store.s3.amazonaws.com/0/38924/18f89dc2-6541-0e70-9196-0b5a6e4fed37.png)


このユーティリティ文字盤の左上にある温度と、右上にあるハートマークは、 `utilitarianSmall` というグループです。

<img width="1136" alt="コンプリケーション02.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/1c650c41-5ccc-9d32-1455-ac81f36a0c1d.png">


また、画面下にあるパ・リーグウォークという文字列と画像は `utilitarianLarge` というグループです。

<img width="1136" alt="コンプリケーション03.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/4c00fb41-c8e7-4250-4f91-a3035ac0d620.png">


XcodeのメニューのHelp > Developer Documentationを開いてClockKit > CLKComplication > CLKComplicationFamilyを開くと、コンプリケーションファミリーについての詳しい説明を参照できます。
`used in the Utility, Mickey, Chronograph, and Simple clock faces` のように、どの文字盤で使用されているのかも、ここで調べることができます。

## コンプリケーションファミリーの種類

この記事を書いている2018年05月時点では、コンプリケーションファミリーは以下の7つがあります。

- modularSmall
- modularLarge
- utilitarianSmall
- utilitarianSmallFlat
- utilitarianLarge
- circularSmall
- extraLarge

それぞれのコンプリケーションのサンプルと解説は、XcodeのメニューのHelp > Developer Documentationを開いてClockKit > Templatesで参照できます。

<img width="1139" alt="コンプリケーション04.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/b7c872b6-e0f2-79bd-1535-c10cab1f2b85.png">

<img width="1139" alt="コンプリケーション05.png" src="https://qiita-image-store.s3.amazonaws.com/0/38924/cda7f78e-24c6-8a0d-d651-5fc6b95c8678.png">


## コンプリケーションの画像サイズ

コンプリケーションごとに、以下のように画像サイズが決まっています。

|Family|Template|38mm|42mm
|---|---|---|---
|Circular small|Ring|40px × 40px (20pt × 20pt @2x)|44px × 44px (22pt × 22pt @2x)
|Circular small|Simple|32px × 32px (16pt × 16pt @2x)|36px × 36px (18pt × 18pt @2x)
|Circular small|Stack|32px max × 14px (16pt × 7pt @2x)|34px max × 16px (17pt × 8pt @2x)
|Extra large|Ring|126px × 126px (63pt × 63pt @2x)|133px × 133px (66.5pt × 66.5pt @2x)
|Extra large|Simple|182px × 182px (91pt × 91pt @2x)|203px × 203px (101.5pt × 101.5pt @2x)
|Extra large|Stack|156px max × 84px (78pt × 42pt @2x)|174px max × 90px (87pt × 45pt @2x)
|Modular large|Columns|22-64px × 22px (11-32pt × 11pt @2x)|24-74px × 24px (12-37pt × 12pt @2x)
|Modular large|Standard body|22-64px × 22px (11-32pt × 11pt @2x)|24-74px × 24px (12-37pt × 12pt @2x)
|Modular large|Table|22-64px × 22px (11-32pt × 11pt @2x)|24-74px × 24px (12-37pt × 12pt @2x)
|Modular small|Ring|36px × 36px (18pt × 18pt @2x)|38px × 38px (19pt × 19pt @2x)
|Modular small|Simple|52px × 52px (26pt × 26pt @2x)|58px × 58px (29pt × 29pt @2x)
|Modular small|Stack|52px max × 28px (26pt × 14pt @2x)|58px max × 30px (29pt × 15pt @2x)
|Utility large|Flat|18-42px × 18px (9-21pt × 9pt @2x)|20-44px × 20px (10-22pt × 10pt @2x)
|Utility small|Flat|18-42px × 18px (9-21pt × 9pt @2x)|20-44px × 20px (10-22pt × 10pt @2x)
|Utility small|Ring|28px × 28px (14pt × 14pt @2x)|28px × 28px (14pt × 14pt @2x)
|Utility small|Square|40px × 40px (20pt × 20pt @2x)|44px × 44px (22pt × 22pt @2x)

（ [Complication Images - Icons and Images - watchOS Human Interface Guidelines](https://developer.apple.com/watchos/human-interface-guidelines/icons-and-images/complication-images/) より引用）

コンプリケーションの画像は、アルファチャンネルだけを使用するので注意してください。

また、ヒューマンインターフェースガイドラインには、線の太さを4ピクセル以上にしてくださいと書かれています。コンプリケーションは小さいので、専用にデザインした画像をつくることがオススメです。