はじめに
みなさんは「あ〜このWebサイト・アプリがモバイルアプリだったら便利なのにな〜」と思うことはありませんか?
私はあります…!!
SafariからWebページをホームに追加しても、PWAに対応してないサイトはなんとなく不便、、、
そんなあなたに、WebView埋め込みのiOSアプリをサクッと作るお話を共有したいと思います!
環境
- macOS Sonoma 14.2
- Xcode 15.1
- iOS 17.1.2
- Swift 5.x系
作ったもの
- Safariに遷移することなく、Webページのコンテンツをアプリ自体に埋め込んだもの
- SwiftUIのViewの中で「WKWebView」を使って実装
- フッターに「戻る」ボタンと「進む」ボタンを実装
プロジェクトの作成
慣れているみなさまは読み飛ばしてください…!
- Xcodeで「Create New Project...」を選択
ソースコード
import SwiftUI
import WebKit
// WebView
struct WebView: UIViewRepresentable {
let url: URL
let webView: WKWebView
func makeUIView(context: Context) -> WKWebView {
let view = webView
view.allowsBackForwardNavigationGestures = true // スワイプジェスチャーを有効化
return view
}
func updateUIView(_ uiView: WKWebView, context: Context) {
let request = URLRequest(url: url)
uiView.load(request)
}
}
struct ContentView: View {
@State private var webView: WKWebView?
var body: some View {
VStack {
if let webView = webView {
VStack(spacing: 0){
WebView(url: URL(string: "https://google.com/")!, webView: webView) // ここに任意のURL
Divider()
// ここからナビゲーションボタン
HStack {
Button(action: {
webView.goBack() // 戻る
}, label: {
Image(systemName: "chevron.backward")
})
Spacer()
.frame(width: 40)
Button(action: {
webView.goForward() // 進む
}, label: {
Image(systemName: "chevron.forward")
})
Spacer()
}
.padding(.leading,40)
.padding(.top,10)
.padding(.bottom,7)
.frame(maxWidth: .infinity)
}
}
}
.onAppear {
webView = WKWebView()
}
}
}
#Preview {
ContentView()
}
最初から存在する ContentView.swift にコピペしたら動作するかと思います!
簡単な解説
※iOS初心者が書いているので間違っている可能性があります!鵜呑みにせず再度確認してください〜!
1. WebView
SwiftUIにない機能をUIKitから引っ張ってきて使えるようにする「UIViewRepresentable」を使った構造体です。
makeUIViewメソッドでwebViewインスタンスを作成し、updateUIViewメソッドでURLリクエストをロードしています。
allowsBackForwardNavigationGesturesを有効にすることで、スワイプジェスチャーを有効化しているので、不要な方は消してください。
2. ContentView
WebViewを呼び出して、ナビゲーションボタンを追加したメインビューです。
@StateでWebViewの状態変化を追跡し、ナビゲーションボタンの動作をビューに反映させます。
全体をVStackでラップし、その中にWebViewとナビゲーションボタンを配置しています。
ナビゲーションボタンはHStackで配置し、各ボタンにWKWebViewのメソッドであるgoBackとgoForwardを割り当てています。
おわりに
WKWebKitを使えば、非常にシンプルなコードでWebコンテンツを埋め込むことができます!
皆さんもぜひやってみてください〜!!
拙い文章でしたが、読んでいただきありがとうございました!
参考文献
https://developer.apple.com/documentation/swiftui/uiviewrepresentable
https://developer.apple.com/documentation/webkit/wkwebview/1414952-goback