Google無料ブログBloggerをホームページやWebアプリの中心ホストとして使用するための技術情報やTipsを調査・公開しています。
ASP.NET(C#)技術は、Bloggerへ埋め込むパーツアプリとして足りない機能を実現するために使います。
GoogleAppEngineや、Googleの数ある無料サービスも関心事!
ホスティング費や運用・メンテナンスは極力コストカットということで、最近流行りのクラウド的に行こう。

SiteImage

What's New

  • ページローディング高速化のため、以下の機能を「サイト運営者」ページへ移動しました。
    • Twitter AnyWhere Follow Me
    • メール購読リンク
  • Wikipedia駅前写真検索パーツを公開しました。
  • スライドショー機能も装備しました。

C#でHtmlパースして内容を取得する

.NETでHTMLをパースしようとすると.NetFrameworkに機能がないという事で、手作りするしかないかなぁと考えておりましたが、便利なツールがDLLとして提供されておりました。

.NET向けHTMLパーサー「Html Agility Pack(HAP)」が、Open Sorce Community「CodePlex」からダウンロード可能になっています。

MS-PLライセンスという形式で使用が許可されています。
参考サイト:.NET向けHTMLパーサー「Html Agility Pack」で簡単スクレイピング
※ ↑ 広告Flashは右上の「スキップ」で飛ばすことができますよ。

このHTMLパース機能を使用して作成したのが「Wikipedia Station Search」というWebアプリです。

使用方法
まずは、ダウンロードした「HtmlAgilityPack.dll」をVisualStudioで参照追加しましょう。
次に、使用したいソースで「using HtmlAgilityPack;」を入力します。
具体的なコードは、下記のようになります。
WebClient wc = new WebClient();
wc.Encoding = enc;
wc.Headers.Add("user-agent", "Wikipedia Station Search");
String html = wc.DownloadString(url);
HtmlDocument doc = new HtmlDocument();// HAP Objectを生成
doc.LoadHtml(html);// HTMLパース
String xPath = @"//table[@class='infobox bordered']//child::img[position()=1]";
HtmlNode node = doc.DocumentNode.SelectSingleNode(xPath);
if (node != null)
{
   String imageUrl = node.Attributes["src"].Value;
   Console.Writeline( imageUrl );
}
こうして作られたASP.NETのサンプルがこちらになります。
「Wikipedia Station Search」の貼り付け方
HTMLに以下のソースを貼り付けるだけで使用できます。
※ 駅の指定方法など、GETパラメータ設定となっています。(リンク先に使い方があります)
<iframe frameborder="0" marginheight="0" marginwidth="0" src="http://prg.hyperhands.com/wikistation/getPhoto.aspx?Station=鶯谷" style="height: 300px; width: 100%;">読み込み中...</iframe>
※ ハイパーハンズのサーバにホストしてあります。
  当Webアプリは、予告なく修正・終了することがありますので貼り付けで使用の際にはご了承下さい。
  使用料金は頂きませんが、サポートや不具合など一切の保障は出来かねます。
検索機能OFFや、写真の固定も可能です。
入谷駅などは「東京と神奈川」にありますが、入谷で検索後ラジオボタンで選択できるようになっています。