Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Contents blocker on iOS9

11,386 views

Published on

ContentsBlocker on iOS9

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×