こんにちは、 iOS エンジニアの伊藤です。
お待たせしました。 【 AppClip 】 を実際にインストールできるなるまでを記事にしたいと思います!

今回はサンプルプロジェクトはありませんので、適宜自分のプロジェクトに読み替えていただき、実装のほどよろしくお願いします!


検証環境

Xcode 12.4 (12D4e)
macOS Catalina 10.15.7

設定項目一覧

AppClip を体験するには、以下の手順が必要になってます!

◯ プロジェクトに AppClip Target を実装する。 <- 前編を参照してください。

◯ Apple Developer での設定
 - AppID, Provisioning File を作成。

◯ プロジェクトでの設定
 - Associated Domains の設定。

◯ サーバに設置
 - 設定するドメインから見つかる場所に apple-app-site-association を設置。

◯ AppStore Connect で設定
 - AppClipがビルドに含まれているか確認。
 - ドメインが有効になっているか確認。
 - 高度な編集をから、AppClip Card の設定を行う。
 - AppClip Codeを出力する。

◯ おまけ
 - NFCタグで起動。


Apple Developer での設定

AppClip はアプリとして、 Provisioning File が必要になります。 

その為、一つのアプリの中で通常の AppStore 用と AppClip 用の AppID, Procisioning File があり、2つ存在することになります。

また、 AppID を作成する時に、 Associated Domains にチェックが必須です。 また必要に応じて AppGroup にもチェックを入れます。
 


プロジェクトの設定

AppClip が URL から起動する為に、アクセスを許可するドメインを指定します。 

・MainApp Target - appclip:{許可するドメイン}, applinks:{許可するドメイン} を設定します。
・AppClip Target - appclip:{許可するドメイン} を設定します

許可したいサイトが  『https://www.braveridge.com』 であれば、
 - appclip:www.braveridge.com
 - applinks:www.braveridge.com 
と入力してください。
 

ここで指定したドメインは、 AppStore Connect の管理画面にて有効であるか自動で確認されます。

有効にする為にはサーバに、 apple-app-site-association を設置する必要があります。


apple-app-site-association の設置

apple-app-site-associationは、WEBサイトと iOSアプリを紐付ける設定ファイルです。

今回は AppClip を起動できる様にする為、 "appclips" の項目を設定します。
 

ファイルは、 { ドメイン }/.well-known/apple-app-site-association  となる様に設置し、 Apple から観覧できる状態にしておく必要があります。

(ダウンロードできる様にする必要はなさそうです。)
 


AppStore Connect での設定

AppClip を体験するまでもう少しです!

プロジェクトを AppStore Connect へアップロードします。

この時、 AppClip の設定がしっかりと有効になっていれば、 ビルドステータスの種類の項目に App と AppClip と表示されているはずです。

※もし有効となっていない場合は、 Main App Target -> Build Phases の Embed AppClip が指定されていない可能性があります。指定し直しましょう。

続きまして、 AppStore タブのビルドに、 AppClip が含まれたビルドを設定してください。

AppClip が 『 はい 』 となっていて、ドメインステータスが有効と表示されているはずです。

※ ドメインが有効となっていない場合は、 apple-app-site-association の設定ファイルの記述が間違っている。又は外部から観覧が許可されていない状態であることが考えられます。
※ そもそも出ていないという場合は、プロジェクトの Associate Domains の設定を忘れている可能性があります。

いよいよ、表示画面の設定です。

表示画像、説明文の設定は、全て AppStore Connect 上で行います。

AppStore タブの AppClip から 『 高度な体験を編集 』 を選択します。

続いて 『 追加 』 を選択し、 AppClip Card を作成していきます。

URL の設定は、有効なドメイン+ディレクトリで指定できます。
例えば、有効なドメインに 『 appclip:braveridge.com 』 を設定していれば、 『 https://braveridge.com/hogehoge/1 』  の様に指定すれば、 AppClip は起動できます。

また、設定したURLの下部に AppClip Code と互換性があります。 と表示されれば、 2020年12月から使えるようになっている AppClip Codeが利用できます。

ちなみに互換性がなくても、従来のQRコードを使用すれば AppClip は使用できます。

AppClip Card の設定を行っていきます。

設定する部分は 前回の記事の Local Experience で設定した部分と同様となります。

プレビューがありますので、表示を確認しながら設定することができます。

最後にアプリが何を宣伝するかを指定します。

ここで指定したものが、 AppClip 時のアイコンになります。

アプリ内の一部機能のみを宣伝するという場合以外は、自身のアプリを宣伝するで良いと思います。

ここまで行い、 Apple に送信することができたら、 AppClip の設定は完了です。
 


AppClip Code を作成する

AppClip Code を作成する方法は 2つあります。

App Code Generator を利用する。
・ 高度な体験を編集の中から AppClip コードを取得する を選択し、作成する。

App Code Generator を利用して作成する方法は、詳しく説明されている記事がありますので、ぜひ参照してください。
外部リンク Qiita : App Clip Code Generator の使い方(テンプレート一覧つき)

こちらで作成する場合も、互換性がない URL は文字列数オーバーという形で作成できません。。。 (合計 45文字くらいまでなら作成できる様です。)

この記事では、高度な体験を編集 から作成していきます。

あとはサイトに表示されるままに、設定していきます。
 ・ AppClip Code の配色
 ・ AppClip Code のタイプ 
 ・ AppClip Code のロゴの有無

設定が終了すると、作成された AppClip Code が SVG ファイルでダウンロードできる様になっています。

アプリの審査が通った後、無事 AppClip が起動することが確認できるはずです。やったね!


おまけ

NFCタグから AppClip の起動を行っています。

画面OFFの状態では起動しませんでしたが、とてもいいですね。未来感ありますね。

ショートカットのオートメーション機能を利用すれば同じようなことは以前からできましたが、ユーザーが難しい設定をすることなくできるというのはなかなかのいいメリットなのではないのでしょうか。

AppStore からインストールしてあると、AppClip Card は表示されますが、起動するアプリは本体側になっています。

iOS13 以降から NFCタグは対応しているのはずなのですが、一部対応していない端末もあるようです。

※ ショートカットアプリのオートメーション作成から、コマンドの中に NFC の項目がない端末は読み取れないようです。
詳しい端末がわかりましたら、追記していきたいと思います。( 7plus は対応していませんでした。。。)
 


さいごに

いかがでしたでしょうか、流れで見るとそんなに難しい箇所は無かったのではないでしょうか。
この記事からちょっとでも実装してくれる人が増えると嬉しいですね。

個人としてはもっと AppClip を使ってみたいので、身近なアプリに機能追加されていくことを願っております・・・笑

これからも新しい機能を次々実装していくであろう Apple に必死についていきたいと思います。 それではまた。ノシ


SNS SHARE