December 15, 2017
WORDIAN Advent Calendar 2017の13日目です。
皆さんは一部のブラウザに搭載されている、「リーダーモード」なる物をご存知でしょうか。
この機能は、皆が愛してやまない広告を隠してくれる、Internetの未来に善くない機能として有名です。 という訳で、カウンターしましょう。Webの未来のために。
存じあげない方に簡単に説明致しますと、CSSとゴミっぽい要素を無視する機能です。
つまり、コレを
こうする
機能です。
丹精を込めて書き書きしたCSSも、便利のために設置したナビゲーションも、全て消しさってくれます。 当然、広告も消されてしまう事でしょう。
It’s not good for market.
敵を殺すには、まず敵を知る事から始めましょう。
この機能が実装されているブラウザとして代表的な物に、SafariとFirefoxがあります。 Safariの方は、アルゴリズムが公開されていないブラックボックスですが、 Firefoxのアルゴリズムはmozilla/readabilityで公開されています。
「読め」というだけでは記事にならないので、軽く見ていきをします。
ちなみに、見ていきコミットは fa9d8bda48ee574bcffbc19d68b4ca39e1f9036a
です。
記事っぽい物の抽出は、大体こんな感じで行われます。
<style>
や、随所に見られる<font>
タグ等)を除去するつまり、「探り当てる」辺りをHakkuすればいい訳です。
Readability.js
を見て、対策を立てていきましょう。
h1
やiframes
を使わない_prepArticle
とかを見れば分かりますが、iframes
やform
といった、ゴミっぽい物は大抵除去されます。
つまり、広告を表示させるのは至難の技という事です。
この事から、リーダーモードではリーダーモード非表示お願いメッセージだけを表示させるようにすれば良い事が分かります。
なお、h1
はタイトルっぽいという理由で、本文から除去されるので、お願いメッセージに使わないようにしましょう。
REGEXPS
や_getClassWeight
から推測できる通り、クラス名も評価基準の一つです。
記事本体にはcommunity
やhid
といったクラス名を、
お願いメッセージにはbody
やmain
といったクラス名を使うよう心掛けましょう。
各要素内の文章が長ければ長いほど、より記事本体だと錯覚するようになります。 お願いメッセージは冗長に、本文は可能な限り細切れになるように心掛けましょう。
なお、本文が短すぎるとFirefoxでリーダーモードが使えなくなるっぽいので、注意しましょう。
<!-- bad! -->
<p>リーダーモードを使わないで!</p>
<p>「たかしくん……」 彼はプリキュアの姿をしていた。ピンクのフリフリがついた可愛らしい衣装はキュアハッピーのものだ。</p>
<!-- good!!! -->
<p>リーダーモードを使わないで!
迷惑です!!迷惑です!!迷惑です!!迷惑です!!迷惑です!!迷惑です!!迷惑です!!迷惑です!!</p>
<p>「たかしくん……」 彼はプリキュアの姿をしていた。</p>
<p>ピンクのフリフリがついた可愛らしい衣装はキュアハッピーのものだ。</p>
お願いメッセージは<article>
で、本文は<aside>
で包むようにすると、いい感じに誤認識してくれます。
<div>
のネストを深くする事とかも、本文を隠すためには有効です。
お願いメッセージはdisplay: none;
で隠すのではなく、
position: absolute !imporant;
clip: rect(1px, 1px, 1px, 1px);
といった、読み上げブラウザに優しい方法で隠しましょう。 この方法を使う事で、記事に無関係な物だという事を悟らせない事ができます。
その辺りを考慮したHTMLがコレです。Firefoxで見て下さい。
はい、頑張っていきましょう。