Closed4

【Swift】WebKit 0->1

yoshitakayoshitaka

WebKit

WebKit フレームワークを使用すると、リッチなスタイルの Web コンテンツをアプリのネイティブコンテンツに統合できます。WebKit は、コンテンツの完全なブラウジング体験を提供し、プラットフォームネイティブなビューと以下のサポートクラスを提供します。

  • HTML、CSS、JavaScriptを使用したリッチなWebコンテンツの表示
  • ページコンテンツのインクリメンタルローディングの処理
  • 複数のMIMEタイプや複合フレーム要素の表示
  • コンテンツのページ間を移動する
  • 最近訪問したページのフォワードバックリストの管理

カスタムビュー階層からWKWebViewオブジェクトを提示し、表示したいコンテンツをロードします。サポートするオブジェクトを使用して、クッキーの管理、スクリプトの評価、ナビゲーションの制御、スナップショットの生成、およびテキストベースの検索を行います。

重要事項

WebKit の関数やメソッドは、必ずアプリのメインスレッドやメインディスパッチキューから呼び出してください。

yoshitakayoshitaka

https://qiita.com/rc_code/items/23109bbb3c073a46eda9

記事コピペで動いたけど、navバーを表示したかった。

class ViewController: UIViewController {

    var webView: WKWebView!

    override func loadView() {

        // 2 WKWebViewConfiguration の生成
        let webConfiguration = WKWebViewConfiguration()
        // 3 WKWebView に Configuration を引き渡し initialize
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        // 4 WKUIDelegate の移譲先として self を登録
        webView.uiDelegate = self
        // 5 WKNavigationDelegate の移譲先として self を登録
        webView.navigationDelegate = self
        // 6 view に webView を割り当て
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // 7 URLオブジェクトを生成
        let myURL = URL(string:"https://www.apple.com")
        // 8 URLRequestオブジェクトを生成
        let myRequest = URLRequest(url: myURL!)

        // 9 URLを WebView にロード
        webView.load(myRequest)
    }
}

// MARK: - 10 WKWebView ui delegate
extension ViewController: WKUIDelegate {
    // delegate
}

// MARK: - 11 WKWebView WKNavigation delegate
extension ViewController: WKNavigationDelegate {
    // delegate
}
yoshitakayoshitaka

https://developer.apple.com/documentation/webkit/viewing_desktop_or_mobile_web_content_using_a_web_view

公式からダウンロードしてソースを参考にしたところ

import UIKit
import WebKit

class QuizXWebViewController: UIViewController {
    
    @IBOutlet weak var webViewContainer: UIView!
    
    var webView: WKWebView!
    
    required init?(coder: NSCoder) {
        // 2 WKWebViewConfiguration の生成
        let configuration = WKWebViewConfiguration()
        
        configuration.applicationNameForUserAgent = "Version/1.0 ShinyBrowser/1.0"
        // 3 WKWebView に Configuration を引き渡し initialize
        webView = WKWebView(frame: .zero, configuration: configuration)

        super.init(coder: coder)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 4 WKUIDelegate の移譲先として self を登録
        webView.uiDelegate = self
        // 5 WKNavigationDelegate の移譲先として self を登録
        webView.navigationDelegate = self
        
        webView.translatesAutoresizingMaskIntoConstraints = false
        
        // 7 URLオブジェクトを生成
        let myURL = URL(string:"https://quizx.net")
        // 8 URLRequestオブジェクトを生成
        let myRequest = URLRequest(url: myURL!)
        
        webViewContainer.addSubview(webView)
        
        NSLayoutConstraint.activate([
            webView.widthAnchor.constraint(equalTo: webViewContainer.widthAnchor),
            webView.heightAnchor.constraint(equalTo: webViewContainer.heightAnchor)
        ])
        
        // 9 URLを WebView にロード
        webView.load(myRequest)
    }
}

最初
webView.translatesAutoresizingMaskIntoConstraints = false
を忘れていたら何も表示されなかった。

yoshitakayoshitaka

webView.translatesAutoresizingMaskIntoConstraints

ビューの自動サイズ変更マスクを自動レイアウト制約に変換するかどうかを決定するブール値です。

このプロパティの値が true の場合、システムは、ビューの自動サイズ変更マスクで指定された動作を複製する一連の制約を作成します。これにより、ビューのframe、bounds、またはcenterプロパティを使用してビューのサイズと位置を変更することができ、Auto Layout内でフレームベースの静的レイアウトを作成することができます。

自動サイズ変更マスクの制約は、ビューのサイズと位置を完全に指定するので、コンフリクトを起こさずにサイズや位置を変更するための制約を追加することはできないことに注意してください。Auto Layoutを使用してビューのサイズと位置を動的に計算したい場合は、このプロパティをfalseに設定し、ビューに曖昧さや矛盾のない制約のセットを提供する必要があります。

デフォルトでは、プログラムで作成したビューの場合、このプロパティはtrueに設定されています。Interface Builderでビューを追加した場合、システムは自動的にこのプロパティをfalseに設定します。

つまりstroyBoardで作ったContainerに入れるにはこれをfalseにする必要があるみたい

view = プログラムで生成したWebViewとする場合はデフォルトのtrueでうまく表示してくれるみたい

あーおもいだした!! tabBarのカスタマイズする際にコードで場所を指定したり移動させるときに使った記憶がある。その時はプログラムで位置とか指定したかったからtrue?にした気もする
今回はその逆でstoryBoardで制約したもののみでいくからfalseで良さそう。
いや、逆か。今回もコードで位置を指定するからtabbarの時と同じでfalseへ変える必要があるのか。storyboerdをしようするとtrueになってしまうので。

このスクラップは2021/11/29にクローズされました