【 AppClip 】 iOS14.1からの新機能 AppClip を実装する【前編】

2021/02/09

技術開発ソフトウェア開発

iOS エンジニア伊藤

こんにちは、 iOS エンジニアの伊藤です。
iOS 14.1 から利用可能な iPhone の新機能【 AppClip 】について実装してみたので、躓いたポイントや注意点を共有しようと思います！

AppClip とは

上の画像のような、 Apple が提供している AppClipCode もしくは、 QRコードをスキャンすることで、 AppClip が起動します。
AppClip 化ができるアプリは 10MB までとなっていて低容量な為、全ての機能を搭載することができませんが、インストールまでの時間が数秒と短いです。

その為、AppClip を利用することで、ユーザーはすぐにアプリの重要な機能を体験することができるようになります。

今回はその実装方法や設定方法について記事を書いていきます。

実装編

検証環境

Xcode 12.4 (12D4e)
macOS Catalina 10.15.7

※注意点

AppClip を実際に動作させるには、 Apple Developer Program に加入している必要があります。
ただし、 AppClip をアプリとして、ローカル環境で動作させるまでは問題はありません。

AppClip の作成手順

前回の記事で作成した、 SwiftUI プロジェクトに AppClipの機能を追加していきたいと思います。
完成したソースコードはこちらにあります。（Provisioning Profile は各ユーザの物が必要となります。）

まずはじめに、ローカル環境での AppClip 起動確認を行うために、 iOS の端末側にて Local Expericence の設定が必要になります。

手順として
・ AppClip をプロジェクトに追加する。
・ iOS端末に AppClip アプリをインストールする。（ローカル環境の場合、インストールされたアプリが起動します。）
・ iOS端末側で Local Experiences を設定する。

AppleDocumentation : onContinueUserActivity(_:perform:) を使って起動時の分岐処理なども、ローカルで確認します。

AppClip をプロジェクトに追加

それでは、プロジェクトに AppClip の追加を行っていきます。

Xcode から、 File -> New -> Target -> App Clip を選択し、AppClip プロジェクトを追加します。
そして、メインプロジェクトの TARGETS の Embedded Content に AppClip の Target が追加されていることを確認して下さい。

通常であれば、 AppClip を作り込んでいくところですが、今回はサンプルなのでメインプロジェクトのファイルをそのまま使用することとします。

AppClip-Sample-Project-Clip の【 Info.plist 】, 【 AppClip_Sample_Project_Clip.entitlements 】, 【 Preview Content 】を残し、全て削除して下さい。（ Move to trash ）

続いて、メインプロジェクト内の　【 Model 】, 【 ViewModel 】, 【 View 】, 【 Ressouce 】内の各ファイルから Target Membership を AppClip プロジェクトに追加して下さい。

この時点で、 Scheme から AppClip を Run すると、アプリが通常起動するかと思います。

App Library の Webclips の欄に AppClip アイコンがあることが確認できれば、正常にビルドができていることになります。

Local Experiences を設定する

それでは実際にカメラから AppClip アプリを起動してみたいと思います。
テストを行うためには、 _XCAppClipURL の設定と、 Local Experience に AppClip 情報の登録の設定が必要となりますので行っていきます。

まずは、 Xcode から Edit Scheme -> Run -> Arguments -> Environment Variable -> _XCAppClipURL のチェックボックスを ON にします。
そして URL をここでは、『 https://braveridge.com/appclip 』と設定しておきます。(テストなのでお好きな URL で大丈夫です。)

この状態で一度、開発端末に AppClip ビルドを Run しておいて下さい。

開発端末側の設定を行っていきます。

はじめに Mac と iPhone をコードで接続します。
設定 -> デベロッパ -> Local Experiences -> Register Local Experience ... を選択します。

AppClip が起動された時、表示するメッセージ部分の設定を行います。

- URL PREFIX
Xcode で設定した、 _XCAppClipURL を入力します。
- BUNDLE ID
  AppClip の Bundle Identifier を入力します。
-  APPCLIP CARD : Title
AppClip Card の表示名を入力します。設定可能文字数は30文字ですが、全て全角文字で20文字以上だと、それ以降は省略されてしまいます。
-  APPCLIP CARD : SubTitle
  AppClip Card の説明を入力します。設定可能文字数は56文字ですが、全て全角文字28文字以上だと、それ以降は省略されてしまいます。
-  APPCLIP CARD : Action
  AppClip を起動した時のアプリの動作を選択します。
-  APPCLIP CARD : ChoosePhoto
画像サイズは 1800 × 1200 ( 3 : 2 ) です。ただし端末によって、画像上部の角丸サイズが変わります。