2023/9/21

【Swift UI】SFSafariViewControllerの使い方！Webページの表示

この記事からわかること

SwiftのSFSafariViewControllerの使い方
アプリ内からWebページを表示させるには？
Swift UIでの実装方法

index

[open]

SFSafariViewControllerとは？
使い方
Swift UIで使用する

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：14.3.1
iOS：16.4
Swift：5.8.1

SFSafariViewControllerとは？

公式リファレンス：SFSafariViewController

class SFSafariViewController : UIViewController

SwiftのSFSafariViewControllerクラスはWebページを表示するためのインタフェースを提供するクラスです。ブラウザアプリを起動させることなくアプリ内からSafariブラウザエンジンを使用してWebページを開くことができるようになっています。そのためネイティブのSafariブラウザアプリと同等の機能をiOSアプリで実装することができます。

アプリ内のビューとして表示することができ、Webページ内で遷移してもSafariアプリが起動することなく、遷移することが可能です。また「戻る」と「進む」ボタンがデフォルトで表示されるのでユーザーにとっても操作しやすくなっています。一番右下にはSafariアプリでページを直接開くボタンも用意されます。

同じようにiOSアプリからWebページを表示させる機能を持ったクラスにWKWebViewクラスがあります。

使い方

SFSafariViewControllerクラスを使用して実際にWebページを表示させてみたいと思います。使用するにはSafariServicesをimportする必要があります。

import SafariServices

使用方法は簡単でSFSafariViewControllerの引数に表示させたいURLを渡してインスタンス化しpresentメソッドで遷移を実行するだけです。UIViewControllerを継承しているのでpresentメソッドの引数にそのまま渡すことができます。

let url = URL(string: "https://appdev-room.com/")
let safariView = SFSafariViewController(url: url!)
present(safariView, animated: true)

UIKitでの実装方法

サンプルとしてUIKitでボタンをタップ時に表示させるコードを実装してみました。

import UIKit
import SafariServices

class ViewController: UIViewController {
    
    let button = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        button.frame = CGRect(x :0, y: 0, width: 200, height: 60)
        button.setTitle("ボタン", for:UIControl.State.normal)
        button.backgroundColor = UIColor.orange
        button.center = self.view.center
        button.addTarget(self, action: #selector(ViewController.buttonTapped(sender:)), for: .touchUpInside)
        self.view.addSubview(button)
    }

    @objc  func buttonTapped(sender : Any) {
        let url = URL(string: "https://appdev-room.com/")
        let safariView = SFSafariViewController(url: url!)
        present(safariView, animated: true)
    }
    
}

Swift UIで使用する

Swift UIではまだWebページを実装するための構造体がないのでSFSafariViewControllerやWKWebViewを使用して実装する必要があります。Swift UIでUIKitのビューを使用するためにUIViewControllerRepresentableプロトコルを使用して以下のように実装しました。

import SwiftUI
import SafariServices

struct SafariView: UIViewControllerRepresentable {

    private let url: URL

    init(url: URL) {
        self.url = url
    }

    func makeUIViewController(context: Context) -> SFSafariViewController {
        let safariView = SFSafariViewController(url: url)
        return safariView
    }

    func updateUIViewController(_ uiViewController: SFSafariViewController, context: Context) {
    }
}

struct ContentView: View {
    var body: some View {
        SafariView(url: URL(string: "https://appdev-room.com/")!)
    }
}