コードで記述したWKWebViewでウェブページを表示する

コードでWKWebViewを実装する

現在ではWebViewは非推奨になったので、WebKitのWKWebViewを使うことが推奨されています。 実装はimport Webkitを記述したあと、WKWebViewをコードで記述して、self.viewにaddSubViewするだけです。WKWebViewのサイズは、各iPhone端末にフィットするように動的にしておくとよいでしょう。

※ Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView.

Apple WKWebView公式リファレンス https://developer.apple.com/documentation/webkit/wkwebview

以下が超簡単なWKWebViewの実装コードになります。

import UIKit
import WebKit // ← 追記

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()

    let webView = WKWebView.init(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height))
    let myURL = URL(string:"https://frog9.com")  // ← URLは任意で
    let myRequest = URLRequest(url: myURL!)
    webView.load(myRequest)
    self.view.addSubview(webView)
     
  }
}

アプリを実行すると、問題なくWebページが表示されることが確認できると思います。

/images/uploads/20200512074634.png

※ Webページが表示されないケースとしては、WebサイトがSLL「https」に対応していない「http」であることが考えられます。httpの場合はWebサイトをhttps対応にするか、httpsで始まるサイトを読み込むようにしましょう。

WebViewで発生する処理を検知する

上記のように簡単に、WKWebViewを表示することはできましたが、ブラウザアクセスする時に、Basic認証を通したり、エラーになったときのハンドリング(処理分岐)をするために必要なコードを記述することが可能です。

WKWebViewには、WKNavigationDelegateと、WKUIDelegateという2つのデリゲートが用意されていますので、ハンドリングに使用します。

WKNavigationDelegateは、リクエストを投げた際のそれぞれのステップを検知可能です。 WKUIDelegateは、Webページが読まれた時やページ内でjavascriptの実行など何かアクションをしたい場合はこれを使います。

ViewControllerのextensionという形で実装すると、他のコードと混ざることなく可読性がアップします。

仮にViewController.swiftに実装する場合は、以下のように記述します。(WKWebView実装の全文になります)

あとは適宜処理を記述していくことになります。

import UIKit
import WebKit

class ViewController: UIViewController {
  
  var webView:WKWebView!
  
  override func viewDidLoad() {
    super.viewDidLoad()

    setupWebView()
    
  }
  
  func setupWebView() {
    webView = WKWebView.init(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height))
    webView.uiDelegate = self
    webView.navigationDelegate = self

    let myURL = URL(string:"https://frog9.com")
    let myRequest = URLRequest(url: myURL!)

    webView.load(myRequest)
    
    self.view.addSubview(webView)
  }

  
  
}


extension ViewController:WKNavigationDelegate {
  func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
    print("Webページ 読み込み開始")
  }
  
  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    print("Webページ 読み込み完了")
  }
  
  func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
    print("Webページ 読み込み開始準備")
  }
  
  func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
    print("Webページ 読み込み失敗")
  }
  
  func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) {
    print("リダイレクト")
  }
  
  func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
    print("Webページ 読み込み失敗")
  }
  
  func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
    print("ユーザ認証")
    completionHandler(.useCredential, nil)
  }
  
  func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    print("リクエスト前")
    print(navigationAction.request.url?.debugDescription as Any)
    decisionHandler(.allow)
  }
  
  func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse, decisionHandler: @escaping (WKNavigationResponsePolicy) -> Void) {
    print("レスポンス取得")
    print(navigationResponse.response.url?.debugDescription as Any)
    decisionHandler(.allow)
  }
    
  func webViewWebContentProcessDidTerminate(_ webView: WKWebView) {
    print("プロセス停止")
  }
  
}


extension ViewController:WKUIDelegate {
  func webView(_ webView: WKWebView, contextMenuDidEndForElement elementInfo: WKContextMenuElementInfo) {
    
  }
  func webView(_ webView: WKWebView, contextMenuWillPresentForElement elementInfo: WKContextMenuElementInfo) {
    
  }
  func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
    
  }
  func webView(_ webView: WKWebView, contextMenuForElement elementInfo: WKContextMenuElementInfo, willCommitWithAnimator animator: UIContextMenuInteractionCommitAnimating) {
    
  }
  func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
    
  }
  func webView(_ webView: WKWebView, contextMenuConfigurationForElement elementInfo: WKContextMenuElementInfo, completionHandler: @escaping (UIContextMenuConfiguration?) -> Void) {
    
  }
  func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
    return webView
  }
  func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
    
  }
  func webViewDidClose(_ webView: WKWebView) {
    print("WebViewが閉じた")
  }
}

Category