![blockerList.json
[
{
"action": {
"type": "css-display-none",
"selector" : "div.byline"
},
"trigger": {
"url-filter": ".*"
}
}
]
? TachibanaKaoru 13](https://image.slidesharecdn.com/contentsblocker-150619111440-lva1-app6891/85/Contents-blocker-on-iOS9-13-320.jpg)
![blockerList.json
[
{
"action": {
"type": "css-display-none",
"selector" : "div.wsbl_facebook_like"
},
"trigger": {
"url-filter": ".*"
}
}
]
? TachibanaKaoru 15](https://image.slidesharecdn.com/contentsblocker-150619111440-lva1-app6891/85/Contents-blocker-on-iOS9-15-320.jpg)
![blockerList.json
[
{
"action": {
"type": "block"
},
"trigger": {
"url-filter": "/wp-content/uploads/2014/03/",
"if-domain": ["www.toyship.org"]
}
}
]
? TachibanaKaoru 19](https://image.slidesharecdn.com/contentsblocker-150619111440-lva1-app6891/85/Contents-blocker-on-iOS9-19-320.jpg)
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