Swiftでのスプラッシュ画面実装！10選のサンプルコードと活用法

はじめに

あなたはアプリケーションを開始する際、短時間だけ表示されるロゴやアニメーションを見たことがありますよね。

それがスプラッシュ画面です。

この記事を読めば、Swiftでスプラッシュ画面を実装する方法が身につくでしょう。

特に、初心者の方に向けて、分かりやすく基本から説明します。

Swiftを学ぶことで、iOS向けのアプリケーション開発が可能になります。

そして、スプラッシュ画面はアプリのブランドを印象付ける大切な要素の一つです。

しかし、実装の仕方やデザインのカスタマイズ方法を知らないと、思い通りのスプラッシュ画面を作成するのは難しいかもしれません。

そこで、この記事ではSwiftでのスプラッシュ画面の基本から、応用例や注意点、カスタマイズの方法まで詳しく解説します。

Swiftの基本的な知識がある方はもちろん、初心者の方でも安心してステップバイステップで学べる内容となっています。

●Swiftとスプラッシュ画面の基本

○Swiftとは

Swiftは、Appleが提供しているプログラミング言語で、iOSやmacOS、watchOS、tvOSといったAppleのプラットフォーム向けのアプリケーション開発に利用されます。

CやObjective-Cとは異なり、Swiftはよりシンプルで直感的な文法を持ち、安全性やパフォーマンスも考慮されて設計されています。

近年、iOSアプリ開発の主要言語として多くの開発者に支持されています。

○スプラッシュ画面の意味と役割

スプラッシュ画面は、アプリが起動する際に一時的に表示される画面のことを指します。

多くの場合、企業のロゴやアプリのロゴ、ブランドメッセージなどが配置されます。

スプラッシュ画面の主な役割は、アプリのロード時間にユーザーが待ちくたびれることなく、快適なユーザーエクスペリエンスを提供することです。

また、アプリのブランドを強化する効果も期待されます。

●スプラッシュ画面の実装方法

アプリケーションを開発する際、初めて表示される画面がスプラッシュ画面です。

これはアプリの初回起動時の印象を決める大切な部分です。

Swiftを用いて、スムーズにスプラッシュ画面を実装する方法について解説していきます。

○サンプルコード1：基本的なスプラッシュ画面

スプラッシュ画面を実装する最も基本的な方法を解説します。

この例では、静的な画像を使ってスプラッシュ画面を表示しています。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let splashImage = UIImage(named: "splashLogo")
        let splashImageView = UIImageView(image: splashImage)
        splashImageView.frame = self.view.bounds
        self.view.addSubview(splashImageView)

        // 2秒後にスプラッシュ画面を消す
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
            splashImageView.removeFromSuperview()
        }
    }
}

このコードでは、splashLogoという名前の画像をスプラッシュ画面として表示しています。

そして、DispatchQueueを使用して、2秒後にスプラッシュ画面を取り除く処理を行っています。

○サンプルコード2：アニメーションを含むスプラッシュ画面

次に、アニメーションを追加してスプラッシュ画面をさらに魅力的にする方法を見ていきましょう。

アニメーションはユーザーの注目を引く効果があります。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let splashImage = UIImage(named: "splashLogo")
        let splashImageView = UIImageView(image: splashImage)
        splashImageView.frame = self.view.bounds
        self.view.addSubview(splashImageView)

        // フェードアウトのアニメーション
        UIView.animate(withDuration: 2.0, animations: {
            splashImageView.alpha = 0
        }) { (completed) in
            splashImageView.removeFromSuperview()
        }
    }
}

上記のサンプルでは、スプラッシュ画面を2秒かけてフェードアウトさせています。

アニメーションの終了後に、画像は画面から取り除かれます。アニメーションを使用することで、ユーザーに滑らかな遷移を感じさせることができます。

○サンプルコード3：デバイス毎のスプラッシュ画面の表示方法

多様なiOSデバイスでアプリを動作させる場合、デバイスのサイズや解像度に応じて異なるスプラッシュ画面を表示する必要があります。

ここでは、Swiftを使用して、異なるデバイスに対応したスプラッシュ画面の実装方法について解説します。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let deviceType = UIDevice.current.model

        var splashImageName = "defaultSplash"

        switch deviceType {
        case "iPhone":
            splashImageName = "iphoneSplash"
        case "iPad":
            splashImageName = "ipadSplash"
        default:
            break
        }

        let splashImage = UIImage(named: splashImageName)
        let splashImageView = UIImageView(image: splashImage)
        splashImageView.frame = self.view.bounds
        self.view.addSubview(splashImageView)

        // 2秒後にスプラッシュ画面を消す
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
            splashImageView.removeFromSuperview()
        }
    }
}

このコードでは、UIDevice.current.modelを使用して、現在のデバイスの種類を取得しています。

その後、デバイスの種類に基づいて、適切なスプラッシュ画面の画像名を設定しています。

例えば、デバイスがiPhoneの場合、iphoneSplashという名前の画像がスプラッシュ画面として表示されます。

この方法を利用することで、異なるデバイスに応じたスプラッシュ画面を簡単に実装することができます。

○サンプルコード4：タイマーを利用した表示時間の制御

アプリの起動時に表示されるスプラッシュ画面の表示時間を制御することで、ユーザー体験を向上させることができます。

下記のサンプルコードでは、Timerクラスを使用して、スプラッシュ画面の表示時間を制御しています。

import UIKit

class ViewController: UIViewController {
    var splashImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let splashImage = UIImage(named: "splashLogo")
        splashImageView = UIImageView(image: splashImage)
        splashImageView.frame = self.view.bounds
        self.view.addSubview(splashImageView)

        Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(removeSplashScreen), userInfo: nil, repeats: false)
    }

    @objc func removeSplashScreen() {
        UIView.animate(withDuration: 1.0, animations: {
            self.splashImageView.alpha = 0
        }) { (completed) in
            self.splashImageView.removeFromSuperview()
        }
    }
}

上記のサンプルでは、Timerクラスを使用して、3秒後にremoveSplashScreenメソッドを呼び出しています。

このメソッドでは、スプラッシュ画面を1秒かけてフェードアウトさせた後、画像を画面から取り除いています。

このように、Timerクラスを活用することで、スプラッシュ画面の表示時間を簡単に制御することができます。

○サンプルコード5：ユーザーインタラクションを含むスプラッシュ画面

スプラッシュ画面にインタラクションを取り入れることで、アプリの使い心地や印象を向上させることができます。

ここでは、ユーザーがスプラッシュ画面上で行うアクションを取得し、それに対応した動作を実装する方法を解説します。

import UIKit

class SplashViewController: UIViewController {

    var splashImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let splashImage = UIImage(named: "interactiveSplash")
        splashImageView = UIImageView(image: splashImage)
        splashImageView.frame = self.view.bounds
        splashImageView.isUserInteractionEnabled = true
        self.view.addSubview(splashImageView)

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        splashImageView.addGestureRecognizer(tapGesture)
    }

    @objc func handleTap() {
        // タップされたらスプラッシュ画面を非表示にする
        splashImageView.removeFromSuperview()
    }
}

このコードでは、isUserInteractionEnabledプロパティをtrueに設定して、UIImageViewにタップジェスチャを追加しています。

ユーザーがスプラッシュ画面をタップすると、handleTapメソッドが呼び出され、スプラッシュ画面が非表示になります。

このように、ユーザーのアクションに応じてスプラッシュ画面の表示・非表示をコントロールすることができます。

○サンプルコード6：サードパーティライブラリを用いた実装

サードパーティのライブラリを使用することで、迫力のあるスプラッシュ画面を簡単に実装できます。

ここでは、Lottieというライブラリを使用して、アニメーション付きのスプラッシュ画面を実装する方法を紹介します。

まず、CocoaPodsやCarthageを使用して、プロジェクトにLottieを追加します。

次に、LottieのJSONアニメーションファイルをプロジェクトに追加します。

import UIKit
import Lottie

class SplashWithLottieViewController: UIViewController {

    let animationView = AnimationView()

    override func viewDidLoad() {
        super.viewDidLoad()

        animationView.animation = Animation.named("lottieSplash")
        animationView.frame = view.bounds
        animationView.contentMode = .scaleAspectFill
        animationView.loopMode = .loop
        view.addSubview(animationView)

        animationView.play(completion: { (finished) in
            // アニメーションが終了したら画面遷移
            self.goToMainScreen()
        })
    }

    func goToMainScreen() {
        // メイン画面への遷移処理を記述
    }
}

このコードを実行すると、Lottieで作成されたアニメーションがスプラッシュ画面として表示されます。

アニメーションが完了すると、goToMainScreenメソッドが呼び出されてメイン画面に遷移します。

Lottieを使用すると、複雑なアニメーションも簡単にスプラッシュ画面として実装できます。

○サンプルコード7：画像を変更してカスタマイズする方法

スプラッシュ画面の最も基本的な要素として、背景画像が挙げられます。

背景画像を変更することで、アプリのテーマやブランドイメージに合わせたスプラッシュ画面を実装することができます。

Swiftでの実装について詳しく見ていきましょう。

import UIKit

class CustomizedSplashViewController: UIViewController {

    var splashImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 新しい背景画像を設定
        let splashImage = UIImage(named: "newSplashImage")
        splashImageView = UIImageView(image: splashImage)
        splashImageView.frame = self.view.bounds
        self.view.addSubview(splashImageView)
    }
}

このコードでは、新しい背景画像newSplashImageをプロジェクトに追加した上で、その画像をUIImageViewのインスタンスとして読み込んでいます。

このUIImageViewをビューコントローラのviewに追加することで、新しいスプラッシュ画面が表示されます。

画像を変更するだけでなく、画像の表示方法や位置、サイズもカスタマイズできます。

例えば、画像のアスペクト比を保ったまま中央に表示したい場合、次のようにcontentModeプロパティを設定することができます。

splashImageView.contentMode = .scaleAspectFit

この一行を追加することで、画像がビューのサイズに合わせて縮小・拡大され、中央に配置されるようになります。

○サンプルコード8：ユーザープリファレンスに基づいた動的スプラッシュ

一部のアプリケーションでは、ユーザーの好みや選択に基づいてスプラッシュ画面を動的に変更することが求められることがあります。

例えば、ユーザーがアプリ内でテーマをダークモードやライトモードに変更した場合、それに合わせてスプラッシュ画面も変更したいと思うでしょう。

import UIKit

class DynamicSplashViewController: UIViewController {

    var splashImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // ユーザーの設定を取得
        let userPreference = UserDefaults.standard.string(forKey: "themePreference")

        var splashImageName = "defaultSplash"
        if userPreference == "dark" {
            splashImageName = "darkSplash"
        } else if userPreference == "light" {
            splashImageName = "lightSplash"
        }

        let splashImage = UIImage(named: splashImageName)
        splashImageView = UIImageView(image: splashImage)
        splashImageView.frame = self.view.bounds
        self.view.addSubview(splashImageView)
    }
}

上記のコードでは、UserDefaultsを利用してユーザーのテーマ設定を取得しています。

テーマ設定に応じて、表示するスプラッシュ画面の画像を動的に変更しています。

○サンプルコード9：音声を追加する方法

アプリのスタートを印象的に演出するため、スプラッシュ画面に音声を追加する方法もあります。

ここでは、Swiftを使用してスプラッシュ画面に音声を再生する方法について説明します。

まず、AVFoundationフレームワークを使って音声を再生します。

このフレームワークを使用すると、様々なオーディオやビデオの再生、編集が可能になります。

import UIKit
import AVFoundation

class AudioSplashViewController: UIViewController {

    var audioPlayer: AVAudioPlayer?

    override func viewDidLoad() {
        super.viewDidLoad()

        guard let soundURL = Bundle.main.url(forResource: "splashSound", withExtension: "mp3") else { return }
        do {
            audioPlayer = try AVAudioPlayer(contentsOf: soundURL)
            audioPlayer?.play()
        } catch {
            print("音声ファイルの読み込みや再生に失敗しました。")
        }
    }
}

このコードでは、AVAudioPlayerを使用して音声を再生しています。

まずsplashSound.mp3という名前の音声ファイルをプロジェクトに追加します。

次に、その音声ファイルのURLを取得し、AVAudioPlayerのインスタンスを作成します。

そして、playメソッドを使って音声を再生します。

音声の再生が完了したら、適切なタイミングでスプラッシュ画面を終了させることができます。

このようにして、ユーザーにアプリの開始を印象的に伝えることができます。

○サンプルコード10：ネットワーク状態を考慮したスプラッシュ画面

アプリの起動時にネットワークの接続状態を確認し、接続が不安定な場合やオフラインの場合には、異なるスプラッシュ画面を表示することも考えられます。

import UIKit
import Network

class NetworkAwareSplashViewController: UIViewController {

    var monitor = NWPathMonitor()
    var queue = DispatchQueue(label: "NetworkMonitor")

    override func viewDidLoad() {
        super.viewDidLoad()

        monitor.pathUpdateHandler = { path in
            if path.status == .satisfied {
                self.showRegularSplash()
            } else {
                self.showOfflineSplash()
            }
        }

        monitor.start(queue: queue)
    }

    func showRegularSplash() {
        DispatchQueue.main.async {
            self.view.backgroundColor = UIColor.green
            // 通常のスプラッシュ画面を表示するロジック
        }
    }

    func showOfflineSplash() {
        DispatchQueue.main.async {
            self.view.backgroundColor = UIColor.red
            // オフライン時のスプラッシュ画面を表示するロジック
        }
    }
}

上記のコードは、NWPathMonitorを使用してデバイスのネットワーク状態を監視しています。ネットワークが利用可能な場合はshowRegularSplashメソッドを呼び出し、通常のスプラッシュ画面を表示します。

ネットワークが利用できない場合はshowOfflineSplashメソッドを呼び出し、オフライン時専用のスプラッシュ画面を表示します。

●応用例とサンプルコード

Swiftを使用してスプラッシュ画面を実装する際、基本的な方法だけでなく、さまざまな応用例やカスタマイズ方法が考えられます。

ユーザーエクスペリエンスを向上させるために、こうした応用例を取り入れることが推奨されます。

○サンプルコード11：スプラッシュ画面後に広告を表示する方法

多くの無料アプリでは、スプラッシュ画面の後に広告を表示することで収益を得ています。

ここでは、そのような実装方法について説明します。

まず、AdMobなどの広告ライブラリをプロジェクトに追加します。

次に、スプラッシュ画面が終了したタイミングで広告を表示するロジックを追加します。

import UIKit
import GoogleMobileAds

class AdSplashViewController: UIViewController, GADFullScreenContentDelegate {

    var interstitial: GADInterstitialAd?

    override func viewDidLoad() {
        super.viewDidLoad()
        loadInterstitialAd()
    }

    func loadInterstitialAd() {
        let request = GADRequest()
        GADInterstitialAd.load(withAdUnitID: "your_ad_unit_id", request: request) { [weak self] ad, error in
            if let error = error {
                print("広告の読み込みに失敗しました：\(error.localizedDescription)")
                return
            }
            self?.interstitial = ad
            self?.interstitial?.fullScreenContentDelegate = self
        }
    }

    func showInterstitialAd() {
        if let ad = interstitial {
            ad.present(fromRootViewController: self)
        }
    }
}

このコードでは、GADInterstitialAdを使ってインタースティシャル広告を読み込み、スプラッシュ画面の後に表示しています。

loadInterstitialAdメソッドで広告を事前に読み込み、適切なタイミングでshowInterstitialAdメソッドを呼び出すことで広告を表示します。

○サンプルコード12：スプラッシュとOnboardingの連携方法

スプラッシュ画面の後にOnboarding(初回起動時のチュートリアル)を表示することで、ユーザーにアプリの使用方法や特徴を効果的に伝えることができます。

import UIKit

class OnboardingAfterSplashViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        if isFirstLaunch() {
            showOnboarding()
        }
    }

    func isFirstLaunch() -> Bool {
        return !UserDefaults.standard.bool(forKey: "launchedBefore")
    }

    func showOnboarding() {
        // OnboardingViewControllerは、チュートリアルの画面を実装したものとする
        let onboardingVC = OnboardingViewController()
        present(onboardingVC, animated: true, completion: nil)
        UserDefaults.standard.set(true, forKey: "launchedBefore")
    }
}

このコードでは、アプリが初回起動されたかどうかをUserDefaultsで判定しています。

初回起動の場合、showOnboardingメソッドが呼ばれ、Onboarding画面が表示されます。

2回目以降の起動では、この画面はスキップされます。

●注意点と対処法

Swiftでスプラッシュ画面を実装する際には、注意すべき点や一般的に出会う問題点がいくつか存在します。

それらを知り、適切に対処することで、ユーザーにとっての使い勝手を向上させることができます。

○スプラッシュ画面の表示時間について

スプラッシュ画面はアプリの初期化処理を伴いながら、一定時間表示されるものです。

しかし、表示時間が長すぎると、ユーザーの退会率が上昇する恐れがあります。

import UIKit

class SplashScreenViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 3秒後にメイン画面へ遷移する
        DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
            self.moveToMainScreen()
        }
    }

    func moveToMainScreen() {
        // MainViewControllerは、メインの画面を実装したものとする
        let mainVC = MainViewController()
        present(mainVC, animated: true, completion: nil)
    }
}

このコードでは、DispatchQueue.main.asyncAfterメソッドを使用して、スプラッシュ画面を3秒間表示した後、メインの画面へ遷移しています。

3秒は一般的な表示時間とされていますが、内容や目的に応じて調整することが推奨されます。

○ユーザーエクスペリエンスを損なわないための工夫

スプラッシュ画面が表示されている間、ユーザーはアプリの利用ができません。

そのため、この時間を有意義に使って、アプリの特徴や新機能、キャンペーン情報などを伝えることで、ユーザーエクスペリエンスを向上させることができます。

import UIKit

class InformativeSplashScreenViewController: UIViewController {

    let infoLabel: UILabel = {
        let label = UILabel()
        label.text = "新機能「フレンド検索」を追加しました！"
        label.textColor = .white
        label.textAlignment = .center
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        setupInfoLabel()

        // 3秒後にメイン画面へ遷移する
        DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
            self.moveToMainScreen()
        }
    }

    func setupInfoLabel() {
        view.addSubview(infoLabel)
        infoLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            infoLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            infoLabel.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -30)
        ])
    }

    func moveToMainScreen() {
        let mainVC = MainViewController()
        present(mainVC, animated: true, completion: nil)
    }
}

このコードを実行すると、スプラッシュ画面の下部に新機能の情報を伝えるテキストが表示されます。

このように、短い時間であってもユーザーに有益な情報を伝えることで、スプラッシュ画面の待ち時間を有意義に活用することができます。

●カスタマイズの方法

Swiftで作成されたスプラッシュ画面は、デザインや動作に関して様々なカスタマイズが可能です。

ここでは、デザインのカスタマイズと動作や表示方法のカスタマイズの方法について詳しく解説していきます。

○デザインのカスタマイズ

スプラッシュ画面のデザインは、アプリのブランドやコンセプトを反映させるために非常に重要です。

色やフォント、背景画像などを変更することで、オリジナルなスプラッシュ画面を実現することができます。

import UIKit

class CustomDesignSplashScreenViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 背景色の変更
        self.view.backgroundColor = UIColor.purple

        // テキストの追加とカスタマイズ
        let customLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
        customLabel.center = view.center
        customLabel.text = "My App"
        customLabel.font = UIFont(name: "Helvetica-Bold", size: 24)
        customLabel.textColor = UIColor.white
        customLabel.textAlignment = .center
        view.addSubview(customLabel)
    }
}

このコードでは、スプラッシュ画面の背景色を紫に設定し、中央に「My App」というテキストを表示しています。

テキストのフォントやサイズ、色もカスタマイズされています。

○動作や表示方法のカスタマイズ

スプラッシュ画面の表示時間やアニメーションなど、動作や表示に関するカスタマイズも考慮する必要があります。

ユーザーにとって快適な体験を提供するために、適切な動作や表示方法のカスタマイズを行いましょう。

import UIKit

class CustomActionSplashScreenViewController: UIViewController {

    let splashImageView: UIImageView = {
        let imageView = UIImageView(image: UIImage(named: "splashImage"))
        imageView.contentMode = .scaleAspectFill
        return imageView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(splashImageView)
        splashImageView.frame = view.bounds

        // アニメーションの追加
        UIView.animate(withDuration: 1.5, delay: 0.5, options: .curveEaseInOut, animations: {
            self.splashImageView.alpha = 0
        }, completion: { _ in
            self.moveToMainScreen()
        })
    }

    func moveToMainScreen() {
        let mainVC = MainViewController()
        present(mainVC, animated: true, completion: nil)
    }
}

このコードを実行すると、スプラッシュ画面に設定された画像が1.5秒かけてフェードアウトし、その後メイン画面へ遷移します。

このように、アニメーションを取り入れることで、スプラッシュ画面の動作や表示方法をカスタマイズすることができます。

まとめ

Swiftを使用して、スプラッシュ画面の実装やカスタマイズ方法を詳しく解説しました。

スプラッシュ画面はアプリの初回起動時に表示される画面で、そのアプリのブランディングやユーザーエクスペリエンスの向上に大きく貢献します。

今回、基本的なスプラッシュ画面から応用例や注意点、さらにはカスタマイズの方法まで幅広く取り上げました。

これにより、初心者から上級者まで、各自のアプリに合わせて最適なスプラッシュ画面を実装するための知識や技術を身につけることができたと思います。

Swiftの持つ柔軟性と拡張性を最大限に活かすことで、より魅力的で効果的なスプラッシュ画面を作成することが可能です。

今後もSwiftや関連技術のトレンドを追いかけ、アプリ開発の幅を広げていきましょう。