みかづきブログ その3

3ヶ月つづけてみました。

Mobile Safari のリーダー表示でリーダーの情報を表示する

Safariのリーダー機能の仕様が公開されていないので、探り探り実装してみました。


DEMO

f:id:kimizuka:20150315184536j:plain
http://jsrun.it/kimmy/reader
※ iPhone の Safari で御覧ください


つかいかた

f:id:kimizuka:20150315185052p:plain

URLにアクセスするとURLバーに 「Reader View Available」と表示されます。

URLの左側のリーダーボタンを押すと、

f:id:kimizuka:20150315185216p:plain

城島茂(リーダー)の情報のみリーダーに表示されます。


つくってみてわかったこと

  • PC版とSP版のSafariでリーダーの条件が異なる
  • リーダーは、HTML、CSS、JavaScriptを評価する
  • リーダー表示には270文字程度必要?
  • CSS、JavaScriptでテキストを非表示にしてリーダーに必要な文字数を切るとリーダーボタンが表示されなくなる
  • ↑ ただしリーダーボタンが表示されてからであればテキストを非表示にしてもOK(0.11秒程度かかる模様)
  • asideのfloatをrigthにしてwidthを300px以下にするとリーダーに表示されなくなる?

リーダー機能には謎がいっぱいですね。