イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです


このエントリーをはてなブックマークに追加

【Swift】WebViewで遊んでみたお話

こんばんは。こへです。

IOSでWebを閲覧するアプリを簡単に作ってみたので紹介いたします。

画面準備

ざっくりんこんな感じ。

swiftwebview1.png

オブジェクトの説明。

swiftwebview2.png

そして、ViewController.swiftにコードを書いていく。

import UIKit

class ViewController: UIViewController ,UIWebViewDelegate{
    @IBOutlet weak var webView: UIWebView!
    @IBOutlet weak var indicator: UIActivityIndicatorView!
    @IBOutlet weak var hamBtn: UIButton!

    var googleURL = "https://www.google.co.jp/"
    var innoURL   = "https://www.innovation.co.jp"

    override func viewDidLoad() {
        super.viewDidLoad()
        let url = URL(string: googleURL)
        let request = URLRequest(url: url!)
        self.webView.loadRequest(request)
        webView.delegate = self
    }

    func webViewDidStartLoad(_ webView: UIWebView) {
        self.indicator.startAnimating()
        self.indicator.isHidden = false
        print("ロード開始")
    }

    func webViewDidFinishLoad(_ webView: UIWebView) {
        self.indicator.stopAnimating()
        self.indicator.isHidden = true
        print("ロード終了")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }

    @IBAction func back(_ sender: Any) {
        self.webView.goBack()
        self.hamBtn.alpha = 0
        UIView.animate(withDuration: 5, animations: { () -> Void in
            self.hamBtn.isHidden = false
            self.hamBtn.alpha = 1
        })
    }

    @IBAction func tapHAM(_ sender: Any) {
        let url = URL(string: innoURL)
        let request = URLRequest(url:url!)
        self.webView.loadRequest(request)
        self.hamBtn.isHidden = true
    }

コード一覧はこーんな感じ。

では、コード説明。

    @IBOutlet weak var webView: UIWebView!
    @IBOutlet weak var indicator: UIActivityIndicatorView!
    @IBOutlet weak var hamBtn: UIButton!

まずオブジェクトに名前をつけていく。

   override func viewDidLoad() {
        super.viewDidLoad()
        let url = URL(string: googleURL)
        let request = URLRequest(url: url!)
        self.webView.loadRequest(request)
        webView.delegate = self
    }

アプリ起動時にGoogleさんをWebViewに表示する。

class ViewController: UIViewController ,UIWebViewDelegate

WebViewのdelegateを使うために記述。

 func webViewDidStartLoad(_ webView: UIWebView) {
        self.indicator.startAnimating()
        self.indicator.isHidden = false
        print("ロード開始")
    }

 func webViewDidFinishLoad(_ webView: UIWebView) {
        self.indicator.stopAnimating()
        self.indicator.isHidden = true
        print("ロード終了")
    }

WebView読み込み時に、くるくる回るやつを表示させ、くるくる回らせる。 読み込み終了時にはこやつを削除。

  @IBAction func back(_ sender: Any) {
        self.webView.goBack()
    }

そしてよくある。「戻るボタン」を実装。
なんてお手軽…

 @IBAction func tapHAM(_ sender: Any) {
        let url = URL(string: innoURL)
        let request = URLRequest(url:url!)
        self.webView.loadRequest(request)
        self.hamBtn.isHidden = true
    }

ハンバーガーを押したら弊社のサイトを表示する。 そして、ハンバーガーが邪魔なので消す。

 @IBAction func back(_ sender: Any) {
       self.hamBtn.alpha = 0
         UIView.animate(withDuration: 5, animations: { () -> Void in
           self.hamBtn.isHidden = false
           self.hamBtn.alpha = 1
    })
 }

最後に戻るボタンを押したときにハンバーガーを復活させて終了。 もっと色々触って、面白いアプリ作れそうですね。 完成品はこんな感じ。

swiftwebview5.gif