WKWebViewとUIWebView

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

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

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

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

UIWebViewとWKWebView
UIWebView WKWebView
- (void)loadRequest:(NSURLRequest *)request; - (WKNavigation *)loadRequest:(NSURLRequest
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の違い
6

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

プログレスの取得
8

Copylight © Classmethod, Inc. 9

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

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

タイトル・URLの取得
12

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

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

Safariのような閲覧履歴
16

UIWebView
• 閲覧履歴は自分で管理するしかない!
• 一応、進む／戻るはある
18

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

エッジスワイプでの!
戻る／進む操作
20

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

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

プロパティのKVO対応
24

UIWebView
• プロパティはKVOに対応していない

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

JavaScriptとの連携強化
27

JavaScript ← Native
28

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

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

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

例：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
initWithSource:source
injectionTime:WKUserScriptInjectionTimeAtDocumentEnd
forMainFrameOnly:YES];
configuration:configuration];
32
Objective-C

JavaScript → Native
33

Objective-C
UIWebView
• 以下のデリゲートをフック
34
!
- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType;

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

WKWebView
• Message Handlers（←New!!）
36

Message Handlers
• JavaScriptからNativeコードに対してメッ
セージを送信できる！
!
window.webkit.messageHandlers.{NAME}.postMessage()
37
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
をNSLogに表示する
configuration:configuration];
38
{
if ([message.name isEqualToString:@"log"]) {
NSLog(@"%@", message.body);
}
}

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

WKWebView で!
たくさん機能が強化された！！
40

せっかくなので WKWebView を!
使ってみよう！
41

WKWebViewを利用したアプリ内ブ
ラウザの作り方
42

https://github.com/hirai-yuki/
WebBrowserSample
43

デモ
44

KVOを利用すると超簡単！
45

プログレス表示
46

• estimatedProgressの変更を監視（KVO）!
• UIは自分で用意!
- SGNavigationProgressを利用
47

Objective-C
// WKWebView インスタンスのプロパティの変更を監視する
[self.webView addObserver:self
forKeyPath:@"estimatedProgress"
options:NSKeyValueObservingOptionNew
context:nil];
!
・・・
!
- (void)observeValueForKeyPath:(NSString *)keyPath
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

• loadingの変更を監視（KVO）
50

Objective-C
51
forKeyPath:@"loading"
context:nil];
!
・・・
!
ofObject:(id)object
{
if ([keyPath isEqualToString:@"loading"]) {
// loadingが変更されたら、ステータスバーのインジケーターの表示・非表示を切り替える
UIApplication *app = [UIApplication sharedApplication];
app.networkActivityIndicatorVisible = self.webView.loading;
}
}

表示中のタイトル
52

• titleの変更を監視（KVO）
53

Objective-C
54
forKeyPath:@"title"
context:nil];
!
・・・
!
ofObject:(id)object
{
if ([keyPath isEqualToString:@"title"]) {
// titleが変更されたら、ナビゲーションバーのタイトルを設定する
self.title = self.webView.title;
}
}

戻る／進むボタン
55

• canGoBack、canGoForwardの変更を監視
（KVO）
56

Objective-C
forKeyPath:@"canGoBack"
context:nil];
!
・・・
!
ofObject:(id)object
{
if ([keyPath isEqualToString:@"title"]) {
// canGoBackが変更されたら、「＜」ボタンの有効・無効を切り替える
self.backButton.enabled = self.webView.canGoBack;
}
}

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

ご清聴ありがとうございました
59

WKWebViewとUIWebView

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WKWebViewとUIWebView

Similar to WKWebViewとUIWebView (20)

WKWebViewとUIWebView