Go to Qiita Advent Calendar 2024 Top
LoginSignup
14
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@MilanistaDev(Takuya Aso)

【iOS 14】SKOverlay を使ってオススメ/関連アプリを紹介する UI をお手軽実装

Posted at

はじめに

時事雑談新しい iPhone の発売が遅れるというアナウンスもあって， iOS 14 のリリースの仕方が気になっていましたが， 9/15 のイベントの中でかなり急な感じでリリース発表がありました。 (えっ明日!? Xcode 12 GM 出てたっけ?) iOS 14 リリース日に合わせてアプリの配信を。と 考えていたデベロッパも多いはずで間に合うことを祈りたいですね・・・

iOS 14 で別のアプリをユーザーに薦め，すぐに App Store でインストール可能にする SKOverlay が使えるようになりました。

実装自体とても簡単で，UIKit，SwiftUI 両方で使えます。
自分の作った別のアプリを紹介するという形で組み込んでみたので
実装していて気づいた点を含め紹介します。
全体の動きはこんな感じです。

SKOverlay_00

SKOverlay とは

![-](https://img.shields.io/badge/iOS-iOS 14.0 and later-brightgreen)　![-](https://img.shields.io/badge/Xcode-Xcode 12.0 and later-brightgreen)

Developer サイト1 には下記のように説明があります。

By displaying an overlay, you can recommend another app to users and enable them to download it immediately.

オススメしたいアプリやコンテンツに関連するアプリなどを表示させ，
App Store へ遷移させることでユーザがすぐにアプリ情報にアクセス，
アプリインストールが可能になります。

今まで App Store へのリンクや UI を用意していたのが，
ほんの少しの実装で代わりになってくれます。
iOS 14 以上対応なので，iOS 13 以下は別途対応が必要です。
(私はあえて iOS 13 以下は何もしないことにしました。)

アプリのレビュー促進(SKStoreReviewController2)など
簡単な実装で実現できる便利で Good な機能あるので StoreKit いいですよね。

SwiftUI

StoreKit を import します。
指定された条件が true の場合に表示されます。
例えばボタンタップで表示させたりができます。


import SwiftUI
import StoreKit // 追加

struct ContentView: View {
    // SKOverlayを表示するかの状態
    @State private var showSKOverlay = false

    var body: some View {
        Button("オススメアプリを表示") {
            self.showSKOverlay.toggle()  // 状態切替
        }
        .appStoreOverlay(isPresented: $showSKOverlay) {
            SKOverlay.AppConfiguration(appIdentifier: "1234567890", position: .bottom)
        }
    }
}

appIdentifier は App Store のアプリページのリンクの
末尾の id を除いた数字部分を文字列にしたもので，
https://apps.apple.com/jp/app/id1234567890
だったら "1234567890" です。

表示位置は 2パターンあり，.bottom と .bottomRaised です。
後者は少し上に上がって表示されます。TabBar とか ToolBar を意識しているのかな？

.bottom .bottomRaised
スクリーンショット 2020-09-16 5 53 38 スクリーンショット 2020-09-16 5 54 04

Run した場合ビルド自体は通るのですが，プレビューを見ようとしたらできないです。
いつか治るといいのですが・・・・(リリース版でもダメ🤔)

スクリーンショット 2020-09-16 14 13 07

UIKit

私は UIKit の方で対応したので，
このような関数を用意してコールしてみました。
scene に対して present するあたりが特徴でしょうか。

import StoreKit // 追加

@available(iOS 14.0, *)
private func displayOverlay() {
    guard let scene = view.window?.windowScene else { return }
    let config = SKOverlay.AppConfiguration(appIdentifier: self.myAppInfo.appIdentifier, position: .bottom)
    let overlay = SKOverlay(configuration: config)
    overlay.present(in: scene)
}

表示位置は同じで，.bottom と .bottomRaised の2パターンです。

SKOverlay_01

ダークモードも対応しているので色の設定等の対応は不要です。

SKOverlay_02

OPEN のところはローカライズされています。(私が英語環境のため)
インストール済みだったら該当のアプリが開きます。

インストールされていない場合やボタン以外のビューをタップすると
App Store に遷移します。

実装していての気づき

シミュレータでは確認できない

実装してみてシミュレータで動作確認しようとしたところ，
アプリ情報が表示されなくて少し時間を無駄にしました。
iOS 14 の実機で確認すればちゃんと表示されます。

SKOverlay_simularor_bottom

スクロール量の調整

表示は画面の下からコンテンツに被さる形となるため，
position を.bottomRaised にすることで事足りる場合はいいのですが，
コンテンツが隠れてしまうことが多いと思います。

UIScrollView(もちろん UITableView や UICollectionViewも)を
使っている場合はスクロール量を少し調整してあげたら良いと思います。
使っていない場合は制約を調整すれば良さそうです。

私のアプリは UIScrollView を使っていたので
下記のように iOS 14 以上ではコンテンツサイズを調整させました。

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    if #available(iOS 14.0, *) {
        self.baseScrollView.contentSize.height += 100.0
        self.displayOverlay()
    }
}

SKOverlay_03

一応表示は下にスワイプすると隠れてくれます。

SKOverlay_04

表示/非表示が完了するタイミング，ロードが失敗した際に呼ばれる，
Delegate メソッドが用意されているので，
レイアウトをしっかりしたい場合等はこちらで調整しても良さそうです(SKOverlayDelegate)。3

例えば，表示されたらコンテンツのサイズ変更し，
非表示になったらアニメーションつけてサイズを戻してあげたりできますね。
お手軽感は薄れますがこっちの方が良さそうです。


// overlay.delegate = self

@available(iOS 14.0, *)
extension HogeViewController: SKOverlayDelegate {
    // SKOverlayの表示が終わったときに呼ばれる
    func storeOverlayDidFinishPresentation(_ overlay: SKOverlay, transitionContext: SKOverlay.TransitionContext) {
        self.baseScrollView.contentSize.height += 100.0
    }

    // SKOverlayが非表示になり始めたときに呼ばれる
    func storeOverlayWillStartDismissal(_ overlay: SKOverlay, transitionContext: SKOverlay.TransitionContext) {
        UIView.animate(withDuration: 1.0) {
            self.baseScrollView.contentSize.height -= 100.0
        }
    }
}

SKOverlay_06

適切なタイミングで非表示に

よく仕様を確認せず表示されたことに満足していたところ，
画面遷移などによって表示させたい画面を離れても
表示されたままになってしまい，UX を損なうことがありました。

VC に対しての present ではなく，scene に対しての present のためです。

/// Attempts to present an app overlay in a `UIWindowScene`.
@available(iOS 14.0, *)
open func present(in scene: UIWindowScene)

そのため，非表示にする実装もしっかりしないといけないです。
画面を離れる際に非表示にするように対応しました。

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    if #available(iOS 14.0, *) {
        self.dismissOverlay()
    }
}

@available(iOS 14.0, *)
private func dismissOverlay() {
    guard let scene = view.window?.windowScene else { return }
    SKOverlay.dismiss(in: scene)
}

SKOverlay_05

おわりに

iOS 14 から使えるようになった SKOverlay について書きました。

お手軽に実装できるので，
もし関連アプリやオススメしたいアプリがあったらぜひ実装したいですね。

強調しすぎるのも良くないので適切な画面，タイミングで表示し，
同じく非表示にしてあげるのも大事だと思いました。

ご覧いただきありがとうございました🙇‍♂️

App Clip でも使えるらしいけどキャッチアップがまだ・・・4

  1. https://developer.apple.com/documentation/storekit/skoverlay ↩

  2. https://developer.apple.com/documentation/storekit/skstorereviewcontroller ↩

  3. https://developer.apple.com/documentation/storekit/skoverlaydelegate ↩

  4. https://developer.apple.com/documentation/app_clips/recommending_an_app_clip_s_corresponding_app ↩

14
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?