テックキャンプ125日目〜WEBサイトを読み込んで表示

kobasaです(´ω`*)
Railsでもそうでしたが、ライブラリのメソッドなどの記述は、慣れない内は呪文のように見えますね。
今はコピペできるようにしておいて、何回か使用している内に理解できるようになりたいです。

125日目の勉強内容

URLで指定したサイトをスマホに表示させる記述を勉強していました。
今回はコードを記述して実装しましたが、スマホUIから挿入して実装する方法もあるようです。

WEBサイト表示の準備

WEBサイトを表示するためにはWebKitというライブラリを読み込む必要があります。

import UIKit
import WebKit

また表示したWEBサイトで画面を戻したり、進めたりする動きをしたいので
画面下部にツールバーを表示させます。
ツールバーのアクションにはデリゲートを使用します。

//WebKitを変数に格納
var webView = WKWebView()

//UIスマホのToolbarから挿入
@IBOutlet weak var toolBar: UIToolbar!

//デリゲートの読み込み
class ViewController: UIViewController,WKNavigationDelegate {

webView.navigationDelegate = self

次にWEBサイトの大きさを指定します。起点は左上で(x:0, y:0)
WEBサイトの高さは画面全体からツールバーの高さを引いたものになります。

webView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, 
height: view.frame.size.height - toolBar.frame.size.height)

大きさを設定したwebViewを初期画面の上に貼り付けます。

view.addSubview(webView)

WEBサイトを読み込む

let url = URL(string: "https://www.###.com/")
let request = URLRequest(url: url!)
webView.load(request)
  1. 定数urlに文字列型で指定したサイトURLをキャストでURL型に変更して格納。
  2. URLリクエストを定数requestに格納。アンラップが必要になるみたい。
  3. loadメソッドを用いてリクエストを読み込み。

これでURLが画面上に表示されます。
あとはツールバーの戻る・進むボタンのアクションにそれぞれメソッドを記述します。

//前画面に戻る
webView.goBack()

//戻る前の画面に進む
webView.goForward()

コメント

タイトルとURLをコピーしました