WKWebViewの使い方

WKWebView

WKWebViewはiOS8から新たに使用できるようになったWebViewで、WebKitFrameworkの中に含まれている。これまでのUIWebViewと比べると速くて高機能とのこと。使用方法は以下の通り。

WKWebViewの初期化

最初に初期化しておく。

private var webView = WKWebView()

各種設定

AutoLayout、Delegateなどの設定をviewDidLoad()で行う。デフォルトではジェスチャーが無効なので、有効にするためにはコードで明示する必要があることに注意が必要である。

    override func viewDidLoad() {
        // Autolayoutを設定
        webView.translatesAutoresizingMaskIntoConstraints = false
        // 親ViewにWKWebViewを追加
        self.view.addSubview(webView)
        // Delegateの設定
        self.webView.UIDelegate = self
        self.webView.navigationDelegate = self
        // WKWebViewを最背面に移動
        self.view.sendSubviewToBack(webView)
        // レイアウトを設定(後述)
        setWebViewLayoutWithConstant(0.0)
        // ジェスチャーを許可
        webView.allowsBackForwardNavigationGestures = true
        // ページのロード
        self.webView.loadRequest(NSURLRequest(URL: NSURL(string: url)!))
    }

終了時

親ビューから削除する。Autolayoutの値もリセットされる。

    override func viewDidDisappear(animated: Bool) {
        webView.removeFromSuperview()
    }

レイアウト設定

WKWebViewは、StoryBoard上で割り付けることが出来ない。他のパーツをStoryBoard上でAutolayout設定している場合は、Swift上でWKWebViewにAutolayout設定を行う。ConstraintはWebViewに対して指定するのではなく、親Viewに対して指定することに注意が必要である。

    func setWebViewLayoutWithConstant(constant: CGFloat){
        // Constraintsを一度削除する
        for constraint in self.view.constraints {
            let secondItem: WKWebView? = constraint.secondItem as? WKWebView
            if secondItem == self.webView {
                self.view.removeConstraint(constraint)
            }
        }
        // Constraintsを追加
        self.view.addConstraint(NSLayoutConstraint(item: self.view, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: webView, attribute: NSLayoutAttribute.Width, multiplier: 1.0, constant: 0.0))
        self.view.addConstraint(NSLayoutConstraint(item: self.view, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: webView, attribute: NSLayoutAttribute.CenterX, multiplier: 1.0, constant: 0.0))
        self.view.addConstraint(NSLayoutConstraint(item: self.topLayoutGuide, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: webView, attribute: NSLayoutAttribute.Top, multiplier: 1.0, constant: 0.0))
        self.view.addConstraint(NSLayoutConstraint(item: self.bottomLayoutGuide, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: webView, attribute: NSLayoutAttribute.Bottom, multiplier: 1.0, constant: constant))
    }

以上により、ViewController上でWKWebViewを表示させることができる。goBack()やreload()はUIWebViewと同様に使用できる。

戻るボタンの実装

前のページに戻るためには、goForward()ではなぜかうまく動かなかった。以下のようにするとうまく動く。

let url = webView.backForwardList.forwardItem?.URL
webView.loadRequest(NSURLRequest(URL: url!))

プログレスビューの実装

ページ読み込みの進捗状況を表示するプログレスビューを表示することもできる。プログレスビュー自体のレイアウトや表示位置は、StoryBoard上で設定し、表示処理をSwiftで記述すると簡単である。

    // プログレスビュー描画間隔
    private let timerDur = 0.1

    override func viewDidAppear(animated: Bool) {
        // プログレスビューの描画
        progressView.setProgress(0.0, animated: false)
        progressView.hidden = false
        timer = NSTimer.scheduledTimerWithTimeInterval(timerDur, target: self, selector: "updateProgressView", userInfo: nil, repeats: true)
    }

    override func viewDidDisappear(animated: Bool) {
        if timer?.valid == true {
            timer?.invalidate()
        }
    }

    /**
        プログレスビューを更新する
    */
    func updateProgressView() {
        progressView.setProgress(Float(webView.estimatedProgress), animated: true)
        if webView.estimatedProgress == 1.0 && timer?.valid == true {
            timer?.invalidate()
            progressView.hidden = true
        }
    }

新規タブで開く

WKWebviewでURL読み込み時に任意の処理を実行したい場合には、decidePolicyForNavigationAction関数内に処理を記述する。新規タブで開く(target = _blank)の指定があった場合にデフォルトでは動作しないので、以下の記述が必要である。

if navigationAction.navigationType == WKNavigationType.LinkActivated{
                if targetFrame == nil {
                    webView.loadRequest(NSURLRequest(URL: url))
                }
            }

Objective-Cのデザインパターン

クラスクラスタ

あるスーパークラスから派生したサブクラスが多数存在する場合、それぞれのサブクラスをダイレクトに利用しようとするとクラスの数が膨大になり利用しにくい。そこでサブクラスを非公開とし、サブクラスへのアクセスは公開されたスーパークラスへのアクセスによって実現する。これがクラスクラスタである。サブクラスはスーパークラスより生成されるが非公開であるため、外からはスーパークラスのインスタンスとして見える。

クラスクラスタに属するサブクラス

クラスクラスタは簡明さと拡張性のトレードオフである。拡張を必要とする場合はサブクラスを別途作成する必要がある。サブクラスを定義する際は以下のように作成する。

  • イニシャライザを全てオーバライドする
  • プリミティブメソッド(最低限実装しなければならないメソッド)をオーバライドする

他の派生メソッドはオーバライドしなくても使用することができるが、挙動を変更する場合はオーバライドして実装する。

ファクトリメソッド

ファクトリーメソッドとはクラスメソッド、つまりインスタンス化することなく使用することのできるメソッドである。

アウトレット

(ViewControllerなどの)オブジェクトのプロパティ(パーツ)のうち、(Storyboardなど)ほかのオブジェクトを参照するもの。Storyboadを読み込む際に接続が確立しなおされる。メモリ管理の観点より、他の設定項目と同様にクラスに含めるべき項目なのかどうか検討が必要である。

@propety(weak, nonatmic) IBOutlet UILabel *label;

オブジェクトの割り当てと初期化

オブジェクトは、alloc()メソッドにより仮想メモリ領域からオブジェクトを格納するために必要なメモリ量の割り当てを受け、このあとinit()メソッドによりインスタンス変数を初期化する。シングルトンインスタンスの場合、新たなインスタンスの生成を要求されても、既存のインスタンスを返すような初期化処理を実装しておく必要がある。返り値がnilの場合、初期化に失敗したことを示す。

@propertyとアクセサ

クラス内のインスタンス変数をIB(や他のクラス)で利用する場合、IBより値が参照できるようにアクセサ(putter, getter)を各クラスで実装しておく必要がある。しかし@propertyを記述することで、実際のアクセサを実装しなくても値の参照が可能となる。

#import <UIKit/UIKit.h>

@interface DigitalClock1ViewController : UIViewController {
	// インスタンス変数の宣言
	UILabel *label;
}
@property(weak, nonatmic) IBOutlet UILabel *label;
@property(strong, nonatmic) NSString *str;
@end

@propertyのあとの属性はいくつでも指定できる。

属性 挙動
nonatomic スレッドセーフじゃないけど動作は早い?
weak 弱参照。参照先のObjectは、強参照しているObjectが無くなると消滅する
strong 強参照。強参照している間は、対象先のObjectは消滅しない

Storyboad上のObjectはViewController自身が間接的に強参照している、したがってIBOutletで再度ダイレクトに強参照する必要は無い。ただしViewControllerが管轄していないObjectに関しては、Storyboad上にあったとしても強参照しなければならない場合がある。Storyboad以外のObjectを参照する場合も同様に強参照すべきかどうか検討する必要がある。

@synthesize label;

最後に@implementationに@synthesizeを記入することで、getメソッドとputメソッドが自動的に実装される

self.str = nil;
[self setLabel:nil];

viewUnloadedメソッドで各Objectの解放を行う