ウェブスクレイピングという言葉を聞いたことがあるでしょうか？
Wikipediaには「ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと」と書かれています。もっと簡単に言ってしまうとWEBページから欲しい情報を取得する手法ということです。

フローでも、WEBページのHTMLをHTTPGetコンポーネントで取得してXMLに変換し、それから必要な情報を取得するということでウェブスクレイピングすることができます。しかし、HTMLをXMLに変換できなかった場合は上手くいきません。また、XMLに変換できたとしても、XMLが複雑な形式になる場合は、XPathStringやXPathNodesetコンポーネントを使用しないと情報を取得できません。これらのコンポーネントはXPathの知識が必要になるため、使用するためのハードルがぐっと上がります。

そこで、WARP4.8ではHTMLの解析をするためのHtmlParseコンポーネントが追加されました。情報を取得するための指定にはCSSセレクターを使用します。CSSセレクターであれば、WEBサイトやWEBページを作ったことがある方であれば簡単に使うことができるのではないかと思います。

それでは使い方を見てみましょう。作成するのは次のようなフローです。



HTTPGetコンポーネントでWEBサイトのページを取得して、それをHtmlParseコンポーネントで解析してWEBサイトに表示されている情報を取得します。試しにADNのトップページからニュースの一覧を取得してみましょう。

HTTPGetコンポーネントの接続先のURLとして、

https://asteria.jp/index.html

を設定します。最初は、HTTPGetコンポーネントの次にFilePutコンポーネントを置いて、HTTPGetコンポーネントで取得したHTMLをファイルに保存しておきます。

保存したHTMLファイルをテキストエディターで表示してみると、HTMLの内容や構造が分かります。保存したHTMLの100行目ぐらいのところを抜き出してみます。

<h2 id="adn_news"><a href="https://asteria.jp/news/">ニュース</a></h2>
<ul class="adn-list">
    <li><a href="https://asteria.jp/news/20140410-190825.html">ASTERIA製品におけるCVE-2014-0160の影響について</a></li>
    <li><a href="https://asteria.jp/news/20140326-160000.html">ASTERIA WARP 4.8を出荷開始しました</a></li>
    <li><a href="https://asteria.jp/news/20140324-090000.html">ASTERIA WARP トレーニングコース 4月開催</a></li>
</ul>

※見やすいように少し加工してあります

きっとこの部分がADNのトップページの最初の「ニュース」の部分でしょう。これを新しく追加されたHtmlParseコンポーネントで解析しニュースのタイトルとURLを取り出してみましょう。
まずは、情報を取り出すベースとなる場所を指定します。ニュースのタイトルとURLの部分を取り出すには、<a> タグの部分を取得できれば良さそうです。そこで、HtmlParseコンポーネントのベースセレクタープロパティには

ul.adn-list li a[href^=https://asteria.jp/news/]

と指定します。これがどのような意味かというと、最初の "ul.adn-list" の部分はadn-listというclassが指定されている <ul> タグという意味です。次の "li" は、前で指定した <ul> の子供の <li> タグという意味です。最後の "a[href^=https://asteria.jp/news/]" は、<li> の子供で、href の値が "https://asteria.jp/news/" で始まっている <a> タグという意味です。つまり、href の値が "https://asteria.jp/news/" で始まっている <a> タグが取得したいんだけれど、ちょっとその前の方の <ul> とか <li> とかにも制限を入れていますよということです。もしかしたらもっと簡単に、

a[href^=https://asteria.jp/news/]

でも良いんじゃないかと思った方もいらっしゃるかもしれません。でもそうすると、HTMLのサンプルの最初を見ていただければ分かると思いますが、「ニュース」という部分の <a> タグも条件にヒットしてしまいます。このような不要な情報をはじくために、前の方に <ul> とか <li> を付けて制限していたわけです。
※正規表現を使用して、前の方の制限を省くことはできます

このようにベースセレクターを設定すると目指す <a> タグが取得できますので、次に、<a> タグの部分からどのような情報を取得するかを設定します。これは、HtmlParseコンポーネントの取得する値カテゴリプロパティで指定します。今回は次のように設定します。

<a> タグのさらに子供を取得するということはないのでセレクター欄は空欄にします。注意が必要なのは url の行です。ここでは取得対象としてドロップダウンリストから選択するのではなく "href" という文字列を直接入力しています。このように設定することで、"href" 属性の値を取得できます。

それでは設定は終わったのでフローを実行してみます。



ニュースのタイトルとURLが取得できましたね。これを少し整形して綺麗なHTMLに変換し、ポータルサイトに組み込んでみるのも良いかもしれません。

これ以外にも、ファイルのダウンロードやWEBサイトのバックアップなどを定期的にWEBから行っている場合は、フローを使って自動化するということも出来るのではないかと思います。

CSSセレクターの指定方法などより詳しい情報はコンポーネントのヘルプに載っています。また、HtmlParseコンポーネントを使用した例はこちらのブログにも載っておりますので合わせてご覧ください。