リーダーモードに打ち勝つ

これは何？

WORDIAN Advent Calendar 2017の13日目です。

Webの未来を守るために

皆さんは一部のブラウザに搭載されている、「リーダーモード」なる物をご存知でしょうか。

この機能は、皆が愛してやまない広告を隠してくれる、Internetの未来に善くない機能として有名です。 という訳で、カウンターしましょう。Webの未来のために。

apropos reader-mode

存じあげない方に簡単に説明致しますと、CSSとゴミっぽい要素を無視する機能です。

つまり、コレを

こうする

機能です。

丹精を込めて書き書きしたCSSも、便利のために設置したナビゲーションも、全て消しさってくれます。 当然、広告も消されてしまう事でしょう。

It’s not good for market.

敵を知る

敵を殺すには、まず敵を知る事から始めましょう。

この機能が実装されているブラウザとして代表的な物に、SafariとFirefoxがあります。 Safariの方は、アルゴリズムが公開されていないブラックボックスですが、 Firefoxのアルゴリズムはmozilla/readabilityで公開されています。

「読め」というだけでは記事にならないので、軽く見ていきをします。 ちなみに、見ていきコミットは fa9d8bda48ee574bcffbc19d68b4ca39e1f9036a です。

動作概略

記事っぽい物の抽出は、大体こんな感じで行われます。

1. ページ独自のスタイル(head内の<style>や、随所に見られる<font>タグ等)を除去する
2. クラス名やら要素名やらに重みを設定して、いい感じに記事っぽいヤツを探り当てる
3. いい感じのUIを被せる

つまり、「探り当てる」辺りをHakkuすればいい訳です。

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);

といった、読み上げブラウザに優しい方法で隠しましょう。 この方法を使う事で、記事に無関係な物だという事を悟らせない事ができます。

Conclusion

その辺りを考慮したHTMLがコレです。Firefoxで見て下さい。

はい、頑張っていきましょう。