Contents blocker on iOS9

Contents Blocker on iOS9

@TachibanaKaoru

© TachibanaKaoru 1

自己紹介Tachibana Kaoru- iOS Engineer at VOYAGE GROUP- Twitter: @TachibanaKaoru- Blog: http://www.toyship.org/

• WWDCは2010,2015に参加

© TachibanaKaoru 2

What is Contents Blocker

© TachibanaKaoru 3

What is Contents Blocker• iOSやMacでSafariに表示する項目を、自動的に制限する機能

• Macでは、Safari Pluginとして提供される• iOSでは、Today WidgetやShare ExtensionのようにApp

Extensionとして提供される

© TachibanaKaoru 4

What is Contents Blocker• ブロックする対象

• cssで指定された特定の要素を非表示にする• 特定のファイルを読みこまないようにする• 特定のクッキーを読みこまないようにする

© TachibanaKaoru 5

What is Contents Blocker• 適用範囲

• Safari以外のブラウザ（Chromeなど）には影響しない• iOS9から導入された SFSafariViewControllerには適用される

• UIWebView/MKWebViewには影響しない

© TachibanaKaoru 6

How to implement

Contents Blocker for iOS

© TachibanaKaoru 7

How to implement Contents Blocker for iOSiOSではコンテンツブロッカーは、App Extensionとして提供されているため、まずは本体となるアプリを作成します。Xcodeでアプリを作ったら、メニューから File - New - Target を選び、iOS-Application Extension の Content Blocker Extension を選びます。

© TachibanaKaoru 8

How to implement Contents Blocker for iOSコンテンツブロッカーのターゲットが追加され、ActionRequestHandler.swift と blockerList.json のファイルが生成されます。ブロックする要素と条件は blockerList.json ファイルで設定します。

© TachibanaKaoru 9

試しにこちらのページの要素にコンテンツブロッカーを適用させてみましょう

© TachibanaKaoru 10

hide contentsCSSの特定の要素を非表示にする方法です。blockerList.json には、複数の表示設定を追加することができ、ファイルの先頭から順番に適用されていきます。action要素処理内容についての設定trigger要素処理の適用箇所の設定


hide contentsタイトルの下の日付や著者名を消してみましょう。この部分のclass属性は「byline」なので、blockerList.jsonにtype:css-display-noneのaction要素を追加することでこの部分を非表示にすることができます。action要素のselectorにはdiv.bylineを指定します。trigger要素でこの条件の適用場所の指定をします。


blockerList.json[ { "action": { "type": "css-display-none", "selector" : "div.byline" }, "trigger": { "url-filter": ".*" } } ]


hide contentsfacebookのlikeボタンも消してみましょう。この部分のdivのclass属性はwsblfacebooklikeですblockerList.json にこの要素を追加します


blockerList.json[ { "action": { "type": "css-display-none", "selector" : "div.wsbl_facebook_like" }, "trigger": { "url-filter": ".*" } }]


hide contents

この設定でさきほどのページを表示すると、こうなります。タイトルの下の日付や著者名の部分と、facebookのlikeボタンの表示が消えていますね。



block contents次は、コンテンツの読み込みをブロックしてみましょう。画像のURLは http://www.toyship.org/wp-content/uploads/2014/03/XcodeScreen-636×310.png です。blockerList.json に type:block のaction要素を追加すると、この画像の読み込みをブロックすることができます。


blockerList.json[ { "action": { "type": "block" }, "trigger": { "url-filter": "/wp-content/uploads/2014/03/", "if-domain": ["www.toyship.org"] } }]


block contents

この設定でさきほどのページを表示すると、こうなります。画像の表示が消えていますね。



block contents• ブロックは、画像だけではなく、特定のjsファイルやcssファイルのブロックも可能。

• コンテンツブロッカーで、実際にどんなコンテンツがブロックされたのかはアプリで知ることはできない

• もしブロックされた要素がキャッシュされていた場合にも、読み込みはブロックされます。


block cookies同様にtype:block-cookiesのaction要素を追加することでクッキーのブロックもできます。


How to apply Contents

Blocker for iOS


How to apply Contents Blocker for iOS-ユーザーがSafariで有効にするためには下記の手順が必要です。 -コンテンツブロッカーを含むアプリをダウンロードする -Safariの設定の「コンテンツブロッカー」の項目から、インストールしたアプリのコンテンツブロッカーを選んでonにする


Webkit

詳しい blockerList.json の設定方法は、Introduction to WebKit Content Blockersを参照してください。Benjamin Poulain(@awfulben)

なお、ソースコードも公開されています。


Matome


Matomeコンテンツブロッカーをonにすると、特定のcss要素を非表示にしたり、特定のファイルやクッキーの読み込みをブロックすることができるコンテンツブロッカーはToday WidgetやShare Extensionのように、既存のアプリの一部として提供される何をブロックしたのかという情報は、コンテンツブロッカーを含むアプリで取得することはできない


Internet

Contents blocker on iOS9