WEBサイトからランキング上位のURLとタイトルを取得したい

Question

実現したいこと

以下のURLから上位10件のリンクボールドテキストとタイトルを取得したい
https://www.dmm.co.jp/digital/videoa/-/list/=/sort=ranking/

前提

Javaで開発中なのですが、URLにアクセスはできるのですが、
どのCSSセレクタを指定すればリンクとタイトルを取得できるかわかりません。

発生している問題・エラーメッセージ

指定しているCSSセレクタが見つからないのでgetできず13行目でエラーとなります

該当のソースコード

        // ランキングページのURL
        String rankingUrl = "https://www.dmm.co.jp/digital/videoa/-/list/=/sort=ranking";

        try {
            // ランキングページを取得
            Document doc = Jsoup.connect(rankingUrl).get();

            // 1位から10位までのURLを取得
            Elements rankingItems = doc.select("CSSセレクタ"); // 仮のCSSセレクタを指定

            for (int i = 0; i < 10; i++) {
                StringBuilder text = new StringBuilder("ランキング上位の商品:\n");
                Element item = rankingItems.get(i);
                String productUrl = item.select("CSSセレクタ").attr("href"); // 仮のCSSセレクタを指定
                text.append(productUrl).append("\n");
                                        ・・・・
            }

        } catch (Exception e) {
            e.printStackTrace();
        }

試したこと

URLにアクセスしてWEBサイトでF12開発者ツールを開いて対象リンクのIDやクラスを設定してみました。
設定の仕方がわかっていないのでそこが原因だと思います。
デバッグでdocの中を見てもどれか不明でした。

補足情報（FW/ツールのバージョンなど）

なし

Comments

[jimbe]

>設定の仕方がわかっていないのでそこが原因だと思います。

なら設定の仕方を調べれば良いのでは・・・。
↓これのことでしょうか。
https://jsoup.org/apidocs/org/jsoup/nodes/Element.html#select(java.lang.String)

Answer 1

html をテキストエディタででも読めば、ランキングデータの(欲しい情報が入っている) a タグには特定の属性があることが分かります。
後は jsoup の API をどう使用するかですから、見るべきは API のドキュメントで、開発者ツールとかデバッガとかは必要無いでしょう。

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class Ranking {
  public static void main(String[] args) throws Exception {
    Document doc = Jsoup.parse(
        "<a href='https://example.com/00100' data-i3ref='list' data-listorder='1' onmousedown=\"\">\n"
            + "<span class=\"img\">\n"
            + "<img src=\"https://example.com/image00100.jpg\" alt=\"title 00100\">\n"
            + "</span>\n"
            + "<span class=\"txt\">title 00100</span>\n"
            + "</a>"
            + "<a href='https://example.com/00120' data-i3ref='list' data-listorder='2' onmousedown=\"\">\n"
            + "<span class=\"img\">\n"
            + "<img src=\"https://example.com/image00120.jpg\" alt=\"title 00120\">\n"
            + "</span>\n"
            + "<span class=\"txt\">title 00120</span>\n"
            + "</a>"
        );

    Elements elements = doc.select("a[data-listorder]");
    for(int i=0; i<Math.min(10, elements.size()); i++) {
      Element element = elements.get(i);
      System.out.println("order=" + element.attr("data-listorder"));
      System.out.println("href=" + element.attr("href"));
      System.out.println("title=" + element.text());
    }
  }
}

order=1
href=https://example.com/00100
title=title 00100
order=2
href=https://example.com/00120
title=title 00120

Answer 2

回答

9行目を以下のとおりに変更すると、10位までのa要素が取得できます。

Elements rankingItems = doc.select("CSSセレクタ");
// ↓
Elements rankingItems = doc.select("#list > li:nth-child(-n+10) a[data-i3ref]");

すると14行目のitemは、それ自身がa要素であるため、以下のコードでhref属性の文字列を取得できます。

String productUrl = item.select("CSSセレクタ").attr("href");
// ↓
String productUrl = item.attr("href");

タイトルを取得するには、itemに対してさらにselectを使用します。

String title = item.select(".txt").text();

補足

まずは下記のURLから、CSSセレクターについて勉強しましょう。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_selectors

例えば、#list > li:nth-child(-n+10)は、id="list"の要素の子要素のうち、先頭から10番目までのliという意味になります。nth-childとnth-of-typeとの違いなど、気をつけるべき点もあります。

Comments

[aft]

ありがとうございます。無事にデータが取れました