ニュース記事の HTML ドキュメントを指定して、メイン画像 (サムネイル) を決定する必要があるニュース スクレーパーを作成しています。
つまり、基本的には同じ課題です。Facebook は、リンクを投稿するときにどの画像をサムネイルとして表示するかをどのように決定するのでしょうか?
多くの便利なテクニックがあります (より高い次元、より小さな比率を優先するなど) が、Web ページを解析した後、プログラムが同様のサイズの画像のリスト (半分は広告) になり、1 つだけを選択する必要がある場合があります。これは、ドキュメントに記載されているストーリーを示しています。
視覚的には、ランダムなニュース記事を開くと、ほとんどの場合メイン画像が上部にあり、テキストに囲まれています。そのような画像を見つける HTML パーサー (たとえば、xpath / nokogiri を使用) を実装するにはどうすればよいですか?
サイトのレイアウトに関する予備知識がない限り、コードからこれを判断する良い方法はありません。
HTML と DHTML を使用すると、CSS または JavaScript を使用してページ全体に要素を配置でき、Nokogiri がアクセスできないページの読み込み後に配置できます。
ページが完全にロードされた後、Watir API の 1 つを使用してそれを行うことができるかもしれませんが、ここでも、サイトがどのレイアウトを使用しているかを知る必要があります。広告は HTML ストリームのどこにでも配置でき、読み込み後にページ内を移動できます。また、実際のコンテンツを動的に読み込み、その場所とサイズをその場で変更できます。その結果、HTML 内のコンテンツの位置が重要であるとは期待できません。また、コンテンツが HTML 内にあるとは期待できません。これに関しては、JavaScript や CSS は友達ではありません。
サイト分析用のスパイダーとクローラーを作成したときも、同じ問題に対処しなければなりませんでした。どのサイトを見るかはわかっていたので、簡単な事前スキャンを行ってランドマーク タグを見つけ、それらの CSS または XPath アクセサーをいくつか書きました。それらを URL とともにデータベースに保存すると、ページをすばやく移動して、必要なものを正確に取得できます。
ページ レイアウトに関する知識がなければ、コードはページ レイアウト担当者や、ページの要素の位置を変更するものに完全に翻弄されます。
基本的に、コードでページをグラフィカルにレンダリングしてコードで分析できるようにする機能とともに、脳内のウェットウェアをコードで実装する必要があります。ユーザーがブラウザーでページを表示するとき、重要なコンテンツを見つけるために視覚的および文脈的な手がかりを使用しています。そのコンテキスト情報はすべて、不足しているものであり、記述する必要があるものです。
私があなたを正しく理解していれば、問題はページの解析ではなく、どの画像を選択するかを正しく決定するロジックの実装にあります。
最初のステップは、どの画像がニュース画像で、どの画像がそうでないか (たとえば広告) を判断することだと思います。
画像の URL (画像タグの src 属性) を読み取り、記事のホストに対してホストをチェックすることで、中間部分 (例では「nytimes」) が同じであることを確認できます。
2 番目のステップは、これらのうちどれが最も重要かを決定することです。そのために、記事内の画像サイズ、ページ上の位置などを使用できます。ステップ 2 では、ほとんどのサイトで最適なものを試す必要があります。ほとんどのニュース サイトで最良の結果が得られるまで、アルゴリズムを微調整します。
お役に立てれば