Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WKWebViewとUIWebView 
Copylight © Classmethod, Inc. 
Classmethod, Inc.! 
平井 祐樹 
1
自己紹介 
• 平井 祐樹! 
• クラスメソッド株式会社! 
• iPhoneアプリサービス事業部! 
• iOSアプリ開発歴2年半ぐらい 
Copylight © Classmethod, Inc. 
2
Copylight © Classmethod, Inc. 
アジェンダ 
• WKWebView とは?! 
• WKWebViewとUIWebViewの違い! 
• WKWebViewを利用したアプリ内ブラウザ 
の作り方 
3
WKWebView とは? 
• UIWebViewの強化版! 
• UIWebViewとほとんど同じように使える! 
• 実行速度、安定性の向上された! 
• WebKit Frameworkに含まれる(≧iOS 8) 
Copylight ...
UIWebViewとWKWebView 
UIWebView WKWebView 
- (void)loadRequest:(NSURLRequest *)request; - (WKNavigation *)loadRequest:(NSUR...
WKWebViewとUIWebViewの違い 
Copylight © Classmethod, Inc. 
6
WKWebViewとUIWebViewの違い 
プログレスの取得! 
タイトル・URLの取得! 
Safariのような閲覧履歴! 
エッジスワイプでの戻る/進む操作! 
プロパティのKVO対応! 
JavaScriptとの連携強化 
Copyl...
Copylight © Classmethod, Inc. 
プログレスの取得 
8
Copylight © Classmethod, Inc. 9
UIWebView 
• プログレスを取得するインターフェース 
が用意されていない! 
• 自前で実装するかOSSを利用 
Copylight © Classmethod, Inc. 
10 
プログレスの取得
Copylight © Classmethod, Inc. 
WKWebView 
プログレスを取得できるようになった!! 
• estimatedProgressプロパティが追加! 
• (double)0.0~1.0でプログレスを表す 
1...
タイトル・URLの取得 
Copylight © Classmethod, Inc. 
12
Copylight © Classmethod, Inc. 13
タイトル・URLの取得 
Copylight © Classmethod, Inc. 
UIWebView 
• 表示中のページのタイトルやURLを取得できる 
インターフェースがない! 
• 「- webViewDidFinishLoad:」...
Objective-C 
Copylight © Classmethod, Inc. 
WKWebView 
表示中のタイトルやURLが取得できるよう 
になった!! 
• title/URLプロパティが追加 
15 
タイトル・URLの取得 ...
Safariのような閲覧履歴 
Copylight © Classmethod, Inc. 
16
Copylight © Classmethod, Inc. 17
UIWebView 
• 閲覧履歴は自分で管理するしかない! 
• 一応、進む/戻るはある 
Copylight © Classmethod, Inc. 
18 
Safariのような閲覧履歴
Copylight © Classmethod, Inc. 
WKWebView 
閲覧履歴が管理されるようになった!! 
• backForwardListプロパティが追加! 
• WebView内の閲覧履歴を勝手に管理 
してくれる 
19...
Copylight © Classmethod, Inc. 
エッジスワイプでの! 
戻る/進む操作 
20
Copylight © Classmethod, Inc. 21
エッジスワイプでの戻る/進む操作 
UIWebView 
• UISwipeGestureなどで自分で実装するし 
かない 
Copylight © Classmethod, Inc. 22
エッジスワイプでの戻る/進む操作 
Copylight © Classmethod, Inc. 
WKWebView 
プロパティの設定だけで簡単にできるように 
なった!! 
• allowsBackForwardNavigationGest...
プロパティのKVO対応 
Copylight © Classmethod, Inc. 
24
プロパティのKVO対応 
UIWebView 
• プロパティはKVOに対応していない 
Copylight © Classmethod, Inc. 25
Copylight © Classmethod, Inc. 
WKWebView 
以下のプロパティがKVOに対応した!! 
– title! 
– URL! 
– loading! 
– estimatedProgress! 
– hasOn...
JavaScriptとの連携強化 
Copylight © Classmethod, Inc. 
27
JavaScript ← Native 
Copylight © Classmethod, Inc. 
28
! 
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script; 
Copylight © Classmethod, Inc. 
UIWebView 
• ロ...
Objective-C 
Copylight © Classmethod, Inc. 
WKWebView 
• ロード済みのコンテンツに対して、以下のメソッ 
ドでJavaScriptのコードを実行できる! 
! 
! 
30 
JavaSc...
Copylight © Classmethod, Inc. 
User Scripts 
• 読み込み開始/終了時に実行する 
JavaScriptを注入することができる!! 
– 広告を削除! 
– コメントを非表示! 
– 文字列の置換 
...
例:Webページの背景を変更する 
// ページの背景を赤(#F00)にする JavaScript コード 
NSString *source = @"document.body.style.background = "#F00""; 
// ...
JavaScript → Native 
Copylight © Classmethod, Inc. 
33
Objective-C 
Copylight © Classmethod, Inc. 
UIWebView 
• 以下のデリゲートをフック 
34 
JavaScript ← Native 
! 
- (BOOL)webView:(UIWebV...
UIWebView 
JavaScript ← Native 
JavaScript 
function executeNativeCode() { 
// 任意のschemeをで呼び出す 
open("native://some”); 
Ob...
Copylight © Classmethod, Inc. 
WKWebView 
• Message Handlers(←New!!) 
36 
JavaScript ← Native
Message Handlers 
• JavaScriptからNativeコードに対してメッ 
セージを送信できる! 
! 
window.webkit.messageHandlers.{NAME}.postMessage() 
Copyli...
例:JavaScriptから受け取った文字列 
Objective-C 
WKUserContentController *userContentController = [WKUserContentController new]; 
[use...
例:JavaScriptから受け取った文字列 
をNSLogに表示する 
JavaScript 
! 
window.webkit.messageHandlers.log.postMessage(”コンソールに文字を表 
示!”); 
Copy...
Copylight © Classmethod, Inc. 
WKWebView で! 
たくさん機能が強化された!! 
40
せっかくなので WKWebView を! 
Copylight © Classmethod, Inc. 
使ってみよう! 
41
WKWebViewを利用したアプリ内ブ 
Copylight © Classmethod, Inc. 
ラウザの作り方 
42
https://github.com/hirai-yuki/ 
WebBrowserSample 
Copylight © Classmethod, Inc. 
43
Copylight © Classmethod, Inc. 
デモ 
44
KVOを利用すると超簡単! 
Copylight © Classmethod, Inc. 
45
Copylight © Classmethod, Inc. 
プログレス表示 
46
Copylight © Classmethod, Inc. 
プログレス表示 
• estimatedProgressの変更を監視(KVO)! 
• UIは自分で用意! 
- SGNavigationProgressを利用 
47
Objective-C 
// WKWebView インスタンスのプロパティの変更を監視する 
[self.webView addObserver:self 
forKeyPath:@"estimatedProgress" 
options:N...
ネットワークインジケータの表示 
Copylight © Classmethod, Inc. 
49
ネットワークインジケータの表示 
• loadingの変更を監視(KVO) 
Copylight © Classmethod, Inc. 
50
ネットワークインジケータの表示 
Objective-C 
// WKWebView インスタンスのプロパティの変更を監視する 
Copylight © Classmethod, Inc. 
51 
[self.webView addObser...
Copylight © Classmethod, Inc. 
表示中のタイトル 
52
Copylight © Classmethod, Inc. 
表示中のタイトル 
• titleの変更を監視(KVO) 
53
Objective-C 
// WKWebView インスタンスのプロパティの変更を監視する 
Copylight © Classmethod, Inc. 
表示中のタイトル 
54 
[self.webView addObserver:sel...
Copylight © Classmethod, Inc. 
戻る/進むボタン 
55
Copylight © Classmethod, Inc. 
戻る/進むボタン 
• canGoBack、canGoForwardの変更を監視 
(KVO) 
56
Objective-C 
// WKWebView インスタンスのプロパティの変更を監視する 
[self.webView addObserver:self 
forKeyPath:@"canGoBack" 
options:NSKeyValu...
Copylight © Classmethod, Inc. 
まとめ 
• WKWebViewで高機能なアプリ内ブラウザ 
が簡単につくれる! 
• JavaScriptとの連携は使い方次第でかなり 
強力になる可能性大 
58
ご清聴ありがとうございました 
Copylight © Classmethod, Inc. 
59
WKWebViewとUIWebView
WKWebViewとUIWebView
Upcoming SlideShare
Loading in …5
×

WKWebViewとUIWebView

44,293 views

Published on

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

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

WKWebViewとUIWebView

  1. 1. WKWebViewとUIWebView Copylight © Classmethod, Inc. Classmethod, Inc.! 平井 祐樹 1
  2. 2. 自己紹介 • 平井 祐樹! • クラスメソッド株式会社! • iPhoneアプリサービス事業部! • iOSアプリ開発歴2年半ぐらい Copylight © Classmethod, Inc. 2
  3. 3. Copylight © Classmethod, Inc. アジェンダ • WKWebView とは?! • WKWebViewとUIWebViewの違い! • WKWebViewを利用したアプリ内ブラウザ の作り方 3
  4. 4. WKWebView とは? • UIWebViewの強化版! • UIWebViewとほとんど同じように使える! • 実行速度、安定性の向上された! • WebKit Frameworkに含まれる(≧iOS 8) Copylight © Classmethod, Inc. 4
  5. 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. 6. WKWebViewとUIWebViewの違い Copylight © Classmethod, Inc. 6
  7. 7. WKWebViewとUIWebViewの違い プログレスの取得! タイトル・URLの取得! Safariのような閲覧履歴! エッジスワイプでの戻る/進む操作! プロパティのKVO対応! JavaScriptとの連携強化 Copylight © Classmethod, Inc. 7
  8. 8. Copylight © Classmethod, Inc. プログレスの取得 8
  9. 9. Copylight © Classmethod, Inc. 9
  10. 10. UIWebView • プログレスを取得するインターフェース が用意されていない! • 自前で実装するかOSSを利用 Copylight © Classmethod, Inc. 10 プログレスの取得
  11. 11. Copylight © Classmethod, Inc. WKWebView プログレスを取得できるようになった!! • estimatedProgressプロパティが追加! • (double)0.0~1.0でプログレスを表す 11 プログレスの取得 UIは自分で実装 しなきゃダメ!!
  12. 12. タイトル・URLの取得 Copylight © Classmethod, Inc. 12
  13. 13. Copylight © Classmethod, Inc. 13
  14. 14. タイトル・URLの取得 Copylight © Classmethod, Inc. UIWebView • 表示中のページのタイトルやURLを取得できる インターフェースがない! • 「- webViewDidFinishLoad:」メソッドとかで以 下のようにして取得するしかない 14 NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"]; ! NSString *url = [webView stringByEvaluatingJavaScriptFromString:@"document.URL"]; Objective-C
  15. 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. 16. Safariのような閲覧履歴 Copylight © Classmethod, Inc. 16
  17. 17. Copylight © Classmethod, Inc. 17
  18. 18. UIWebView • 閲覧履歴は自分で管理するしかない! • 一応、進む/戻るはある Copylight © Classmethod, Inc. 18 Safariのような閲覧履歴
  19. 19. Copylight © Classmethod, Inc. WKWebView 閲覧履歴が管理されるようになった!! • backForwardListプロパティが追加! • WebView内の閲覧履歴を勝手に管理 してくれる 19 Safariのような閲覧履歴 UIは自分で実装 しなきゃダメ!!
  20. 20. Copylight © Classmethod, Inc. エッジスワイプでの! 戻る/進む操作 20
  21. 21. Copylight © Classmethod, Inc. 21
  22. 22. エッジスワイプでの戻る/進む操作 UIWebView • UISwipeGestureなどで自分で実装するし かない Copylight © Classmethod, Inc. 22
  23. 23. エッジスワイプでの戻る/進む操作 Copylight © Classmethod, Inc. WKWebView プロパティの設定だけで簡単にできるように なった!! • allowsBackForwardNavigationGestures がプロパティ追加 23
  24. 24. プロパティのKVO対応 Copylight © Classmethod, Inc. 24
  25. 25. プロパティのKVO対応 UIWebView • プロパティはKVOに対応していない Copylight © Classmethod, Inc. 25
  26. 26. Copylight © Classmethod, Inc. WKWebView 以下のプロパティがKVOに対応した!! – title! – URL! – loading! – estimatedProgress! – hasOnlySecureContent! – canGoBack! – canGoForward 26 プロパティのKVO対応
  27. 27. JavaScriptとの連携強化 Copylight © Classmethod, Inc. 27
  28. 28. JavaScript ← Native Copylight © Classmethod, Inc. 28
  29. 29. ! - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script; Copylight © Classmethod, Inc. UIWebView • ロード済みのコンテンツに対して、以下のメソッ ドでJavaScriptのコードを実行できる 29 JavaScript ← Native Objective-C
  30. 30. Objective-C Copylight © Classmethod, Inc. WKWebView • ロード済みのコンテンツに対して、以下のメソッ ドでJavaScriptのコードを実行できる! ! ! 30 JavaScript ← Native ! - (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^)(id, NSError *))completionHandler; • User Scripts(←New!!)
  31. 31. Copylight © Classmethod, Inc. User Scripts • 読み込み開始/終了時に実行する JavaScriptを注入することができる!! – 広告を削除! – コメントを非表示! – 文字列の置換 31 JavaScript ← Native
  32. 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. 33. JavaScript → Native Copylight © Classmethod, Inc. 33
  34. 34. Objective-C Copylight © Classmethod, Inc. UIWebView • 以下のデリゲートをフック 34 JavaScript ← Native ! - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
  35. 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. 36. Copylight © Classmethod, Inc. WKWebView • Message Handlers(←New!!) 36 JavaScript ← Native
  37. 37. Message Handlers • JavaScriptからNativeコードに対してメッ セージを送信できる! ! window.webkit.messageHandlers.{NAME}.postMessage() Copylight © Classmethod, Inc. 37 JavaScript ← Native JavaScript
  38. 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. 39. 例:JavaScriptから受け取った文字列 をNSLogに表示する JavaScript ! window.webkit.messageHandlers.log.postMessage(”コンソールに文字を表 示!”); Copylight © Classmethod, Inc. 39
  40. 40. Copylight © Classmethod, Inc. WKWebView で! たくさん機能が強化された!! 40
  41. 41. せっかくなので WKWebView を! Copylight © Classmethod, Inc. 使ってみよう! 41
  42. 42. WKWebViewを利用したアプリ内ブ Copylight © Classmethod, Inc. ラウザの作り方 42
  43. 43. https://github.com/hirai-yuki/ WebBrowserSample Copylight © Classmethod, Inc. 43
  44. 44. Copylight © Classmethod, Inc. デモ 44
  45. 45. KVOを利用すると超簡単! Copylight © Classmethod, Inc. 45
  46. 46. Copylight © Classmethod, Inc. プログレス表示 46
  47. 47. Copylight © Classmethod, Inc. プログレス表示 • estimatedProgressの変更を監視(KVO)! • UIは自分で用意! - SGNavigationProgressを利用 47
  48. 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. 49. ネットワークインジケータの表示 Copylight © Classmethod, Inc. 49
  50. 50. ネットワークインジケータの表示 • loadingの変更を監視(KVO) Copylight © Classmethod, Inc. 50
  51. 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. 52. Copylight © Classmethod, Inc. 表示中のタイトル 52
  53. 53. Copylight © Classmethod, Inc. 表示中のタイトル • titleの変更を監視(KVO) 53
  54. 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. 55. Copylight © Classmethod, Inc. 戻る/進むボタン 55
  56. 56. Copylight © Classmethod, Inc. 戻る/進むボタン • canGoBack、canGoForwardの変更を監視 (KVO) 56
  57. 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. 58. Copylight © Classmethod, Inc. まとめ • WKWebViewで高機能なアプリ内ブラウザ が簡単につくれる! • JavaScriptとの連携は使い方次第でかなり 強力になる可能性大 58
  59. 59. ご清聴ありがとうございました Copylight © Classmethod, Inc. 59

×