SlideShare a Scribd company logo
1 of 61
Download to read offline
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
Copylight © Classmethod, Inc. 13
タイトル・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
Copylight © Classmethod, Inc. 17
UIWebView 
• 閲覧履歴は自分で管理するしかない! 
• 一応、進む/戻るはある 
Copylight © Classmethod, Inc. 
18 
Safariのような閲覧履歴
Copylight © Classmethod, Inc. 
WKWebView 
閲覧履歴が管理されるようになった!! 
• backForwardListプロパティが追加! 
• WebView内の閲覧履歴を勝手に管理 
してくれる 
19 
Safariのような閲覧履歴 
UIは自分で実装 
しなきゃダメ!!
Copylight © Classmethod, Inc. 
エッジスワイプでの! 
戻る/進む操作 
20
Copylight © Classmethod, Inc. 21
エッジスワイプでの戻る/進む操作 
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)evaluateJavaScript:(NSString *)javaScriptString 
completionHandler:(void (^)(id, NSError *))completionHandler; 
• User Scripts(←New!!)
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
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: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]; 
} 
}
ネットワークインジケータの表示 
Copylight © Classmethod, Inc. 
49
ネットワークインジケータの表示 
• loadingの変更を監視(KVO) 
Copylight © Classmethod, Inc. 
50
ネットワークインジケータの表示 
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; 
} 
}
Copylight © Classmethod, Inc. 
表示中のタイトル 
52
Copylight © Classmethod, Inc. 
表示中のタイトル 
• titleの変更を監視(KVO) 
53
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; 
} 
}
Copylight © Classmethod, Inc. 
戻る/進むボタン 
55
Copylight © Classmethod, Inc. 
戻る/進むボタン 
• canGoBack、canGoForwardの変更を監視 
(KVO) 
56
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; 
} 
} 
戻る/進むボタン
Copylight © Classmethod, Inc. 
まとめ 
• WKWebViewで高機能なアプリ内ブラウザ 
が簡単につくれる! 
• JavaScriptとの連携は使い方次第でかなり 
強力になる可能性大 
58
ご清聴ありがとうございました 
Copylight © Classmethod, Inc. 
59
WKWebViewとUIWebView
WKWebViewとUIWebView

More Related Content

What's hot

開発環境の認証を改善して Redmineを社内標準にした話
開発環境の認証を改善して Redmineを社内標準にした話開発環境の認証を改善して Redmineを社内標準にした話
開発環境の認証を改善して Redmineを社内標準にした話Ryou Soda
 
200人での対戦も可能!?Photon 新SDKについて
200人での対戦も可能!?Photon 新SDKについて200人での対戦も可能!?Photon 新SDKについて
200人での対戦も可能!?Photon 新SDKについてPhoton運営事務局
 
【Unity道場 2月】シェーダを書けるプログラマになろう
【Unity道場 2月】シェーダを書けるプログラマになろう【Unity道場 2月】シェーダを書けるプログラマになろう
【Unity道場 2月】シェーダを書けるプログラマになろうUnity Technologies Japan K.K.
 
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践Yoshifumi Kawai
 
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor Skochinsky
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor SkochinskyインテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor Skochinsky
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor SkochinskyCODE BLUE
 
Redmineのバージョンアップに追従していくための一工夫
Redmineのバージョンアップに追従していくための一工夫Redmineのバージョンアップに追従していくための一工夫
Redmineのバージョンアップに追従していくための一工夫Go Maeda
 
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]DeNA
 
/etc/network/interfaces について
/etc/network/interfaces について/etc/network/interfaces について
/etc/network/interfaces についてKazuhiro Nishiyama
 
Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜
Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜
Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜Preferred Networks
 
IdrisでWebアプリを書く
IdrisでWebアプリを書くIdrisでWebアプリを書く
IdrisでWebアプリを書くHideyuki Tanaka
 
Twitterのsnowflakeについて
TwitterのsnowflakeについてTwitterのsnowflakeについて
Twitterのsnowflakeについてmoai kids
 
Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話torisoup
 
Lua文化の伝承!? WFSにおけるイベントスクリプト活用術〜すべてはより良いコンテンツ制作のために〜
Lua文化の伝承!? WFSにおけるイベントスクリプト活用術〜すべてはより良いコンテンツ制作のために〜Lua文化の伝承!? WFSにおけるイベントスクリプト活用術〜すべてはより良いコンテンツ制作のために〜
Lua文化の伝承!? WFSにおけるイベントスクリプト活用術〜すべてはより良いコンテンツ制作のために〜gree_tech
 
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法Yoshifumi Kawai
 
Domain Driven Design with the F# type System -- F#unctional Londoners 2014
Domain Driven Design with the F# type System -- F#unctional Londoners 2014Domain Driven Design with the F# type System -- F#unctional Londoners 2014
Domain Driven Design with the F# type System -- F#unctional Londoners 2014Scott Wlaschin
 
PHP AST 徹底解説
PHP AST 徹底解説PHP AST 徹底解説
PHP AST 徹底解説do_aki
 

What's hot (20)

開発環境の認証を改善して Redmineを社内標準にした話
開発環境の認証を改善して Redmineを社内標準にした話開発環境の認証を改善して Redmineを社内標準にした話
開発環境の認証を改善して Redmineを社内標準にした話
 
200人での対戦も可能!?Photon 新SDKについて
200人での対戦も可能!?Photon 新SDKについて200人での対戦も可能!?Photon 新SDKについて
200人での対戦も可能!?Photon 新SDKについて
 
【Unity道場 2月】シェーダを書けるプログラマになろう
【Unity道場 2月】シェーダを書けるプログラマになろう【Unity道場 2月】シェーダを書けるプログラマになろう
【Unity道場 2月】シェーダを書けるプログラマになろう
 
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
 
レシピの作り方入門
レシピの作り方入門レシピの作り方入門
レシピの作り方入門
 
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor Skochinsky
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor SkochinskyインテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor Skochinsky
インテルMEの秘密 - チップセットに隠されたコードと、それが一体何をするかを見出す方法 - by イゴール・スコチンスキー - Igor Skochinsky
 
Redmineのバージョンアップに追従していくための一工夫
Redmineのバージョンアップに追従していくための一工夫Redmineのバージョンアップに追従していくための一工夫
Redmineのバージョンアップに追従していくための一工夫
 
Epic Online Services でできること
Epic Online Services でできることEpic Online Services でできること
Epic Online Services でできること
 
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
 
/etc/network/interfaces について
/etc/network/interfaces について/etc/network/interfaces について
/etc/network/interfaces について
 
Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜
Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜
Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜
 
IdrisでWebアプリを書く
IdrisでWebアプリを書くIdrisでWebアプリを書く
IdrisでWebアプリを書く
 
Twitterのsnowflakeについて
TwitterのsnowflakeについてTwitterのsnowflakeについて
Twitterのsnowflakeについて
 
Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話
 
Lua文化の伝承!? WFSにおけるイベントスクリプト活用術〜すべてはより良いコンテンツ制作のために〜
Lua文化の伝承!? WFSにおけるイベントスクリプト活用術〜すべてはより良いコンテンツ制作のために〜Lua文化の伝承!? WFSにおけるイベントスクリプト活用術〜すべてはより良いコンテンツ制作のために〜
Lua文化の伝承!? WFSにおけるイベントスクリプト活用術〜すべてはより良いコンテンツ制作のために〜
 
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
History & Practices for UniRx UniRxの歴史、或いは開発(中)タイトルの用例と落とし穴の回避法
 
ServerlessDays Tokyo 2022 Virtual.pdf
ServerlessDays Tokyo 2022 Virtual.pdfServerlessDays Tokyo 2022 Virtual.pdf
ServerlessDays Tokyo 2022 Virtual.pdf
 
Ext4 filesystem(1)
Ext4 filesystem(1)Ext4 filesystem(1)
Ext4 filesystem(1)
 
Domain Driven Design with the F# type System -- F#unctional Londoners 2014
Domain Driven Design with the F# type System -- F#unctional Londoners 2014Domain Driven Design with the F# type System -- F#unctional Londoners 2014
Domain Driven Design with the F# type System -- F#unctional Londoners 2014
 
PHP AST 徹底解説
PHP AST 徹底解説PHP AST 徹底解説
PHP AST 徹底解説
 

Similar to WKWebViewとUIWebView

iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018Shingo Fukuyama
 
iOS 9 Bootcamp #6 UIKit
iOS 9 Bootcamp #6 UIKitiOS 9 Bootcamp #6 UIKit
iOS 9 Bootcamp #6 UIKitShingo Hiraya
 
サーバーからiOSアプリを変更する
サーバーからiOSアプリを変更するサーバーからiOSアプリを変更する
サーバーからiOSアプリを変更するtoyship
 
cordova/electronの構造を知る
cordova/electronの構造を知るcordova/electronの構造を知る
cordova/electronの構造を知るYasuharu Seki
 
DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介
DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介
DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介decode2016
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発Yuta Matsumura
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介david9142
 
[JavaOne Tokyo 2012] JavaFX and Web Integration
[JavaOne Tokyo 2012] JavaFX and Web Integration[JavaOne Tokyo 2012] JavaFX and Web Integration
[JavaOne Tokyo 2012] JavaFX and Web IntegrationKazuchika Sekiya
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料OCHI Shuji
 
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kubernetes Meetup Tokyo #23 kubebuilder-v2Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kubernetes Meetup Tokyo #23 kubebuilder-v2Kazuhito Matsuda
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Akira Inoue
 
let UIWebView as WKWebView
let UIWebView as WKWebViewlet UIWebView as WKWebView
let UIWebView as WKWebViewTaketo Sano
 
Firefox OS and Web server
Firefox OS and Web serverFirefox OS and Web server
Firefox OS and Web serverTomoaki Konno
 
はじめよう Backbone.js
はじめよう Backbone.jsはじめよう Backbone.js
はじめよう Backbone.jsHiroki Toyokawa
 
Xamarin で ReactiveUI を使ってみた
Xamarin で ReactiveUI を使ってみたXamarin で ReactiveUI を使ってみた
Xamarin で ReactiveUI を使ってみたHironov OKUYAMA
 
AppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころAppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころMasayuki Wakizaka
 
090821 Ruby Sapporo Night Ruby Cocoa
090821 Ruby Sapporo Night Ruby Cocoa090821 Ruby Sapporo Night Ruby Cocoa
090821 Ruby Sapporo Night Ruby CocoaTomoki Maeda
 
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化Issei Hiraoka
 

Similar to WKWebViewとUIWebView (20)

iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018
 
iOS 9 Bootcamp #6 UIKit
iOS 9 Bootcamp #6 UIKitiOS 9 Bootcamp #6 UIKit
iOS 9 Bootcamp #6 UIKit
 
サーバーからiOSアプリを変更する
サーバーからiOSアプリを変更するサーバーからiOSアプリを変更する
サーバーからiOSアプリを変更する
 
iOS WebView App
iOS WebView AppiOS WebView App
iOS WebView App
 
cordova/electronの構造を知る
cordova/electronの構造を知るcordova/electronの構造を知る
cordova/electronの構造を知る
 
DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介
DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介
DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介
 
about miruzo
about miruzoabout miruzo
about miruzo
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
 
[JavaOne Tokyo 2012] JavaFX and Web Integration
[JavaOne Tokyo 2012] JavaFX and Web Integration[JavaOne Tokyo 2012] JavaFX and Web Integration
[JavaOne Tokyo 2012] JavaFX and Web Integration
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
 
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kubernetes Meetup Tokyo #23 kubebuilder-v2Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kubernetes Meetup Tokyo #23 kubebuilder-v2
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
 
let UIWebView as WKWebView
let UIWebView as WKWebViewlet UIWebView as WKWebView
let UIWebView as WKWebView
 
Firefox OS and Web server
Firefox OS and Web serverFirefox OS and Web server
Firefox OS and Web server
 
はじめよう Backbone.js
はじめよう Backbone.jsはじめよう Backbone.js
はじめよう Backbone.js
 
Xamarin で ReactiveUI を使ってみた
Xamarin で ReactiveUI を使ってみたXamarin で ReactiveUI を使ってみた
Xamarin で ReactiveUI を使ってみた
 
AppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころAppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころ
 
090821 Ruby Sapporo Night Ruby Cocoa
090821 Ruby Sapporo Night Ruby Cocoa090821 Ruby Sapporo Night Ruby Cocoa
090821 Ruby Sapporo Night Ruby Cocoa
 
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
 

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; ほとんど同じ!
  • 7. WKWebViewとUIWebViewの違い プログレスの取得! タイトル・URLの取得! Safariのような閲覧履歴! エッジスワイプでの戻る/進む操作! プロパティのKVO対応! JavaScriptとの連携強化 Copylight © Classmethod, Inc. 7
  • 8. Copylight © Classmethod, Inc. プログレスの取得 8
  • 10. UIWebView • プログレスを取得するインターフェース が用意されていない! • 自前で実装するかOSSを利用 Copylight © Classmethod, Inc. 10 プログレスの取得
  • 11. Copylight © Classmethod, Inc. WKWebView プログレスを取得できるようになった!! • estimatedProgressプロパティが追加! • (double)0.0~1.0でプログレスを表す 11 プログレスの取得 UIは自分で実装 しなきゃダメ!!
  • 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;
  • 18. UIWebView • 閲覧履歴は自分で管理するしかない! • 一応、進む/戻るはある Copylight © Classmethod, Inc. 18 Safariのような閲覧履歴
  • 19. Copylight © Classmethod, Inc. WKWebView 閲覧履歴が管理されるようになった!! • backForwardListプロパティが追加! • WebView内の閲覧履歴を勝手に管理 してくれる 19 Safariのような閲覧履歴 UIは自分で実装 しなきゃダメ!!
  • 20. Copylight © Classmethod, Inc. エッジスワイプでの! 戻る/進む操作 20
  • 22. エッジスワイプでの戻る/進む操作 UIWebView • UISwipeGestureなどで自分で実装するし かない Copylight © Classmethod, Inc. 22
  • 23. エッジスワイプでの戻る/進む操作 Copylight © Classmethod, Inc. WKWebView プロパティの設定だけで簡単にできるように なった!! • allowsBackForwardNavigationGestures がプロパティ追加 23
  • 25. プロパティのKVO対応 UIWebView • プロパティはKVOに対応していない Copylight © Classmethod, Inc. 25
  • 26. Copylight © Classmethod, Inc. WKWebView 以下のプロパティがKVOに対応した!! – title! – URL! – loading! – estimatedProgress! – hasOnlySecureContent! – canGoBack! – canGoForward 26 プロパティのKVO対応
  • 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
  • 44. Copylight © Classmethod, Inc. デモ 44
  • 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]; } }
  • 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