読者です 読者をやめる 読者になる 読者になる

ASP.NET Webフォームプロジェクトでwebフォームの内容をhtmlファイルにしてダウンロードさせる

ASP.NET C#

井上です。
いまだASP.NET Webフォームを用いているシステムも多々あると思います。
弊社もWebフォームのシステムがあり、そこで普段やらないことをやりましたのでそれをまとめておきます。
こんな処理を書くことはそうそう無いのですが何かの役に立つかもしれません。

環境

.NET Framework 4.5.1
ASP.NET Web Form
C#

目的

他システム(Linux/Apache)にアップロードするためのhtmlファイルをWebフォームを元に作成する。

方法

  1. HTML作成テンプレートとなるWebフォームを作成
  2. HTML作成用テンプレートを呼び出すWebフォームを作成
  3. 2で1に渡すパラメータの取得、session経由での引き渡しを行い、1を実行する
  4. 結果を加工しダウンロードさせる

Web Formを使うことによりListView等にバインドできたり、編集が比較的楽というメリットがあります。コードも見やすいです。
当然ですが、Web Formの結果であるため不要なタグを端折る必要があります。

コード

テンプレート

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- headタグは出力対象 -->
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
    <title>hogehoge</title>
</head>
<body>
    <form id="form1" runat="server">
        <!-- body start -->
        <div class="templatestart"/>

        <!-- ここにいつも通りコードを書く。ー -->

        <div class="templateend"/>
        <!-- body end -->
    </form>
</body>
</html>

テンプレートのコードビハインド

using System;

public partial class hogehoge
{
    protected void Page_Load(object sender, EventArgs e)
    {        
        // セッションからパラメータ取得しバインド
        var data = (HogeHoge)Session["hogehoge"];

        this.DataBind();

        Session.Remove("HogeHoge");   
    }
}

HTML作成するWebフォームのコードビハインド

using System;
using System.Text;
using System.Web;

protected void CreateHtml_Click(object sender, EventArgs e)
{
    string url = "/template/hogehoge.aspx";

    // セッションに引き渡しパラメータを入れる
    Session.Add("hogehoge", new HogeHoge());

    // 実行・出力
    using (System.IO.StringWriter writer = new System.IO.StringWriter())
    {
        StringBuilder outputhtml = new StringBuilder();

        // テンプレートファイルを実行する
        HttpContext.Current.Server.Execute(url, writer, false);
        string html = writer.ToString().Replace(System.Environment.NewLine, "");

        // headタグ取得
        Regex regex = new Regex("<head>.*</head>");
        Match match = regex.Match(html);
        string headerhtml = match.Value;

        // 出力タグ取得
        regex = new Regex("<div class=\\\"templatestart\\\"/>(?<body>.*?)<div class=\\\"templateend\\\"/>");
        match = regex.Match(html);
        string bodyhtml = match.Groups["body"].Value;

        // html組み立て
        outputhtml.Append("<html>");
        outputhtml.Append(headerhtml);
        outputhtml.Append("<body>");
        outputhtml.Append(bodyhtml);
        outputhtml.Append("</body></html>");

        // ダウンロード
        Response.ClearContent();
        Response.ContentType = "text/html";
        Response.AddHeader("Content-Disposition", "attachment;filename=" + url.Substring(url.LastIndexOf('/') + 1).Replace(".aspx", ".html"));
        Response.Write(outputhtml.ToString());
        Response.End();
        Response.Flush();
    }
}

HttpContext.Current.Server.Executeで実行結果を受け取れますので、不要なタグを端折った後、ダウンロードさせています。

ASP.NET Webフォームプロジェクトでオートコンプリートのドロップダウンを実現する

ASP.NET C#

井上です。
ASP.NET Webフォームのドロップダウンコントロールでオートコンプリートをやろうというお話です。 ちょっとと面倒だったのでまとめておきます。

環境

.NET Framework 4.5.1
ASP.NET Web Form
C#

参考

jqueryui.com

やりたいこと

オートコンプリート化したいDropDownListコントロールを含むページで、お手軽にオートコンプリート化させる

コード

オートコンプリート関数の作成(jquery.autocomplete.js)

;(function ($) {
    $.fn.autocompleteExtend = function () {
        return this.each(function() {
            $.widget("custom.combobox", {
                _create: function () {
                    this.wrapper = $("<span>")
                      .addClass("custom-combobox")
                      .insertAfter(this.element);

                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },

                _createAutocomplete: function () {
                    var selected = this.element.children(":selected"),
                      value = selected.val() ? selected.text() : "";

                    this.input = $("<input>")
                      .appendTo(this.wrapper)
                      .val(value)
                      .attr("title", "")
                      .attr("onKeydown", "return InvalidInput(event)") // enterキーの挙動を打ち消す
                      .attr("style", "float:left;") // ブラウザ差異対応
                      .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left autocomplete")
                      .autocomplete({
                          delay: 0,
                          minLength: 0,
                          source: $.proxy(this, "_source")
                      })
                      .tooltip({
                          tooltipClass: "ui-state-highlight"
                      });

                    this._on(this.input, {
                        autocompleteselect: function (event, ui) {
                            ui.item.option.selected = true;
                            this._trigger("select", event, {
                                item: ui.item.option
                            });
                        },

                        autocompletechange: "_removeIfInvalid"
                    });
                },

                _createShowAllButton: function () {
                    var input = this.input,
                      wasOpen = false;

                    $("<a>")
                      .attr("tabIndex", -1)
                      .attr("title", "")
                      .tooltip()
                      .appendTo(this.wrapper)
                      .button({
                          icons: {
                              primary: "ui-icon-triangle-1-s"
                          },
                          text: false
                      })
                      .removeClass("ui-corner-all")
                      .addClass("custom-combobox-toggle ui-corner-right autocomplete")
                      .mousedown(function () {
                          wasOpen = input.autocomplete("widget").is(":visible");
                      })
                      .click(function () {
                          input.focus();

                          // Close if already visible
                          if (wasOpen) {
                              return;
                          }

                          // Pass empty string as value to search for, displaying all results
                          input.autocomplete("search", "");
                      });
                },

                _source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(this.element.children("option").map(function () {
                        var text = $(this).text();
                        if (this.value && (!request.term || matcher.test(text)))
                            return {
                                label: text,
                                value: text,
                                option: this
                            };
                    }));
                },

                _removeIfInvalid: function (event, ui) {

                    // Selected an item, nothing to do
                    if (ui.item) {
                        // 選択値でポストバックさせる
                        setTimeout('__doPostBack(\' + $(this).attr("name") + \' ,\'\')', 0);
                        return;
                    }

                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
                      valueLowerCase = value.toLowerCase(),
                      valid = false;
                    this.element.children("option").each(function () {
                        if ($(this).text().toLowerCase() === valueLowerCase) {
                            this.selected = valid = true;
                            return false;
                        }
                    });

                    // Found a match, nothing to do
                    if (valid) {

                        return;
                    }

                    // Remove invalid value
                    this.input
                      .val("")
                      .attr("title", "")
                      .tooltip("open");
                    this.element.val("");
                    this._delay(function () {
                        this.input.tooltip("close").attr("title", "");
                    }, 2500);
                    this.input.autocomplete("instance").term = "";
                },

                _destroy: function () {
                    this.wrapper.remove();
                    this.element.show();
                }
            });

            // 挙動設定
            $('#' + $(this).attr("id") ).combobox();

            // ドロップダウンのスクロール指定
            $('.ui-autocomplete').css('overflow-y', 'auto');
            $('.ui-autocomplete').css('overflow-x', 'hidden');
            $('.ui-autocomplete').css('height', '200px');
        });
    }
})(jQuery);

$(function () {
    $(".autocomplete").autocompleteExtend();
});

参考先のコードを元に作成。
入力値/選択値がリスト内の要素と完全一致するときのみポストバックさせます。
また動的に生成されるドロップダウンのスクロール指定等を行っています。
最後の処理はautocompleteクラスを持つ要素に対してautocompleteExtendを呼び出すためのものです。

呼び出し元コード(sample.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sample.aspx.cs" Inherits="WebApplication1.sample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.12.4.min.js"></script>
    <script src="Scripts/jquery-ui-1.12.0.min.js"></script>
    <script src="Scripts/jquery.autocomplete.js"></script>
    <link rel="stylesheet" href="Content/themes/base/jquery-ui.min.css" />
    <style>
    .custom-combobox {
     position: relative;
     display: inline-block;
    }
    .custom-combobox-toggle {
     position: absolute;
     top: 0;
     bottom: 0;
        margin-left: -1px;
     padding: 0;
    }
    .custom-combobox-input {
     margin: 0;
     padding: 5px 10px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="HogeHogeList" runat="server" OnSelectedIndexChanged="HogeHogeList_SelectedIndexChanged" AutoPostBack="true" CssClass="autocomplete"></asp:DropDownList>   
    </div>
    </form>
</body>
</html>

DropDownListコントロールautocompleteクラスを指定しているのみです。

呼び出し元コード(sample.aspx.cs)

using System;
using System.Collections.Generic;

namespace WebApplication1
{
    public partial class sample : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                var list = new Dictionary<string, string> { 
                { "", "0" }, 
                { "Aゴルフ場", "1" }, 
                { "Bカントリー倶楽部", "2" },
                { "Cゴルフコース", "3" },
                { "Dカントリークラブ", "4" },
                { "Eゴルフリゾート", "5" } 
            };
                this.HogeHogeList.DataSource = list;
                this.HogeHogeList.DataTextField = "Key";
                this.HogeHogeList.DataValueField = "Value";
                this.HogeHogeList.DataBind();
            }
        }

        protected void HogeHogeList_SelectedIndexChanged(object sender, EventArgs e)
        {
            // 選択時の処理
        }
    }
}

実行すると

f:id:ihisa:20160721154007p:plain

入力すると一致する候補がきっちり表示されます。

f:id:ihisa:20160721153935p:plain

リストから選択すればSelectedIndexChangedイベントが発生します。

grepコマンドとPowerShellのsls (Select-String)の比較

PowerShell

こんにちは、PowerShellが好きなwakです。以前書いたこちらの記事をリライトします。

tech.sanwasystem.com

はじめに

Windowsにはgrepコマンドがないとはよく言われることですが、Windowsに標準で備わっているPowerShellにはgrepよりも高性能な検索コマンドレット、Select-Stringが実装されています。この記事はgrepSelect-Stringとを比較し、慣れない人でもすぐに使えるようにすることを目的としています。また、「そもそもこのSelect-Stringコマンドをどうやって実行するの?」といったPowerShellの(超)基本的な使い方は本稿の末尾に記載してあります。

grepとの比較表

grep Select-String
大文字・小文字の区別 -i -CaseSensitive *1
正規表現 -E -SimpleMatch *2
マッチしない行を検索 -v -NotMatch
前後表示 -A 《行数》
-B 《行数》
-Context 《行数》
文字コード指定 不可*3 -Encoding 《文字エンコーディング名》
ディレクトリを
再帰的に検索
-r (dir -recurse 《ファイル名パターン》)
ファイル名のみ出力 -l
-L
(後述)

以下、順に解説していきます。

1件のファイルから検索をする場合

grepで1件のファイルから指定したフレーズを検索する場合はこのように実行しますが、

grep pattern filename.txt

PowerShellでこちらに相当する処理はこうなります。

Select-String "pattern" filename.txt

Select-Stringにはslsという省略形が用意されています。エイリアスですのでどちらを使ってもまったく同じ結果が得られます。

sls "pattern" filename.txt

本稿では以降もSelect-Stringと表記しますが、もちろん実際に使うときにはslsで構いません。

-i : 大文字・小文字を区別したい/区別したくない

デフォルトでは大文字・小文字は区別されません。区別したい場合は-CaseSensitiveオプションを追加します。

# "Neko"にはマッチするが"neko"にはマッチしない
Select-String "Neko" filename.txt -CaseSensitive

-e : 正規表現を使いたい/使いたくない

パターンはデフォルトで正規表現とみなされます。正規表現として扱ってほしくない場合は-SimpleMatchオプションを追加します。

# "SELECT * FROM"にマッチ。-CaseSensitiveも指定しているので小文字ならマッチしない
Select-String "SELECT * FROM" filename.txt -SimpleMatch -CaseSensitive

-v : パターンにマッチしない行を探したい

-NotMatchオプションを使います。

# 「A」「a」「B」「b」「C」「c」のいずれも含まない行にマッチ
Select-String "[A-C]" filename.txt -NotMatch

-A / -B : パターンにマッチした前後の行も出力したい

-Contextオプションで行数を指定します。残念ながら前後別々に行数を指定することはできません。

# "function", "Function"などがある行と、その上下3行ずつ(計7行)を検索
Select-String "function" HogeClass.cs -Context 3

文字エンコーディングを指定したい

検索対象のファイルがShift-JISだと文字エンコーディングの自動判定ができないので、明示的に指定してあげなければいけません。これは-Encodingオプションを使います。

Select-String "猫" filename.txt -Encoding oem

-Encodinggの後ろにスペース1個)と入力した後でTABキーを押せば指定可能な文字エンコーディングが順に表示されます。oemがShift-JISだと覚えておけば事足りるでしょう(UTF-8がデフォルトです)。

複数のファイルから検索する場合

ここまでは1件のファイルから検索を行うものでした。次は複数件のファイルを対象として検索を行う方法です。

ワイルドカードを使いたい

まず普通にワイルドカードが使えます。

Select-String "pattern" *.txt

特定の複数のファイルを指定して検索したい

ワイルドカードではなく、ファイル名を書き並べたいならこうなります。カッコとダブルクオートが少々見づらいのですが我慢してください。

Select-String "pattern" ("z:\log\filename1.txt", "c:\data\text\filename2.txt")

ディレクトリを再帰的にたどって検索したい

次のどちらでも好きなものを選んでください。c:\data以下にある*.cs全てを検索対象としています。

Select-String "pattern" (dir -recurse c:\data\*.cs)
dir -recurse c:\data\*.cs | Select-String "pattern"

Dir -recurse c:\data\*.csは、c:\data以下から*.csを全部探すという意味になります(1回このコマンドだけを実行してみるといいです)。ディレクトリ名を省略したらカレントディレクトリになります。

特定の拡張子のファイルは除外したい

-Excludeで除外できます。

# カレントディレクトリ以下の全てのファイルから検索、ただし*.exeと*.binは除く
Select-String "pattern" (dir -recurse *.* -Exclude *.exe, *.bin)
dir -recurse *.* -Exclude *.exe, *.bin | Select-String "pattern"

検索対象のファイルを別のテキストファイルから与えたい

1行に1件ファイル名(フルパス)が書いてあるテキストファイルfilelist.txtがあったとして、そこから検索をする場合です。

Get-Content filelist.txt -Encoding UTF8 | % { Select-String "pattern" $_ }

なお、カレントディレクトリ以下の全てのファイル名(フルパス)をファイルに書き出すにはこのように実行します。ワイルドカードの部分は必要に応じて*.txtなどと書き換えてください。

dir -Recurse -File *.* | % { $_.FullName } | Out-File filelist.txt -Encoding UTF8

出力の書式や出力先を変える

標準の出力の書式では、ファイル名・行数・行の内容(行全体)が出力されます。なぜかというと、この結果1行1行はそれぞれMicrosoft.PowerShell.Commands.MatchInfoクラスのインスタンスであり、このToString()メソッドがそのような書式の文字列を返すようになっているからです。

MatchInfo Class (Microsoft.PowerShell.Commands)

このオブジェクトはFileName, Lineといったプロパティを持っていますから、欲しいものを好きなように並べて結果を出力することができます。

結果だけを画面に出力したい

ファイル名はいらない場合です。

# 末尾に「| Select Line」と書き加える
Select-String "pattern" filename | Select Line
Select-String "pattern" (dir -recurse *.* -Exclude *.exe, *.bin) | Select Line

以下では例は1行ずつしか示しませんが、どのような検索を行ったかにかかわらず、検索を行ったコマンドの末尾に「| ~」と書き加える形でOKです。

結果だけを画面に出力したい

ファイル名はいらない場合です。

Select-String "pattern" filename | Select Line

少し書式は面倒ですが、こちらの方を使うと色々と融通がききます。

Select-String "pattern" filename | % { $_.Line }

マッチした部分だけを出力したい

Select-String "pattern" filename | % { $_.Matches.Value }

このMatchesは.NETのSystem.Text.RegularExpressions.Matchクラスのインスタンスです。パターンに()を使っていればGroupsプロパティでさらに部分文字列を取り出せたりします。*4

Select-String "^(\d{4})-(\d{2})-(\d{2})" (dir -Recurse *.*) | % { $g = $_.Matches.Groups; $g.Groups[1].Value }

ファイル名(フルパス)、行数、行の内容をタブ区切りで出力したい

Select-String "pattern" filename | % { [string]::Format("{0}`t{1}`t{2}", $_.Path, $_.LineNumber, $_.Line) }

.NETを使っている人にはお馴染みのSystem.String.Format()を使ってみました。`tは他言語の\tと同じタブ文字を意味します。PowerShellらしく書くなら次のどちらかになりそうです。

# 末尾に「|」以降を書き加える
Select-String "pattern" filename | % { "{0}`t{1}`t{2}" -f $_.Path, $_.LineNumber, $_.Line }
Select-String "pattern" filename | % { ( $_.Path, $_.LineNumber, $_.Line) -join "`t" }

色々と試行錯誤したい

検索結果をまず先に変数に格納しておけば毎回検索する手間が省けるので話が早くなります。

$searchresult = Select-String "pattern" filename

これでまず検索結果が変数に入ります(画面には何も出ません)。

$searchresult

とだけ入力して実行すれば検索結果が出力されますし、

$searchresult | Select Line
$searchresult | % { "{0}`t{1}`t{2}" -f $_.Path, $_.LineNumber, $_.Line }

のように色々と試すこともできます。

結果をファイルに書き出す

検索結果は画面に出力するだけではなくファイルに書き出すこともできます。これについてはgrepと同じようにリダイレクトで吐き出すのが一番簡単でしょう。

Select-String "pattern" filename | % { ... } > result.txt
$searchresult | Select Line > result.txt

文字エンコーディングUTF-16になります。これが気に食わない人は、末尾に> ファイル名と書き加えるのではなく、さらにパイプをつなげてOut-Fileコマンドレットに渡します。

Select-String "pattern" filename | % { ... } | Out-File result.txt -Encoding UTF8
$searchresult | Select Line | Out-File result.txt -Encoding UTF8

ここで出力されるファイルはBOMありUTF-8という微妙なフォーマットになるのですが、これは諦めてください(少しコードを書けば解決するのですが)。

PowerShellの基本

起動

まず、何はなくともPowerShellを立ち上げましょう。

なんでもいいです。

補完

dir, Select-Stringといったコマンドレットによって入力可能なオプションはあらかじめ決まっています。-まで入力してTABキーを連打すると、指定可能なオプションが列挙されます。たとえば-CaseSensitiveであれば、-cまで入力してTABキーを押せば一発で補完される、といった具合です。

また、ファイル名・ディレクトリ名も同じように補完が効きます。

大文字・小文字

コマンドレット・オプションの大文字・小文字は区別されません。Select-StringSELECT-STRINGselect-stringと書いても問題ありません。

\のエスケープっていらないの?

PowerShellでは\文字は特別な意味を持ちません。AB.と同じ普通の文字です。したがって\のエスケープは必要ありません。特に正規表現を書くときにはこれが楽です。

そのかわり、たとえば改行文字はn`、タブ文字は\t`と書くことになっています。バッククオートそのものを検索したいときはバッククオートを2つ連ねて書いてください。

*1:デフォルトで区別なし

*2:デフォルトで正規表現

*3:grep単体では不可能。nkfとか使う

*4:"?"の書式でのグループ名には対応していないようでした

SGMLReader + XPathでスクレイピングする

C#

こんにちは、今日もWebを見ながら生きているwakです。表題通りのことをやりました。

f:id:nurenezumi:20160620161016j:plain

はじめに

目的

任意のHTMLをSystem.Xml.Linq.XDocumentに格納してXPathで目的の要素を探してスクレイピングすることです。

HTMLはXMLじゃない

HTMLはXMLではありません。したがって、

<link href="mystyle.css" rel="stylesheet" type="text/css">

のように「終了タグがない」ことが定められていたり、条件付きで省略が認められていたりします。こういった文書はXMLとしては不正なので、System.Xml.Linq.XDocumentにパースさせてもエラーになってしまいます。

SgmlReader

そこで登場するのがSgmlReaderで、これは

SgmlReader is a versatile C# .NET library written by Chris Lovett for parsing HTML/SGML files using the XmlReader API.

とあるように、XMLとしては不正なHTMLを食べてXMLにしてくれるライブラリです。

github.com

同じような目的のライブラリとしてHtml Agility Packがあり、こちらの方がずっとメジャーなようなのですが、読み込んだドキュメントが独自のクラスになることに抵抗があって今回は利用しませんでした。

SgmlReaderの使い方

導入

NuGetで提供されているので、NuGetパッケージマネージャーコンソールから

Install-Package SgmlReader

と入力すれば導入できます。開発はGitHubで進められており、こちらの方が微妙に新しい*1ので、こちらを使っても良いと思います。まず上記のリポジトリを丸ごと落としてきてビルドし、出てきたSgmlReaderDll.dllを参照に追加して終わりです(あるいはSgmlReader以下の*.csを2件直接プロジェクトに突っ込むだけでも構いません)。またSgmlReaderはApache License 2.0でライセンスされていますので、もしアプリケーションを再配布する際はその旨明記しておきます。

読み込み

文字列→XDocument

次のようなコードを書くだけでOKです。

public static XDocument Parse(string content)
{
    using (var reader = new StringReader(content))
    using (var sgmlReader = new SgmlReader { DocType = "HTML", CaseFolding = CaseFolding.ToLower, IgnoreDtd = true, InputStream = reader })
    {
        return XDocument.Load(sgmlReader);
    }
}

ファイルでもWeb上のコンテンツでもStreamのことが多いと思いますし、それならば本当はTextReaderから直接流し込めるのですが、前もってHTMLの手直しをする必要に迫られたときのために一度stringにしています。

XPathEvaluate()で型を指定する

後でSystem.Xml.XPath.Extensions.XPathEvaluate()を多用しますが、このメソッドはXPathならなんでも渡せるので(つまり戻り値はXElement, XText(), XAttributeのどれでもあり得るので)戻り値はobjectになります。戻り値の型があらかじめ分かっているときにはこんな拡張メソッドを追加しておくと簡単になります。

public static IEnumerable<T> XPathEvaluate<T>(this XElement element, string xpath)
{
    return ((IEnumerable<object>)element.XPathEvaluate(xpath)).Cast<T>();
}
public static IEnumerable<T> XPathEvaluate<T>(this XElement element, string xpath, IXmlNamespaceResolver resolver)
{
    return ((IEnumerable<object>)element.XPathEvaluate(xpath, resolver)).Cast<T>();
}
public static IEnumerable<T> XPathEvaluate<T>(this XDocument document, string xpath)
{
    return ((IEnumerable<object>)document.XPathEvaluate(xpath)).Cast<T>();
}
public static IEnumerable<T> XPathEvaluate<T>(this XDocument document, string xpath, IXmlNamespaceResolver resolver)
{
    return ((IEnumerable<object>)document.XPathEvaluate(xpath, resolver)).Cast<T>();
}

ドキュメント全体から要素を検索する

System.Xml.XPath.Extensions.XPathSelectElement()またはXPathSelectElements()を使います。たとえばページ内の全てのa要素(そのうちhref属性があるもの)を取得したければこのようになります。

XDocument document = Parser.Parse(content);
IEnumerable<XElement> links = document.XPathSelectElements("//a[@href]");

マッチする要素のうち先頭1件だけで良ければXPathSelectElement()(単数形)を使います。0件ならnullが戻ります。

XElement firstLink = document.XPathSelectElement("//a[@href]");

ドキュメント全体から何かを検索する

要素(XElement)以外を検索するときはXPathEvaluate()を使います。このメソッドの戻り値の型はobjectで使い勝手が悪いので、さっきの拡張メソッドを使うと綺麗に書けます。たとえばページ内の全てのa要素のhref属性(つまりXAttributeです)の値を取り出したければこうなります。

IEnumerable<string> linkUris = document.XPathEvaluate<XAttribute>("//a[@href]/@href").Select(x => x.Value);

「ページ全体からh3タグの中身(テキスト、すなわちXText)をリストアップする。ただし最初の1個は不要」ならどうでしょうか。

IEnumerable<string> midashi1 = document.XPathEvaluate<XText>("/descendant::h3[position()>1]/text()").Select(x => x.Value);
IEnumerable<string> midashi2 = document.XPathEvaluate<XText>("//h3/text()").Skip(1).Select(x => x.Value);

どちらでも同じ結果が得られますが、XPath初心者の私にとってはLINQを使った後者の方が見やすく感じられます。なお//h3[position()>1]/text()ではダメです(各々の親要素の中で最初の1個が除外されてしまいます)。

特定の要素の下から何かを検索する

これも同じくXElementに対してXPathEvaluate()を呼びます。たとえば次のようなHTMLがあったとして、

<div id="top">
  <span class="a">A1</span>
  <span class="b">B1</span>
  <span class="b">B2</span>
</div>
<div id="middle">
  <span class="a">A2</span>
  <span class="b">B3</span>
</div>

まず1個目のdiv要素は

XElement top = document.XPathSelectElement("//div[@id='top']");

で取れます。この下からspan.bを検索したければ、

// 直下から検索
IEnumerable<XElement> spanB1 = top.XPathEvaluate<XElement>("span[@class='b']");
// 子要素または孫要素から検索
IEnumerable<XElement> spanB2 = top.XPathEvaluate<XElement>(".//span[@class='b']");

となるわけです。「#topの子要素または孫要素のspan.b」のつもりで//span[@class='b']と書いてしまうとドキュメント全体からの検索になるので気をつけましょう。

Chromeのコンソールと注意点

Chrome$x()でお手軽XPath

XPathは複雑になってくると暗号みたいになるのでなるべくお手軽にテストができた方が便利です。Chromeでは特にアドオンなどを必要とせず、開いているドキュメントに対してコンソールから$x("任意のXPath")でXPathのテストができる機能があります。

Command Line API Reference - Google Chrome

$x("任意のXPath")だけでなく、$$("任意のCSSセレクタ")というショートカットもあります。活用しましょう。

Chromeが勝手に要素を補う場合

この機能はXPathで要素を検索してスクレイピングに役立てる際に非常に便利なのですが、HTMLの内容によってはハマることがあります。たとえば次のようなHTMLがあったとします。

<!-- tbodyがない -->
<table id="neko">
  <tr><th>たま</th><td>3歳</td><td>黒と白</td></tr>
  <tr><th>ぶち</th><td>2歳</td><td>茶色と白</td></tr>
  <tr><th>しろ</th><td>8歳</td><td></td></tr>
</table>

これをChromeに読み込ませると、Chromeは「tableの直下にはtheadtbodyしか来ない」ことを知っているため、自動的にtbodyを補ってDOMを構築します。

f:id:nurenezumi:20160617110248p:plain

一方、SgmlReaderはそこまで細かい処理は行いません。したがって、要素はtable > tr > thのように並ぶことになり、tbodyがあることを前提にXPathを書くと失敗します。

SgmlReaderが補完に失敗する場合

別にこれはSgmlReaderが悪いわけではないのですが、HTMLに間違いがあるとさらに面倒なことになります。たとえばこんなHTMLを考えます。

<form action="post">
  <!-- inputタグ閉じ忘れ -->
  <input type="text" placeholder="猫の名前">
  <input type="text" placeholder="年齢">
  <input type="text" placeholder="色">
  <span>間違えないように入力してね!</span>
  <input type="submit" value="送信">
</form>

一昔前の古いサイトではありがちな間違いで、ブラウザはこの程度なら(とはいえ膨大なルールが集積された結果のはずですが)意図通り終了タグを補って解釈してくれます。

f:id:nurenezumi:20160617115351p:plain

しかしSgmlReaderはこれをこのように解釈してしまい、

<form action="post">
  <input type="text" placeholder="猫の名前">
    <input type="text" placeholder="年齢">
      <input type="text" placeholder="色">
        <span>間違えないように入力してね!</span>
        <input type="submit" value="送信"></input>
      </input>
    </input>
  </input>
</form>

//form/input[@type='text']というXPathを評価すると、最初の「猫の名前」1件がヒットし、他のinput要素は一見取得できていないように見えてしまいます(実際には順次入れ子になって取得できています)。これに気付かないと散々悩むことになります。

これを防ぐには、前もってHTMLを修正しておくか、XPathを工夫してロバストなクエリを書くように心がけるかしかありません。スクレイピングに付きものの悩みではあります。

おわりに

一頃流行した「セマンティック・ウェブ」という言葉はあまり聞かなくなってしまいましたが、Webページになるべく正しいHTMLで正しい情報を記載しておくことはその第一歩であり、より良いインターネットに繋がる道だと考えています。その間をXPathLINQで上手に乗り越えてゆきましょう。

*1:1.8.11と1.8.12(2016/6/27時点)

API Gateway + LambdaでSlackのCustom Commandを作る

AWS Lambda Slack

こんにちは、AWS担当のwakです。先日このような記事を書いたので、表題通りAPI Gateway + Lambdaで実装するサンプルを作ります。

tech.sanwasystem.com

f:id:nurenezumi:20160613190357j:plain

鋭い眼光でエラーを見逃さない猫(多分)

はじめに

暇なWebサーバーは無駄

SlackのCustom Commandsは、言ってみればユーザーの操作に応じてWebサーバーにリクエストを送り、ごく短時間で終わる処理をしてもらってその結果を受け取るものです。少なければ1日数回、どんなに多くても1日に数百回のこのコマンドのためだけにWebサーバーを用意して24時間待ち受けを行うなんて無駄なことはしたくありません。API Gateway + Lambdaならこのような目的にぴったりで、EC2のt1.microインスタンスなどよりもずっと安価です。

何か作ろう

弊社ではCloudWatchで何かアラートが出たとき・復帰したときにそれぞれSlackへ通知する仕組みが既に稼働中です。ただ、境界値付近で値が行ったり来たりすると通知が何度も飛んできて、「今出ている警告は何か」を見失うことがありました。そこで、今回は【現在ALARM状態になっているメトリクスを取得して一覧表示する】コマンドをAPI Gateway + Lambdaで作ることにします。

Custom Command作成

上述の記事のように、まずはCustom Commandを新規に作成し、トークンを取得します。URLは未定なので未設定のまま置いておきます。

IAMロール作成

まずLambdaを実行するためのロールを作ります(既にあるなら不要です)。今回はCloudWatchに対する権限(読み取り専用で十分)が必要です。Slackから渡されるトークンはコードに埋め込むことにしましたが、もしDynamoDBで管理するのであればDynamoDBの読み取り権限も必要になります。

f:id:nurenezumi:20160606102609p:plain
f:id:nurenezumi:20160606102645p:plain

Lambda作成

単にCloudWatchのメトリクスを取得して返すだけの簡単なコードになりました。response_typein_channelを入れておくと、コマンドの実行結果を他のユーザーも見ることができるようになります。8行目にあるxxxxxxxxxxxxxxxxxxxxxxxxはSlackから与えられたトークンで置き換えます。

"use strict";

var AWS = require("aws-sdk");
var cloudwatch = new AWS.CloudWatch();

exports.handler = function(event, context) {
    
    if (event.token !== "xxxxxxxxxxxxxxxxxxxxxxxx") {
        context.fail("トークンが変です");
        return;
    }

    cloudwatch.describeAlarms({StateValue: "ALARM"}, function(err, data) {
        if (err) {
            console.log(err, err.stack);
            context.succeed(err);
        } else {
            if (data.MetricAlarms.length === 0) {
                context.succeed({response_type: "in_channel", text: `状態がALARMの監視項目はありません。`});
                return;
            }
            
            context.succeed({
                response_type: "in_channel",
                text: `状態がALARMの監視項目が${data.MetricAlarms.length}件あります。`,
                attachments : data.MetricAlarms.map(x => {
                    return {
                        color : "#FF8888",
                        text : [
                            `名前: ${x.AlarmName}`,
                            `内容: ${x.AlarmDescription}`,
                            `状態: ${x.StateReason}`,
                            `ALARMになった時刻: ${x.StateUpdatedTimestamp}`
                        ].join("\n")
                    };
                })
            });
            return;
        }
    });
}

念のためパラメーターのtokenだけセットしてテスト実行してみましょう。どちらかの結果が戻ってくれば成功です。

f:id:nurenezumi:20160613184539p:plain

API Gatewayの準備

API作成

まずAPI Gatewayのトップ画面で「Create API」ボタンを押し、New APIを選んで新規APIを作ります。名前は変えられないので慎重に行きましょう。

f:id:nurenezumi:20160531155032p:plain
Resources作成

要するにURL設計です。Create Resourceで好きなだけ階層を掘り、掘ったところでCreate Methodを選んでGETやPOSTを作ります。それぞれのメソッドごとに別々の処理が作れます。

今回はGETでSlackに呼び出してもらうことにします。これだけ作ったら、

f:id:nurenezumi:20160613193305p:plain

Integration Typeとして"Lambda Function"を選び、先ほど作成したLambda functionを選択します。

Method Execution設定

ここからはAPI GatewayとLambdaをどのように繋げるかを設定していきます。つまり、全体として

  1. API Gatewayは外部からのリクエストを受け取る
  2. Lambdaはパラメーターとして1件のJSONオブジェクトを受け取り、1件のJSONオブジェクトを返す関数
  3. API Gatewayは何らかのデータをレスポンスとして返す

という処理の流れがあるわけですが、1→2, 2→3の間には何らかの変換ルールが必要です(後者ではもともとJSONをそのまま返すというルールが設定されています)。これを設定します。

Method Request設定

API呼び出し元から与えられる想定のパラメーターを設定します。数が多いのですがぽちぽち入力します(今回はtokenだけでも構いません)。

f:id:nurenezumi:20160606133558p:plain

Method Request設定

Body Mapping Templatesの設定で、API呼び出し元から与えられたパラメーターをどのような形でLambda functionに渡すかを決めます。

{
  "channel_name" : "$input.params('channel_name')",
  "user_id"      : "$input.params('user_id')",
  "command"      : "$input.params('command')",
  "text"         : "$input.params('text')",
  "team_id"      : "$input.params('team_id')",
  "token"        : "$input.params('token')",
  "channel_id"   : "$input.params('channel_id')",
  "team_domain"  : "$input.params('team_domain')",
  "response_url" : "$input.params('response_url')",
  "user_name"    : "$input.params('user_name')",
  "apiId"        : "$context.apiId"
}

テスト実行する

テスト実行しましょう。tokenにトークンを入力してテストボタンを押します。先ほどLambdaを実行したときと同様の結果が返ってくれば成功です。

デプロイする

これで動作に問題ないことが確認できたのでデプロイします。これでURLが決まります。

Slackの設定

Slackに戻り、必要に応じて項目の設定を行います。

  • URLの設定(API Gatewayで決まったもの。これは必須)
  • Customize Name(BOTが発言するときの名前。分かりやすい名前にしましょう)
  • Customize IconBOTが発言するときのアイコン。Custom Emojiは使えないので、使いたければ画像ファイルを再度アップロードする必要があります)
  • Autocomplete help textの設定(Show this command in the autocomplete listにチェックを入れるとオートコンプリートが使えるようになります

これでもう終わりです。ブラウザからでもスマホからでも、コマンドを実行するだけでAWSAPIが実行されて結果が得られるようになりました。

まとめ

実に簡単にCustom Commandが、それもサーバーレスで実現できました。ややこしいことはAWSが引き受けてくれるので、サーバーが落ちたらどうしようといったことを考える必要がありません。お手軽で効果がある、コストパフォーマンスの高いコードはどんどん書いていきたいものですね。それでは。

SlackのSlash Commandで既存システムから必要な情報を取得する

ASP.NET C# Slack

弊社の1システムとしてゴルフシステムがあります。当然ユーザー様は日本全国のゴルフ場なわけですが、ゴルフ場は基本郊外にありますのでネットワーク回線が不安定なことがあります。そのような理由からネットワークが不通となっても動作できるようオンプレで夜間バッチで連携を取る方式を現在は取っています。とはいえリアルタイムで特定の情報が知りたい事もあり、その場合はいちいちログインして確認することになるわけですが、それは面倒だ!加えてSlackは常に見てるので何でもSlackでやりたい。

で既存システムにslackのSlach Sommandsを組み合わせてみました。

システム構成

IIS 7.5
ASP.NET Web API
ASP.NET WCFサービスアプリケーション
.NET Framework 4.5.1

手順

  1. ゴルフ場サーバーから定周期でAWS上に作成したWCFをたたき、データ連携させる。

  2. Slash Commandsを作成。上記同様にAWS上に作成したWEB APIを叩くようにする。

これだけ。

f:id:ihisa:20160531151607p:plain

こんな感じになります。Slach Commandsを打つとPOSTする先となるWeb APIを新規に作成します。

Slach Commandsの仕様は以下の通りです。
Slash Commands | Slack

この仕様に則りWEB APIを作成します。記載の通りですが以下注意点です。

  1. 戻りは必ずHttpStatusを200にします。それ以外だと表示されないです。
  2. コマンドのパラメータはtextに入ってるので自由自在。
  3. 3秒以内に応答を返さないとSlackは応答がねぇよ!とあきらめます。
  4. 実行結果をコマンドを叩いたチャネルに通知する場合はresponse_typein_channelにする。デフォルトはephemeral(自身のみ)

詳しくはこちらを参照ください。
tech.sanwasystem.com

コード~結果

作ったWeb APIはこんな感じ。

using Newtonsoft.Json;
using System;
using System.Configuration;
using System.Net;
using System.Net.Http;
using System.Runtime.Serialization;
using System.Web.Http;

namespace SlackAPI.Controllers.v1
{
    [RoutePrefix("v1/nt")]
    public class SlackController : ApiController
    {
        public SlackController()
        {
        }

        [HttpPost]
        [Route("information")]
        public HttpResponseMessage Information([FromBody]SlackRequestParameter parameter)
        {
            SlackResponseParameter response = new SlackResponseParameter();
            response.response_type = "ephemeral"; // slash command実行者のみ参照可能

            try
            {
                // token
                if (!parameter.token.Equals(ConfigurationManager.AppSettings["slacktoken"].ToString()))
                {
                    return Result(HttpStatusCode.OK, "認証がよろしくないです");
                }

                // optionに応じた処理
                if (parameter.text.ToLower().Equals("list"))
                {
                    response.text = "listオプションに応じた結果を返します";
                }
                else
                {
                    response.text = "そんなオプションは存在しません";
                }
                return Result(HttpStatusCode.OK, response);
            }
            catch (Exception)
            {
                response.text = "失敗しちゃった(´・ω・`)";
                return Result(HttpStatusCode.OK, response);
            }
        }

        private HttpResponseMessage Result<T>(HttpStatusCode status, T content)
        {
            HttpResponseMessage response = new HttpResponseMessage(status);
            if (content != null)
            {
                response.Content = new StringContent(JsonConvert.SerializeObject(content));
            }
            response.StatusCode = status;
            response.Content.Headers.ContentType.MediaType = "application/json";

            return response;
        }
    }

    [DataContract(Name = "SlackRequestParameter", Namespace = "http://hogehoge")]
    public class SlackRequestParameter
    {
        [DataMember]
        public string token { get; set; }
        [DataMember]
        public string team_id { get; set; }
        [DataMember]
        public string team_domain { get; set; }
        [DataMember]
        public string channel_id { get; set; }
        [DataMember]
        public string channel_name { get; set; }
        [DataMember]
        public string user_id { get; set; }
        [DataMember]
        public string user_name { get; set; }
        [DataMember]
        public string command { get; set; }
        [DataMember]
        public string text { get; set; }
        [DataMember]
        public string response_url { get; set; }
    }

    [DataContract(Name = "SlackResponseParameter", Namespace = "http://hogehoge")]
    public class SlackResponseParameter
    {
        [DataMember]
        public string response_type { get; set; }
        [DataMember]
        public string text { get; set; }
    }    
}

これをslash commandCommandで指定したコマンドをlistオプション付きで実行します。
f:id:ihisa:20160530155741p:plain

めでたく通知されました。
BYODが許可されている会社でしたらSlackを自身のスマホで利用されている方も多いでしょうから、Slackで自身が欲しい情報を取れるのは便利ですね!

SlackのCustom Commandsことはじめ

Slack

どうも、Slack大好きなwakです。今日はSlackで自作コマンドを作ることができるCustom Commandsの話の導入をします。

Slash Commandsってなに

Slackには/invite/remindなど、/から始まるいくつかのコマンドがあります。スラッシュから始まるのでSlackではSlash Commandsと呼んでいます。/remindコマンドの使い方については以前まとめました。

tech.sanwasystem.com

コマンドを自作しよう

さて、このSlash Commandsはユーザーが自作することもできます。これがCustom Commandsです。

自作するとどうなるのか? 公式ドキュメントを読むのが手っ取り早いのですが、動作イメージは

  1. 開発者が/addnekoコマンドを用意する
  2. ユーザーが/addneko tama buchi kuroと入力する
  3. Slackは予め設定されたURLにGETまたはPOSTを飛ばす
  4. WebサーバーはレスポンスとしてJSONドキュメントを返す(3秒以内)
  5. JSONの中身がSlackに表示される
  6. (もし必要なら)Webサーバーは追加情報や時間のかかる処理の結果をJSONドキュメントとしてSlackへURLへ送信する(30分以内)
  7. (もしあれば)JSONの中身がSlackに表示される

という流れになります。

リクエストに含まれる情報

Slackが送ってくるリクエストにはパラメーターがいくつかありますが、最低限チェックすべき重要なものはtokenぐらいです。他は必要に応じて参照してください。

token

Custom Commandごとに設定された秘密のトークン。このトークンの正当性をチェックしておかないと、エンドポイントが第三者にバレたときに呼び出し放題になってしまいます。

user_name

このコマンドを実行したユーザーのID(@なし)です。

command

スラッシュから始まるコマンド名です。複数のコマンドでエンドポイントを共有していないなら無視して構いません。

text

コマンドに続けて入力されたテキストです。上の例ならtama buchi kuroが入ります。これもコマンド側で参照する必要がないなら無視しましょう。

response_url

上述の6番の追加情報の送信先です。たとえばEC2インスタンスを起動する/start-ec2コマンドを作ったとします*1。この場合、コマンドは

  1. 処理を受け付けた旨をリクエストに対するレスポンスとして返し、
  2. 続いてインスタンスの立ち上げ処理を開始し、インスタンスの状態を数秒おきに監視する。正常に起動処理が完了したと確認できたところでこのURLに結果を送信する

という処理を行えば良いわけです。2回目のメッセージはユーザーがコマンドを実行したのと同じチャンネルに表示されます。

作ってみよう

Apps & integrations → Build → Make a Custom Integration とたどり、「Slash Commands」を選択します。

f:id:nurenezumi:20160531144353p:plain

どのようなコマンドを作るか聞かれますので、好きな文字列を入れます。多少長くても補完が効くようにできるので*2気にしなくてもいいでしょう。

f:id:nurenezumi:20160531144609p:plain

これでコマンドが作成され、続けてエンドポイントなどの設定に移ることになります。同僚の井上さんがさっそく素敵なコマンドを実装してくれたので交代することにしましょう。よろしく!

*1:もしちゃんと各種サービスが立ち上がったところまで見届けようとするとこの処理は3秒では終わりません

*2:デフォルトでは補完は効きません。コマンド一覧にも出てきません