CSS セレクタ拡張パッケージの活用例

HtmlAgilityPack（HAP）は標準では CSS セレクタによるノード探索 をサポートしていませんが、これを補うために CSS セレクタ拡張パッケージ がいくつか存在します。代表的なものに以下のライブラリがあります。

1. Fizzler for HtmlAgilityPack

概要

Fizzler は、HtmlAgilityPack に CSS セレクタのサポートを追加する拡張ライブラリです。LINQ を用いて、jQuery のような CSS セレクタ構文でノードを簡潔に選択できます。

2. 導入方法

NuGet パッケージのインストール

bash
Install-Package Fizzler.Systems.HtmlAgilityPack

または .NET CLI:

bash
dotnet add package Fizzler.Systems.HtmlAgilityPack

3. 使用例

以下は、HTML ドキュメントから特定のクラスや要素を CSS セレクタで抽出する例です。

HTML 例（入力文字列）

html
<html>
  <body>
    <div class="content">
      <p class="title">記事タイトル</p>
      <p class="body">記事本文</p>
    </div>
  </body>
</html>

コード例（C#）

csharp
using HtmlAgilityPack;
using Fizzler.Systems.HtmlAgilityPack;

var html = @"
<html>
  <body>
    <div class='content'>
      <p class='title'>記事タイトル</p>
      <p class='body'>記事本文</p>
    </div>
  </body>
</html>";

var doc = new HtmlDocument();
doc.LoadHtml(html);

// CSSセレクタで .content クラスの中の .title を取得
var root = doc.DocumentNode;
var nodes = root.QuerySelectorAll(".content .title");

foreach (var node in nodes)
{
    Console.WriteLine(node.InnerText);  // 出力: 記事タイトル
}

4. 主な CSS セレクタ対応例（Fizzler）

セレクタ構文 意味 対応状況
div <div> 要素 ○
.class 指定したクラスを持つ要素 ○
#id 指定したIDを持つ要素 ○
div > p div 直下の p 要素 ○
div p div の任意の子孫 p 要素 ○
p:first-child 最初の子 p 要素 △（一部）
p[class="note"] クラス属性が note の p 要素 ○

5. 利点

  • XPath よりも 直感的で読みやすい

  • 複雑なノード構造でも jQuery ライクにセレクション可能

  • 複数条件の絞り込みやネストに強い

6. 注意点

  • Fizzler はすべての CSS セレクタに完全対応しているわけではありません。

  • :nth-child() や :not() などの 高度な擬似クラス には部分的な対応しかありません。

  • パフォーマンス上の制約があるため、大規模HTMLの解析には適切なフィルタ設計が必要です。

7. まとめ

HtmlAgilityPack に CSS セレクタによる柔軟なノード探索機能を加えたい場合、Fizzler.Systems.HtmlAgilityPack のような拡張パッケージが有用です。XPath の知識が不要なため、HTML/CSS に慣れたフロントエンド開発者にも扱いやすく、スクレイピングや構造抽出の効率が大幅に向上します。

ChatGPT4o 生成日：2025/06/23