【入門】WEBページをアプリで表示 WebView(WKWebView)の使い方

WebViewの使い方

iOSアプリ開発でWebViewを扱えるWKWebViewの使い方について解説します。

WEB上の画面をアプリで表示するためのWebViewは頻繁に使うので使い方を理解していきましょう!

事前にプロジェクトを作成しておく必要がありますので、こちらを参考に適当なプロジェクトを作成しましょう。

ios-app-init iOSアプリプロジェクト作成手順

WebKit

WKWebViewを使用するためにはWebKitというframeworkを使用する必要があります。

まずはその設定の方法から解説します。

frameworkの設定

frameworkの設定の仕方です。

画像を参考に下記の手順で行います。

  1. Xcodeプロジェクト左側のディレクトリの一番上を選択
  2. TARGETSのプロジェクト名と一致するものを選択
  3. 一番下のLinked frameworks and librariesの「+」ボタンを押す
setup_framework

そうするとframeworkを選択するポップアップのようなものが表示されます。

show_popup

今回使用したいframeworkはWebKitなので検索欄に「webkit」と入力しましょう。

input_webkit

一番上に表示されたものがWebKitですので選択し、「Add」ボタンを押しましょう。

add_webkit

そうするとWebKitが追加されたことが確認できるかと思います。

review

これで準備が完了です。

WKWebViewの使い方

それでは早速WKWeViewを実装していきましょう。

WKWebViewを配置する

まずはWKWebViewを配置していきます。

ただWKWebViewはストーリーボードから配置することができないため、
ViewControllerでコードから配置していきます。

そのため今回はストーリーボードを触ることはありません。

やっていることは下記2つです。

  1. WebKitをimportする
  2. viewDidLoad内でWKWebViewを生成し、viewにaddSubviewする

以下がコードです。

import Foundation
import UIKit
// WebKitをimportする
import WebKit

class SampleWKWebViewController: UIViewController {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // WKWebViewを生成
        webView = WKWebView(frame: view.frame)
        // WKWebViewをViewControllerのviewに追加する
        view.addSubview(webView)
    }

}

Webページを読み込む

次はWebページを読み込んでいきましょう。

今回はgoogleのページを表示するようにしました。

以下がコードです。

import Foundation
import UIKit
// WebKitをimportする
import WebKit

class SampleWKWebViewController: UIViewController {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // WKWebViewを生成
        webView = WKWebView(frame: view.frame)
        // WKWebViewをViewControllerのviewに追加する
        view.addSubview(webView)
        // リクエストを生成
        let request = URLRequest(url: URL(string: "https://www.google.co.jp/")!)
        // リクエストをロードする
        webView.load(request)
    }

}

build

WEBページが表示されましたね。

これで完成です。

WKWebViewまとめ

アプリでWebページを表示することは多用するので、

ぜひ今回の基本の使い方を理解できるようにしてみてください!