HTML 文書と DOM

DOM を用いた Webページの処理

Webページは HTML により記述されています。 HTML 文書は階層構造を持っており、DOM を使って表現することができます。

HTML Parser

HTML 文書を解析(parse)して W3C の DOM の仕様に基づいた DOM tree を構築するライブラリがあれば、XML 文書と同じ扱い方をすることができます。 そのようなライブラリとして、The Validator.nu HTML Parser があります。

なお、JavaScript で動的に更新されるページの場合には、 The Validator.nu HTML Parser ではなく Selenium を使う必要があるかもしれません。

準備

Eclipse で使用しているプロジェクトが Maven プロジェクトであるなら、 pom.xml に以下の記述を追加することで利用できるようになります。 

<dependency>
    <groupId>nu.validator.htmlparser</groupId>
    <artifactId>htmlparser</artifactId>
    <version>1.4</version>
</dependency>

Maven って何? という人で、新規プロジェクトで初めてもよいという人は、 以下のページを参照しましょう。

Maven を使わずに手動でライブラリを導入する人の手順は以下です。

  1. 前述のソースが置かれているサイトから 「zip」をダウンロードします。
  2. ダウンロードしたファイルを右クリックし「すべて展開」で展開しておきます。
  3. eclipse でプロジェクトの src フォルダを右クリック -> インポート -> ファイル・システム、と進み、ここでダウンロードしたファイルを展開したフォルダ内の src フォルダを指定し、nu フォルダをインポートします。
  4. プロジェクト・エクスプローラーに nu.validator. で始まる 11個のパッケージが現れます。

共通クラス

サンプルプログラムを動作させるうえで、以下の NamespaceContextHTML クラスが必要です。 サンプルプログラムと同じパッケージに置いてください。

NamespaceContextHTML.java

このクラスを用いると XPath で抽出ができますが、 HTML の要素は h: という接頭辞をつけて指定する必要があります。 /div/p/a ではなく /h:div/h:p/h:a と書きます。

DOM tree の扱い方は XML 文書の場合と同じです。 テキストの「XML文書とDOM」の項目を参照してください。

XPath を考える際、Google Chrome のデベロッパーツールが役に立ちます（メニューの「その他のツール」の中）。 対象のページを表示した状態でデベロッパーツールを起動し、 「Elements」から階層構造を確認して、 特定したい要素を右クリックし Copy -> Copy XPath でクリップボードに XPath がコピーされます。

サンプル1: 遊戯王の新着商品情報の表示

遊戯王のサイトの商品情報のページを解析し、新着商品の情報を抽出するプログラムです。 以下のページを取得します。

    https://www.yugioh-card.com/japan/products/

YugiohLatestProducts.java

サンプル2: nf3 - Baseball Data House からの情報抽出

プロ野球の情報サイト nf3 - Baseball Data House の Webページを解析し、情報を抽出するプログラムです。 以下のページから選手の「カウント別成績」を取得します。

    https://nf3.sakura.ne.jp/Central/S/f/1_stat.htm

BaseballDataHouse.java

サンプル3: Beatportのトラック検索

音楽情報サイト Beatport の Webページを解析し、トラックの情報を抽出するプログラムです。 以下のページを取得します。

    https://www.beatport.com/search/tracks?q=<query>&per-page=150

<query>の部分は検索語が入ります。

BeatportSearcher.java