Movatterモバイル変換

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 © Classmethod, Inc. 4

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; ほとんど同じ！

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

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

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

Copylight © Classmethod, Inc. 9

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript ← Native Copylight © Classmethod, Inc. 28

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

Objective-C Copylight © Classmethod, Inc. WKWebView • ロード済みのコンテンツに対して、以下のメソッドでJavaScriptのコードを実行できる! ! ! 30 JavaScript ← Native ! - (void)evaluate#

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

例：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

JavaScript → Native Copylight © Classmethod, Inc. 33

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

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; } } めんどくさい・・・

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

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

例：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); } }

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

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

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

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]; } }

ネットワークインジケータの表示 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; } }

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; } }

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; } } 戻る／進むボタン

Movatterモバイル変換

Change Language

WKWebViewとUIWebView

Embed presentation

Recommended

More Related Content

What's hot

Similar to WKWebViewとUIWebView

WKWebViewとUIWebView