君はAppClipを見たか

iOS14の新機能、AppClip。なんかあのにゅっとでてくるやつです。対応しているアプリをあまり見かけないので実装してみました。是非、実際の端末で動かしてみてください。

実装

どうやって実装するのかの情報はWWDCでもでていましたが、どんなタイミングでどう動くのかは、実際に動くアプリで試してみたいですよね。

動作確認用に使っている個人アプリで試してみました。

f:id:toyship:20201010232123j:plain — AppClip

起動トリガー

WWDCで説明されていた起動トリガーはこの7種類。

URL
Smart App Banner (App Clip用)
（普通の）QRコード
（Apple独自の）QRコード
NFC
Map
場所

まずはURLから……といいたいところなのですが、実は私の手元では、AppClipが（安定して）起動していないんですよね。ちょっとほかの起動トリガーから見てみましょう。

Smart App Banner。下のURLをひらいて、ページの右上の「開く」をクリックしてください。下からにゅっとAppClipがでてきますね。

https://tachibanakaoru.github.io/toyjigsaw/

f:id:toyship:20201010234952p:plain — Smart App Banner

次は普通のQRコード。こちらのコードをカメラで読み込むと、画面上に「開く」メニューが表示され、そちらからAppClipカードが表示できます。

f:id:toyship:20201010235436p:plain — QRコードその１

f:id:toyship:20201012114802p:plain — QRコードその２

Apple独自のQRコードについては、今年後半にリリースされるということなので、まだ確認ができません。

そして、NFC。サンワサプライのNFCタグにこちら↓のURLを書き込んで、iPhoneを上にのせてみたところ、AppClipがちゃんと表示されました。（ただし、iOS14.2では表示されるんですが、iOS14.0.1では表示されないようです。）

https://tachibanakaoru.github.io/toyjigsaw/puzzle4x4/1

あとは、Mapと場所のトリガーですが、こちらについてはまだ確認中。（実装してみたんですが、うまく動かないので、動いたらまた記事を書きます。）

Default App ClipとAdvanced App Clip

WWDCでも触れられていましたが、App Clipには２種類あります。

Default App ClipとAdvanced App Clipです。この２種類の使い分けは、あまり大きく触れられていませんでした。

f:id:toyship:20201010233403p:plain — Default App Clip and Advanced App Clip

Default App ClipとAdvanced App Clipは、見た目は全く同じです。 App Clipを実装する場合、Default App Clipは必須ですが、Advanced App Clipはオプショナルです。

Default App Clipは、一つだけですが、Advanced App Clipはいくつでも実装できます。基本的には、AppClipのルート画面を表示するのがDefault App Clip、条件に応じた画面を表示するのがAdvanced App Clipです。

（Default App ClipもAdvanced App Clipも固有のURLを持ち、実装面からは違いはありません。）

今回の実装では、このURLをDefault App Clipとして実装し、ここから開いた時にはAppClipのルート画面を見せるようにしています。

https://tachibanakaoru.github.io/toyjigsaw/

そして、Advanced App ClipとしてはこのURLを実装し、個別のパズル画面が表示されるようになっています。

また、起動トリガーによって、使えるApp Clipの種類が違います。

Smart App BannerはDefault App Clipだけ、QRコードとNFCはAdvanced App Clipだけでしか使えません。

アプリ本体とAppClipのインストール状態で違う動作

App Clipは、アプリ本体のインストール状態、AppClipのインストール状態でトリガーされた時の動作が異なります。

下記の３つのインストール状態でみてみましょう。*1（アプリ本体がインストールされるとAppClipは削除されるので、「App本体あし、App Clipあり」の状態はありません。）

App本体なし、App Clipなし
App本体なし、App Clipあり
App本体あり、App Clipなし

App本体なし、App Clipなし

Smart App Banner から起動した場合　→　AppClipカードが表示され、そこからApp Clipが起動
NFCタグ　→　AppClipカードが表示され、そこからApp Clipが起動
QRコード　→　AppClipカードが表示され、そこからApp Clipが起動

App本体なし、AppClipあり

Smart App Banner から起動した場合　→　AppClipカードは表示されず、App Clipが直接起動
NFCタグ　→　AppClipカードが表示され、そこからApp Clipが起動
QRコード　→　AppClipカードが表示され、そこからApp Clipが起動

App本体あり、AppClipなし

Smart App Banner から起動した場合　→　AppClipカードは表示されず、App本体が直接起動
NFCタグ　→　AppClipカードが表示され、そこからApp本体が起動
QRコード　→　AppClipカードが表示され、そこからApp本体が起動

開発中のApp Clipのテスト

App Clipの起動は、Test Flightで確認することができます。

ただし、Test Flightからの起動ではApp Clipカードは表示されません。（App Clipが直接起動されます。）

開発中にApp Clipカードを表示したい場合には、設定画面の Developer の APP CLIPS TESTING にあるLocal Experiencesに画像・テキスト情報を設定すると、App Clipカードが表示されるようになっています。

App Clipの申請

App Clipの情報の申請は、基本的にはアプリの審査時の情報入力と同時に行います。

ただ、現時点では、アプリをリリースしたあとでもAdvanced App Clipの情報を追加・編集することはできるようになっています。

entitlement

App Clipの実装についてはAppleの公式情報も充実しているので、この記事では触れませんが、ハマりどころの多い設定ファイル系だけ置いておきます。

親アプリのBundle Identifierはorg.toyship.toyjigsaw、App Clipはorg.toyship.toyjigsaw.clipです。

親アプリのentitlement fileはこちら。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.developer.associated-domains</key>
    <array>
        <string>applinks:tachibanakaoru.github.io</string>
        <string>appclips:tachibanakaoru.github.io</string>
    </array>
</dict>
</plist>

App Clipのentitlement fileはこちら。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.developer.associated-domains</key>
    <array>
        <string>appclips:tachibanakaoru.github.io</string>
        <string>applinks:tachibanakaoru.github.io</string>
    </array>
    <key>com.apple.developer.parent-application-identifiers</key>
    <array>
        <string>$(AppIdentifierPrefix)org.toyship.toyjigsaw</string>
    </array>
</dict>
</plist>

apple-app-site-associationはこんな設定としています。

https://tachibanakaoru.github.io/apple-app-site-association