【最新】人気ライブラリSwiftSubKitで実現する！SwiftUI × StoreKit 2サブスクリプション完全入門📱
はじめに
本記事では、SwiftUIとStoreKit2を使用したiOSアプリでのサブスクリプション管理システムの実装について解説します。StoreKit2は、App内課金やサブスクリプションを簡単に実装できるAppleの新しいフレームワークで、今回は、StoreKit2対応の人気UIライブラリのSwiftSubKitを使用してシームレスでモダンなユーザ体験を実現していきます。🚀
最新のiOS26に合わせて「Liquid Glass」デザインを取り入れたアイコンは良いですね。特徴的で個人的に気に入っています。✨
SwiftSubKitでは既存で多くのカラーテーマが用意されています。それ以外にカスタムで好きな色も設定すること可能なので便利でした。
完成イメージ
今回実装するサブスクリプションのペイウォール画面は以下のとおりです。リッチなデザインですね。✨
開発環境
- Xcode16.2
- Swift 5
- iOS 18.0
使用するライブラリ🚀
全体のコード
今回開発するチュートリアルアプリ（サブスク課金付き）の全体ファイル構成は以下の通りです。
.
├── ContentView.swift // 実装はこの1ファイルだけ！
├── MainStoreConfig.storekit
└── TutorialAppApp.swift
TutorialAppApp.swiftは以下の通り、Xcodeでプロジェクトファイルを作成した時点での初期生成される内容でOKです。
import SwiftUI
@main
struct TutorialAppApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
次にContentView.swiftを説明します。通常であれば実装が必要なサブスクリプションの状態管理やStoreKit2との連携処理もSwiftSubKitに委譲しているため、開発者が個別に実装する必要はありません。
import SwiftUI
import SwiftSubKit
struct ContentView: View {
@State private var showPaywall = false
var body: some View {
NavigationView {
VStack(spacing: 40) {
// 途中省略
Button {
showPaywall = true
} label: {
HStack {
Text("Show PaywallView")
.fontWeight(.semibold)
}
}
}
.navigationTitle("SwiftSubKit Demo")
.navigationBarTitleDisplayMode(.inline)
}
.sheet(isPresented: $showPaywall) {
// 以下、PaywallViewの設定例です。
CardPaywallView(
productIDs: ["sample1", "sample2"],
theme: .instagram,
configuration: PaywallConfiguration(
closeButtonText: "閉じる",
loadingText: "プランを読み込み中...",
selectPlanButtonText: "プランを選択",
startTrialButtonText: "無料トライアルを開始",
restorePurchasesText: "購入を復元",
cancelAnytimeText: "いつでもキャンセル可能",
termsOfServiceText: "利用規約",
privacyPolicyText: "プライバシーポリシー",
termsOfServiceURL: URL(string: "https://example.com/terms"),
privacyPolicyURL: URL(string: "https://example.com/privacy"),
successTitle: "プレミアムへようこそ！",
successMessage: "プレミアム機能をお楽しみください",
getStartedText: "始めましょう！"
),
title: "プランを選択",
subtitle: "スワイプしてオプションを確認",
features: [
PaywallFeature(title: "広告なし音楽", description: "中断のないリスニング", icon: "music.note"),
PaywallFeature(title: "オフラインダウンロード", description: "どこでも聴ける", icon: "arrow.down.circle.fill")
]
)
}
}
}
以上、最低限の実装は完了です！これだけでサブスクリプション機能が実装できるのは驚きですね。続いてPaywallViewの各種設定値を見ていきましょう。✨
PaywallViewの設定値
以下、PaywallViewのメイン設定値です。SwiftSubKitでは、画面表示項目は大体カスタマイズ可能みたいですね。
| パラメータ | 型 | 説明 | サンプル値 |
|---|---|---|---|
productIDs |
[String] |
App Store Connectで設定したプロダクトIDの配列 | ["sample1", "sample2"] |
theme |
PaywallTheme |
ペイウォールのテーマデザイン | .instagram |
configuration |
PaywallConfiguration |
詳細な設定項目（下記参照） | - |
title |
String |
ペイウォールのメインタイトル | "プランを選択" |
subtitle |
String |
ペイウォールのサブタイトル | "スワイプしてオプションを確認" |
features |
[PaywallFeature] |
機能一覧の配列（下記参照） | - |
PaywallConfiguration設定項目
以下、PaywallConfigurationの設定です。サブスクリプションのStore審査では利用規約、プライバシーポリシー辺りで引っかかることが多いので必ず設定が必要ですね。
| 設定項目 | 型 | 説明 | サンプル値 |
|---|---|---|---|
closeButtonText |
String |
閉じるボタンのテキスト | "閉じる" |
loadingText |
String |
データ読み込み中のテキスト | "プランを読み込み中..." |
selectPlanButtonText |
String |
プラン選択ボタンのテキスト | "プランを選択" |
startTrialButtonText |
String |
無料トライアル開始ボタンのテキスト | "無料トライアルを開始" |
restorePurchasesText |
String |
購入復元ボタンのテキスト | "購入を復元" |
cancelAnytimeText |
String |
キャンセル可能であることを示すテキスト | "いつでもキャンセル可能" |
termsOfServiceText |
String |
利用規約リンクのテキスト | "利用規約" |
privacyPolicyText |
String |
プライバシーポリシーリンクのテキスト | "プライバシーポリシー" |
termsOfServiceURL |
URL? |
利用規約のURL | URL(string: "https://example.com/terms") |
privacyPolicyURL |
URL? |
プライバシーポリシーのURL | URL(string: "https://example.com/privacy") |
successTitle |
String |
購入成功時のタイトル | "プレミアムへようこそ！" |
successMessage |
String |
購入成功時のメッセージ | "プレミアム機能をお楽しみください" |
getStartedText |
String |
購入成功後の開始ボタンテキスト | "始めましょう！" |
PaywallFeature設定項目
以下、PaywallFeatureの設定です。サブスクリプションそれぞれの特徴をリスト形式で表示できるようです。
| 設定項目 | 型 | 説明 | サンプル値 |
|---|---|---|---|
title |
String |
機能のタイトル | "広告なし音楽" |
description |
String |
機能の説明文 | "中断のないリスニング" |
icon |
String |
SF Symbolsのアイコン名 | "music.note" |
利用可能なテーマ例
SwiftSubKitでは多くのカラーテーマが用意されています。それ以外にカスタムで好きな色も設定すること可能なので便利ですね。
| テーマ | 説明 |
|---|---|
.default |
クリーンでモダンなデザイン。あらゆる用途にバランスよく使える基本テーマ。 |
.dark |
背景が暗く、アクセントカラーが映えるクールなテーマ。 |
.minimal |
テキスト中心で装飾を排したシンプルなレイアウト。 |
.netflix |
Netflixをイメージした赤を基調とした印象的なテーマ。 |
.spotify |
Spotifyのような深緑と黒をベースにしたテーマ。 |
.instagram |
Instagram風のグラデーションを活かしたビジュアル重視のテーマ。 |
補足事項
-
productIDsは事前にApp Store Connectで設定したサブスクリプション商品のIDを指定します - URLパラメータ（
termsOfServiceURL、privacyPolicyURL）はオプショナルですが、App Storeの審査では必須となる場合があります -
features配列で複数の機能を追加でき、各機能にはSF Symbolsのアイコンを指定できます - テキスト項目はすべてローカライゼーション対応可能です
サブスクリプション商品の作成
実装が完了したら最後にサブスクリプション機能をテストしたいですね。App内課金のテスト環境には、ローカルでテストできるStoreKit Configurationと、AppleのSandbox環境という2つの機能が提供されています。
開発フローとしては、まずStoreKit Configurationを使用して基本的な動作確認を行い、機能が安定してきた段階で、より本番環境に近いSandbox環境での検証に移行するのが一般的なアプローチです。
それぞれの商品登録方法を見ていきましょう。
StoreKit Configuration
まず、Xcodeメニューバーの"File"から、 New > File from Template...を選択し、OtherカテゴリーのStoreKit Configuration Fileを選択してファイルを作成します。
作成したファイルを選択し、左下の「+」ボタンからAdd Auto-Renewable Subscriptionを選択すると、サブスクリプション商品を追加できます。Product ID、商品名、価格、サブスクリプション期間などを自由に設定することが可能です。
作成したStoreKit Configurationファイルを使うには、SchemeのRun設定のOptions内にあるStoreKit Configurationの欄に、作成したStoreKit Configurationファイルを指定します。
これでXcodeから指定のSchemeでアプリを起動した際に、StoreKit Configurationファイルに設定した商品が購入できるようになります。もっと詳細に知りたい方は以下の記事が参考になると思います。
Sandbox環境
より本番に近い環境でテストを行いたい場合は、Sandbox環境を利用することになります。App Store Connectの「ユーザーとアクセス」セクション内にある「Sandboxテスター」から、専用のテストアカウントを作成できます。
実際の購入テストを行う際は、購入時に表示されるApple IDとパスワードの入力ダイアログで、作成したSandboxテスターアカウントの情報を入力するだけです。もちろん実際の課金は発生しませんので安心してください。
Sandboxアカウントは通常のApple IDとは完全に独立して管理されます。一度ログインを行うと、デバイスの設定アプリ内のApp Store画面から、以下のような操作が可能になります。
- アカウントの切り替え
- サブスクリプションの解約
- 購入履歴の確認
Sandbox環境は、StoreKit Configurationでは検証できない複数端末での動作確認や、より実際のユーザー体験に近いテストを行いたい場合に重宝しますね。
最後に
いかがでしたでしょうか？
本記事では、SwiftUIとStoreKit2を活用したiOSアプリ向けサブスクリプション管理の実装方法について詳しく解説しました。
サブスクリプションの導入は、収益化や継続的なユーザーサポートにおいて非常に重要なポイントです。今回ご紹介したSwiftSubKitを使えば、複雑な課金処理も最小限のコードで手軽に実装できます。課金周りの実装の参考になれば幸いです。
Discussion