Contents blocker on iOS9

Contents blocker on iOS9

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