App Clip Code Generator の使い方（テンプレート📸一覧つき）

![AppClipCodes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/80b3a772-b98f-1538-c5a0-5b80fb2b44bc.png)

2020年12月15日、iOS 14.3 がリリースされ、App Clip の起動方法の1つである、「App Clip Code」が利用できるようになりました。

> App Clip Codes
The best way for your users to discover your App Clip. It’s visually beautiful and distinct, so when someone sees one, they’ll know there’s an App Clip waiting for them. Each App Clip code encodes a URL and incorporates an NFC tag, so the code can be tapped on or scanned by the camera. Tools for creating these new codes will be available later this year.

>App Clips - Apple Developer https://developer.apple.com/app-clips/

ここで言及されている、App Clip Code を作成するためのコマンドラインツール、「App Clip Code Generator」の使い方を確認していきましょう。

# 目次
- [App Clip Code Generator をダウンロード & インストール](#app-clip-code-generator-%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89--%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [ターミナルで App Clip Code Generator を実行する](#%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB%E3%81%A7-app-clip-code-generator-%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B)
- [テンプレートを使って App Clip Code を生成する](#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-app-clip-code-%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B)
- [App Clip Code のテンプレートを確認する](#app-clip-code-%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B)
- [`TYPE` を指定する](#type-%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)
- [`LOGO_TYPE` を指定する](#logo_type-%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)
- [`COLOR` を指定する](#color-%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)
- [「Color combination not supported」と言われたとき、代わりの色の組み合わせを提案させる](#color-combination-not-supported%E3%81%A8%E8%A8%80%E3%82%8F%E3%82%8C%E3%81%9F%E3%81%A8%E3%81%8D%E4%BB%A3%E3%82%8F%E3%82%8A%E3%81%AE%E8%89%B2%E3%81%AE%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%82%92%E6%8F%90%E6%A1%88%E3%81%95%E3%81%9B%E3%82%8B)
- [付録 - App Clip Code Generator のテンプレート一覧（スクリーンショットつき）](#%E4%BB%98%E9%8C%B2---app-clip-code-generator-%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E4%B8%80%E8%A6%A7%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%E3%81%A4%E3%81%8D)
- [まとめ](#%E3%81%BE%E3%81%A8%E3%82%81)
  - [環境](#%E7%92%B0%E5%A2%83)

# App Clip Code Generator をダウンロード & インストール
まずは、`App_Clip_Code_Generator.dmg` を [Apple Developer の Download - More](https://developer.apple.com/download/more/?=App%20Clip) からダウンロードします。

`App_Clip_Code_Generator.dmg` がダウンロードできたら、`AppClipCodeGenerator.pkg` をインストーラで開いて、画面の指示に従います。

![スクリーンショット 2020-12-15 3.52.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/b4e53f06-cd78-4991-1625-50d01f405646.png)

デフォルトで `/Library/Developer/AppClipCodeGenerator/` に App Clip Code Generator がインストールされます。

# ターミナルで App Clip Code Generator を実行する
では `AppClipCodeGenerator -help` をターミナルで実行し、どのようなことができるかを見てみましょう。

![スクリーンショット 2020-12-15 3.55.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/d3051884-bcc1-76df-ee15-cc76076a8e42.png)

```
% AppClipCodeGenerator -help
AppClipCodeGenerator tool.

Usage:
    AppClipCodeGenerator generate --url URL --foreground COLOR --background COLOR [--type TYPE] [--logo LOGO_TYPE] --output FILE_PATH
    AppClipCodeGenerator generate --url URL --index INDEX [--type TYPE] [--logo LOGO_TYPE] --output FILE_PATH
    AppClipCodeGenerator templates
    AppClipCodeGenerator suggest --foreground COLOR --background COLOR
    AppClipCodeGenerator --version

Options:
    -u URL, --url URL               The URL to be used by the App Clip Code
    -f COLOR, --foreground COLOR    A color in its six-digit hexadecimal representation. For example, pass FFFFFF to use white as the App Clip Code’s foreground color
    -b COLOR, --background COLOR    A color in its six-digit hexadecimal representation. For example, pass 000000 to use black as the App Clip Code’s background color
    -i INDEX, --index INDEX         The index of the predefined template color to use. Use in place of foreground and background colors. For example, pass 1 to use the template color with index 1. To see the list of 'template color' pairs, use the templates command
    -o FILE_PATH, --output FILE_PATH  The location where you want the App Clip Code Generator app to save the generated App Clip Code’s SVG file
    -t TYPE, --type TYPE            Accepts: 'cam' (default), 'nfc'. Specify the App Clip Code’s type: use 'cam' for scan-only codes and 'nfc' for NFC-enabled codes
    -l LOGO_TYPE, --logo LOGO_TYPE  Accepts: 'none', 'badge' (default). To generate an App Clip Code without a badge, pass 'none'. To generate an App Clip Code inside a badge, pass 'badge'.
    -v, --version                   Displays the version of the tool
```

# テンプレートを使って App Clip Code を生成する
最も手早く App Clip Code を生成する一例は、以下のとおりです。

```
% AppClipCodeGenerator generate -u URL -i INDEX -o FILE_PATH
```

例えば、`https://japannfcreader.tret.jp` の App Clip Code を `code.svg` として生成するには、

```
% AppClipCodeGenerator generate -u https://japannfcreader.tret.jp -i 0 -o code.svg
```

となります。実行後、`App Clip Code successfully generated.` と表示され、`code.svg` が生成されていれば成功です。実際に生成できた App Clip Code はこちらです。`TYPE` と `LOGO_TYPE` を指定しなかったので、それぞれ `cam` と `badge` になっています。

![スクリーンショット 2020-12-15 4.01.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/a50651e4-bbe9-8938-cee4-4456e6a01825.png)

# App Clip Code のテンプレートを確認する

先ほど生成した App Clip Code ですが、オプションで `INDEX` を渡す必要がありました。この `INDEX` には予め定義された `foreground` の `COLOR` と `background` の `COLOR` の組み合わせを指定することになっています。この `INDEX` は `AppClipCodeGenerator templates` で確認することができます。

```
% AppClipCodeGenerator templates                                                  
Use any of the following predefined color pairs for your App Clip Code by using the `generate` command and passing a color pair’s index to the -i --index option. For example pass `-i 1` to use the color template with the index 1.
Index: 0 Foreground: FFFFFF Background: 000000
Index: 1 Foreground: 000000 Background: FFFFFF
Index: 2 Foreground: FFFFFF Background: 777777
Index: 3 Foreground: 777777 Background: FFFFFF
Index: 4 Foreground: FFFFFF Background: FF3B30
Index: 5 Foreground: FF3B30 Background: FFFFFF
Index: 6 Foreground: FFFFFF Background: EE7733
Index: 7 Foreground: EE7733 Background: FFFFFF
Index: 8 Foreground: FFFFFF Background: 33AA22
Index: 9 Foreground: 33AA22 Background: FFFFFF
Index: 10 Foreground: FFFFFF Background: 00A6A1
Index: 11 Foreground: 00A6A1 Background: FFFFFF
Index: 12 Foreground: FFFFFF Background: 007AFF
Index: 13 Foreground: 007AFF Background: FFFFFF
Index: 14 Foreground: FFFFFF Background: 5856D6
Index: 15 Foreground: 5856D6 Background: FFFFFF
Index: 16 Foreground: FFFFFF Background: CC73E1
Index: 17 Foreground: CC73E1 Background: FFFFFF
```

先ほどは

```
% AppClipCodeGenerator generate -u https://japannfcreader.tret.jp -i 0 -o code.svg
```

のように `INDEX` に `0` を指定したので、`Index: 0 Foreground: FFFFFF Background: 000000` の色の組み合わせが使用されました。例えば `INDEX` を `11` にすると、このような App Clip Code が生成されます。また、[このページの下部に、用意されている18種類のテンプレートを使って生成した App Clip Code のサンプルを掲載します。](#%E4%BB%98%E9%8C%B2---app-clip-code-generator-%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E4%B8%80%E8%A6%A7%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%E3%81%A4%E3%81%8D)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/4d220293-1fde-2f6d-052f-fe35f6928b37.png" width=50%>

# `TYPE` を指定する

`TYPE` には `cam` か `nfc` のどちらかを指定します。NFC に対応した App Clip Code の場合は `nfc` を指定し、そうでない場合は `cam` を指定します。未指定の場合はデフォルトで `cam` です。

|`TYPE`|生成結果|
|:-:|:-:|
|`cam`（デフォルト）|![スクリーンショット 2020-12-15 4.30.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/54df357c-e23a-ff97-a442-eac08154583b.png)|
|`nfc`|![スクリーンショット 2020-12-15 4.30.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/5e57467e-c821-2542-938f-841eb374cc31.png)|

# `LOGO_TYPE` を指定する

`LOGO_TYPE` には `none` か `badge` を指定できます。バッジなしの App Clip Code のみとしたい場合は `none` を指定します。未指定の場合はデフォルトで `badge` です。

|`LOGO_TYPE`|生成結果|
|:-:|:-:|
|`none`|![スクリーンショット 2020-12-15 4.36.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/a8d88c2c-e2e6-304c-9953-4008b5935594.png)|
|`badge`（デフォルト）|![スクリーンショット 2020-12-15 4.36.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/1b6ec845-ff86-dd64-de77-0b1a249ddf06.png)|

# `COLOR` を指定する
すでに18種類の `foreground`、`background` カラーの組み合わせが用意されていますが、それらを自分で設定したい場合には6桁の16進数表現で指定します。

例えば、`foreground` は `#FFFFFF`、`background` に Google+ のカラーコード `#DD4B39` を用いる場合は、

```
% AppClipCodeGenerator generate -u https://japannfcreader.tret.jp -f FFFFFF -b DD4B39 -o code_custom_google+color.svg
```

と実行し、生成結果はこのようになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/506a2c0d-d5ac-387d-8352-84e08535bddf.png" width=50%>

それでは、`foreground` はそのまま `#FFFFFF`、`background` には Qiita のヘッダーのカラーコード `#55C500` を指定してみましょう。すると…

```
% AppClipCodeGenerator generate -u https://japannfcreader.tret.jp -f FFFFFF -b 55C500 -o code_custom.svg       
Color combination not supported: The given color pair is invalid. To have the App Clip Code Generator suggest alternative color combinations, use the suggest command.
```

「その色の組み合わせはダメだよ」と怒られてしまいました。しかし、App Clip Code Generator は代替の色の組み合わせを提案してくれるようです。

# 「Color combination not supported」と言われたとき、代わりの色の組み合わせを提案させる

前セクションで、`foreground` を `#FFFFFF`、`background` には Qiita のヘッダーのカラーコード `#55C500` を指定して App Clip Code を生成しようとしたところ、「Color combination not supported」と怒られてしまいました。そのようなときは `AppClipCodeGenerator suggest` で代わりの色の組み合わせを提案してもらいましょう。

```
% AppClipCodeGenerator suggest -f FFFFFF -b 55C500           
Foreground: 000000 Background: 55C500
Foreground: 774466 Background: 55C500
Foreground: 990022 Background: 55C500
Foreground: 111111 Background: 55C500
Foreground: 443344 Background: 55C500
Foreground: 881100 Background: 55C500
Foreground: 222222 Background: 55C500
```

提案された色の組み合わせの中で、私は `foreground` を `#222222`、`background` を `#55C500` とするものを気に入りました。こちらの色の組み合わせを指定し直して、生成してみましょう。

```
% AppClipCodeGenerator generate -u https://japannfcreader.tret.jp -f 222222 -b 55C500 -o code_custom_qiitacolor.svg
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/0ca18ce2-b9b7-6772-46f8-a0f3581244d8.png" width=50%>

# 付録 - App Clip Code Generator のテンプレート一覧（スクリーンショットつき）

|`INDEX`|`foreground`|`background`|生成結果|
|:-:|:-:|:-:|:-:|
|`0`|`#FFFFFF`|`#000000`|![スクリーンショット 2020-12-15 4.09.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/7a2a9733-ffaf-af7f-2bce-76b51abc5328.png)|
|`1`|`#000000`|`#FFFFFF`|![スクリーンショット 2020-12-15 4.09.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/771d210a-6120-734d-9f48-4942ce129e06.png)|
|`2`|`#FFFFFF`|`#777777`|![スクリーンショット 2020-12-15 4.09.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/fd016eec-3bd4-bd28-9de8-394d58f8c520.png)|
|`3`|`#777777`|`#FFFFFF`|![スクリーンショット 2020-12-15 4.09.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/2474f31a-bc70-4670-66f2-93a31f1bc52f.png)|
|`4`|`#FFFFFF`|`#FF3B30`|![スクリーンショット 2020-12-15 4.09.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/86ad3def-06fb-e393-066b-946cd6be6e7b.png)|
|`5`|`#FF3B30`|`#FFFFFF`|![スクリーンショット 2020-12-15 4.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/623ec06a-a8d8-26a1-89a3-bd46f29cbab0.png)|
|`6`|`#FFFFFF`|`#EE7733`|![スクリーンショット 2020-12-15 4.09.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/52e90b3a-25a0-7f7b-1dd1-35be83582cb9.png)|
|`7`|`#EE7733`|`#FFFFFF`|![スクリーンショット 2020-12-15 4.09.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/d794aa53-6889-a989-8bd2-7ac10655ba0b.png)|
|`8`|`#FFFFFF`|`#33AA22`|![スクリーンショット 2020-12-15 4.09.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/a817e135-923f-1606-3af3-d4fa872f22d9.png)|
|`9`|`#33AA22`|`#FFFFFF`|![スクリーンショット 2020-12-15 4.09.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/92b4b9b3-8e1d-63cc-9246-b2fb7747eef9.png)|
|`10`|`#FFFFFF`|`#00A6A1`|![スクリーンショット 2020-12-15 4.10.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/98b8a5e4-b8ae-194b-4951-43d0ac66cd10.png)|
|`11`|`#00A6A1`|`#FFFFFF`|![スクリーンショット 2020-12-15 4.10.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/4d220293-1fde-2f6d-052f-fe35f6928b37.png)|
|`12`|`#FFFFFF`|`#007AFF`|![スクリーンショット 2020-12-15 4.10.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/4c3b0043-f1d1-301a-3e69-b98eec199557.png)|
|`13`|`#007AFF`|`#FFFFFF`|![スクリーンショット 2020-12-15 4.10.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/e5fccc86-7494-4646-538c-479e361d5e32.png)|
|`14`|`#FFFFFF`|`#5856D6`|![スクリーンショット 2020-12-15 4.10.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/933f8e21-a8c2-2043-933e-5ced561ef70f.png)|
|`15`|`#5856D6`|`#FFFFFF`|![スクリーンショット 2020-12-15 4.10.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/798f095e-ecff-0f29-7968-f921d73c3426.png)|
|`16`|`#FFFFFF`|`#CC73E1`|![スクリーンショット 2020-12-15 4.10.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/3c167593-b74d-8502-d486-47a09c1e33a3.png)|
|`17`|`#CC73E1`|`#FFFFFF`|![スクリーンショット 2020-12-15 4.10.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/e98ee160-8347-172d-6e61-3e29650f1a4f.png)|

# まとめ
- App Clip Code Generator はローカルの Mac 上で簡単に App Clip Code を生成できるコマンドラインツールです。
- あらかじめ色の組み合わせが用意されており、もちろん、好きな色の組み合わせを指定することもできます。
- App Clip Code の読みとりに問題が発生しそうな色の組み合わせが指定された場合、コードの生成が拒否されます。
- その場合でも代わりの色の組み合わせの提案をしてもらうことができます。

それでは、ハッピー App Clip ライフを。

## 環境
この記事は以下の環境で動作を確認しました。

```
% AppClipCodeGenerator -v
Version: 1.3.6
```

- macOS Big Sur バージョン 11.0.1（20B29）
- MacBook Pro (13-inch, M1, 2020)
- Darwin Kernel Version 20.1.0: Sat Oct 31 00:07:10 PDT 2020; root:xnu-7195.50.7~2/RELEASE_ARM64_T8101 arm64
- Darwin Kernel Version 20.1.0: Sat Oct 31 00:07:10 PDT 2020; root:xnu-7195.50.7~2/RELEASE_ARM64_T8101 x86_64

※ `arm64` と、Rosetta を使用した `x86_64` で動作を確認しています。