LoginSignup
1
1

SwiftUIでWebviewを使用する方法

Posted at

概要

SwiftでWebViewを実装する際には、WebKitフレームワークを用いたWKWebViewの使用が一般的です。一方で、アプリケーションの開発では主にSwiftUIを使用し、SwiftUIでは提供されていない機能についてのみUIKitを利用します。このため、SwiftUI環境でUIKitを適切に使用する方法の習得が重要です。

WebKitフレームワークの利用

Webコンテンツの表示には、WebKitフレームワークが不可欠です。WebKitはAppleが開発したブラウザエンジンで、iOSアプリ内でウェブページを表示する際に利用されるWKWebViewを提供します。このWKWebViewは、高性能で柔軟性があり、モダンなウェブページの要件を満たす能力を持っています。

SwiftUIでUIKitを使用する方法

SwiftUIでUIKitのコンポーネントを使用するには、UIViewControllerRepresentableプロトコルを実装することが一般的です。これにより、UIKitベースのUIViewControllerをSwiftUIビューとして使用できるようになります。このプロトコルを利用することで、WKWebViewなどのUIKitベースのコンポーネントを、SwiftUIのビュー階層に簡単に統合することが可能になります。

実装

WKWebView

WKWebViewは、Appleが提供するWebコンテンツを表示するための高性能なブラウザエンジンです。以下のSwiftコード例では、UIViewController内でWKWebViewを設定し、ウェブページをロードしています。

WKWebView | Apple Developer Documentation

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {
    
    var webView: WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myURL = URL(string:"https://www.apple.com")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
}

UIViewControllerRepresentable

SwiftUIでUIKitのUIViewControllerを使用するためには、UIViewControllerRepresentableを実装する必要があります。このプロトコルにより、UIKitベースのビューコントローラをSwiftUIビューに統合できます。ただし、final classまたはstructで定義しなければエラーが発生します。

import SwiftUI

struct ViewControllerRepresentable: UIViewControllerRepresentable{

    func makeUIViewController(context: Context) -> ViewController {
				// ビューコントローラーオブジェクトを作成し、その初期状態を設定します。
        return ViewController()
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
				// SwiftUI からの新しい情報で指定したビューコントローラの状態を更新
    }
}

App

アプリのメイン部分では、@mainで定義されたMainApp構造体内で、WindowGroupを用いてNovelViewControllerRepresentableを表示します。これにより、SwiftUI環境でUIKitのビューコントローラを効果的に利用できます。

import SwiftUI

@main
struct MainApp: App {
    var body: some Scene {
        WindowGroup {
            NovelViewControllerRepresentable()
        }
    }
}

まとめ

この記事では、SwiftUIとUIKitを組み合わせて、特にWebViewの実装方法を詳しく解説しました。WebKitフレームワークを用いたWKWebViewの利用がSwiftでの標準的なアプローチであること、そしてSwiftUIの中でUIKitのビューコントローラを利用するためのUIViewControllerRepresentableプロトコルの重要性を学びました。実際のコード例を通じて、WKWebViewの設定、SwiftUIビュー内でのUIKitコンポーネントの統合方法、そしてアプリケーションの基本構造について理解を深めました。

この知識は、SwiftUIを使った最新のiOSアプリ開発において非常に役立つもので、WebKitフレームワークとUIViewControllerRepresentableを使いこなすことで、より複雑でインタラクティブなUIコンポーネントを効果的に実装できるようになります。今後のアプリ開発において、これらの技術を活用して、ユーザーにとって魅力的で機能的なアプリケーションを作成するための一歩となるでしょう。

参考

1
1
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
1
1