【2024年10月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

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

【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の設定

Step1:info.plist ファイルの設定

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

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

①作成したプロジェクト内の「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を画面上に配置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

▼WebKit View

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

▼Toolbar

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

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

Step3:ViewControllerの実装

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

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

②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 を追記します。
9行目webView.navigationDelegate = self でデリゲートが使われた際に自クラスに通知されるようにします。
32行目webView(_ webView: WKWebView, didStartProvisionalNavigation ~) は読み込み開始時に呼ばれるデリゲートです
37行目webView(_ webView: WKWebView, didFinish ~) は読み込み終了時に呼ばれるデリゲートです

以上でアプリ上でWebコンテンツを表示することができました。
ビルドして、Webコンテンツが問題なく表示されているか確認してみましょう!

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

デリゲートパターンについては以下の記事で解説していますので、合わせてご覧ください!

まとめ

いかがでしたか?
SwiftでWebViewを使用する方法をマスターすることは、iOSアプリ開発のスキルセットを広げる上で非常に有益です。
初心者から中級者まで、この記事がSwiftでのWebView利用の理解を深めるのに役立てば幸いです!

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次