web-dev-qa-db-ja.com

Firefoxリーダービューの動作方法

概要

ウェブページを作成し、ユーザーが希望する場合にFirefox Reader Viewに表示されることを[かなり]確認できる基準を探しています。

一部のサイトにはこのオプションがあり、一部のサイトにはありません。より多くのテキストを含むものは、テキストがはるかに少ない他のものよりもこのオプションを持たない。たとえば、スタックオーバーフローでは、リーダービューに回答ではなく質問のみが表示されます。

質問

Firefoxを38.0.1から38.0.5にアップグレードし、ReaderViewという新しい機能を見つけました。これは、「ページの乱雑さ」を取り除き、テキストを読みやすくするオーバーレイの一種です。 Readerviewは、特定のページでクリック可能なアイコンとしてアドレスバーの右側にあります。

これは問題ありませんが、プログラミングの観点からは、「リーダービュー」がどのように機能するか、どのページにどの基準が適用されるかを知りたいと思います。私は明確な答えなしでMozilla Firefoxのウェブサイトをいくつか調査しました（私が見つけたあらゆる種類のプログラミングの答えをsodしました）、私はもちろんこれをGoogled/Bingedしましたが、これはFirefoxアドオンへの参照で戻ってきました-これはアドオンではありませんしかし、新しいFirefoxバージョンの主要部分です。

ReaderviewはHTML5を使用し、<article>の内容ですが、これはそうではありません。Wikipediaでは<article>または同様のHTML5タグ、代わりにreadviewは特定の<div>sとそれらを単独で表示します。この機能は、ウィキペディアなどの一部のHTML5ページで機能しますが、それ以外では機能しません。

Firefox ReaderViewが実際にどのように動作し、この操作をWebサイト開発者がどのように使用できるかについてのアイデアがあれば、共有できますかまたは、この情報がどこにあるかを見つけることができれば、正しい方向に私を向けることができます-私はこれを見つけることができなかったので。

javascriptfirefoxfirefox-reader-view
67
Martin

テキストの周りに少なくとも1つの<p>タグが必要で、リーダービューで表示し、テキスト内の7ワードで少なくとも516文字必要です。

たとえば、これによりReaderViewがトリガーされます。

<body>
<p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</body>

https://stackoverflow.com/a/30750212/106908 の私の例を参照してください

54
rubo77

今朝、gitHubコードを読むと、プロセスはページ要素が可能性の高い順序でリストされます-<section>、<p>、<div>、<article>リスト（最も可能性が高い）。

次に、これらの各「ノード」には、ノードに適用されるコンマカウントやクラス名などに基づいてスコアが与えられます。これはやや多面的なプロセスであり、テキストチャンクに対してスコアが追加されますが、無効な部分や構文に対してもスコアが減少するようです。 「ノード」のサブパートのスコアは、ノード全体のスコアに反映されます。つまり、親要素にはすべての下位要素のスコアが含まれていると思います。

このスコア値は、HTMLページをFirefoxで「ページ表示」できるかどうかを決定します。

スコアの値がFirefoxで設定されているのか、読みやすさの関数で設定されているのかは明確ではありません。

Javascriptは本当に私の長所ではありません。他の誰かがRichardが提供するリンク（ https://github.com/mozilla/readability ）を確認し、より徹底的に提供できるかどうかを確認する必要があると思います回答。

表示されなかったが表示されると予想されたのは、<p>または<div>（またはその他の）関連タグのテキストコンテンツの量に基づくスコアでした。

この質問または回答の改善点は共有してください!!

編集：<div>要素内の<figure>または<p>タグ（HTML5）内の画像は、ページテキストコンテンツが有効な場合、リーダービューに保持されているように見えます。

29
Martin

Readability.js GitHub repository へのMartinのリンクをたどり、ソースコードを確認しました。これが私が作ったものです。

アルゴリズムは段落タグで機能します。まず最初に、フォームなどのように、コンテンツではないページの部分を特定し、それらを削除しようとします。次に、ページ上の段落ノードを通過し、コンテンツの豊富さに基づいてスコアを割り当てます。コンマの数、コンテンツの長さなどにポイントを与えます。25文字未満の段落はすぐに破棄されることに注意してください。

スコアは、DOMツリーを「バブルアップ」します。各段落は、そのすべての親ノードにスコアの一部を追加します-直接の親は、その合計に完全なスコアを追加します。オン。これにより、アルゴリズムはメインコンテンツセクションである可能性が高い上位レベルの要素を識別できます。

これはFirefoxのアルゴリズムにすぎませんが、Firefoxでうまく機能すれば、他のブラウザーでもうまく機能すると思います。

これらのReader ViewアルゴリズムがWebサイトで機能するためには、ページのコンテンツが多いセクションを正しく識別する必要があります。これは、ページ上のコンテンツが多いノードがアルゴリズムで高いスコアを取得することを意味します。

したがって、これらのアルゴリズムの目でページの品質を改善するためのいくつかの経験則があります。

  1. コンテンツで段落タグを使用してください！多くの人は、<br />タグを優先して見落としがちです。似ているように見えるかもしれませんが、多くのコンテンツ関連のアルゴリズム（Reader Viewのものだけでなく）はそれらに大きく依存しています。
  2. マークアップで<article>、<nav>、<section>、<aside>などのHTML5セマンティック要素を使用します。 （質問で述べたように）唯一の基準ではありませんが、これらは（読者ビューだけでなく）ページを読むコンピューターにとって、コンテンツのさまざまなセクションを区別するのに非常に役立ちます。 Readability.jsは、それらを使用して、重要なコンテンツが含まれている可能性が高いまたは低いノードを推測します。
  3. <article>または<div>要素のように、メインコンテンツを1つのコンテナーにラップします。これは、その中のすべての段落タグからスコアポイントを受け取り、メインコンテンツセクションとして識別されます。
  4. コンテンツが密集した領域では、DOMツリーを浅く保ちます。コンテンツを分割する要素がたくさんある場合、アルゴリズムの寿命を延ばすだけです。多くのコンテンツが多い段落の親として目立つ単一の要素はありませんが、多くの別個の段落はありません。低スコアで。
20
Sean Bone