Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Más de toyship
Más de toyship (15)
Contents blocker on iOS9
- 1. Contents Blocker on iOS9 @TachibanaKaoru © TachibanaKaoru 1
- 2. 自己紹介 Tachibana Kaoru - iOS Engineer at VOYAGE GROUP - Twitter: @TachibanaKaoru - Blog: http://www.toyship.org/ • WWDCは2010,2015に参加 © TachibanaKaoru 2
- 4. What is Contents Blocker • iOSやMacでSafariに表示する項目を、自動的に制限する機能 • Macでは、Safari Pluginとして提供される • iOSでは、Today WidgetやShare ExtensionのようにApp Extensionとして提供される © TachibanaKaoru 4
- 5. What is Contents Blocker • ブロックする対象 • cssで指定された特定の要素を非表示にする • 特定のファイルを読みこまないようにする • 特定のクッキーを読みこまないようにする © TachibanaKaoru 5
- 6. What is Contents Blocker • 適用範囲 • Safari以外のブラウザ（Chromeなど）には影響しない • iOS9から導入された SFSafariViewControllerには適用され る • UIWebView/MKWebViewには影響しない © TachibanaKaoru 6
- 7. How to implement Contents Blocker for iOS © TachibanaKaoru 7
- 8. How to implement Contents Blocker for iOS iOSではコンテンツブロッカーは、App Extensionとして提供さ れているため、まずは本体となるアプリを作成します。 Xcodeでアプリを作ったら、メニューから File - New - Target を選び、iOS-Application Extension の Content Blocker Extension を選びます。 © TachibanaKaoru 8
- 9. How to implement Contents Blocker for iOS コンテンツブロッカーのターゲットが追加され、 ActionRequestHandler.swift と blockerList.json のファイル が生成されます。 ブロックする要素と条件は blockerList.json ファイルで設定し ます。 © TachibanaKaoru 9
- 11. hide contents CSSの特定の要素を非表示にする方法です。 blockerList.json には、複数の表示設定を追加することがで き、ファイルの先頭から順番に適用されていきます。 action要素 処理内容についての設定 trigger要素 処理の適用箇所の設定 © TachibanaKaoru 11
- 13. blockerList.json [ { "action": { "type": "css-display-none", "selector" : "div.byline" }, "trigger": { "url-filter": ".*" } } ] © TachibanaKaoru 13
- 14. hide contents facebookのlikeボタンも消してみましょう。 この部分のdivのclass属性はwsblfacebooklikeです blockerList.json にこの要素を追加します © TachibanaKaoru 14
- 15. blockerList.json [ { "action": { "type": "css-display-none", "selector" : "div.wsbl_facebook_like" }, "trigger": { "url-filter": ".*" } } ] © TachibanaKaoru 15
- 18. block contents 次は、コンテンツの読み込みをブロックしてみましょう。 画像のURLは http://www.toyship.org/wp-content/uploads/ 2014/03/XcodeScreen-636×310.png です。 blockerList.json に type:block のaction要素を追加すると、こ の画像の読み込みをブロックすることができます。 © TachibanaKaoru 18
- 19. blockerList.json [ { "action": { "type": "block" }, "trigger": { "url-filter": "/wp-content/uploads/2014/03/", "if-domain": ["www.toyship.org"] } } ] © TachibanaKaoru 19
- 22. block contents • ブロックは、画像だけではなく、特定のjsファイルやcssファ イルのブロックも可能。 • コンテンツブロッカーで、実際にどんなコンテンツがブロッ クされたのかはアプリで知ることはできない • もしブロックされた要素がキャッシュされていた場合にも、 読み込みはブロックされます。 © TachibanaKaoru 22
- 24. How to apply Contents Blocker for iOS © TachibanaKaoru 24
- 25. How to apply Contents Blocker for iOS -ユーザーがSafariで有効にするためには下記の手順が必要です。 -コンテンツブロッカーを含むアプリをダウンロードする -Safariの設定の「コンテンツブロッカー」の項目から、インス トールしたアプリのコンテンツブロッカーを選んでonにする © TachibanaKaoru 25
- 26. Webkit 詳しい blockerList.json の設定方法 は、Introduction to WebKit Content Blockersを参照してください。 Benjamin Poulain(@awfulben) なお、ソースコードも公開されていま す。 © TachibanaKaoru 26