SwiftUI向けのStoreKitについて

SwiftUI向けのStoreKitについて

Apple StoreのプロダクトメタデータとXcode Previewsを使って、わずか数行のコードだけでアプリ内課金をアプリに追加する方法について紹介します。また、StoreKitの新しいUI要素について確認し、いかに簡単にマーチャンダイジングを実装したり、ユーザーが情報に基づいて判断しやすいように、サブスクリプションを提示したりできるかについて解説します。

リソース
関連ビデオ

WWDC23
WWDC22
- StoreKitテストの最新情報
WWDC21
- StoreKit 2について
WWDC20
- StoreKit Testing in Xcodeの導入
ダウンロード

「SwiftUI向けのStoreKitについて」にようこそ私はStoreKitチームのエンジニア Gregですアプリ内課金のマーチャンダイジングについてお話ししますアプリ内課金のマーチャンダイジングとは要するに商品のオファーを提示してユーザーが支払いを完了できる方法を提供することです
マーチャンダイジングでは最初に販売する商品のデータとユーザーのステータスを獲得します例えばユーザーは既に私の非消耗型の商品を持っているかどうかすでにサブスクリプション登録しているか
といったデータをあわせてインターフェイスを作成しユーザーに向けて商品を提示しインタラクションを行なって商品の購入につなげます一見小さなこの赤い長方形ですが実はインターフェイスを作るための膨大な作業がすべて入っています
ユーザーインターフェイスの作成には実に多くの側面があり様々な分野のスキルが必要です次にユーザーが商品の購入を決めますみなさんのアプリは購入のAPIを使って対応し購入の結果としてインターフェイスを更新する必要がありますアプリにアプリ内課金を追加したことがある方は適切なマーチャンダイジングが必要不可欠であることをご存知でしょうこれらのステップすべてを抽象化して単純かつパワフルなビューにできたら素晴らしいと思いませんか？このビューは共通の機能をすべて処理しパラメータを取るのでみなさんはアプリを完成させる細かな点が設定できますではマーチャンダイジングUI作成のために StoreKitが提供するパワフルなAPIの新セットを紹介します Xcode 15では StoreKitは様々なSwiftUIビューを提供しておりこれによって宣言型アプリ内課金UIの作成が容易になりましたどのようなマーチャンダイジング体験を望むのかを宣言するだけでシステムが水面下で宣言内容を実行します
StoreViewとProductView及び SubscriptionStoreViewはマーチャンダイジングをこれまで以上に加速してくれる新たなビューですこれらのビューがApp Sotreからのデータフローを抽象化してシステム提供のUIを提示しアプリ内課金を表示します既にお馴染みのSwiftUI APIを使ってこれらのビューがどのようにみなさんのアプリと統合するかのカスタマイズも可能です
これらのビューはSwiftUIと同様に全プラットフォームでサポートされアプリ内課金のマーチャンダイジングはこれまでになく簡単になり iPhone iPad Mac Apple Watch Apple TVのすべてが対象です
Backyard Birdsという新ゲームにアプリ内課金を加えて欲しいと羽の生えたお友達が頼んできました
StoreKitの新しいビューがあるのでもちろんこれを引き受けました
それではこれから Backyard Birdsでの素晴らしいアプリ内課金体験をお見せしますサンプルプロジェクトをダウンロードして一緒に作業してみてくださいここではXcode Previewsを使って SwiftUIビューを素早くイテレートします
今日はカバーする内容が非常に多いので StoreKitの構成ファイルは作成済みですここに含まれるのは私たちのアプリ内課金のメタデータで StoreKitでXcode Previewsを使う際に必要です
みなさんが自身のアプリで始める時に役立つ素晴らしいセッションがあります「What's new in StoreKit Testing」そして「Introducing StoreKit Testing in Xcode」ですではXcodeを始めましょう Backyard Birdsで売りたいのは高級な鳥の餌で例えば栄養ペレットですね餌の購入後はそれを裏庭に置いておき腹ぺこの鳥をもっと呼ぼうとしますではコードに移ってStoreKitがこれらの商品のマーチャンダイジングにどう役立つか見ていきます
最初にBirdFoodShopというビューを作成し鳥の餌をマーチャンダイズします
このビューを実行するファイルはもう作成済みです StoreKitを使ってビューを作成するには StoreKitとSwiftUIの両方をファイルのトップにインポートします
次にここで鳥の餌のデータモデルを得るためのクエリを宣言しこれでストアの作成が容易になります
アプリにStoreViewを追加しているのはマーチャンダイジングのビューを稼働させるのに最も迅速な方法だからですそこにStoreKit構成ファイルから一群のプロダクトIDを提供する必要がありますがそれはbirdFoodモデルから得られます
この宣言が済むとマーチャンダイジングのビューが機能しています StoreKitがApp StoreからすべてのプロダクトIDをロードし UIに表示してくれます表示名や説明や価格すべてApp Storeから直接得たもので App Store ConnectやあるいはStoreKitの構成ファイルでみなさんが設定したものを使います StoreKitは下記のような細かくてかつ重要な考慮事項も扱えます有効期限まであるいはシステムメモリの負荷が高い間はデータをキャッシュしたりスクリーンタイムではアプリ内課金が無効であるかチェックしたりできます以前鳥のデザイナーが個々の鳥の餌の商品に対して装飾アイコンを送ってきましたそのアイコンをストアビューに追加するのも単にtrailing view builderを追加してアイコンを表示するSwiftUIビューに渡すだけです
view builderはProduct値をパラメータとして捉えそれを使って使用するアイコンを決められますプロダクトIDを使って私たちのアセットカタログから正しいアイコンを見つけてくれるヘルパービューを作成しました
それが済むと更新されたプレビューが出てそれぞれのプロダクトのアイコンが表示されますストアビューがプロダクトIDやアイコンを機能的でよくデザインされたストアに変えてくれるので稼働がとても楽になりますストアビューのパワフルな機能で異なるプラットフォーム上でもプロダクトは自動で調整され iPadやMac そしてApple Watchでも素晴らしいショップができています XcodeのターゲットをApple Watchに変えショップのプレビューを見てみましょう
いいですね！ Apple Watchでも鳥の餌が売り始められそうです
独自の販売方法でプロダクトを整理したいという要望は多くのビジネスに共通しています
私たちの鳥デザイナーチームは日々奮闘して鳥の餌を陳列紹介するための工夫を凝らしていますここではお買い得商品が目立つように表示し他の商品は棚に整理して並べます
これはStoreViewで得られるリスト様式のレイアウトとは異なりますが StoreKitはここでも役立ちます
さらに詳細なレイアウトには新しいProductViewが使えます実際今見てきたStoreViewはその行を作るのに同じProductViewを使いますでは新しいストアのためのコンテナの宣言から始めましょう
栄養ペレットの箱が一番のお買い得品なので他のプロダクトより目立つように陳列したいと思いますそのために栄養ペレットの箱のIDを提供して ProductViewを宣言します
StoreViewの時と同様に trailing closureを追加して装飾アイコンを加えます再び先ほどのヘルパービューを使います
次に他のフードアイテム用に下にセクションを追加しましょうまずはお買い得品の後ろに背景をつけてから…
それからヘッダーと鳥の餌を棚に並べるために私が作成したもう一つのヘルパービューを加えます
この棚のヘルパービュー内で個々の鳥の餌のプロダクトに絵のアイコンをあわせて ProductViewを宣言できます
ショップの完成にはもう一つだけ作業が必要ですこの栄養ペレットの箱がユーザーの目を引くように表示したいのですが鳥のデザイナーは今のままの方が見た目が良いと思っています問題解決のためには新しいproductViewStyle APIを使って主力プロダクトのスタイルを設定することができます Largeスタイルを選んで非常に目立つようにします
StoreKitの新しいProductViewを使って鳥の餌だけに特化したショップをわずか数分で作成しました
ProductViewのLargeスタイルでは 1つのview modifierを加えるだけでお買い得品を目立たせることができました
標準スタイルには3つあり需要に合わせて選べます Compactは狭いスペースでより多くのプロダクトを表示できます鳥の餌の商品棚では自動的に Regularスタイルが使われ Largeスタイルは目立たせたい場合の表示に最適です
StoreViewはProductViewのインスタンスでできているので同じproductViewStyle modifierを使って StoreViewのスタイルを変更できます
またカスタムスタイルを作成して ProductViewやStoreViewで使うこともできますセッションでのちほどお見せします
ProductViewを使って消耗型の鳥の餌をアプリ内課金で販売できるようになりました鳥の営業係はまだ不十分だと考えオファーを提供するように要求してきたサブスクリプションが熱烈なバードウォッチャー用の Backyard Birds PassですサブスクリプションUIはProductViewか StoreViewを使って作成できますが新しいSubscriptionStoreViewはサブスクリプションに特化しています Xcodeに戻って一緒に作成しましょうまず初めに StoreKit設定で作成した「Backyard Birds Pass」というサブスクリプショングループは 3レベルのサービスを提供します
このグループIDをメモしてくださいこのあと必要になります
先ほど私たちのパスショップ用に新しいファイルを作ったので早速SubscriptionStoreViewに行ってみましょう
SubscriptionStoreViewで最も迅速に稼働するには StoreKit構成ファイルか App Store ConnectからのグループIDを提示します私たちの環境には既にグループIDを追加しておいたので環境プロパティを宣言するだけでアクセスできその後グループIDを提示して SubscriptionStoreViewを宣言します
StoreViewやProductViewと同様に SubscriptionStoreViewも私たちの代わりにデータフローを管理し異なるプランのオプションでビューをレイアウトします既存のサブスクリプション登録者かどうかのステータスやユーザーがお試しオファーの対象になるかどうかもチェックします自動で作成されるビューも良いですがもっとBackyard Birdsにふさわしいビューにするためにパワフルな新APIが使えます例えばヘッダーのマーケティングコンテンツも好きなSwiftUIビューに変えられます先ほど作ったマーケティングコンテンツのビューをここにドロップします
またサブスクリプションストアにコンテナ背景を追加して視覚的にも面白くできます新しいSwiftUI containerBackground APIを使うだけです
ご覧のようにサブスクリプションストアの一番上にこれをつけてから空のグラデーションと雲を使って先ほど作っておいたビューを宣言しています全体をまとめるにはサブスクリプションストアのスタイル用の別のAPIが使えますデフォルトではサブスクリプションストアはサブスクリプションコントロールと全面背景との間にマテリアルレイヤーを追加します
背景のstyle modifierを使ってサブスクリプションコントロールの後ろ側は無背景にします
今度はsubscriptionStore ButtonLabelを使ってサブスクリプション登録ボタンのマルチラインレイアウトを選びます
これで登録ボタンに価格と「無料でお試し」の両方が付きました
次に追加するのはsubscriptionStore PickerItemBackgroundでサブスクリプションのオプションにマテリアル効果を宣言します
サブスクリプションプランオプションにも空のグラデーションがかかっています
最後に私たちのサブスクリプションにはオファーコードがあるので新しいstoreButton modifierを使って「コードを使う」ボタンが見えるように宣言します
このたった1つのview modifierでボタンが表示されユーザーはオファーコード引き換えシートが開けます
これでサブスクリプションビューも Backyard Birdsらしくなりましたこれらの新しいビューのおかげでアプリにアプリ内課金を追加するのは楽になりましたがまだ少し足りないものがありますまずは購入後にコンテンツをアクセスしてもらうためのロジックが必要です
2つ目にはユーザーがすでにサブスクリプション登録済みかどうかとその際SubscriptionStoreViewを提示するコントロールを非表示にしているかの確認です
StoreKitのビューはサブスクリプション登録済みのユーザーに自動的に対処しますが多くの場合最善なのはどのマーチャンダイジングUIも既存の登録者に表示しないことです
StoreKitの最新のAPIはこのような重要な機能の実行をコンテンツ販売と同じように楽しくしてくれますそのようなAPIを始める前にビジネスロジックを既に実装しておくか何らかの足場かけを実装しておく必要があります確認すべきことは処理しているのが最新のトランザクションであることサーバーと協力していること消耗型のエンタイトルメントを追跡していること自分のUIコードに適したデータモデルを作成していることなどなどですビジネスロジックの実装については「Meet StoreKit 2」や「What's new in App Store server APIs」でさらに詳しく確認することをおすすめします
私は鳥のビジネスロジックを BirdBrainという名のアクターに先に実装しておきましたもうすぐこれについてお話しします
まずバードウォッチャーが購入済みの消耗型の鳥の餌にアクセスできるようにすることから始めましょうどのStoreKitビューからの購入でもその処理はシンプルです onInAppPurchaseCompletionでビューを変更して購入が完了した時に呼び出す関数を付与しますこの方法ならどんなビューも変更可能で最後のStoreKitビューが購入を終了した時にコールが行われますこのmodifierを私たちの BirdFoodShopに追加しましょう
このmodifierが教えてくれるのは購入されたプロダクトと購入の結果が成功したか否かについてですこれを実装して成功した結果を BirdBrainアクターに送り処理してもらいましょう
このmodifierを追加することで購入された消耗型の鳥の餌がアンロックされアクセス可能になりますシミュレータでやってみましょう
バックヤードを選んでからサプライをタップします
それから栄養ペレットを購入します
シートが消えるとサプライの在庫には栄養ペレットが５個になっているのが分かります
そして栄養ペレットを置いて庭にお腹を空かせた鳥たちが集まってくるのを待ちます
onInAppPurchaseCompletionに加えて他にも幾つか関連する view modifierがあり StoreKitのビューからそれを使ってイベントに対処できます
ユーザーが購入ボタンを選択した場合 onInAppPurchaseStartを使って対処できますが購入が始まる前に限ります購入が行われている間に調光操作などでUI要素を更新したい場合には便利ですここで提供する関数はこれから購入されるプロダクトをパラメータとして受け取ります
これらのmodifierを使う時に知っておくのが重要なのは対処するイベントは派生的なProductViewや StoreViewやSubscriptionStoreViewのインスタンスだということです複数のmodifierを追加した場合すべてのアクションが各イベントに対して実行されますこういったmodifierを使うかどうかは完全に任意の判断ですデフォルトではStoreKitのビューからの成功したトランザクションは Transaction.updatesのシーケンスから消去されますが onInAppPurchaseCompletionを追加して結果を直接取り扱うというオプションがあります
これらのどのmodifierにでも nilを渡せばデフォルト動作に戻せます
Backyard Birds Passサブスクリプションの扱いについてお話ししましょう新規ビューのAPIに加えて StoreKitは SwiftUIにおけるデータの独立性を宣言するための新しいview modifierがあります最初にお話しするのは subscriptionStatusTaskでこれを使えばパスのアンロックがとても簡単になります私たちのサブスクリプションに依存するどんなビューにも subscriptionStatusTask modifierを追加できます Backyard Gridでやってみましょうサブスクリプションのオファーシートを開くボタンが出る場所です
subscriptionStatusTask modifierは依存するサブスクリプションのグループIDを使います
先ほどSubscriptionStoreViewを宣言した時に使用したのと同じグループIDですこれでBackyard Gridが現れるたびにバックグラウンドタスクがサブスクリプションのステータスを読み込みタスクが完了すると提供される関数を呼び出します
このAPIを使用するのに最適なのは単にステータスをビジネスロジックに渡す時でこの場合だと BirdBrainアクターですがそのアクターにデータを処理させて私たちのUIコード内で扱いやすいモデルタイプを戻すことです
ここではこのパスステータスを列挙型にしてこれを割り当てる状態プロパティを作ることにします
そしてサブスクリプションオファーを見せる相手は現在サブスクリプションに登録していない人だけを選びます
この追加だけでオファーカードの提示対象をサブスクリプション― 登録していないバードウォッチャーに限定できます StoreKitはステータスが変わると関数を呼び出すので私たちのビューは常に最新情報を反映しています
アプリ全体で同じパターンを使って Backyard Birds Passのコンテンツをアンロックし onInAppPurchaseCompletion modifierを使ってサブスクリプションが成功したあとは自動的にPass Shopシートを消去することができますこの部分は既に完了してあるので iPhoneシミュレータでアプリを実行し全体をテストしましょう
「おすすめをチェック」をタップし「無料でお試し」を押します
支払いシートが現れて「サブスクリプション登録」をタップし警告を消します
これでオファーシートは自動的に消えオファーカードも隠れていますその理由はsubscription status taskがステータスが変わるごとに関数を呼び出すからで私たちのアプリのUIは常に最新の状態になるわけです
このトピックに関連してアプリのオファーが非消耗型であったり非更新型のサブスクリプションである場合 subscriptionStatusTaskのように簡単にエンタイトルメントの― 確認をしてくれる新しいAPIがあります currentEntitlementTask modifierを使ってプロダクトIDに対する現在のエンタイトルメントに依存するものとしてビューを宣言すればシステムが現在のエンタイトルメントを非同期的に読み込み変化が起こるたびに現在のエンタイトルメントを用いて関数を呼び出します
subscriptionStatusTaskと currentEntitlementTaskの両方でみなさんが提供した関数は entitlement task stateをパラメータとしてとらえますそれによりケースの扱いを細かく選ぶことができてエンタイトルメントが読み込み中の場合読み込みが失敗した場合読み込みが成功した場合で選べます以上新しいStoreKitのビューにより Backyard Birdsでのアプリ内課金の統合を容易に効率化できることを見てきましたではもう少し掘り下げて SwiftUIのための新しいStoreKit APIを使ってこれらのビューをさらに駆使していこうと思います
まず ProductViewや StoreViewのアイコン設定でのさらなるオプションについてです次にプロダクトビューのスタイリングの詳細ですそのあとは SotreViewや SubscriptionStoreViewに共通の機能を持つボタンを追加する方法です最後にみなさんのブランドに適したサブスクリプションストアビューを作るために使える数々の新しいAPIについてですでは装飾アイコンについてですアイコンを付与すると標準のProduct View stylesではプロダクトの読み込み中にプレースホルダアイコンが現れます左側にある感じですね時には自動アイコンが自分の予想していたものとは違うことがあります例えば iPhoneでは自動生成のプレースホルダは四角ですが私たちはBird Foodのプロダクトに丸いアイコンを使います
これは自分がプレイスホルダーに使用したいアイコンで ProductViewに第二の trailing closureを追加すれば簡単に改善できますここでは単にプレイスホルダに丸を付与しただけです
App Store Connectに App Storeのプロモーション画像をつけたいなら SwiftUIビューの代わりに同じ画像を ProductViewに使えます prefersPromotionalIconのパラメータを trueに設定するだけです
SwiftUIビューは代替として提供できますがプロダクトにプロモーションアイコンがある限りこれは無視されます
「What's new in StoreKit 2 and StoreKit Testing in Xcode」と「What's new in App Store Connect」でプロモーションアイコン設定を確認できます
App Storeのプロモーションアイコンを使いたくない場合でも SwiftUIで宣言されたアイコンのためにアプリ内課金アイコンのクールなトリートメントが使えます
アイコンに付与したビューにこのmodifierを加えるだけでビューにこのボーダーが追加されますプロダクトビューのアイコンについては以上ですストアビューのアイコンにも同様のことがすべてできる同等のAPIがありますのでお忘れなく
ではプロダクトビューのスタイリングについてです
このセッションの最初の方で話したプロダクトビュースタイルのカスタマイズ― についてようやくお話しできます
プロダクトビューの外見やレイアウト動作そしてインタラクションは使用されるスタイルによって完全に左右されます狙いに適した標準スタイルが見つからない場合はいつでも独自のプロダクトビュースタイルが作成できます
ここでの最初のケースは標準スタイルで構成されるカスタムスタイルの作成でゼロからすべてを作るわけではありません例えば読み込み中に出るのが標準のプレースホルダではなくプロダクトビューに進捗スピナーを表示したい場合は？
カスタムスタイル作成の最初のステップは ProductViewStyleプロトコルに準拠するタイプの作成です
プロトコル実装における唯一の要件はこのmakeBodyメソッドです makeBodyメソッドに渡される構成値は素晴らしいプロダクトビューを宣言するのに必要なプロパティをすべて持っています例えば状態の列挙がありプロダクトの読み込み過程における異なる状態をカバーします読み込み中の外見をカスタマイズするには loading stateのProgressViewを宣言すればいいだけです
そして他の状態に対しては標準のProductView動作に戻すことができますが単にProductViewインスタンスに設定を渡せばいいだけです
カスタムスタイルの適用も標準スタイル適用の場合と同じで productViewStyle modifierに渡すだけです
もちろん標準スタイルを使ってカスタムスタイルを作る必要はありません
makeBodyメソッドのほかのビューを使っていつでも独自のスタイルを定義することができますタスク状態が成功になればビューが表示している Product値にアクセスできますみなさんのアプリがStoreKit 2を使っている場合は使い慣れたProduct値です Productのすべてのプロパティを使ってビューが作成できます
configurationからも装飾アイコンにアクセスできます
購入ボタンを追加する時は必ずconfiguration値での購入方法を使うようにしましょう product値ではありません configurationでのメソッドを使用することでデフォルトの購入オプションを追加することになりこれによって支払い確認シートが必ずプロダクトビューに近接して表示されるようになり onInAppPurchaseCompletionのようなリアクティブなmodifierをトリガーします
大事なのはゼロからカスタムスタイルを作成するとそのスタイルを使ったプロダクトビューの外見と動作はスタイル作成のために作ったビューと一致するということです
カスタムスタイルの作成では App Storeデータフローなどのプロダクトビューのための全インフラストラクチャを上手く利用できる一方で自分好みの外見や動作を自由に宣言できます
私たちがBird Food Shopのために作成したUIは読み込み中に各プロダクトのためのプレースホルダの形状を表示しますですが右側のように読み込み中スピナーを表示したい場合は？
この問題の解決方法は stateのリフトアップですどういうことか説明します
この図式は先ほど作成した BirdFoodShopの階層を表します BirdFoodShopはいくつかの下位レベルのProductViewがあります ProductViewをプロダクトIDで初期化すると各ビューはプロダクトの状態つまりstateを内部で維持しますがこれは読み込みオペレーションが非同期だからですプロダクトの読み込み中に親元のBirdFoodShopの外見が異なるエフェクトを作成したいなら状態を親元のBirdFoodShopにリフトアップする必要があります親元のBirdFoodShopがプロダクトの状態を管理するようにしたらデータの読み込み中にその外見を自由に変更でき IDの代わりに予め読み込まれた product値を使って ProductViewインスタンスが作成できますここまではまだプロダクトIDでプロダクトビューを作成するだけですが読み込み済みのProduct値を ProductViewに渡せることを知るのは重要なことですこれによってプロダクトビューは読み込みをスキップしマーチャンダイジングビューを直接レイアウトします
ここでみなさんは「それはすごいけどそれをするには独自のプロダクトリクエストとキャッシングロジックを作らないと」
と思われるでしょうでも安心してください私たちはStoreKitビューの内側を view modifierとして公開しているのでどのビューでもプロダクトIDのメタデータに依存していると宣言できます StoreKitが代わりにプロダクトの読み込みやキャッシングそして最新状態への更新を行いますそのために使うのが新しい storeProductsTask modifierです先ほどのsubscription StatusTaskと似ていてビューが依存するプロダクトIDの収集を渡します
そして非同期タスクの状態を扱うのに使う state値を獲得します先ほど見たカスタムの ProductViewStyle実装からも見慣れた感じですね
ここから読み込み中の読み込みビューが出て…
プロダクトが取得できない場合新しいContentUnavailableViewを使うか
予め読み込み済みのProduct値で直接BirdFoodShopを表示しますとても簡単ですね
簡単と言えばアプリ内課金のマーチャンダイジングUIでは含められる便利な共通のアクションがいくつかあります StoreViewとSubscriptionStoreViewでそのような共通アクションのための補助ボタンの追加が非常に簡単になります
補助ボタンというのはビューの主要目的を補助するアクションを実行するためのボタンです例えばこの「キャンセル」ボタンや「コードを使う」ボタンはどちらもパスのサブスクリプション登録に対して補助的なものです
storeButton modifierを使った「コードを使う」ボタンの追加は最初にこのシートを作成した時に既に見ておきましたねこのview modifierをもう少し詳しく見てみましょう
この2つの各パラメータのためにパスできる値がいくつかあります最初のパラメータでは可視性の選択ができるようになりますすべてのボタンのデフォルトは「automatic」でその場合StoreKitがコンテクストから判断してボタンを可視にするかどうか選びますボタンを明確に「visible」か「hidden」にすることもできます
次のパラメータは可視性の内容を設定するボタンの種類を選択するものです
「キャンセル」ボタンはビューを閉じるものでプラットフォームに適したボタンですこのボタンはStoreViewと SubscriptionStoreViewで有効です
キャンセルボタンの自動動作としてビューが表示されるたびに表示されます
右側ではサブスクリプションストアビューがシートとして表示されていてキャンセルボタンが自動的に右上に出ています左側ではビューはシートとして表示されてないのでキャンセルボタンはありませんもちろんこの動作を上書きするという選択もありキャンセルボタンを隠すこともできます気をつけたい点ですがこの選択はこのキャンセルボタンの代わりに独自のキャンセルボタンを使う場合のみです自分のマーチャンダイジングUIには表示を消すための明確なボタンを必ず設けるよう心がけましょう
キャンセルボタンと同様にストアビューとサブスクリプションストアビューは購入を復元するボタンが表示できます
デフォルトで購入を復元するボタンは常に隠されていますが storeButton modifierを使ってマーチャンダイジングUIに表示することもできます
次の3種のボタンが使えるのは SubscriptionStoreViewだけです
「コードを使う」ボタンについては既にお話ししました次はサインインボタンです App Store外からのサブスクリプションを許可している場合にはサインインボタンを表示するのが良いでしょう既存の登録者がアクセスを必要としている場合に対応できますサインインボタンについて知っておくべき重要なことはサインインのアクションを宣言するには新しいsubscriptionStoreSignInAction modifierを使う必要があることですサインインのアクションを設定したらサインインボタンは自動的に可視になります
サインインボタンは subscriptionStoreSignInActionで宣言した関数を単純に呼び出すのでサインインのフローを実行するシグナルとして使えます
最後のボタンの種類はポリシーですサブスクリプションオファーと一緒に利用規約とプライバシーポリシーのリンクを表示しておくべきですが SubscriptionStoreViewでこれが非常に簡単になります
典型的にはポリシーボタンはデフォルトで隠れています storeButton modifierでそれを可視にすれば iOSやMacではサブスクリプション登録のコントロール上に表示されるようになりますこれらのボタンはコンテナ背景の上に表示されるのでデフォルトのスタイルでは背景に対して読みづらいかもしれません subscriptionStorePolicy ForegroundStyleで背景に対しても読みやすいポリシーボタンを使えるような形状スタイルを設定できます
storeButton modifierで補助ボタンを設定するとシンプルな宣言をいくつかするだけでマーチャンダイジングUIにパワフルな機能を追加しやすくなります先ほどサブスクリプションストアビューのスタイルを設定して Backyard Birdsにふさわしいビューを作成しましたねではこのようなスタイルAPIを詳しく見てみましょう
まずはコントロールスタイルの選択から見ていきます SubscriptionStoreViewはマーチャンダイジングの対象であるサブスクリプションの種類に基づいて自動でコントロールスタイルを選びます
新しいsubscriptionStore ControlStyle modifierを使えばサブスクリプションのプランに使うコントロールスタイルが自分で選べます例えば自動ピッカーの代わりにプランごとにでもボタンを選べます
コントロールの異なるスタイルについてお話ししましょう
独自のスタイルを特定しなければサブスクリプションストアビューが自動でコントロールを選びます iPhoneではこれが複数プランのオプションを持つサブスクリプションのピッカーコントロールです
自分で明確にピッカーコントロールを選ぶこともできます
iOSとMacでは主要のピッカーコントロールがあり影や選択リングを使ってサブスクリプションプランのオプションをもっと目立つように表示します
最後にピッカーコントロールの代わりに各サブスクリプションプランにボタンを表示する選択もできます
サブスクリプション登録ボタンと言えばボタンのラベルをカスタマイズするのに使える新しいAPIがあります
SubscriptionStoreViewがデフォルトで表示するサブスクリプション登録ボタンはアクションフレーズを含みボタンの上のキャプションとして価格情報が出ています
subscriptionStoreButtonLabel modifierを追加してボタンのラベルを複数行に変更することで価格のテキストはボタンのラベル内に含まれるようになり切り離されたキャプションではなくなります
ボタンラベルのレイアウトをカスタマイズすることに加えコンテンツもカスタマイズできます
例えばアクションフレーズではなく選択したサブスクリプションの表示名を表示することもできます
レイアウトとコンテンツの両方を使いボタンラベル値を作成することも可能でコンポーネンツをこのようにつなぎ合わせて行います
ボタンコントロールはピッカーコントロールと同じサブスクリプション登録ボタンで構成されているのでこれらのボタンのカスタマイズにも同じmodifierが使えます
例えばラベルに価格だけを表示することもできますすべてのプランが同じサービスを提供し価格オプションだけが違う場合に便利です
異なるサブスクリプションプランはコントロールを作成するために App Store Connectで設定した表示名と説明を使いますこういったコントロールをもっと面白くするために異なるプランごとに装飾ビューを加えることもできます
そのためにはsubscriptionStore ControlIcon modifierをサブスクリプションストアに加えるだけです
このmodifierはview builderを使います
view builderにProduct値と SubscriptionInfo値の両方を提供しますこれらのパラメータを使いプランごとに異なるビューができます
これらのアイコンはサブスクリプションプランにボタンコントロールスタイルを使っているときも有効ですそれではもう少し詳しくサブスクリプションストアビューへの背景コンテンツ追加を見てみましょう先ほどのおさらいをすると containerBackground modifierで販売コンテンツを変更することでサブスクリプションストアにコンテナ背景が追加できます
この例では背景にアクセントカラーのグラデーションを使いサブスクリプションストアに表示することにしました
新しいcontainerBackground APIについての詳細は「What's new in SwiftUI」のセッションでどうぞ
サブスクリプションストアに使える背景プレイスメントには異なるものがいくつかあります
Subscription Store placementを使えばコンテクストに基づいて自動でプレイスメントを選びます
iOSやMacではサブスクリプションストアのヘッダーに置きたい背景を明確に特定できますこのプレイスメントは販売コンテンツの後ろ側です
Full Height placementもありサブスクリプションストアビューの全面に背景を設置します
セッションの最初の方で subscription status taskのような APIを使って Get Backyard Birds Passシートの表示を避ける方法を見ましたねですが既存の登録者にサブスクリプションストアビューを表示したい場合もあります例えば登録者にプレミアムプランへのアップグレードをすすめる時です
登録者が現在プレミアムより低レベルのプランをサブスクリプション登録しているとわかったらアップグレードをvisibleRelationshipsのパラメータとしてパスすることでアップグレードシートが表示できますサブスクリプションの関係はどの組み合わせでもよく現在サブスクリプション登録しているユーザーにのみ有効となります
オファーの効果を高めるために販売コンテンツの異なるビューを提示しプレミアムプランの利点を説明します subscriptionStatusTaskを使って登録者のサービスレベルを把握しその情報を元にどのオファーをユーザーに見せるか決めます
これで本日の内容はすべてカバーしましたアプリ内課金をアプリに追加する時はすぐに実稼働できるよう StoreViewを宣言しましょう
カスタマイズされたレイアウトには ProductViewを試してみてくださいサブスクリプションには SubscriptionStoreViewを宣言して説得力のあるオファーを作りましょうさらに上のレベルを目指すなら新しいview modifierやほかのAPIを使って独自のものを準備しましょう
StoreKitやSwiftUIについてさらに知りたい場合はこちらのセッションをどうぞ「What's new in StoreKit 2 and StoreKit Testing in Xcode」と「What's new in SwiftUI」です
本日は SwiftUIのための新しいStoreKit APIについてでしたコーディングを楽しんでくださいご視聴ありがとうございます

3:35 - Setting up the bird food shop view

import SwiftUI

struct BirdFoodShop: View {
 
  var body: some View {
    Text("Hello, world!") 
  }
  
}

3:42 - Import StoreKit to use the new merchandising views with SwiftUI

import SwiftUI
import StoreKit

struct BirdFoodShop: View {
 
  var body: some View {
    Text("Hello, world!") 
  }
  
}

3:51 - Declaring a query to access the bird food data model

import SwiftUI
import StoreKit

struct BirdFoodShop: View {
  @Query var birdFood: [BirdFood]
 
  var body: some View {
    Text("Hello, world!") 
  }
  
}

4:18 - Meet store view

import SwiftUI
import StoreKit

struct BirdFoodShop: View {
  @Query var birdFood: [BirdFood]
 
  var body: some View {
    StoreView(ids: birdFood.productIDs) 
  }
  
}

4:51 - Adding decorative icons to the store view

import SwiftUI
import StoreKit

struct BirdFoodShop: View {
  @Query var birdFood: [BirdFood]
	
  var body: some View {
    StoreView(ids: birdFood.productIDs) { product in 
      BirdFoodProductIcon(productID: product.id)
    }
  }
 
}

6:38 - Creating a container for a custom store layout

import SwiftUI
import StoreKit

struct BirdFoodShop: View {
  @Query var birdFood: [BirdFood]
 
  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        if let (birdFood, product) = birdFood.bestValue {
          
        }
      }
      .scrollClipDisabled()
    }
    .contentMargins(.horizontal, 20, for: .scrollContent)
    .scrollIndicators(.hidden)
    .frame(maxWidth: .infinity)
    .background(.background.secondary)  
  }
  
}

6:47 - Meet product view

import SwiftUI
import StoreKit

struct BirdFoodShop: View {
  @Query var birdFood: [BirdFood]
 
  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        if let (birdFood, product) = birdFood.bestValue {
          ProductView(id: product.id)
        }
      }
      .scrollClipDisabled()
    }
    .contentMargins(.horizontal, 20, for: .scrollContent)
    .scrollIndicators(.hidden)
    .frame(maxWidth: .infinity)
    .background(.background.secondary)  
  }
  
}

7:03 - Adding a decorative icon to the product view

import SwiftUI
import StoreKit

struct BirdFoodShop: View {
  @Query var birdFood: [BirdFood]
 
  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        if let (birdFood, product) = birdFood.bestValue {
          ProductView(id: product.id) {
            BirdFoodProductIcon(
              birdFood: birdFood,
              quantity: product.quantity
            )
          }
        }
      }
      .scrollClipDisabled()
    }
    .contentMargins(.horizontal, 20, for: .scrollContent)
    .scrollIndicators(.hidden)
    .frame(maxWidth: .infinity)
    .background(.background.secondary)  
  }
  
}

7:17 - Adding more containers to layout product views

import SwiftUI
import StoreKit

struct BirdFoodShop: View {
  @Query var birdFood: [BirdFood]
 
  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        if let (birdFood, product) = birdFood.bestValue {
          ProductView(id: product.id) {
            BirdFoodProductIcon(
              birdFood: birdFood,
              quantity: product.quantity
            )
          }
          .padding()
          .background(.background.secondary, in: .rect(cornerRadius: 20))
        }
      }
      .scrollClipDisabled()
      Text("Other Bird Food")
        .font(.title3.weight(.medium))
        .frame(maxWidth: .infinity, alignment: .leading)
      ForEach(birdFood.premiumBirdFood) { birdFood in
        BirdFoodShopShelf(title: birdFood.name) {
          
        }
      }
    }
    .contentMargins(.horizontal, 20, for: .scrollContent)
    .scrollIndicators(.hidden)
    .frame(maxWidth: .infinity)
    .background(.background.secondary)  
  }
  
}

7:36 - Declaring product views for the remaining products

import SwiftUI
import StoreKit

struct BirdFoodShop: View {
  @Query var birdFood: [BirdFood]
 
  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        if let (birdFood, product) = birdFood.bestValue {
          ProductView(id: product.id) {
            BirdFoodProductIcon(
              birdFood: birdFood,
              quantity: product.quantity
            )
          }
          .padding()
          .background(.background.secondary, in: .rect(cornerRadius: 20))
        }
      }
      .scrollClipDisabled()
      Text("Other Bird Food")
        .font(.title3.weight(.medium))
        .frame(maxWidth: .infinity, alignment: .leading)
      ForEach(birdFood.premiumBirdFood) { birdFood in
        BirdFoodShopShelf(title: birdFood.name) {
          ForEach(birdFood.orderedProducts) { product in
            ProductView(id: product.id) {
              BirdFoodProductIcon(
                birdFood: birdFood,
                quantity: product.quantity
              )
            }
          }
        }
      }
    }
    .contentMargins(.horizontal, 20, for: .scrollContent)
    .scrollIndicators(.hidden)
    .frame(maxWidth: .infinity)
    .background(.background.secondary)  
  }
  
}

7:50 - Choosing a product view style

import SwiftUI
import StoreKit

struct BirdFoodShop: View {
  @Query var birdFood: [BirdFood]
 
  var body: some View {
    ScrollView {
      VStack(spacing: 10) {
        if let (birdFood, product) = birdFood.bestValue {
          ProductView(id: product.id) {
            BirdFoodProductIcon(
              birdFood: birdFood,
              quantity: product.quantity
            )
          }
          .padding()
          .background(.background.secondary, in: .rect(cornerRadius: 20))
          .padding()
          .productViewStyle(.large)
        }
      }
      .scrollClipDisabled()
      Text("Other Bird Food")
        .font(.title3.weight(.medium))
        .frame(maxWidth: .infinity, alignment: .leading)
      ForEach(birdFood.premiumBirdFood) { birdFood in
        BirdFoodShopShelf(title: birdFood.name) {
          ForEach(birdFood.orderedProducts) { product in
            ProductView(id: product.id) {
              BirdFoodProductIcon(
                birdFood: birdFood,
                quantity: product.quantity
              )
            }
          }
        }
      }
    }
    .contentMargins(.horizontal, 20, for: .scrollContent)
    .scrollIndicators(.hidden)
    .frame(maxWidth: .infinity)
    .background(.background.secondary)  
  }
  
}

8:25 - Styling the store view

StoreView(ids: birdFood.productIDs) { product in 
    BirdFoodShopIcon(productID: product.id)
}
.productViewStyle(.compact)

9:53 - Setting up the Backyard Birds pass shop

import SwiftUI
import StoreKit

struct BackyardBirdsPassShop: View {
 
    var body: some View {
        Text("Hello, world!") 
    }
  
}

9:57 - Meet subscription store view

import SwiftUI
import StoreKit

struct BackyardBirdsPassShop: View {
    @Environment(\.shopIDs.pass) var passGroupID
 
    var body: some View {
        SubscriptionStoreView(groupID: passGroupID)
    }
  
}

10:38 - Customizing the subscription store view's marketing content

import SwiftUI
import StoreKit

struct BackyardBirdsPassShop: View {
    @Environment(\.shopIDs.pass) var passGroupID
 
    var body: some View {
        SubscriptionStoreView(groupID: passGroupID) {
            PassMarketingContent() 
        }
    }
  
}

10:57 - Declaring a full height container background

import SwiftUI
import StoreKit

struct BackyardBirdsPassShop: View {
    @Environment(\.shopIDs.pass) var passGroupID
 
    var body: some View {
        SubscriptionStoreView(groupID: passGroupID) {
            PassMarketingContent()
                .lightMarketingContentStyle()
                .containerBackground(for: .subscriptionStoreFullHeight) {
                    SkyBackground()
                }
        }
    }
  
}

11:21 - Configuring the control background style

import SwiftUI
import StoreKit

struct BackyardBirdsPassShop: View {
    @Environment(\.shopIDs.pass) var passGroupID
 
    var body: some View {
        SubscriptionStoreView(groupID: passGroupID) {
            PassMarketingContent()
                .lightMarketingContentStyle()
                .containerBackground(for: .subscriptionStoreFullHeight) {
                    SkyBackground()
                }
        }
        .backgroundStyle(.clear)
    }
  
}

11:44 - Choosing a subscribe button label layout

import SwiftUI
import StoreKit

struct BackyardBirdsPassShop: View {
    @Environment(\.shopIDs.pass) var passGroupID
 
    var body: some View {
        SubscriptionStoreView(groupID: passGroupID) {
            PassMarketingContent()
                .lightMarketingContentStyle()
                .containerBackground(for: .subscriptionStoreFullHeight) {
                    SkyBackground()
                }
        }
        .backgroundStyle(.clear)
        .subscriptionStoreButtonLabel(.multiline)
    }
  
}

12:01 - Choosing a subscription store picker item background

import SwiftUI
import StoreKit

struct BackyardBirdsPassShop: View {
    @Environment(\.shopIDs.pass) var passGroupID
 
    var body: some View {
        SubscriptionStoreView(groupID: passGroupID) {
            PassMarketingContent()
                .lightMarketingContentStyle()
                .containerBackground(for: .subscriptionStoreFullHeight) {
                    SkyBackground()
                }
        }
        .backgroundStyle(.clear)
        .subscriptionStoreButtonLabel(.multiline)
        .subscriptionStorePicketItemBackground(.thinMaterial)
    }
  
}

12:20 - Declaring a redeem code button

import SwiftUI
import StoreKit

struct BackyardBirdsPassShop: View {
    @Environment(\.shopIDs.pass) var passGroupID
 
    var body: some View {
        SubscriptionStoreView(groupID: passGroupID) {
            PassMarketingContent()
                .lightMarketingContentStyle()
                .containerBackground(for: .subscriptionStoreFullHeight) {
                    SkyBackground()
                }
        }
        .backgroundStyle(.clear)
        .subscriptionStoreButtonLabel(.multiline)
        .subscriptionStorePicketItemBackground(.thinMaterial)
        .storeButton(.visible, for: .redeemCode)
    }
  
}

14:10 - Reacting to completed purchases from descendant views

BirdFoodShop()
    .onInAppPurchaseCompletion { (product: Product, result: Result<Product.PurchaseResult, Error>) in
        if case .success(.success(let transaction)) = result {
            await BirdBrain.shared.process(transaction: transaction)
            dismiss()
        }
    }

15:43 - Reacting to in-app purchases starting

BirdFoodShop()
    .onInAppPurchaseStart { (product: Product) in
        self.isPurchasing = true
    }

16:57 - Declaring a subscription status dependency

subscriptionStatusTask(for: passGroupID) { taskState in
    if let statuses = taskState.value {
        passStatus = await BirdBrain.shared.status(for: statuses)
    }            
}

19:37 - Unlocking non-consumables

currentEntitlementTask(for: "com.example.id") { state in
    self.isPurchased = BirdBrain.shared.isPurchased(
        for: state.transaction
    )
}

20:52 - Declaring placeholder icons

ProductView(id: ids.nutritionPelletBox) {
    BoxOfNutritionPelletsIcon()
} placeholderIcon: {
    Circle()
}

21:25 - Using the promotional icon

ProductView(
    id: ids.nutritionPelletBox,
    prefersPromotionalIcon: true
) {
    BoxOfNutritionPelletsIcon()
}

21:56 - Using the promotional icon border

ProductView(id: ids.nutritionPelletBox) {
    BoxOfNutritionPelletsIcon()
        .productIconBorder()
}

23:02 - Composing standard styles to create custom styles

struct SpinnerWhenLoadingStyle: ProductViewStyle {

    func makeBody(configuration: Configuration) -> some View {
        switch configuration.state {
        case .loading:
            ProgressView()
                .progressViewStyle(.circular)
        default:
            ProductView(configuration)
        }
    }

}

23:44 - Applying custom styles to the product view

ProductView(id: ids.nutritionPelletBox) {
    BoxOfNutritionPelletsIcon()
}
.productViewStyle(SpinnerWhenLoadingStyle())

23:58 - Declaring custom styles

struct BackyardBirdsStyle: ProductViewStyle {

  func makeBody(configuration: Configuration) -> some View {
    switch configuration.state {
      case .loading: // Handle loading state here
      case .failure(let error): // Handle failure state here
      case .unavailable: // Handle unavailabiltity here
      case .success(let product):
        HStack(spacing: 12) {
          configuration.icon
          VStack(alignment: .leading, spacing: 10) {
            Text(product.displayName)
            Button(product.displayPrice) {
              configuration.purchase()
            }
            .bold()
          }
        }
        .backyardBirdsProductBackground()
    }
  }

}

26:44 - Declaring a dependency on products

@State var productsState: Product.CollectionTaskState = .loading

var body: some View {
    ZStack {
        switch productsState {
        case .loading:
            BirdFoodShopLoadingView()
        case .failed(let error):
            ContentUnavailableView(/* ... */)
        case .success(let products, let unavailableIDs):
            if products.isEmpty {
                ContentUnavailableView(/* ... */)
            }
            else {
                BirdFoodShop(products: products)
            }
        }
    }
    .storeProductsTask(for: productIDs) { state in
        self.productsState = state
    }
}

27:54 - Configuring the visibility of auxiliary buttons

SubscriptionStoreView(groupID: passGroupID) {
   // ...
}
.storeButton(.visible, for: .redeemCode)

29:56 - Adding a sign in action

@State var presentingSignInSheet = false

var body: some View {
    SubscriptionStoreView(groupID: passGroupID) {
        PassMarketingContent()
            .containerBackground(for: .subscriptionStoreFullHeight) {
                SkyBackground()
            }
    }
    .subscriptionStoreSignInAction {
        presentingSignInSheet = true
    }
    .sheet(isPresented: $presentingSignInSheet) {
        SignInToBirdAccountView()
    }
}

30:32 - Displaying policies from the App Store metadata

SubscriptionStoreView(groupID: passGroupID) {
    PassMarketingContent()
        .containerBackground(for: .subscriptionStoreFullHeight) {
            SkyBackground()
        }
}
.subscriptionStorePolicyForegroundStyle(.white)
.storeButton(.visible, for: .policies)

31:22 - Choosing a control style

SubscriptionStoreView(groupID: passGroupID) {
    PassMarketingContent()
        .containerBackground(for: .subscriptionStoreFullHeight) {
            SkyBackground()
        }
}
.subscriptionStoreControlStyle(.buttons)

32:28 - Declaring the layout of the subscribe button label

SubscriptionStoreView(groupID: passGroupID) {
    PassMarketingContent()
        .containerBackground(for: .subscriptionStoreFullHeight) {
            SkyBackground()
        }
}
.subscriptionStoreButtonLabel(.multiline)

32:51 - Declaring the content of the subscribe button label

SubscriptionStoreView(groupID: passGroupID) {
    PassMarketingContent()
        .containerBackground(for: .subscriptionStoreFullHeight) {
            SkyBackground()
        }
}
.subscriptionStoreButtonLabel(.displayName)

33:04 - Declaring the layout and content of the subscribe button label

SubscriptionStoreView(groupID: passGroupID) {
    PassMarketingContent()
        .containerBackground(for: .subscriptionStoreFullHeight) {
            SkyBackground()
        }
}
.subscriptionStoreButtonLabel(.multiline.displayName)

33:44 - Decorating subscription plans

SubscriptionStoreView(groupID: passGroupID) {
    PassMarketingContent()
        .containerBackground(for: .subscriptionStoreFullHeight) {
            SkyBackground()
        }
}
.subscriptionStoreControlIcon { subscription, info in
    Group {
        let status = PassStatus(
            levelOfService: info.groupLevel
        )
        switch status {
        case .premium:
            Image(systemName: "bird")
        case .family:
            Image(systemName: "person.3.sequence")
        default:
            Image(systemName: "wallet.pass")
        }
    }
    .foregroundStyle(.tint)
    .symbolVariant(.fill)
}

34:07 - Decorating subscription plans with the button control style

SubscriptionStoreView(groupID: passGroupID) {
    PassMarketingContent()
        .containerBackground(for: .subscriptionStoreFullHeight) {
            SkyBackground()
        }
}
.subscriptionStoreControlIcon { subscription, info in
    Group {
        let status = PassStatus(
            levelOfService: info.groupLevel
        )
        switch status {
        case .premium:
            Image(systemName: "bird")
        case .family:
            Image(systemName: "person.3.sequence")
        default:
            Image(systemName: "wallet.pass")
        }
    }
   .symbolVariant(.fill)
}
.foregroundStyle(.white)
.subscriptionStoreControlStyle(.buttons)

34:14 - Adding a container background

SubscriptionStoreView(groupID: passGroupID) {
    PassMarketingContent()
        .containerBackground(
            .accent.gradient,
            for: .subscriptionStore
        )
}

35:30 - Presenting upgrade offers

SubscriptionStoreView(
    groupID: passGroupID,
    visibleRelationships: .upgrade
) {
    PremiumMarketingContent()
        .containerBackground(for: .subscriptionStoreFullHeight) {
            SkyBackground()
        }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC23

WWDC22

WWDC21

WWDC20