【Swift】WebViewの表示の方法について徹底解説：初心者から中級者まで

2024年2月15日2024年4月2日

【iOS】SwiftのWebViewの使い方について徹底解説：初心者から中級者まで

ふくしま

こんにちは！記事をご覧いただきありがとうございます〜
株式会社メモリアインクの福嶋です。

Swiftでのアプリ開発では、Webコンテンツをアプリケーション内で表示するためにWebViewを活用することが一般的です。
この記事では、Swiftを用いたWebViewの効果的な使い方をご紹介します！

この記事を読んで分かること…
・WebViewでWebコンテンツを表示するためのinfo.plist ファイルの設定方法
・WKWebViewを用いてWebコンテンツを読み込み、表示する手順。
・表示したWebページを更新、画面の戻る・進むボタンの実装方法

環境

Swift 5.9
Xcode 15

WebViewとは？

WebViewは、ネイティブアプリ内でWebページやWebアプリケーションを表示するためのコンポーネントです。
iOSでWebViewを利用するには、WKWebViewクラスを使用します。
SwiftでWKWebViewを使うことで、リッチなWebコンテンツをアプリ内に簡単に組み込むことが可能になります。

基本的なWebViewの設定

Step１：info.plist ファイルの設定

iOSアプリにおいて、初期設定では「https」から始まるWebコンテンツしか表示することができません。
「http」から始まるWebコンテンツを表示できるようにするため、info.plistで設定します。

①作成したプロジェクト内の「info.plist」ファイルを開き、＋ボタンをタップして、「App Transport Security Settings」を追加します
②①で追加した「App Transport Security Settings」を開いた状態(左横のアイコンが下を向いている状態)で＋ボタンをタップして、「Allow Arbitrary Loads in Web Content」を追加
③②で追加した「Allow Arbitrary Loads in Web Content」のValueの初期値が「No」なので、「YES」に変更

Step2：Webコンテンツを表示する画面を作成(Main.Storyboard)

①＋アイコンタップして、WebKitViewを画面上に配置

②①と同様にして、Toolbarを先ほど配置したWebKit View 直下に配置

③Bar Button Itemを３つToolbar上に配置(Toolbarは置いた時点で１つBar Button Itemが配置されています)

④③で配置したItemの間隔を均等にするため「Flexible Space Bar ~」をItemの間にそれぞれ配置

⑤Webページの更新ボタンを作成するために、以下のように一番左のItemを選択して、Styleを「Refresh」に変更

⑥Webページの戻るボタンを作成するために、以下のように真ん中のItemを選択してTitleを「◀︎」に変更
（同様にして、Webページの進むボタンを作成するために、一番右のItemのTitleも「▶︎」に変更してください）

最終的に以下のなっていたらOKです！

⑦全ての機種の画面サイズに対応するため、以下のようにAutoresizingを設定します

▼WebKit View

▼Toolbar

以上でUIの設定は完了です！
続いて、View Controllerに先ほど配置したUIツールを紐付け、実際にWebコンテンツを表示するためのコードを書いていきましょう。

Step3：ViewControllerの実装

①先ほどStoryboard上に配置した各UIツールをViewControllerに紐付けます。

②Webコンテンツを表示するための実装を書いていきましょう。
以下が実装後の全体ソースコードです。

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {
    @IBOutlet weak var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        webView.navigationDelegate = self
        loadWebPage()
    }
    
    @IBAction func reloadTapped(_ sender: Any) {
        webView.reload()
    }
    
    @IBAction func backTapped(_ sender: Any) {
        webView.goBack()
    }
    
    @IBAction func fowardTapped(_ sender: Any) {
        webView.goForward()
    }
    
    func loadWebPage() {
        if let url = URL(string: "https://www.google.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
    
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        // ウェブサイトの読み込み開始
        print("Start!")
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // ウェブサイトの読み込み終了
        print("finished!")
    }
}

🔸Webコンテンツの読み込み処理
25行目で画面表示時にWebコンテンツを読み込み処理をloadWebPage 関数で定義しています。
URLRequest(url: url) で表示したいURLをサーバーに要求(request)し、その要求から返却された画面をwebView.load(request) で読み込み、画面に表示します。
定義したloadWebPage 関数は画面表示時に処理したいので、viewDidLoad() から呼び出してあげましょう(10行目)

🔸Toolbarの書くボタンタップ時の処理
Toolbarの各ボタンをタップした際の処理は以下のとおりです。
14行目ページの更新→webView.reload()
18行目ページから戻る→webView.goBack()
22行目次のページを表示→webView.goForward()

🔸Webviewのデリゲートを利用するための設定
WKNavigationDelegateのデリゲートメソッドを使用するために、4行目でWKNavigationDelegate を追記します。
９行目webView.navigationDelegate = self でデリゲートが使われた際に自クラスに通知されるようにします。
32行目webView(_ webView: WKWebView, didStartProvisionalNavigation ~) は読み込み開始時に呼ばれるデリゲートです
37行目webView(_ webView: WKWebView, didFinish ~) は読み込み終了時に呼ばれるデリゲートです