Download as PDF, PPTX
![タイトル・URLの取得
Copylight © Classmethod, Inc.
UIWebView
• 表示中のページのタイトルやURLを取得できる
インターフェースがない!
• 「- webViewDidFinishLoad:」メソッドとかで以
下のようにして取得するしかない
14
NSString *title = [webView
stringByEvaluatingJavaScriptFromString:@"document.title"];
!
NSString *url = [webView
stringByEvaluatingJavaScriptFromString:@"document.URL"];
Objective-C](https://image.slidesharecdn.com/wkwebviewanduiwebview-141009041201-conversion-gate02/85/WKWebView-UIWebView-14-320.jpg)
![例：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](https://image.slidesharecdn.com/wkwebviewanduiwebview-141009041201-conversion-gate02/85/WKWebView-UIWebView-32-320.jpg)
![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;
}
}
めんどくさい・・・](https://image.slidesharecdn.com/wkwebviewanduiwebview-141009041201-conversion-gate02/85/WKWebView-UIWebView-35-320.jpg)
![例：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);
}
}](https://image.slidesharecdn.com/wkwebviewanduiwebview-141009041201-conversion-gate02/85/WKWebView-UIWebView-38-320.jpg)
![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];
}
}](https://image.slidesharecdn.com/wkwebviewanduiwebview-141009041201-conversion-gate02/85/WKWebView-UIWebView-48-320.jpg)
![ネットワークインジケータの表示
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;
}
}](https://image.slidesharecdn.com/wkwebviewanduiwebview-141009041201-conversion-gate02/85/WKWebView-UIWebView-51-320.jpg)
![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;
}
}](https://image.slidesharecdn.com/wkwebviewanduiwebview-141009041201-conversion-gate02/85/WKWebView-UIWebView-54-320.jpg)
![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;
}
}
戻る／進むボタン](https://image.slidesharecdn.com/wkwebviewanduiwebview-141009041201-conversion-gate02/85/WKWebView-UIWebView-57-320.jpg)
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