AngleSharpドキュメントのExamplesの日本語訳

新規作成日 2018-07-06

最終更新日 2018-07-06

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を実行した後に発生します。このため、私たちは、最後にこのイベントを見るべきです。また、私たちは、１回、カスタム・イベント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#－登録されたイベント・リスナー。

ページトップへ AngleSharp Back Next