WKWebViewとUIWebViewの違いについて解説

1. WKWebViewとUIWebView
Copylight © Classmethod, Inc.
Classmethod, Inc.!
平井 祐樹
1

2. 自己紹介
• 平井 祐樹!
• クラスメソッド株式会社!
• iPhoneアプリサービス事業部!
• iOSアプリ開発歴2年半ぐらい
Copylight © Classmethod, Inc.
2

3. Copylight © Classmethod, Inc.
アジェンダ
• WKWebView とは？!
• WKWebViewとUIWebViewの違い!
• WKWebViewを利用したアプリ内ブラウザ
の作り方
3

4. WKWebView とは？
• UIWebViewの強化版!
• UIWebViewとほとんど同じように使える!
• 実行速度、安定性の向上された!
• WebKit Frameworkに含まれる（≧iOS 8）
Copylight © Classmethod, Inc.
4

5. UIWebViewとWKWebView
UIWebView WKWebView
- (void)loadRequest:(NSURLRequest *)request; - (WKNavigation *)loadRequest:(NSURLRequest
Copylight © Classmethod, Inc.
5
*)request;
- (void)loadHTMLString:(NSString *)string
baseURL:(NSURL *)baseURL;
- (WKNavigation *)loadHTMLString:(NSString
*)string baseURL:(NSURL *)baseURL;
- (void)reload; - (WKNavigation *)reload;
- (void)stopLoading; - (void)stopLoading;
- (void)goBack; - (WKNavigation *)goBack;
- (void)goForward; - (WKNavigation *)goForward;
ほとんど同じ！

6. WKWebViewとUIWebViewの違い
Copylight © Classmethod, Inc.
6

7. WKWebViewとUIWebViewの違い
プログレスの取得!
タイトル・URLの取得!
Safariのような閲覧履歴!
エッジスワイプでの戻る／進む操作!
プロパティのKVO対応!
JavaScriptとの連携強化
Copylight © Classmethod, Inc.
7

8. Copylight © Classmethod, Inc.
プログレスの取得
8

9. Copylight © Classmethod, Inc. 9

10. UIWebView
• プログレスを取得するインターフェース
が用意されていない!
• 自前で実装するかOSSを利用
Copylight © Classmethod, Inc.
10
プログレスの取得

11. Copylight © Classmethod, Inc.
WKWebView
プログレスを取得できるようになった！!
• estimatedProgressプロパティが追加!
• (double)0.0～1.0でプログレスを表す
11
プログレスの取得
UIは自分で実装
しなきゃダメ！！

12. タイトル・URLの取得
Copylight © Classmethod, Inc.
12

13. Copylight © Classmethod, Inc. 13

14. タイトル・URLの取得
Copylight © Classmethod, Inc.
UIWebView
• 表示中のページのタイトルやURLを取得できる
インターフェースがない!
• 「- webViewDidFinishLoad:」メソッドとかで以
下のようにして取得するしかない
14
NSString *title = [webView
stringByEvaluatingJavaScriptFromString:@"document.title"];
!
NSString *url = [webView
stringByEvaluatingJavaScriptFromString:@"document.URL"];
Objective-C

15. Objective-C
Copylight © Classmethod, Inc.
WKWebView
表示中のタイトルやURLが取得できるよう
になった！!
• title／URLプロパティが追加
15
タイトル・URLの取得
@property (nonatomic, readonly, copy) NSString *title;
@property (nonatomic, readonly, copy) NSURL *URL;

16. Safariのような閲覧履歴
Copylight © Classmethod, Inc.
16

17. Copylight © Classmethod, Inc. 17

18. UIWebView
• 閲覧履歴は自分で管理するしかない!
• 一応、進む／戻るはある
Copylight © Classmethod, Inc.
18
Safariのような閲覧履歴

19. Copylight © Classmethod, Inc.
WKWebView
閲覧履歴が管理されるようになった！!
• backForwardListプロパティが追加!
• WebView内の閲覧履歴を勝手に管理
してくれる
19
Safariのような閲覧履歴
UIは自分で実装
しなきゃダメ！！

20. Copylight © Classmethod, Inc.
エッジスワイプでの!
戻る／進む操作
20

21. Copylight © Classmethod, Inc. 21

22. エッジスワイプでの戻る／進む操作
UIWebView
• UISwipeGestureなどで自分で実装するし
かない
Copylight © Classmethod, Inc. 22

23. エッジスワイプでの戻る／進む操作
Copylight © Classmethod, Inc.
WKWebView
プロパティの設定だけで簡単にできるように
なった！!
• allowsBackForwardNavigationGestures
がプロパティ追加
23

24. プロパティのKVO対応
Copylight © Classmethod, Inc.
24

25. プロパティのKVO対応
UIWebView
• プロパティはKVOに対応していない
Copylight © Classmethod, Inc. 25

26. Copylight © Classmethod, Inc.
WKWebView
以下のプロパティがKVOに対応した！!
– title!
– URL!
– loading!
– estimatedProgress!
– hasOnlySecureContent!
– canGoBack!
– canGoForward
26
プロパティのKVO対応

27. JavaScriptとの連携強化
Copylight © Classmethod, Inc.
27

28. JavaScript ← Native
Copylight © Classmethod, Inc.
28

29. !
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
Copylight © Classmethod, Inc.
UIWebView
• ロード済みのコンテンツに対して、以下のメソッ
ドでJavaScriptのコードを実行できる
29
JavaScript ← Native
Objective-C

30. Objective-C
Copylight © Classmethod, Inc.
WKWebView
• ロード済みのコンテンツに対して、以下のメソッ
ドでJavaScriptのコードを実行できる!
!
!
30
JavaScript ← Native
!
- (void)evaluateJavaScript:(NSString *)javaScriptString
completionHandler:(void (^)(id, NSError *))completionHandler;
• User Scripts（←New!!）

31. Copylight © Classmethod, Inc.
User Scripts
• 読み込み開始／終了時に実行する
JavaScriptを注入することができる！!
– 広告を削除!
– コメントを非表示!
– 文字列の置換
31
JavaScript ← Native

32. 例：Webページの背景を変更する
// ページの背景を赤（#F00）にする JavaScript コード
NSString *source = @"document.body.style.background = "#F00"";
// ドキュメントの読み込みが完了したタイミングで、JavaScriptコードを実行する
WKUserScript *userScript = [[WKUserScript alloc]
WKUserContentController *userContentController = [WKUserContentController new];
[userContentController addUserScript:userScript]; !
WKWebViewConfiguration *configuration = [WKWebViewConfiguration new];
configuration.userContentController = userContentController; !
// WKWebView インスタンスの生成
self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds
Copylight © Classmethod, Inc.
initWithSource:source
injectionTime:WKUserScriptInjectionTimeAtDocumentEnd
forMainFrameOnly:YES];
configuration:configuration];
32
JavaScript ← Native
Objective-C

33. JavaScript → Native
Copylight © Classmethod, Inc.
33

34. Objective-C
Copylight © Classmethod, Inc.
UIWebView
• 以下のデリゲートをフック
34
JavaScript ← Native
!
- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType;

35. UIWebView
JavaScript ← Native
JavaScript
function executeNativeCode() {
// 任意のschemeをで呼び出す
open("native://some”);
Objective-C
Copylight © Classmethod, Inc. 35
}
-(BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType
{
if ([request.URL.scheme isEqualToString:@"native"]) {
// Nativeの処理・・・
return NO;
} else {
return YES;
}
}
めんどくさい・・・

36. Copylight © Classmethod, Inc.
WKWebView
• Message Handlers（←New!!）
36
JavaScript ← Native

37. Message Handlers
• JavaScriptからNativeコードに対してメッ
セージを送信できる！
!
window.webkit.messageHandlers.{NAME}.postMessage()
Copylight © Classmethod, Inc.
37
JavaScript ← Native
JavaScript

38. 例：JavaScriptから受け取った文字列
Objective-C
WKUserContentController *userContentController = [WKUserContentController new];
[userContentController addScriptMessageHandler:self name:@"log"];
WKWebViewConfiguration *configuration = [WKWebViewConfiguration new];
configuration.userContentController = userContentController;
self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds
・・・
!
- (void)userContentController:(WKUserContentController *)userContentController
didReceiveScriptMessage:(WKScriptMessage *)message
Copylight © Classmethod, Inc.
をNSLogに表示する
configuration:configuration];
38
{
if ([message.name isEqualToString:@"log"]) {
NSLog(@"%@", message.body);
}
}

39. 例：JavaScriptから受け取った文字列
をNSLogに表示する
JavaScript
!
window.webkit.messageHandlers.log.postMessage(”コンソールに文字を表
示！”);
Copylight © Classmethod, Inc. 39

40. Copylight © Classmethod, Inc.
WKWebView で!
たくさん機能が強化された！！
40

41. せっかくなので WKWebView を!
Copylight © Classmethod, Inc.
使ってみよう！
41

42. WKWebViewを利用したアプリ内ブ
Copylight © Classmethod, Inc.
ラウザの作り方
42

43. https://github.com/hirai-yuki/
WebBrowserSample
Copylight © Classmethod, Inc.
43

44. Copylight © Classmethod, Inc.
デモ
44

45. KVOを利用すると超簡単！
Copylight © Classmethod, Inc.
45

46. Copylight © Classmethod, Inc.
プログレス表示
46

47. Copylight © Classmethod, Inc.
プログレス表示
• estimatedProgressの変更を監視（KVO）!
• UIは自分で用意!
- SGNavigationProgressを利用
47

48. Objective-C
// WKWebView インスタンスのプロパティの変更を監視する
[self.webView addObserver:self
forKeyPath:@"estimatedProgress"
options:NSKeyValueObservingOptionNew
context:nil];
!
・・・
!
- (void)observeValueForKeyPath:(NSString *)keyPath
Copylight © Classmethod, Inc.
プログレス表示
ofObject:(id)object
change:(NSDictionary *)change
context:(void *)context
48
{
if ([keyPath isEqualToString:@"estimatedProgress"]) {
// estimatedProgressが変更されたら、プログレスバーを更新する
CGFloat progressPercentage = self.webView.estimatedProgress * 100.0f;
[self.navigationController setSGProgressPercentage:progressPercentage];
}
}

49. ネットワークインジケータの表示
Copylight © Classmethod, Inc.
49

50. ネットワークインジケータの表示
• loadingの変更を監視（KVO）
Copylight © Classmethod, Inc.
50

51. ネットワークインジケータの表示
Objective-C
// WKWebView インスタンスのプロパティの変更を監視する
Copylight © Classmethod, Inc.
51
[self.webView addObserver:self
forKeyPath:@"loading"
options:NSKeyValueObservingOptionNew
context:nil];
!
・・・
!
- (void)observeValueForKeyPath:(NSString *)keyPath
ofObject:(id)object
change:(NSDictionary *)change
context:(void *)context
{
if ([keyPath isEqualToString:@"loading"]) {
// loadingが変更されたら、ステータスバーのインジケーターの表示・非表示を切り替える
UIApplication *app = [UIApplication sharedApplication];
app.networkActivityIndicatorVisible = self.webView.loading;
}
}

52. Copylight © Classmethod, Inc.
表示中のタイトル
52

53. Copylight © Classmethod, Inc.
表示中のタイトル
• titleの変更を監視（KVO）
53

54. Objective-C
// WKWebView インスタンスのプロパティの変更を監視する
Copylight © Classmethod, Inc.
表示中のタイトル
54
[self.webView addObserver:self
forKeyPath:@"title"
options:NSKeyValueObservingOptionNew
context:nil];
!
・・・
!
- (void)observeValueForKeyPath:(NSString *)keyPath
ofObject:(id)object
change:(NSDictionary *)change
context:(void *)context
{
if ([keyPath isEqualToString:@"title"]) {
// titleが変更されたら、ナビゲーションバーのタイトルを設定する
self.title = self.webView.title;
}
}

55. Copylight © Classmethod, Inc.
戻る／進むボタン
55

56. Copylight © Classmethod, Inc.
戻る／進むボタン
• canGoBack、canGoForwardの変更を監視
（KVO）
56

57. Objective-C
// WKWebView インスタンスのプロパティの変更を監視する
[self.webView addObserver:self
forKeyPath:@"canGoBack"
options:NSKeyValueObservingOptionNew
context:nil];
!
・・・
!
- (void)observeValueForKeyPath:(NSString *)keyPath
ofObject:(id)object
change:(NSDictionary *)change
context:(void *)context
Copylight © Classmethod, Inc. 57
{
if ([keyPath isEqualToString:@"title"]) {
// canGoBackが変更されたら、「＜」ボタンの有効・無効を切り替える
self.backButton.enabled = self.webView.canGoBack;
}
}
戻る／進むボタン

58. Copylight © Classmethod, Inc.
まとめ
• WKWebViewで高機能なアプリ内ブラウザ
が簡単につくれる!
• JavaScriptとの連携は使い方次第でかなり
強力になる可能性大
58

59. ご清聴ありがとうございました
Copylight © Classmethod, Inc.
59