Submit Search
Upload
WKWebViewとUIWebView
•
65 likes
•
48,237 views
Yuki Hirai
Follow
WKWebViewとUIWebViewの違いについて解説
Read less
Read more
Mobile
Report
Share
Report
Share
1 of 61
Download now
Download to read offline
Recommended
WkWebViewのキャッシュについて調べた
WkWebViewのキャッシュについて調べた
firewood
Jenkinsを使ったコンシューマゲームでのデプロイとテスト
Jenkinsを使ったコンシューマゲームでのデプロイとテスト
Hiroyuki Tanaka
モバイルオンラインゲームでの大規模観戦とチート対策 〜自社製リアルタイム通信システム「WSNet2」の事例〜
モバイルオンラインゲームでの大規模観戦とチート対策 〜自社製リアルタイム通信システム「WSNet2」の事例〜
KLab Inc. / Tech
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
SEGADevTech
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
エピック・ゲームズ・ジャパン Epic Games Japan
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
U-dai Yokoyama
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
Yoshifumi Kawai
ゲームエンジンとMVC
ゲームエンジンとMVC
AimingStudy
Recommended
WkWebViewのキャッシュについて調べた
WkWebViewのキャッシュについて調べた
firewood
Jenkinsを使ったコンシューマゲームでのデプロイとテスト
Jenkinsを使ったコンシューマゲームでのデプロイとテスト
Hiroyuki Tanaka
モバイルオンラインゲームでの大規模観戦とチート対策 〜自社製リアルタイム通信システム「WSNet2」の事例〜
モバイルオンラインゲームでの大規模観戦とチート対策 〜自社製リアルタイム通信システム「WSNet2」の事例〜
KLab Inc. / Tech
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
SEGADevTech
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
エピック・ゲームズ・ジャパン Epic Games Japan
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
U-dai Yokoyama
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
ライブラリ作成のすゝめ - 事例から見る個人OSS開発の効能
Yoshifumi Kawai
ゲームエンジンとMVC
ゲームエンジンとMVC
AimingStudy
Microsoft Azure WebAppsでECサイトを構築してみた話 ~EC-CUBE3で試してみました~
Microsoft Azure WebAppsでECサイトを構築してみた話 ~EC-CUBE3で試してみました~
典子 松本
AppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころ
Masayuki Wakizaka
Jenkinsを使った初めての継続的インテグレーション
Jenkinsを使った初めての継続的インテグレーション
dcubeio
テストを分類してみよう!
テストを分類してみよう!
Kenji Okumura
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
WebRTCの技術解説 第二版 公開版 完全版
WebRTCの技術解説 第二版 公開版 完全版
Contest Ntt-west
ノーコードテストツール導入時の決め事
ノーコードテストツール導入時の決め事
ssuser4772e5
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
モノタロウの開発・リリースサイクルを支えるJenkinsの活用事例 - Jenkins Day Japan 2021
モノタロウの開発・リリースサイクルを支えるJenkinsの活用事例 - Jenkins Day Japan 2021
株式会社MonotaRO Tech Team
UE4とBlenderでランニングコストを抑えるモダンなワークフロー
UE4とBlenderでランニングコストを抑えるモダンなワークフロー
エピック・ゲームズ・ジャパン Epic Games Japan
Azure Digital TwinとUnreal Engineを統合するADTLink Pluginについて
Azure Digital TwinとUnreal Engineを統合するADTLink Pluginについて
Takahiro Miyaura
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
GMO GlobalSign Holdings K.K.
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Natsuki Yamanaka
DeNAのサーバー"コード"レスアーキテクチャ
DeNAのサーバー"コード"レスアーキテクチャ
Haruto Otake
UniRxでMV(R)Pパターンをやってみた
UniRxでMV(R)Pパターンをやってみた
torisoup
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
Contest Ntt-west
Bloodstainedで世界のバッカーの期待に応えたUE4事例紹介
Bloodstainedで世界のバッカーの期待に応えたUE4事例紹介
エピック・ゲームズ・ジャパン Epic Games Japan
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
tnoho
【出張ヒストリア2017】新しいUnreal AudioEngineでインタラクティブサウンドコンテンツはどこまでつくれるか!?
【出張ヒストリア2017】新しいUnreal AudioEngineでインタラクティブサウンドコンテンツはどこまでつくれるか!?
historia_Inc
iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018
Shingo Fukuyama
iOS 9 Bootcamp #6 UIKit
iOS 9 Bootcamp #6 UIKit
Shingo Hiraya
More Related Content
What's hot
Microsoft Azure WebAppsでECサイトを構築してみた話 ~EC-CUBE3で試してみました~
Microsoft Azure WebAppsでECサイトを構築してみた話 ~EC-CUBE3で試してみました~
典子 松本
AppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころ
Masayuki Wakizaka
Jenkinsを使った初めての継続的インテグレーション
Jenkinsを使った初めての継続的インテグレーション
dcubeio
テストを分類してみよう!
テストを分類してみよう!
Kenji Okumura
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
WebRTCの技術解説 第二版 公開版 完全版
WebRTCの技術解説 第二版 公開版 完全版
Contest Ntt-west
ノーコードテストツール導入時の決め事
ノーコードテストツール導入時の決め事
ssuser4772e5
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
モノタロウの開発・リリースサイクルを支えるJenkinsの活用事例 - Jenkins Day Japan 2021
モノタロウの開発・リリースサイクルを支えるJenkinsの活用事例 - Jenkins Day Japan 2021
株式会社MonotaRO Tech Team
UE4とBlenderでランニングコストを抑えるモダンなワークフロー
UE4とBlenderでランニングコストを抑えるモダンなワークフロー
エピック・ゲームズ・ジャパン Epic Games Japan
Azure Digital TwinとUnreal Engineを統合するADTLink Pluginについて
Azure Digital TwinとUnreal Engineを統合するADTLink Pluginについて
Takahiro Miyaura
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
GMO GlobalSign Holdings K.K.
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Natsuki Yamanaka
DeNAのサーバー"コード"レスアーキテクチャ
DeNAのサーバー"コード"レスアーキテクチャ
Haruto Otake
UniRxでMV(R)Pパターンをやってみた
UniRxでMV(R)Pパターンをやってみた
torisoup
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
Contest Ntt-west
Bloodstainedで世界のバッカーの期待に応えたUE4事例紹介
Bloodstainedで世界のバッカーの期待に応えたUE4事例紹介
エピック・ゲームズ・ジャパン Epic Games Japan
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
tnoho
【出張ヒストリア2017】新しいUnreal AudioEngineでインタラクティブサウンドコンテンツはどこまでつくれるか!?
【出張ヒストリア2017】新しいUnreal AudioEngineでインタラクティブサウンドコンテンツはどこまでつくれるか!?
historia_Inc
What's hot
(20)
Microsoft Azure WebAppsでECサイトを構築してみた話 ~EC-CUBE3で試してみました~
Microsoft Azure WebAppsでECサイトを構築してみた話 ~EC-CUBE3で試してみました~
AppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころ
Jenkinsを使った初めての継続的インテグレーション
Jenkinsを使った初めての継続的インテグレーション
テストを分類してみよう!
テストを分類してみよう!
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
WebRTCの技術解説 第二版 公開版 完全版
WebRTCの技術解説 第二版 公開版 完全版
ノーコードテストツール導入時の決め事
ノーコードテストツール導入時の決め事
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
モノタロウの開発・リリースサイクルを支えるJenkinsの活用事例 - Jenkins Day Japan 2021
モノタロウの開発・リリースサイクルを支えるJenkinsの活用事例 - Jenkins Day Japan 2021
UE4とBlenderでランニングコストを抑えるモダンなワークフロー
UE4とBlenderでランニングコストを抑えるモダンなワークフロー
Azure Digital TwinとUnreal Engineを統合するADTLink Pluginについて
Azure Digital TwinとUnreal Engineを統合するADTLink Pluginについて
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
DeNAのサーバー"コード"レスアーキテクチャ
DeNAのサーバー"コード"レスアーキテクチャ
UniRxでMV(R)Pパターンをやってみた
UniRxでMV(R)Pパターンをやってみた
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
Bloodstainedで世界のバッカーの期待に応えたUE4事例紹介
Bloodstainedで世界のバッカーの期待に応えたUE4事例紹介
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
【出張ヒストリア2017】新しいUnreal AudioEngineでインタラクティブサウンドコンテンツはどこまでつくれるか!?
【出張ヒストリア2017】新しいUnreal AudioEngineでインタラクティブサウンドコンテンツはどこまでつくれるか!?
Similar to WKWebViewとUIWebView
iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018
Shingo Fukuyama
iOS 9 Bootcamp #6 UIKit
iOS 9 Bootcamp #6 UIKit
Shingo Hiraya
サーバーからiOSアプリを変更する
サーバーからiOSアプリを変更する
toyship
iOS WebView App
iOS WebView App
hagino 3000
cordova/electronの構造を知る
cordova/electronの構造を知る
Yasuharu Seki
DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介
DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介
decode2016
about miruzo
about miruzo
eastfujiwara
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
[公開用]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
Kazuchika Sekiya
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kazuhito Matsuda
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
let UIWebView as WKWebView
let UIWebView as WKWebView
Taketo Sano
Firefox OS and Web server
Firefox OS and Web server
Tomoaki Konno
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Xamarin で ReactiveUI を使ってみた
Xamarin で ReactiveUI を使ってみた
Hironov OKUYAMA
090821 Ruby Sapporo Night Ruby Cocoa
090821 Ruby Sapporo Night Ruby Cocoa
Tomoki Maeda
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
Issei Hiraoka
Reactのおさらい
Reactのおさらい
iPride Co., Ltd.
Similar to WKWebViewとUIWebView
(20)
iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018
iOS 9 Bootcamp #6 UIKit
iOS 9 Bootcamp #6 UIKit
サーバーからiOSアプリを変更する
サーバーからiOSアプリを変更する
iOS WebView App
iOS WebView App
cordova/electronの構造を知る
cordova/electronの構造を知る
DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介
DOO-003_Jenkins 作者が語る、Docker コンテナによる継続的デリバリのオススメと新機能のご紹介
about miruzo
about miruzo
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
[公開用]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
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
let UIWebView as WKWebView
let UIWebView as WKWebView
Firefox OS and Web server
Firefox OS and Web server
はじめよう Backbone.js
はじめよう Backbone.js
Xamarin で ReactiveUI を使ってみた
Xamarin で ReactiveUI を使ってみた
090821 Ruby Sapporo Night Ruby Cocoa
090821 Ruby Sapporo Night Ruby Cocoa
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
Reactのおさらい
Reactのおさらい
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
Download now