What's new in App Clips

ハイライト

iOS 15 では App Clip に 3 つの改善が加わりました。Web でフルサイズの App Clip Card を表示できること、デバイス上でローカル体験を作成してエンドツーエンドテストできること、そして Apple デザインの App Clip Code でオフライン発見を自然にすることです。

主要内容

Web ページから App Clip まで、何ステップ？

ジュース店を経営していると想像してください。お客さんが友人の紹介で店の Web ページを開きます。Smart App Banner が表示され、バナーに気づき、タップして開き、ポップアップのカードで確認する——App Clip で注文するまで 3 ステップです。

このフローは iOS 14 でも使えましたが、ユーザーの注意力によってコンバージョンは限られていました。バナーは小さく見落とされやすく、ステップが多いほど各段階で離脱が起きます。

フルサイズ App Clip Card

iOS 15 と iPadOS 15 では、apple-itunes-app meta タグに app-clip-display キーを追加し、値を card に設定できます。ページ読み込み後、フルサイズの App Clip Card がページ中央に表示されます。

タイトル、サブタイトル、アクションボタン、ブランドヘッダー画像が見え、ワンタップで App Clip を起動できます。「Safari で表示」を選ぶと Safari がその選択を記憶し、次回は元のバナーに戻ります。

さらに実用的なのは、サードパーティ App 内の SFSafariViewController でもフルサイズカードがサポートされることです。グルメ推薦 App がジュース店のページを埋め込んでいれば、App を離れずに App Clip Card を表示できます。

App Store Connect なしのローカルテスト

App Clip 開発中、App Store Connect に体験をまだ登録していない場合があります。以前はスキャンからカード表示、起動までの完全なエンドツーエンドフローをテストできませんでした。

iOS 15 の「ローカル体験」（Local Experiences）がこれを解決します。デバイスの「開発者向け設定」で「Local Experiences」を選び、App Clip 名、タイトル、URL プレフィックス、Bundle ID を入力し、写真からヘッダー画像を選びます。設定後、QR コード、NFC タグ、App Clip Code、Safari、Messages でローカル体験をトリガーできます。

ローカル体験はほとんどの通常の呼び出し方法をサポートしますが、Maps、位置の提案、Spotlight には表示されません——これらには登録済み体験が必要です。ローカル体験は Xcode でインストールした App Clip またはベータ版のみで使えます。

App Clip Code: オフライン向けのビジュアルコード

App Clip Code は App Clip 専用に Apple が設計したビジュアルコードで、iOS 14.3 からサポートされています。世界中の約 10 億台のデバイスが直接認識できます。

各 App Clip Code は一意の URL をエンコードし、iOS は App Clip に送る前に URL をデコードします。既存の URL 処理ロジックは変更不要です。

2 種類があります。

NFC 統合型: カメラでスキャンするか NFC タグにタップ。自動販売機、レストランのテーブル、店頭などに適しています。
スキャンのみ型: ユーザーが届かない場所や NFC が向かない場面——マーケティングメールのデジタル表示など。

前景色・背景色をカスタマイズでき、App Clip ロゴを非表示にもできます。スペースがあればロゴを残すことを Apple は推奨しており、新規ユーザーが App Clip 入口だと一目で分かります。

ARKit App Clip では、App Clip Code をアンカーとして物理世界での位置を追跡できます。例えば包装の App Clip Code をスキャンし、箱を開けずに AR でギターを表示できます。

詳細

Safari での App Clip Card

（03:27）

iOS 15 以前、Web ページは apple-itunes-app meta タグで Smart App Banner を表示していました。ページ上部に固定された小さなバナーで、ユーザーが自分で見つける必要がありました。

iOS 15 では app-clip-display キーが追加され、値を card にするとフルサイズ App Clip Card が表示されます。

<meta name="apple-itunes-app"
      content="app-id=123456789,
               app-clip-bundle-id=com.example.app.clip,
               app-clip-display=card">

キーポイント:

app-id: フル App の App Store ID
app-clip-bundle-id: App Clip の Bundle ID
app-clip-display=card: フルサイズカードモードを有効化

カードはページ中央に表示され、タイトル、サブタイトル、アクションボタン、ヘッダー画像を含みます。タップで App Clip に直接入れます。

「Safari で表示」をタップすると Safari がその設定を記憶し、次回同じページではバナー表示に戻ります。

SFSafariViewController でのカード

（04:16）

サードパーティ App が SFSafariViewController で Web ページを読み込む場合も、フルサイズ App Clip Card が表示されます。他 App の UI 内で App Clip を直接発見・起動できます。

デモでは FoodGrid（サードパーティのグルメ App）が Fruta ジュース店のページを埋め込み、店舗情報をタップすると SFSafariViewController が開き、フルサイズ App Clip Card が表示されます。ワンタップで Fruta の App Clip を起動して注文できます。

ローカル体験の設定手順

（04:42）

デバイスで「設定 > 開発者 > Local Experiences」に進み、次を入力します。

フィールド	説明
App Clip 名	カードに表示される名前
タイトル	カードのタイトルテキスト
URL プレフィックス	この体験をトリガーする URL プレフィックス
Bundle ID	App Clip の Bundle Identifier
ヘッダー画像	カード用に写真から選ぶ画像

設定後、次の方法でテストできます。

QR コードのスキャン
NFC タグの読み取り
App Clip Code のスキャン
Safari で一致する URL にアクセス
Messages でリンクを開く

ローカル体験は Maps、Siri の提案、Spotlight には表示されません。これらのチャネルには App Store Connect に登録した体験が必要です。

App Clip Code の生成

（08:45）

App Clip Code を作成する 2 つの方法があります。

方法 1: App Store Connect

登録済み URL の本番向け。App Store Connect から生成コードを直接ダウンロード。

方法 2: App Clip Code Generator コマンドラインツール

開発・テスト、一括生成、自動化向け。

Apple Developer からダウンロード後、Terminal で使用します。

# 利用可能なテンプレートを一覧表示
AppClipCodeGenerator templates

# NFC 統合型 App Clip Code を生成
AppClipCodeGenerator generate \
  --url https://fruta.example.com/order \
  --template 4 \
  --style nfc \
  --output fruta.svg

# スキャンのみ型を生成
AppClipCodeGenerator generate \
  --url https://fruta.example.com/order \
  --template 2 \
  --style scan \
  --output fruta-scan.svg

キーポイント:

templates: 利用可能なビジュアルテンプレートを一覧。プレビューは /Library/Developer/AppClipCodeGenerator/SampleTemplates
--url: App Clip 体験の URL。App Store Connect で高度な体験として登録されている必要がある
--template: ビジュアルスタイルのテンプレート番号
--style nfc|scan: NFC 統合型またはスキャンのみ型
--output: 出力 SVG ファイルのパス

出力は SVG ベクターで、レターサイズから 24×36 インチのポスターまで拡大しても劣化しません。

App Clip Code の使用ガイドライン

（11:20）

Apple のデザインガイドライン:

コードは平らな面に直立して置き、回転させない
コード幅は最低 1 インチ。小さすぎるとスキャンに影響する
コードが遮られず、破損せず、他のコードと近づけすぎない
コードの横に短い説明文を追加し、操作方法を伝える

ARKit 連携

（10:24）

App Clip で ARKit を使う場合、App Clip Code を AR アンカーにできます。ARKit がコードの物理世界での位置を追跡し、仮想コンテンツを正確に重ねられます。

実装の詳細は WWDC21 セッション「Explore ARKit 5」を参照してください。

重要ポイント

1. レストラン・カフェのスキャン注文

各テーブルに NFC 統合型 App Clip Code を貼ります。着席後にタップして注文 App Clip を開き、メニュー選択、支払い、呼び出し番号まで、フル App のダウンロードなしで完結します。

入口: Xcode で App Clip ターゲットを作成し、Associated Domains を設定し、Web の meta タグに app-clip-display=card を追加。

2. 小売店の AR 試着・試粧

化粧品カウンターやメガネ展示の横に App Clip Code を設置。スキャンで AR App Clip を開き、バーチャル試粧や試着の後、購入ページへ遷移。

入口: ARKit の ARAnchor と App Clip Code のトラッキングを組み合わせ、「Explore ARKit 5」を参照。

3. 駐車場の無感決済

駐車スペースや精算機の横に App Clip Code を設置。ドライバーがスキャンして駐車料金 App Clip を開き、車室番号を自動認識し、Apple Pay でワンタップ支払い。

入口: Core Location と CLLocationButton で正確な位置認可を取得し、開発段階ではローカル体験でフロー全体をテスト。

4. イベント・展示会のクイックチェックイン

受付に App Clip Code を設置。参加者がスキャンしてチェックイン App Clip を開き、登録情報を自動入力してチェックイン完了。

入口: App Clip Code Generator でイベントや日付ごとにコードを一括生成し、各コードに異なる URL パラメータを設定。

5. 共有コンテンツのプレビュー

SNS の共有リンクに App Clip プレビューを埋め込み。受信者がタップして App Clip でコンテンツを閲覧し、フル App を先にダウンロードする必要がない。

入口: Messages の App Clip プレビューを設定し、App Store Connect で共有カードのスタイルを設定。