LoginSignup
28
16

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-14

AppClipCodes.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.dmgApple Developer の Download - More からダウンロードします。

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

スクリーンショット 2020-12-15 3.52.27.png

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

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

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

スクリーンショット 2020-12-15 3.55.14.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 はこちらです。TYPELOGO_TYPE を指定しなかったので、それぞれ cambadge になっています。

スクリーンショット 2020-12-15 4.01.12.png

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

先ほど生成した App Clip Code ですが、オプションで INDEX を渡す必要がありました。この INDEX には予め定義された foregroundCOLORbackgroundCOLOR の組み合わせを指定することになっています。この INDEXAppClipCodeGenerator 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

のように INDEX0 を指定したので、Index: 0 Foreground: FFFFFF Background: 000000 の色の組み合わせが使用されました。例えば INDEX11 にすると、このような App Clip Code が生成されます。また、このページの下部に、用意されている18種類のテンプレートを使って生成した App Clip Code のサンプルを掲載します。

TYPE を指定する

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

TYPE 生成結果
cam(デフォルト) スクリーンショット 2020-12-15 4.30.41.png
nfc スクリーンショット 2020-12-15 4.30.47.png

LOGO_TYPE を指定する

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

LOGO_TYPE 生成結果
none スクリーンショット 2020-12-15 4.36.10.png
badge(デフォルト) スクリーンショット 2020-12-15 4.36.16.png

COLOR を指定する

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

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

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

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

それでは、foreground はそのまま #FFFFFFbackground には 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#FFFFFFbackground には 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#222222background#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 スクリーンショット 2020-12-15 4.09.13.png
1 #000000 #FFFFFF スクリーンショット 2020-12-15 4.09.20.png
2 #FFFFFF #777777 スクリーンショット 2020-12-15 4.09.26.png
3 #777777 #FFFFFF スクリーンショット 2020-12-15 4.09.30.png
4 #FFFFFF #FF3B30 スクリーンショット 2020-12-15 4.09.35.png
5 #FF3B30 #FFFFFF スクリーンショット 2020-12-15 4.09.40.png
6 #FFFFFF #EE7733 スクリーンショット 2020-12-15 4.09.45.png
7 #EE7733 #FFFFFF スクリーンショット 2020-12-15 4.09.50.png
8 #FFFFFF #33AA22 スクリーンショット 2020-12-15 4.09.55.png
9 #33AA22 #FFFFFF スクリーンショット 2020-12-15 4.09.59.png
10 #FFFFFF #00A6A1 スクリーンショット 2020-12-15 4.10.03.png
11 #00A6A1 #FFFFFF スクリーンショット 2020-12-15 4.10.08.png
12 #FFFFFF #007AFF スクリーンショット 2020-12-15 4.10.13.png
13 #007AFF #FFFFFF スクリーンショット 2020-12-15 4.10.18.png
14 #FFFFFF #5856D6 スクリーンショット 2020-12-15 4.10.21.png
15 #5856D6 #FFFFFF スクリーンショット 2020-12-15 4.10.25.png
16 #FFFFFF #CC73E1 スクリーンショット 2020-12-15 4.10.29.png
17 #CC73E1 #FFFFFF スクリーンショット 2020-12-15 4.10.36.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 で動作を確認しています。

28
16
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
16