App Clipの完全ガイド：App Clipの作成、Safariのバナーに追加したら、QRコードを生成し、情報を保存して位置情報と呼び出しURLを確認し、そして主要アプリを推奨します。

この記事の冒頭では、App Clip 作成のプロセスについて説明します。

また、AppClipに関する高度な話題についても一部説明します。

- ユーザーがアプリケーション全体をインストールすることにした場合、アクセスのためApp Clipの情報を保存して下さい
- ユーザーの位置を確認する
- 通知の予定を入れる
- ユーザーにメインアプリケーションを勧める
- App Clipを起動させたURLを読み取る

# App Clipがどんなものか見てみましょう

この記事を書く前に、私が発表したプログラミング記事のリストを提示するApp Clipを作成しました。iPhoneでこのQRコードをスキャンすると、それを見ることができます。

まず、あなたのiPhoneのコントロール センターからQRコード スキャナーを開きます。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/2d03935e-3747-56e9-6cbb-8331e6898b35.jpeg">

そして、このコードをスキャンします

<img width="150" src="https://cdn.mszmagic.com/static-web-content/AppClipImage_small.png">

# App Clipの作成

あなたの既存のiOSアプリケーションにApp Clipを加えることができます。そのプロセスは、主にApp Clipプログラムの作成およびデザイン、そしてウェブサイト関連付けの設定です。

## 使用可能なフレームワーク

一部のフレームワークはApp Clipのターゲットとしてご使用いただけません。こちらが使用不可のフレームワークのリストとなります：

`Assets Library, Background Tasks, CallKit, CareKit, CloudKit, Contacts, Contacts UI, Core Motion, File Provider, File Provider UI, HealthKit, HomeKit, Media Player, Messages, Message UI, PhotoKit, ResearchKit, SensorKit, Speech.`

[Appleのドキュメンテーション記事はこちらをクリックしてご覧ください](https://developer.apple.com/documentation/app_clips/choosing_the_right_functionality_for_your_app_clip)

ユーザー情報を保存するには、CloudKitが利用できないため、 `Sign In with Apple` を利用してユーザーによるアカウントの登録/サインインを可能にすることができます。あるいは、独自の認証システムを使うこともできます。

また、App Clipのプログラムのファイルサイズは10MB未満でなければなりません。

## ステップ 1. App Clipのターゲットを作成する

トップにあるファイル (File) メニューをクリック、次にニュー (New) オプション、ターゲット (Target) をクリックして下さい。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/c8bc0b57-ba24-98a6-3bf3-304e240fb992.png">

App Clipを作成するには、ただ新しい `App Clip` のターゲットをアプリに追加するだけです。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/400185e1-c499-4c7e-27bb-8f6eec9c8d6e.png">

さて、Xcodeの左側に、新しくフォルダーが作成されたのがおわかりになるでしょう。これで、App Clipの開発が始められるようになりました。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/ff2fc557-db83-a90a-0ff1-3e6736708ba6.png">

## ステップ 2. 関連するドメインの追加

この時点であなたのApp ClipとメインのiOSアプリケーション両方にドメイン名を追加する必要があります。

関連するドメインを追加するには、 `Signing & Capabilities` タブに移動して、 `Associated Domain` の追加をしてください。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/9e5eadfc-317e-323e-af53-51626dda14ae.png">

アプリクリップには2つのエントリを加える必要があります:

```
appclips:[あなたのドメイン名]
applinks:[あなたのドメイン名]
```

また、主なiOSアプリには1つのエントリを加えます:

```
appclips:[あなたのドメイン名]
```

## ステップ 3. `apple-app-site-association` ファイルを設定する

ここで、ウェブサーバーの `https://[あなたのドメイン名]/.well-known/apple-app-site-association` パスに特別なファイルを設ける必要があります。

このファイルには以下のものを入れます:

```
{
    "appclips": {
        "apps": [ "[開発者チームID].[iOSアプリバンドルID].Clip", "[開発者チームID].[iOSアプリバンドルID]" ]
    }
}
```

## ステップ 4. App Storeを設定する

App Clipコードと共にソフトウェアビルドをApp Storeへアップロードする必要があります。ビルドの処理が終われば、App Storeページ上でApp Clipに関する情報を編集することができます。

ここでApp Clip用の画像をアップロードし、説明文のテキストを提供する必要があります。

![スクリーンショット 0002-10-27 16.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/d7349770-3251-ccfb-b189-1f9f0ec0483a.png)

App Clipをマップロケーションと関連付けたい場合、またはNFCタグをスキャンすることにより起動したい場合は、 `高度な体験を編集` ボタンをクリックして詳細なApp Clipエントリーを作成する必要があります。

これでドメインが検証済みかどうか確認できるはずです。Appleのサーバーがステータスを再読み込みするのに2～3時間待つ必要があるかもしれません。検証が完了すれば、ビルドセクションに緑のドットが表示されます。

![スクリーンショット 0002-10-27 16.11.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/eeb12ed3-2d1a-6654-172d-c97ff2b698df.png)

## ステップ 5. ウェブサイトのバナーを追加

ユーザーにApp Clipを開いてもらえるよう、ウェブサイトの最上部にバナーを表示されることが可能です。

![IMG_B96FE7DCA246-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/557057d0-8ac2-cba5-dd1d-c6b90abe9662.jpeg)

このバナーはHTMLコードにタグを加えるだけでウェブサイトのアドレスへと追加できます。

```html
<meta name="apple-itunes-app" content="app-id=[アプリのApple ID], app-clip-bundle-id=[iOSアプリバンドルID (bundle ID)].Clip">
```

### App Clip用のQRコードの作成

treastrainさんのQiita記事：App Clip Code Generator の使い方（テンプレート📸一覧つき）https://qiita.com/treastrain/items/1e4d29bea704be99f7cf

https://developer.apple.com/documentation/app_clips/creating_app_clip_codes

# 今後アクセスするために情報を保存

アプリグループの作成ならびに `UserDefaults` を使用してお使いのApp Clipアプリケーションに情報を保存していただけます。ユーザーが完全版のiOSアプリケーションをインストールされる場合でも、アプリグループに保存したこれらの情報にアクセスできるようになっています。

まず、メインのiOSアプリでアプリグループ (App Group) を作成し、次にお使いのApp Clipアプリケーション用に作成したそのアプリグループを選択してください。

![スクリーンショット 0002-10-27 17.45.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/b748f6e0-1e31-14e3-92a0-6a209377feca.png)

これで、今作成したアプリグループ名 (App Group) で `UserDefaults` アイテムを作成できます。


```swift
if let sharedUserDefaults = UserDefaults(suiteName: "group.com.shunzhema.sudoEncrypt") {
    sharedUserDefaults.set(...)
    sharedUserDefaults.string(...)
}
```

# ユーザーの位置を認証する

ユーザーがスキャンしたNFCタグにGPS座標を含めることができます。それから、ユーザーが任意の位置でタグをスキャンしたかどうか確認することができます。

まず、アプリに位置確認機能が必要であることを示す必要があります。

アプリクリップのInfo.plistファイルを開き、以下のプロパティを `YES` に設定します。

![スクリーンショット 0002-10-27 18.00.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/d8165b09-a001-92e5-7396-a984751dbb23.png)

そして、以下のコードを入力してユーザーの位置情報を確認してください。

```swift
import SwiftUI
import CoreLocation
import AppClip

func getRegionFromURL(_ openURL: URL) -> CLRegion {
    let region = CLRegion()
    return region
}

func checkLocation(activity: NSUserActivity) {
    guard activity.activityType == NSUserActivityTypeBrowsingWeb else { return }
    guard let payload = activity.appClipActivationPayload else { return }
    // URLの内容に基づき地域情報を作成することができます。
    // 例えば、URLに座標を埋め込むことができます。
    guard let openURL = activity.webpageURL else { return }
    //
    payload.confirmAcquired(in: getRegionFromURL(openURL)) { (withinRegion, error) in
        if withinRegion {
            // ユーザーは地域内にいます
        } else {
            // ユーザーは地域外にいます
        }
    }
}

@main
struct TestAppClipApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) { (activity) in
                    checkLocation(activity: activity)
                }
        }
    }
}
```

# ローカル通知をスケジュールする

App Clipではアプリ起動から8時間以内の通知送付をスケジュールできます。

最初に、アプリがユーザー通知を送る必要があることを示さなければなりません。

アプリクリップのInfo.plistファイルを開き、以下のプロパティを `YES` に設定します。

![スクリーンショット 0002-10-27 18.02.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/b67a7a7f-7628-d12e-38c6-d618e08b47ce.png)

それから、以下のコードを使って通知スケジュールを設定してください。

```swift
let center = UNUserNotificationCenter.current()
center.getNotificationSettings { (settings) in
    if settings.authorizationStatus == .ephemeral {
        let content = UNMutableNotificationContent()
        content.title = "Notification"
        content.body = "This is a notification."
        var dateComponents = DateComponents()
        dateComponents.calendar = .current
        dateComponents.hour = 1
        dateComponents.minute = 20
        let trigger = UNCalendarNotificationTrigger(dateMatching: dateComponents, repeats: false)
        let request = UNNotificationRequest(identifier: UUID().uuidString, content: content, trigger: trigger)
        center.add(request) { (error) in
            print(error)
        }
        return
    }
}
```

App Clipが立ち上がったら、8時間後に通知の許可を要求することなども可能です。標準的なiOSアプリで行うように通知の許可を要求することが可能です。

# メインアプリケーションの推奨

App Clip内にフローティングウィンドウを表示して、メインのiOSアプリケーションを推奨することができます。

```swift
if let scene = view.window?.windowScene {
    let config = SKOverlay.AppConfiguration(appIdentifier: "1494658162", position: .bottom) //App Store アプリのApple ID
    let overlay = SKOverlay(configuration: config)
    overlay.present(in: scene)
}
```

# 起動URLの読み取り

App Clipの `@main` のコードに `.onContinueUserActivity` を追加することで、どのURLでApp Clipが開かれたか確認することができます。

```swift
import SwiftUI

@main
struct TestAppClipApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) { (activity) in
                    let openURL = activity.webpageURL
                    print(openURL)
                }
        }
    }
}
```

---

:relaxed: [Twitter @MszPro](https://twitter.com/MszPro)

:sunny: [私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます。](http://mszpro.com/ioskiji/)
<img width="150" src="https://cdn.mszmagic.com/static-web-content/AppClipImage_small.png">