iOS 5 の Mobile Safari の Reader 機能はどのように機能しますか? 自分のサイトで有効にする方法を教えてください。ページのどのコンテンツがこの機能をトリガーする記事であるかをどのように伝えるのですか?
11 に答える
ここに掲載されている回答の多くには、誤った情報が含まれています。ここにいくつかの修正/説明があります:
要素は
<article>
ラッパーとして正常に機能します。SafariReaderはそれを認識します。私のサイトは一例です。<body>
または以外のラッパー要素がある限り、どのラッパー要素を選択してもかまいません<p>
。<article>
、、;<div>
を使用できます または、、、、など、<section>
この目的に対して意味的に正しくない要素。または(!)のようなインライン要素ですら。<nav>
<aside>
<footer>
<header>
<span>
Readerが機能するために見出しは必要ありません。
<h*>
これは、 Readerが正常に機能する要素のないドキュメントの例です:http: //mathiasbynens.be/demo/safari-reader-test-3
私はここに私の発見に関するいくつかの詳細を投稿しました:http://mathiasbynens.be/notes/safari-reader
このとらえどころのないリーダー状態を引き起こす原因を突き止めるために、iPhone でこれの 100 ほどのバリエーションをテストしました。私の結論は次のとおりです。
影響があったとわかったのは次のとおりです。
- 「リーダー」をトリガーする記事には、約200語以上(または空白を含めて1000文字)が必要なようです
- 単語が 170 未満の場合、リーダーは決してトリガーされませんでした。単語が 180 語または 190 語あるときにトリガーされることもありましたが。
<ol>
orなどの特定の要素内のテキスト<ul>
(通常、ストーリーを含めるために使用されない) は、200 語にはカウントされません (ただし、リーダーが他の理由でトリガーされた場合は、リーダーに表示されます)。- 200 語を a
<div>
またはなどのブロック要素でラップする<article>
必要があるようです (そうは言っても、まだそうなっていない Web サイトがあれば驚くでしょう)。
完全な開示のために、ここに私が見つけた影響がなかったものがあります:
- ヘッダーを使用するかどうか
- テキストを で囲むか、
<p>
自由に流れるようにするか - 句読点 (つまり、すべてのピリオド、コンマなどを削除しても影響はありませんでした)
それが基づいているアルゴリズムはpタグを探しているようで、「。」のような区切り文字を数えます。インナーテキストで。ポイントが最も多いセクション (div) がフォーカスされます。
参照: http://lab.arc90.com/experiments/readability/
リーダーモードのベースのようです。少なくとも Safari では、謝辞に記載されています。以下を参照してください。
file:///C:/Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html
Arc90 ( Readability ) Copyright © Arc90 Inc.
Readability は Apache License, Version 2.0 に基づいてライセンスされています。
この質問(WebページでSafari Readerを無効にする方法)に詳細があります。ここにコピー:
SafariでReaderオプションをトリガーするものとトリガーしないものについてもっと知りたいです。私はそれを無効にするようなものを実装するつもりはありませんが、技術的な演習として興味があります。
これが私がこれまでにいくつかの基本的な遊びで学んだことです:
少なくとも1つのHタグが必要です。文字数だけではなく、Pタグの数と長さによって決まります。おそらく文の区切りを探します'。' およびその他の基準Safariは、Hタグが付いた場合、および次の場合に「リーダー」を提供します。
1 Pタグ、2417文字4 Pタグ、1527文字5 Pタグ、1150文字6 Pタグ、862文字上記のいずれかから1文字を引くと、「リーダー」オプションは使用できません。
Hタグの文字数が重要な役割を果たしていることに注意する必要がありますが、上記の結果を判断したときに、残念ながらこれに気づきませんでした。Hタグに20文字以上を想定し、上記の結果全体で修正しました。
他のいくつかの興味深いこと:
Pタグを設定すると、カウントからそれらが削除されます。設定表示がなしになり、230ミリ秒後にJavascriptで表示すると、リーダーオプションも回避されます。
誰かがこれを完全に決定できるかどうか興味があります。
私はこれに苦労していました。<ul>
ついにストーリーのマーキングとビオラを取り出しました!それは働き始めました。
私は体の周りにラッパーを付けていませんでしたが、偶然にそれをした可能性があります。
Firefox と Chrome の両方に、iReader という名前の同様のプラグインがあります。これがソースコード付きのプロジェクトです。
http://code.google.com/p/ireader-extension/
コードを読んで詳細を確認してください。
HTML5の記事タグは私のテストではトリガーされません。また、オフラインコンテンツ(つまり、ローカルマシンに保存されたページ)では機能しないようです。
それをトリガーするように見えるのは、多くのテキストを含む多くのpを含むdivブロックです。
驚くかもしれませんが、実際には HTML5 の article タグに注意を払っていません。Safari 5 が CSS で article、section、nav などを完全にサポートしていることを考えると特に残念です。ブロックレベルの要素と同じように動作します。
私は、記事タグといくつかの内部セクション タグを含むサイトを特別に設定し、まさにそのような目的のためにセマンティック HTML5 ラベル付けを準備していたので、Safari 5 がそれを Reader に使用することを本当に望んでいました。そのような運はありません-おそらくこれについてバグを報告する必要があります.これは非常に理にかなっています. 実際、ページ上の h2 レベルの小見出しのほとんどを完全に無視し、それぞれがセクションとしてマークされ、前述の基準に準拠する単一の div のみを表示します。
皮肉なことに、article、section、区切りの div タグのいずれも持たない同じサイトの古いバージョンは、Reader で表示するために本文全体を認識します。
pタグ理論は良さそうです。他の要素も検出すると思います。6 つの段落を含むページの 1 つではリーダーがトリガーされませんでしたが、4 つの段落と img タグを含むページではトリガーされました。
また、複数ページの記事を検出するのに十分なほどスマートです。nytimes.com または nymag.com の複数ページの記事で試してみてください。それがどのようにそれを検出するかも知りたいです。
私は、Safari リーダー機能と同様に、Web サイトを情報の「無駄」からクリーニングするためのアルゴリズムに取り組んでいます。読みやすさはそれほど良くありませんが、いくつかのクールなものがあります。
詳細については、smartbrowser.codeplex.comプロジェクト ページをご覧ください。