swift

アプリ内でWebページを開く、WebView(WKWebView)の使い方

iOSアプリで用いられるWebViewの使い方を簡単にまとめています

前置き

元々はUIKitで提供されていたWebViewですが、数年程前からdeprecated(非推奨)になっています。ですのでこちらは使用せず、代わりにWebKitで提供されているWKWebViewを使いましょう

手順

早速使い方の手順を説明していきます。流れとしてはこうです。

  1. WebKitをインポートする
  2. WKWebViewをoutlet接続する
  3. WKWebViewでurlを開く

1. WebKitをインポートする

import WebKit

class SomeViewController: UIViewController {
  //省略
}

WebKitViewを扱いたいViewControllerのファイルに追記しておきましょう。

2. StoryboardでWKWebViewを配置し、対応するViewControllerにoutlet接続する

deprecated(意味は「非推奨」)の方を選ばないように注意しましょう!! select-wkwebview
outlet接続が終わると最終的にこんな感じになるでしょう。

import UIKit
import WebKit

class WebViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!    
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

3. WKWebViewでURLを開く

load()というメソッドを呼び出すことでURLを読み込むことができます。実装を見てみます

//apple公式ドキュメントより抜粋
func load(_ request: URLRequest) -> WKNavigation?

引数にはURLRequest型を渡す必要があるります。実際のコードはこうなります。

override func viewDidLoad() {
    let url = URL(string: "https://google.com")!
    let urlRequest = URLRequest(url: url)
    webView.load(urlRequest)
}

viewDidLoad()で読み込んでいます。String型から直接URLRequest型に変換することはできないので「String」→「URL」→「URLRequest」と変換しています。少し冗長な感じが否めませんが、かといって無理やり一行に収めるのも可読性の観点からお勧めできません。 このようにメソッドに切り分けておくと良いでしょう

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    openURL("https://google.com")
}

private func openURL(_ string: String?) {
    guard let string = string else { return }
    let url = URL(string: urlStr)!
    let request = URLRequest(url: url)
    webView.load(request)
}

おまけ

1. 汎用性を高める

必要最低限に留めましたが、より汎用性の高い実装方法を紹介します。まずurl情報を格納するプロパティを追加します。

import WebKit
import UIKit

class WebViewController: UIViewController {
  var urlString: String?  //プロパティを作っておく

  override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    openURL(urlString)
	}

	private func openURL(_ string: String?) {
    guard let string = string else { return }  //実際にはreturnするだけでなく何かしらのエラーメッセージが出るようにする
    let url = URL(string: urlStr)!
    let request = URLRequest(url: url)
    webView.load(request)
	}
}

そして何処かからWebViewへと遷移する際、用意しておいたプロパティに開きたいURLを代入します。

let storyboard = UIStoryboard(name: "Web", bundle: nil)
guard let viewController = storyboard.instantiateInitialViewController() as? WebViewController else { return }
viewController.urlString = "https://google.com"  //←こんな感じで
navigationController?.pushViewController(viewController, animated: true)

このようにすることで遷移もとのViewControllerから開きたいURLをWebViewに渡すことが可能です。

2. 読み込むURLが「http://~」の場合に必要な設定手順

http://~から始まるURLを開く場合、下画像のように設定が必要です!!気を付けましょう enter image description here 簡単な手順としてはまずInfo.plistを開きまして、「App Transport Security Settings」→「Allow Arbitrary Loads」の値をYESとします。項目は+ボタンで追加可能です。わからなければ下の記事を見るのがわかりやすいです。

まとめ

  • WebViewは非推奨!!WKWebViewを使おう
  • WKWebViewはWebKitというライブラリをインポートしないと使えない

WebViewのメソッド、load()の引数はURLRequest型。String型から変換して渡す

ありがとうございました

参考

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから