Swift WKWebView

0. WKWebViewとは

WKWebViewは、iOSアプリ内でWebブラウザを組み込む為のビューです。

1. WebKitのインポート

まずWebKitフレームワークをインポートします。import UIKitと同階層に記述します。

  import WebKit

2. WKNavigationDelegateプロトコルの継承

ViewControllerにWKNavigationDelegateプロトコルを継承します。

  class ViewController: UIViewController, WKNavigationDelegate, ...

3. WebKit Viewを追加

StoryBoardにWebKit Viewを追加し、IBOutletでViewControllerと紐付けます。

class ViewController:...{
  ...
  @IBOutlet weak var webView: WKWebView!
}

4. WebKit Viewの初期設定

ネイティブアプリ内でWebブラウザを動作させる際は、スクロール後にバウンドアニメーションがあるとUI的に不適切な為、バウンドアニメーションは無効化します。

class ViewController:...{
  ...
  override func viewDidLoad() {
    ...
    webView.scrollView.bounces = false // スクロールバウンドの無効化
    webView.navigationDelegate = self // webViewの通知先をViewControllerに設定
  }
}

5. WebKit Viewを動作(画面遷移)させる

ここからは動作になります。以下のコードでは、アプリ起動時にWebKit Viewでページ遷移を行っています。基本的にWebKit Viewは、requestをloadする流れで遷移することができます。

class ViewController:...{
  ...
  let urlGoogle = URL(string: "https://google.co.jp")
  ...
  override func viewDidLoad() {
    ...
    let request = URLRequest(url: urlGoogle!) // request作成
    webView.load(request) // ページ遷移
  }
}

6. WebKit Viewの読み込み開始・終了時処理

以下のメソッドでページ読み込み開始時と終了時の処理を記述することができます。それぞれのメソッドにインジケータのアニメーション開始・終了処理を記述したりします。

class ViewController:...{
  ...
  func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
    // 読み込み開始時処理
    print("読み込み開始")
  }

  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 読み込み終了時処理
    print("読み込み終了")
  }

  func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
    // 読み込み失敗時処理
    print("読み込み失敗")
  }
}

7. 全体のコード(インジケータ込み)

以下のコードでWebKit Viewを一通り動作させることができます。インジケータが不要な場合はindicatorに関するコードを削除してください。インジケータを使用する場合は、WebKit Viewと同様に以下の様にStoryBoardに追加してIBOutletでViewControllerと紐付けて使用します。

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate{
  let urlGoogle = URL(string: "https://google.co.jp")

  @IBOutlet weak var webView: WKWebView! // WebKit View
  @IBOutlet weak var indicator: UIActivityIndicatorView! // インジケータ

  override func viewDidLoad() {
    super.viewDidLoad()
    let request = URLRequest(url: urlGoogle!) // request作成

    // WebKit Viewの設定
    webView.scrollView.bounces = false
    webView.navigationDelegate = self

    // インジケータの設定
    indicator.hidesWhenStopped = true

    webView.load(request) // ページ遷移
  }

  func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
    print("読み込み開始")
    indicator.startAnimating()
  }

  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    print("読み込み終了")
    indicator.stopAnimating()
  }

  func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
    print("読み込み失敗")
    indicator.stopAnimating()
  }
}

P.S. たまたま見つけたショートカット

XCodeでcommand + option + ←でコードブロックを畳むことができ、command + option + →でコードブロックを広げることができます。