【Swift】WKWebViewを使ってHTMLを表示させる

はじめに

SwiftでStoryboardを使ってアプリ開発をしている中で、HTMLを埋め込む方法がわからなかったので、WKWebViewを使ったHTMLの表示方法を備忘録のために記録します。

本稿ではローカルのHTML、外部WebサイトのHTMLを読み込む方法の２つをご紹介します。
参考になれば幸いです。

環境

• Xcode：14.3.1
• Swift：5.8.1

ローカル上のHTMLを表示させる

プロジェクト直下に表示させたいHTMLファイルを配置します。
ここでは、index.htmlと、style.cssを配置します。

配置したHTMLファイル、CSSファイルを表示させます。

import UIKit
import WebKit

class LoadHTMLController: UIViewController {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        webView = WKWebView(frame: view.frame)
        view.addSubview(webView)

        // HTMLのファイルURLを取得
        guard let html = Bundle.main.url(forResource: "index", withExtension: "html")  else { return }
        // ファイルURLをString型に変換
        guard let htmlString = try? String(contentsOf: html) else { return }

        // CSSファイルパスを取得
        guard let css = Bundle.main.url(forResource: "style", withExtension: "css")  else { return }

        //HTML、CSSパスの読み込み
        webView.loadHTMLString(htmlString, baseURL: css)

    }

WKWevViewを使用するには、WebKitをインポートする必要があるので注意しましょう。

外部のWebサイトを表示させる

import UIKit
import WebKit

class LoadHTMLController: UIViewController {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        webView = WKWebView(frame: view.frame)
        view.addSubview(webView)

        //外部WebサイトURL取得
        guard let url = URL(string: "https://uminchucode.com/") else { return }
        let request = URLRequest(url: url)
        //読み込み
        webView.load(request)

    }

こちらもWKWevViewを使用するには、WebKitをインポートする必要があるので注意しましょう。

最後に

以上がWKWebViewを使ったHTMLの表示方法でした。
静的サイトであれば活用できるかと思います。
私の場合だとiOS用のアプリ開発をしていた際に、プラバシーポリシーを載せる際に使っていました。

お役に立てましたら嬉しいです。