2023/9/21

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

この記事からわかること

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

index

[open]

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

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

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/")!)
    }
}

WKWebViewクラスならこちらの記事を参考にしてください。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Swift