View
1.792
Download
0
Category
Preview:
Citation preview
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要素 処理の適用箇所の設定
© TachibanaKaoru 11
hide contentsタイトルの下の日付や著者名を消してみましょう。この部分のclass属性は「byline」なので、blockerList.jsonにtype:css-display-noneのaction要素を追加することでこの部分を非表示にすることができます。action要素のselectorにはdiv.bylineを指定します。trigger要素でこの条件の適用場所の指定をします。
© TachibanaKaoru 12
blockerList.json[ { "action": { "type": "css-display-none", "selector" : "div.byline" }, "trigger": { "url-filter": ".*" } } ]
© TachibanaKaoru 13
hide contentsfacebookのlikeボタンも消してみましょう。この部分のdivのclass属性はwsblfacebooklikeですblockerList.json にこの要素を追加します
© TachibanaKaoru 14
blockerList.json[ { "action": { "type": "css-display-none", "selector" : "div.wsbl_facebook_like" }, "trigger": { "url-filter": ".*" } }]
© TachibanaKaoru 15
hide contents
この設定でさきほどのページを表示すると、こうなります。タイトルの下の日付や著者名の部分と、facebookのlikeボタンの表示が消えていますね。
© TachibanaKaoru 16
© TachibanaKaoru 17
block contents次は、コンテンツの読み込みをブロックしてみましょう。画像のURLは http://www.toyship.org/wp-content/uploads/2014/03/XcodeScreen-636×310.png です。blockerList.json に type:block のaction要素を追加すると、この画像の読み込みをブロックすることができます。
© TachibanaKaoru 18
blockerList.json[ { "action": { "type": "block" }, "trigger": { "url-filter": "/wp-content/uploads/2014/03/", "if-domain": ["www.toyship.org"] } }]
© TachibanaKaoru 19
block contents
この設定でさきほどのページを表示すると、こうなります。画像の表示が消えていますね。
© TachibanaKaoru 20
© TachibanaKaoru 21
block contents• ブロックは、画像だけではなく、特定のjsファイルやcssファイルのブロックも可能。
• コンテンツブロッカーで、実際にどんなコンテンツがブロックされたのかはアプリで知ることはできない
• もしブロックされた要素がキャッシュされていた場合にも、読み込みはブロックされます。
© TachibanaKaoru 22
block cookies同様にtype:block-cookiesのaction要素を追加することでクッキーのブロックもできます。
© TachibanaKaoru 23
How to apply Contents
Blocker for iOS
© TachibanaKaoru 24
How to apply Contents Blocker for iOS-ユーザーがSafariで有効にするためには下記の手順が必要です。 -コンテンツブロッカーを含むアプリをダウンロードする -Safariの設定の「コンテンツブロッカー」の項目から、インストールしたアプリのコンテンツブロッカーを選んでonにする
© TachibanaKaoru 25
Webkit
詳しい blockerList.json の設定方法は、Introduction to WebKit Content Blockersを参照してください。Benjamin Poulain(@awfulben)
なお、ソースコードも公開されています。
© TachibanaKaoru 26
Matome
© TachibanaKaoru 27
Matomeコンテンツブロッカーをonにすると、特定のcss要素を非表示にしたり、特定のファイルやクッキーの読み込みをブロックすることができるコンテンツブロッカーはToday WidgetやShare Extensionのように、既存のアプリの一部として提供される何をブロックしたのかという情報は、コンテンツブロッカーを含むアプリで取得することはできない
© TachibanaKaoru 28
Recommended