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

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 を実行する
• テンプレートを使って App Clip Code を生成する
• App Clip Code のテンプレートを確認する
• TYPE を指定する
• LOGO_TYPE を指定する
• COLOR を指定する
• 「Color combination not supported」と言われたとき、代わりの色の組み合わせを提案させる
• 付録 - App Clip Code Generator のテンプレート一覧（スクリーンショットつき）
• まとめ
  • 環境

App Clip Code Generator をダウンロード & インストール

まずは、App_Clip_Code_Generator.dmg を Apple Developer の Download - More からダウンロードします。

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

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

ターミナルで App Clip Code Generator を実行する

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

% 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 になっています。

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 のサンプルを掲載します。

TYPE を指定する

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

TYPE	生成結果
cam（デフォルト）
nfc

LOGO_TYPE を指定する

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

LOGO_TYPE	生成結果
none
badge（デフォルト）

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

と実行し、生成結果はこのようになります。

それでは、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

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

INDEX	foreground	background	生成結果
0	#FFFFFF	#000000
1	#000000	#FFFFFF
2	#FFFFFF	#777777
3	#777777	#FFFFFF
4	#FFFFFF	#FF3B30
5	#FF3B30	#FFFFFF
6	#FFFFFF	#EE7733
7	#EE7733	#FFFFFF
8	#FFFFFF	#33AA22
9	#33AA22	#FFFFFF
10	#FFFFFF	#00A6A1
11	#00A6A1	#FFFFFF
12	#FFFFFF	#007AFF
13	#007AFF	#FFFFFF
14	#FFFFFF	#5856D6
15	#5856D6	#FFFFFF
16	#FFFFFF	#CC73E1
17	#CC73E1	#FFFFFF

まとめ

• 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 で動作を確認しています。