Microsoft Edge読み取りビューでサイト収益を下げない為に

1 Windows10のMicrosoft Edgeに触れる
- 1.1 Microsoft Edgeとは
- 1.2 オールインワンに秘められた大人の事情
2 「読み取りビュー」の使用感

Windows10のMicrosoft Edgeに触れる

ホームページ管理において、ウェブブラウザの種類ごとに変わってしまわないか、デザインの整合性を見るのは重要なことです。Windows10にインストールされているMicrosoft Edgeというブラウザも同様に接する必要があります。それでは件のMicrosoft Edgeについて見ていきましょう。

[adssp]

Microsoft Edgeとは

Microsoft Edgeは、これ一つで読み書きとウェブはおろか、データ検索までもが行えるという触れ込みのブラウザで、Internet Explorer(以下IE)と違う最大の特徴です。これから先展開されていくであろうWindows10搭載デバイス間との連携も可能になるようです。Microsoft Edgeは、IEとは別物のブラウザです。Windows10のプログラム中を探せば、IEはきちんと存在していますし動作もします。また試しにMicrosoft Edgeを使ってみたいという方は、お気に入りのインポートがサポートされているのでお試し下さい。

オールインワンに秘められた大人の事情

ネット閲覧に使用される端末が、PCからスマートフォンに移り変わっているこのタイミングでこのようなブラウザが登場したのには、どうにかシェアを繋ぎとめようとしているMicrosoft苦肉の策なのではないかと勘ぐってしまいます。

「読み取りビュー」の使用感

Microsoft Edgeの機能の一つに、「読み取りビュー」というものがあります。これがアクティブになると、閲覧しているWebページのメインコンテンツと画像だけが表示されて、不必要な広告などは非表示になります。活字のみの文章が羅列してしまうので、視覚的に楽しむ事は出来ませんが、読み取りビューに対応しているニュースサイトの記事を読む際には役立つことでしょう。課題はサイト側が対応しているかですが、いかなる機能も開いたページが未対応なのでは意味がありません。そこで今回はどうすれば読み取りビューに対応したページが作成できるかを考えていきます。

メインコンテンツ(本文)がキャプチャされる条件

ページのすべての本文テキストが読み取りビューにキャプチャされるようにするには、記事のテキストのほとんどで、同じフォントサイズと DOM 深度を保つようにしてください。読み取りビューのアルゴリズムでは、このルールからの逸脱が、ある程度は許容されるため、発行者は、行や単語に強調を追加することができます。

これを要約すると…

テキストは同じフォントサイズで統一すること
Javascriptを扱う場合DOMツリーは同じ階層にすること
強調文字による多少の変化は認める

こうなります。

この場合、CSSによる整形はどういう判定になるのかが気になるところです。ブロックレベル要素を用いた当ブログで対応されていなければ、記事はよりシンプルにしなければならない事が分かります。さすがにそこまで判定が厳しければ、機能そのものが廃れかねませんね。

画像がキャプチャされる条件

読み取りビューは、幅が 400 ピクセル以上、縦横比が 1/3 以上、3.0 以下のほとんどの RAW 画像をキャプチャします。幅が 400 ピクセル未満で字幕付きの画像など、これらのサイズに一致しない画像も抽出される場合があります。対象となる最初の画像が、その記事の優先画像になります。優先画像は、コンテンツの最初の部分として、列の幅全体にわたって表示されます。その後のすべての画像は、記事内にインライン画像として表示されます。

ということで、要約しますと…