こんにちは。
UiPath株式会社の林です。
今回は、最近ますます増えてきたSPA(Single Page Application) Webサイトの自動化について考えてみます。
SPAとは、最初に単一のWebページ(HTML)を読み込み、その後はそのページ内で画面を切り替えてながら動作するWebサイトのことで、FacebookやTwitterのサイトが代表的な例となります。
この記事ではSPAを作成するための代表的なライブラリーであるReact (Facebook社製)を使用して簡単なWebサイトを作成し、そのサイトをターゲットとして自動化ワークフローを作成してみます。Webサイトはできる限り、UiPathに忖度しない一般的なサイトにしたつもりです。
少し専門的な情報も含まれますので、今回の記事のターゲットはWebシステムの作成に関してある程度知識がある方とさせていただきます。
なお、UiPath Studio は Community Edition の バージョン 2019.8.0 を使用しております。
SPAサイトのサンプル
今回作成したサイトは、データの登録と検索の２機能で構成されていて、画面上部のタブで切り替えます。
登録画面
まずは左側タブの登録画面を見てみましょう。なんらかの情報を登録するエントリー画面のイメージです。
入力欄が３か所（名前、種類、説明）あります。これらのテキストフィールドに適当な値を入力し確認ボタンを押すと、確認画面に遷移します。（入力チェックはありません）
確認画面では、連番で付与されるIDが表示されます。この画面で登録ボタンを押すと元の画面に戻ります。
検索画面
 |
 |
右側タブの検索画面は、最上部に条件を入力するフィールドがあります。ここに任意の文字を入力してから、検索ボタンを押すと結果一覧が表示されます。（実際はこの入力内容は使用していませんので、何を入力しても結果は同じです）
結果は、カード型のレイアウトでケーブルカー図鑑（？）が表示されます。
マテリアルデザイン
今回の記事のサンプルサイトのようなデザインのサイトをよく見るかと思いますが、これはGoogle が策定したユーザーインターフェース(UI)デザインに関するガイドライン Material Design に準拠したものです。Material Design に対応したUIを生成するライブラリーが数多く作成されていますが、今回は Google 謹製の Material Components for the Web を使用しています。
ソース
作成したWebサイト(SPA_Web.zip)とReactのソース(SPA_react.zip)を参考情報として添付しておきます。
Webサイトは静的ファイルのみで構成されておりますので、任意のWebサーバにデプロイすることでこの記事の画面を表示させることができます。Webサーバーを用意できる方は、ぜひ画面を表示させながら記事を読み進めてみてください。
また作成したUiPathのプロジェクト(SPA.zip)も添付いたします。
自動化してみよう
さっそく、UiPath Studio で自動化処理を行ってみましょう。
入力フォームの自動化
 |
 |
実行してみると問題なく動作するように見えます。
しかしながら、この処理には一点問題があります。1. の処理の文字を入力アクティビティのセレクターを見てみましょう。
 |
セレクター
<html app='chrome.exe' title='SPA Sample' />
<webctrl idx='1' tag='INPUT' />
<webctrl>タグにidx属性に'1'という値が設定されています。これは、DOMツリー内の<INPUT>タグの中で1番目の要素という意味になります。
UiPathでは通常、id属性などを使用してなるべくサイトのデザイン変更に左右されないセレクターを生成しようとします。しかし、今回のサイトでは<INPUT>を一意に特定できる属性が見当たらないため、要素の順序で特定しています。今回のように、SPAサイトではフォームを直接サブミットしないためフィールドを一意に特定するIDが省略されている場合があります。
しかしながら順序による指定では、サイトのレイアウト変更、項目の追加が発生した場合、ワークフローが正しく動作しなくなってしまいます。このようなときは、UiPathではアンカーベース というアクティビティを使用します。このアクティビティは、操作を行いたいUI要素を特定する際、そのUIに隣接するラベルをアンカーとして利用するアクティビティです。この画面の場合、"名前"、"種類"といったラベルをアンカーとして使用し、その近くのフィールドを操作対象として特定することできそうです。
さっそくアンカーベースアクティビティを使用してみましょう。
左側にアンカーとなる要素（今回は"名前"、"種類"といったラベル）を指定し、右側にその要素への操作（今回は文字を入力）を配置します。
アンカー要素を決定するため、要素を探す アクティビティを配置し、"画面上で指定"をクリックします。ここでラベルである"名前"の要素をクリックすればよいはずなのですが、テキストフィールド全体は選択できるものの、どうやらラベル部分はクリックできないようです。
これはSPAとは直接は関係ないのですが、今回使用したUIライブラーである Material Components for the Web で作成されたテキストフィールドの各要素が複雑に入り組んでいるための現象だと思われます。
このように意図した要素をうまく選択できないときは、UiExplorer を使用してセレクターを修正しましょう。
一度、名前のテキストフィールドを選択した後、要素を探す アクティビティの右上のメニュー（三本線アイコン）から、"UiExplorer で開く"を選択します。
 |
 |
左側のビジュアルツリーを見てみると<INPUT>タグが選択されています。しかしながら本来アンカーとして選択したい要素は名前という名称の書かれた<LABEL>タグです。
そこで、<INPUT>タグと同じ階層にある<LABEL>タグをダブルクリックします。
これで名前のラベルのセレクターが生成できました。
セレクター
<html app='chrome.exe' title='SPA Sample' />
<webctrl aaname='名前' tag='LABEL' />
セレクターを見てみるとidx属性がなくなり、表示名称である"名前"をもとに検索するセレクターとなっているようです。右下の保存ボタンを押してワークフローに反映させましょう。
アンカーベースの右側の 文字を入力 アクティビティは、通常通り"画面上で指示"ボタンを押し名前のテキストフィールドを指定すればOKです。
データスクレイピング
続いて検索結果を取得してみましょう。
UiPathには一覧データの取得に便利なウイザードである「データスクレイピング機能」があります。今回のようなカード型のレイアウトでもデータスクレイピングができるか確認してみましょう。
検索タブを押してサンプルサイトの検索画面を表示し、検索ボタンを押してください。
カードレイアウトの検索結果が表示されたところで「データスクレイピング」を起動してみましょう。
ウィザードを開き次へボタンを押します。
カードの中の適当な項目をクリックします。今回は写真の下に表示されている乗り物の名前を選択してください。
 |
 |
次に２枚目のカードの要素を選択するように指示されますので、２枚目のカードの乗り物の名前を選択してください。
取得したデータに"名称"という名前を付けます。
サイト上に表示されているカードから名称が取得できていることを確認します。
テーブル状に表示されているデータの場合、各レコード（行）の全ての項目（列）を自動的に取得できるのですが、今回のような非テーブル型のレイアウトでは関連する項目を手動で設定する必要があります。
"相関するデータを取得" ボタンを押し、"名称"と同じように、名称の下に表示されている"場所"、その下の"説明"を取得します。
"名称"だけでなく、合わせて"場所"、"説明"が取得できるようになります。内容を確認して"終了"ボタンを押します。
情報が複数ページにわたるか聞かれます。このサンプルサイトでは9件のレコードが3ページに分割されて表示されますので、”はい”を押します。
次のページに進む">"ボタンを選択します。これでデータスクレイピングの完了です。
早速実行してみましょう。ロボットが自動的にページを遷移しデータを取得してくれるはずです。カード型レイアウトのSPA画面でも問題なくデータスクレイピングが可能です。
完成したワークフローは、SPA.zip 内の search1.xaml を参照願います。
UiPath.UI.Automation.Activities 2019.6 以前の注意事項
ここで一つ注意事項があります。
実は バージョン2019.6 以前の UiPath.UI.Automation.Activities パッケージで、今回のようなSPAサイトのデータスクレイピングを行うと、３ページ目以降の情報が取得でませんでした。
以前のバージョンの UiPath.UI.Automation.Activities をご利用の方は 、手動で繰り返し処理を作成する必要があります。
例えば今回のサンプルを例にとると、最後のページのみ">" ボタンが使用不可となりますので、この属性を繰り返しの判定条件として、複数ページのデータを取得します。手動で繰り返し実行した場合の例は、SPA.zip 内の search2.xaml を参照願います。
History APIに気を付けよう
最後に、SPAサイト自動化のTipsを一つお伝えします。
本来 SPAアプリケーションは単体のページですので、ブラウザーの上部に表示されるアドレスバーのURLは操作に関わらず固定されています。しかし、Javascriptの History API を使用することで、URLを疑似的に書き換えることが可能となりブックマークやブラウザの戻るボタンを活用することができるようになります。
今回のサンプルでも、上部のタブ（登録、検索）を切り替えるとき、URLが ".../#0"、".../#1"と切り替わり、ブラウザの戻るボタン、進むボタンも使用できるようになっています。
このようなサイトではURLをアドレスバーに入力することで、使用したい画面にダイレクトに遷移することができるのですが、一点気を付けないといけないことがあります。
タブをクリックして画面を切り替えるときは、SPAアプリですのでHTMLの再読み込みは発生しません。しかしながら、URLを直接入力したときには毎回WebサイトのHTMLなどをダウンロードして再描画する形となるため、表示に時間がかかる場合があります。
UiPathではURLを直接指定して画面を遷移するためのURLに移動アクティビティを用意しておりますが、クリックでの画面遷移に比べて時間がかかっているなと感じたときは、対象のWebサイトがSPAではないかと疑ってみてください。
おわりに
今回はSPAサイトの自動化に関して、躓きポイントと解決策をお伝えいたしました。
SPAのWebアプリケーションにおいても積極的にUiPathをご活用いただければと思います。