2017年6月19日月曜日

Safariのリーダーモード覚え書き(調査未完で不明確)

スポンサーリンク

Safariのリーダーモード覚え書き。

手当り次第にソースを弄って確かめるも法則性がわからず、とりあえずメモ的に。

なお、iPhohneなどのモバイルではなくMacのSafariでの調査。

リーダーモードの条件


リーダーモードが選択できないページもあり、何らかの状態を判断していると思われる。

とりあえず、以下の状態であればリーダーモードが選べなくなる模様。

  • メインコンテンツ冒頭にulやolが2つ以上存在する

恐らく、上記の条件で記事一覧ページと判断されるためだと思われる。これは、リーダーモードが通常のページをターゲットにしているという仮説に基づく。

ただ、contentsやmainなどのクラス名や要素名を消してもそれなりにメインコンテンツを判断できるようで、どういう基準でメインコンテンツの範囲を確定しているのか不明。

リーダーモードは反映を確認しづらい?

キャッシュが絡んでいるようで、キャッシュを無効にするとリーダーモードを選んでもコンテンツ部分が真っ白で表示される(文字サイズの変更ボタンなどは残る)。

リロードしてもリーダーモードは更新されず、新たにタブを開いてリーダーモードを選べば更新された状態を確認できた。

特定のネストで要素が消える?


以下の状態でリーダーモード時に要素が消えることを確認。

  • div>div>p>a
  • div>div>li
  • div>div>li>a

単にネストが深いということではなく、a要素やリスト要素に反応している模様。ネストが浅くとも消える場合もあった。

また、同じ構造でも消えないものもあり、位置や数など他の要素との関係性が影響しているのかもしれない。

divを消すと表示される場合があるが、装飾に必要だから付けているのでこれで表示の有無が決まるのは納得いかず。

特定のクラス名が付いていると要素が消える?


以下の単語がクラス名に含まれるdivに包含されたa要素が消え、単語を消すと表示された。

  • link

アドブロックのようにクラス名で判断している可能性はあるが、adなどの単語が含まれるクラス名では消えなかった。

AdsenseとAmazonのIframe広告


AdsenseとAmazonのIframe広告はリーダーモードで消える。

Adsense自体をコンテンツに組み込んでいることはまずないと思うが、Amazon広告の画像を利用して補足説明としているようなコンテンツでは問題になりえる。

要素が消えた場合に確認するポイント(仮)


挙動が理解できていないのであくまで仮。

  • ネストが深くないか
  • div>p>aをdiv>aにするなどネストを浅くしたら表示されるか
  • クラス名の変更で表示されるか
  • 消えた要素と同階層に存在するのがliやaだけか(リーダーモードに不要な要素と見なされている可能性の確認)

対応策の実行による影響が広範に及ぶ可能性もあり、リーダーモードのためだけに構造に制限がでるのは馬鹿らしいが、どの要因が非表示のトリガーなのかを特定できれば簡易な解決策が見つかる、かもしれない。

結び


一番安全なのはdivやspanは全部やめ、コンテンツ内にはpやimgやtableなどの構造的なタグだけにすることかもしれない。どんどん退化していく気はするが。

なお、リーダーモードに関して日本語のドキュメントを見つけられておらず、状態が良く理解できていない。
英語圏の方はまだ浅くしか調べていないので、後ほど調べてみたい。

ただ、色々触って調べた感じでは、まったく納得いかない動作で辟易としている。特に構造を理由(ではないかもしれないが)にwebページからリンクを消してどうするつもりなのか...。

アドブロック的なものをめざしているならまだ分かるが、そういう感じでもなく(今後そういう方向になるのかもしれないが)。

「今後変わるのか変わらないのか」「環境によるのかよらないのか」などが確認できていないため、現状の調査結果を元に調整を行うのはリスクが高いと思うので、今の所は様子見が良いように思う。

可能ならmetaなどでリーダーモードの拒否を簡易且つ明示的に行えれば良いのだが、意図からするとサイトの状態はおかまいなしで強制的にやりかねない雰囲気も感じるので、コントロールする諦めた方がよいのかもしれない。



スポンサーリンク

0 件のコメント :

コメントを投稿