AngleSharpドキュメントの日本語訳. C#で利用できるhtmlパーサーのAngleSharpプロジェクトのドキュメントの翻訳です。
原文「Examples」
このページは、Florian Rapplによって編集されました。 2016年4月9日・18改訂
AngleSharpの例
AngleSharp examples
これは、AngleSharpの日常的な使い方のための例の(成長する)リストです。
明確に定義された文書を解析する
Parsing a well-defined document
もちろん、AngleSharpは、明確に定義された文書をうまく処理することができます。しかし、あいまいに思われる文書はどうでしょうか。しかしながら、実際には、明確に定義されています。まったくエラーを持たず、また、Googleによって製作で使用されている次の文書では、動作します。IE、ChromeやFirefoxのようなブラウザで、ドキュメント生成のシリアライズされた出力は、完了したシリアル化と比較することができます。
var source = @"
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content=""initial-scale=1, minimum-scale=1, width=device-width"">
<title>Error 404 (Not Found)!!1</title>
<style>
*{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/errors/logo_sm_2.png) no-repeat}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/errors/logo_sm_2_hr.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/errors/logo_sm_2_hr.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/errors/logo_sm_2_hr.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:55px;width:150px}
</style>
<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>404.</b> <ins>That’s an error.</ins>
<p>The requested URL <code>/error</code> was not found on this server. <ins>That’s all we know.</ins>";
// Create a new parser front-end (can be re-used)
// (再利用できる)新しいパーサ・フロントエンドを作成します。
var parser = new HtmlParser();
//Just get the DOM representation
// DOM表現を取得するだけです。
var document = parser.Parse(source);
//Serialize it back to the console
// コンソールへ戻って、それをシリアル化します
Console.WriteLine(document.DocumentElement.OuterHtml);
それで、私たちは、いくつかのソース・コードを定義します。HtmlParserインスタンスのParseメソッドを呼び出します。Parseメソッドは、DOMを構築するために、提供されたソース・コードを使用します。その後、私たちは、文字列へ戻って、DOMをシリアル化します。最後に、私たちは、コンソールで、この文字列を出力しました。
簡単な文書操作
Simple document manipulation
AngleSharpは、公式のHTML5指定によってDOMを構築します。また、結果として得られるモデルが完全にインタラクティブであるを、これは示します。そして、単純な操作のための使用されることができました。次の例は、いくつかのテキストで他の段落要素を挿入することによって、文書を作成して、ツリー構造を変更します。
static void FirstExample()
{
var parser = new HtmlParser();
var document = parser.Parse("<h1>Some example source</h1><p>This is a paragraph element");
//Do something with document like the following
// 次に示すのような文書で、何かを行います。
// Serializing the (original) document:
Console.WriteLine("(元の)文書をシリアル化します:");
Console.WriteLine(document.DocumentElement.OuterHtml);
var p = document.CreateElement("p");
// This is another paragraph.
p.TextContent = "これは、別の段落です。";
// Inserting another element in the body ...
Console.WriteLine("ボディに他の要素を挿入しています...");
document.Body.AppendChild(p);
// Serializing the document again:
Console.WriteLine("もう一度文書をシリアル化します。:");
Console.WriteLine(document.DocumentElement.OuterHtml);
}
ここでは、パーサは、続いて、いくつかの一致するnodeを見つけるために、問い合わせる、新しいIHtmlDocumentインスタンスを作成するでしょう。上の例のコードでは、また、私たちは、IHtmlParagraphElementである、他のIElementを作成します。この1つは、続いて、文書のBodyノードに、添付されます。
特定の要素を取得する
Getting certain elements
AngleSharpは、NodeListクラスのための、IEnumerable<node>のようなIEnumerable<T>のように、すべてのDOMリストを公開しています。これは、私たちが、QuerySelectorAllメソッドのような、いくつかの今までに与えられたDOM機能の組合せで、LINQを使用できます。
static void UsingLinq()
{
var parser = new HtmlParser();
var document = parser.Parse("<ul><li>First item<li>Second item<li class='blue'>Third item!<li class='blue red'>Last item!</ul>");
//Do something with LINQ
// LINQで、何かを行います。
var blueListItemsLinq = document.All.Where(m => m.LocalName == "li" && m.ClassList.Contains("blue"));
//Or directly with CSS selectors
// あるいは、直接、CSSセレクタで、
var blueListItemsCssSelector = document.QuerySelectorAll("li.blue");
// Comparing both ways ...
Console.WriteLine("両方の方法を比較する...");
Console.WriteLine();
Console.WriteLine("LINQ:");
foreach (var item in blueListItemsLinq)
Console.WriteLine(item.Text());
Console.WriteLine();
Console.WriteLine("CSS:");
foreach (var item in blueListItemsCssSelector)
Console.WriteLine(item.Text());
}
IDocumentのAllプロパティが、文書に含まれている、すべてのIElementノードを返すので、 私たちは、それを、LINQでとても効率的に使うことができます。一方で、また、QuerySelectorAllは、(Allとして同じ)HtmlCollectionオブジェクトを返します。このため、これは、LINQでもフィルタリングできます!さらに、このリストは、既にフィルタリングされています。
また、それは、セレクタを持つAllと同じように取得できます。-特別なアスタリスク*セレクタ:
//Same as document.All
var blueListItemsLinq = document.QuerySelectorAll("*").Where(m => m.LocalName == "li" && m.ClassList.Contains("blue"));
document.Allと同じです。
これは、全く同じですか?実は、違います。-すべてが、いわゆるライブDOMリストを返します。私たちが、オブジェクトをどこかに保存する場合、私たちは、常に、DOMが変更する最新のものに、アクセスします。
一つの要素を取得する
Getting single elements
さらに、私たちは、QuerySelectorメソッドを持っています。この1つは、結果を生成するために、FirstOrDefault()を使用する、LINQステートメントに極めて近いです。QuerySelectorメソッドを使用する、木の走査は、もう少し効率的かもしれません。
いくつかのサンプル・コードを見てみましょう:
static void SingleElements()
{
var parser = new HtmlParser();
var document = parser.Parse("<b><i>This is some <em> bold <u>and</u> italic </em> text!</i></b>");
var emphasize = document.QuerySelector("em");
Console.WriteLine("Difference between several ways of getting text:");
Console.WriteLine();
Console.WriteLine("Only from C# / AngleSharp:");
Console.WriteLine();
Console.WriteLine(emphasize.ToHtml()); //<em> bold <u>and</u> italic </em>
Console.WriteLine(emphasize.Text()); //boldanditalic
Console.WriteLine();
Console.WriteLine("From the DOM:");
Console.WriteLine();
Console.WriteLine(emphasize.InnerHtml); // bold <u>and</u> italic
Console.WriteLine(emphasize.OuterHtml); //<em> bold <u>and</u> italic </em>
Console.WriteLine(emphasize.TextContent);// bold and italic
}
出力コマンドは、ノードから文字列を返す、いくつかの方法の間の違いを説明しようとします。 実際には、DOMプロパティOuterHtmlは、HTMLコードを作成するToHtml()バージョンを使用します。他のバリアントは、すべて異なっています。Text()が、テキストを取り除くためのヘルパーである一方で、(そして、<script>タグのような不必要なテキストの内容を省略します)、その他の2つのバリアントは、公式のW3Cに指定されたプロパティのように動作します。実際には、すべてをそのまま残します。
ToHtml()のような拡張メソッドとText()は、名前空間AngleSharp.Extensionsで見つかります。
JavaScriptの評価を接続する
Connecting JavaScript evaluation
プロジェクトには、Jint(JavaScriptインタプリタ)に基づくサンプルJavaScriptエンジンも含まれています。
サンプルは、あらかじめ設定されたConfigurationクラスに配置されるカスタマイズされたバージョンを作成することによって、開始します。ここでは、私たちは、ちょうど他のエンジンが含まれています。AngleSharp.Scripting(名前空間とプロジェクト)に配置されます。また、スクリプトを有効にすることは重要です。AngleSharpは、スクリプト・エンジンを持っていることを知っています。そして、それらを使用することは、2つの異なるものです。
ここに完全なサンプル・コードがあります。
static void SimpleScriptingSample()
{
//We require a custom configuration
// 私たちには、カスタム設定が必要です
var config = Configuration.Default.WithJavaScript();
//Let's create a new parser using this configuration
// この設定を使用して、新しいパーサを作成しましょう
var parser = new HtmlParser(config);
//This is our sample source, we will set the title and write on the document
// これは、私たちのサンプル・ソースです。私たちは、タイトルを設定し、文書に記述します。
var source = @"<!doctype html>
<html>
<head><title>Sample</title></head>
<body>
<script>
// Simple manipulation...
document.title = '単純な操作...';
document.write('<span class=greeting>Hello World!</span>');
</script>
</body>";
var document = parser.Parse(source);
//Modified HTML will be output
// 変更されたHTMLが、出力されます
Console.WriteLine(document.DocumentElement.OuterHtml);
}
このコードは、指定されたHTMLコードだけを解析します。提供されたJavaScriptに遭遇し、それを実行します。JavaScriptが、与えられた時点で、文書のタイトルを変更し、解析するHTMLをいくつか追加し文書を操作します。結局は、私たちは、出力した(シリアル化された)HTMLが、元のものとは異なることを見るでしょう。
更に複雑なJavaScript DOMの対話処理
More complex JavaScript DOM interaction
AngleSharpで、JavaScriptを使用することは、問題ありません。現在の状態では、また、要素の作成などのDOM操作を簡単に使用することができます。それらを、添付、あるいは、削除します。
次の例のコードは、新しい要素を作成し、既存のものを削除するDOMクエリを実行します。
static void ExtendedScriptingSample()
{
//We require a custom configuration with JavaScript and CSS
// 私たちは、JavaScriptとCSSでカスタム設定を必要とします。
var config = Configuration.Default.WithJavaScript().WithCss();
//Let's create a new parser using this configuration
// この設定を使用して、新しいパーサを作成しましょう
var parser = new HtmlParser(config);
//This is our sample source, we will do some DOM manipulation
// これは、私たちのサンプル・ソースです。私たちは、いくつかのDOM操作を行います。
var source = @"<!doctype html>
<html>
<head><title>Sample</title></head>
<style>
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
span {
font-size: 12pt;
}
div {
background: #777;
color: #f3f3f3;
}
</style>
<body>
<div id=content></div>
<script>
(function() {
var doc = document;
var content = doc.querySelector('#content');
var span = doc.createElement('span');
span.id = 'myspan';
span.classList.add('bold', 'italic');
// Some sample text
span.textContent = 'いくつかのサンプル・テキスト';
content.appendChild(span);
var script = doc.querySelector('script');
script.parentNode.removeChild(script);
})();
</script>
</body>";
var document = parser.Parse(source);
//HTML will have changed completely (e.g., no more script element)
// HTMLは、完全に変更されます(例えば、スクリプト要素は必要ありません)
Console.WriteLine(document.DocumentElement.OuterHtml);
}
原則として、他のJavaScriptエンジンも追加できます。もちろん、手作業で、オブジェクトをラップすると、リフレクションに基づいた、自動のバージョンと比較して、優れた性能が得られます。とはいうものの(NuGetで利用可能な)AngleSharp.Scripting.JavaScriptライブラリは、可能性と既存のJavaScriptエンジンをAngleSharpに結びつける基本を示します。
JavaScriptとC#のイベント
Events in JavaScript and C#
次の例の最初は、前の2つの例と全く同じです。私たちは、JavaScriptEngineエンジンが含まれている、カスタム設定を作成します。スクリプトを有効にした後、(そして、この場合は、スタイル)、私たちは、文書を解析することができます。
この例のサンプル文書は、console.logメソッドを呼び出す、一つのスクリプトから構成されています。 リスナーを追加する前に一度、リスナーを追加してからもう一度。
ドキュメントが、完全に読み込まれると、リスナーが呼び出されます。これは、提供されたJavaScriptを実行した後に発生します。このため、私たちは、最後にこのイベントを見るべきです。また、私たちは、1回、カスタム・イベントhelloが、ディスパッチされると呼び出される、他のイベント・リスナーを登録しました。
public static void EventScriptingExample()
{
//We require a custom configuration
// 私たちには、カスタム設定が必要です
var config = Configuration.Default.WithJavaScript();
//Let's create a new parser using this configuration
// この設定を使用して、新しいパーサを作成しましょう
var parser = new HtmlParser(config);
//This is our sample source, we will trigger the load event
// これは、私たちが、ロード・イベントを起動する、私たちのサンプル・ソースです。
var source = @"<!doctype html>
<html>
<head><title>Event sample</title></head>
<body>
<script>
console.log('Before setting the handler!');
document.addEventListener('load', function() {
console.log('Document loaded!');
});
document.addEventListener('hello', function() {
console.log('hello world from JavaScript!');
});
console.log('After setting the handler!');
</script>
</body>";
var document = parser.Parse(source);
//HTML should be output in the end
// HTMLは、最後に出力する必要があります。
Console.WriteLine(document.DocumentElement.OuterHtml);
//Register Hello event listener from C# (we also have one in JS)
// C#から、Helloイベント・リスナーを登録します(私たちも、JSで1つ持っています)
document.AddEventListener("hello", (s, ev) =>
{
Console.WriteLine("hello world from C#!");
});
var e = document.CreateEvent("event");
e.Init("hello", false, false);
document.Dispatch(e);
}
また、私たちは、C#に、このカスタム・イベントのイベント・リスナーも登録します。ここでは、私たちは、インテリセンスと他の快適なツールを持っています。公式APIを介してイベントを開始した後、私たちは、両方からの出力を認識します。-JavaScriptとC#-登録されたイベント・リスナー。