結論
以下のように実装することでSwiftUIでHTMLのコードを反映させることができます。
import SwiftUI
import WebKit
struct HTMLView: UIViewRepresentable {
let htmlString: String
// SwiftUIが初めてビューを作成するときに実行される
func makeUIView(context: Context) -> WKWebView {
return WKWebView()
}
// ビューが変更されたときに実行される
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.loadHTMLString(htmlString, baseURL: nil)
}
}
struct ContentView: View {
var body: some View {
VStack {
HTMLView(htmlString:
"""
<html lang="ja">
<head>
<style>
h1 {
color: red;
font-weight: bold;
font-size: 60px;
}
p {
font-size: 40px;
}
</style>
</head>
<body>
<h1>Hello SwiftUI!!</h1>
<p>SwiftUI勉強中</p>
</body>
</html>
""")
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
解説
UIViewRepresentableとは？
SwiftUIからUIKitのビューやコントローラを扱うためのインターフェースです。
UIKitはiOSアプリケーションの中核となるフレームワークで、このフレームワークはHTMLを描画する機能がサポートされています。
SwiftUIは新しい別のフレームワークですが、HTMLを描画する機能をサポートしておりません。
SwiftUIからUIKitの機能を利用するためにUIViewRepresentableがインターフェースとしてSwiftUIに用意してあります。
今回のケースではSwiftUIからUIViewRepresentableを通してUIKitを利用し、HTMLを描画しております。
makeUIViewとは?
UIViewRepresentableの仕様でSwiftUIが初めてビューを作成するときに実行される処理を書くことができる関数です。
updateUIViewとは?
UIViewRepresentableの仕様でビューが変更されたときに実行される処理を書くことができる関数です。
WKWebViewとは?
Webページを表示するためのクラスです。
今回はビュー作成時(makeUIView実行時)にインスタンス作成を行い、その後に実行されるupdateUIView関数内でHTMLの読み込みを行っています。
終わりに
学習を始めたばかりで、間違った理解をしているところがあるかもしれませんが、コメントから指摘いただけると幸いです。
ここまで読んでいただきありがとうございました。