みかづきブログ・カスタム

基本的にはちょちょいのほいです。

WKWebViewを設置しただけのiOSアプリをつくる 📱

普段はウェブアプリを作成していますが、時々ウェブからはアクセスできない機能を使いたいことがでてきます。
例えば、「プッシュ通知」「Bluetooth」「画面をランドスケープで固定」などです。

そんなとき、Swiftで指定したウェブページを表示するだけのアプリをつくり、アプリからしかアクセスできない機能のみ、アプリから実行するという手段を取ることがあります。
今回はそんな時のために、WKWebViewを設置しただけのアプリを作ってみます。
Xcode 14.0.1、Swift 5.7で実装しました。

ソースコード

ContentView.swift

import SwiftUI

var urlString = "https://google.co.jp"

struct ContentView: View {
    var body: some View {
        WebView(urlString: urlString).onAppear {
            print("appear")
        }.onDisappear {
            print("disapper")
        }
    }
}

// プレビュー画面で確認するためのコード
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}



WebView.swift

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    var urlString: String
    
    func makeUIView(context: Context) -> WKWebView {
        let config = WKWebViewConfiguration()

        config.allowsInlineMediaPlayback = true // 動画のインライン再生を許可する

        return WKWebView(frame: .zero, configuration: config)
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        guard let url = URL(string: urlString) else {
            return
        }

        uiView.load(URLRequest(url: url))
    }
}



解説

コメントに書いた通りですが、WKWebviewはデフォルトでは動画のインライン再生ができない仕様なので、

func makeUIView(context: Context) -> WKWebView {
        let config = WKWebViewConfiguration()

        config.allowsInlineMediaPlayback = true // 動画のインライン再生を許可する

        return WKWebView(frame: .zero, configuration: config)
}

この部分で許可しています。
動画のインライン再生を行わないのであれば、

func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
}

と、単純にインスタンスを返すだけでOKです。

developer.apple.com