こんにちは、 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 ) です。 ただし端末によって、画像上部の角丸サイズが変わります。

QR コードリーダーを起動し、 _XCAppClipURL に設定した URL から作成した QR コードを読み込むと、無事 AppClip が動作することが確認できると思います。

さいごに

いかがでしたでしょうか、ここまでで AppClip をローカルで動作確認することはできました。

次の記事では、実際に本番環境で動作する AppClip について画像を交えながら解説していきたいと思います。

ほんと新しいことできるって楽しいですよね。。。
 


SNS SHARE