Swift WKWebView

# Swift WKWebView

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

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

## 2. WKNavigationDelegateプロトコルの継承
ViewControllerにWKNavigationDelegateプロトコルを継承します。
```swift
  class ViewController: UIViewController, WKNavigationDelegate, ...
```

## 3. WebKit Viewを追加
StoryBoardにWebKit Viewを追加し、IBOutletでViewControllerと紐付けます。
<!-- WebKit Viewの画像 -->
![WebKit View.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667287/48416525-98ac-fe8f-d0b4-0666d09fa770.png)


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

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

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

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

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

```swift
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と紐付けて使用します。
<!-- Indicatorの画像 -->
![Indicator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667287/75d2e7dc-ccc3-2a5c-5ba9-e03151199264.png)


```swift
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 + →`でコードブロックを広げることができます。