[HTML/JavaScript]RPA(UiPath)でスクレイピングするためのテストページを作ってみた

## [0]はじめに
Zitanです。
RPAでWebスクレイピングする際のテスト用のWebページを作成することにしました。
サイト様にもよりますが、Webスクレイピング禁止にしているところもあるようで。。。
今後使うかどうかは別として、コードを残すことにしました。

## [1]GitHub Pagesを使う
筆者はGithub初心者なので詳しくないのですが、、、
ここに残したのでZipファイルでダウンロードできます。

https://github.com/Zitan-3min/Web-

作ったサイトを見るには。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/f027c5e1-56fc-f3bd-1e50-ffd98ef63a14.png)

下の方に「GitHub Pages」がありますので、クリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/27a288e5-a007-bc20-f928-d01241476657.png)

このURLをコピペすれば誰でもアクセスできます。自由に使って下さい。※UI変更する可能性はありますが。。
静的なページであれば作成できるらしいです。今回は、HTMLとjavaScripのみを使っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/6524b357-1964-945a-e612-fd1ccb5ddb52.png)

アクセスするとログインページに遷移します。
UserName：testuser
Password：password
です。ただのテスト用のサイトなのでセキュリティとか気にしていません。

### [1-1]ログインページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/50c823df-edba-3272-94aa-116c88496d42.png)

### [1-2]ログイン成功
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/e3a9f59f-c00c-f770-675f-c99978f9d63b.png)

### [1-3]ログイン失敗
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/7400c514-04e0-ca26-6377-ba8f290b86ae.png)

コードは全部同じ階層です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/1794f62a-8555-2316-ae31-a8f3fa9a799c.png)


## [2]HTMLコード

### [2-1]ログインページ：index.html

```ruby:index.html
<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="process.js"></script>
        <title>Login Test Page</title>
    </head>

    <body>
        <center>
            <h1>Login Test Page</h1>
            <form name="login_form" action="clickButton();">
                <p>Please Input your ID/Password(testuser/password)</p>
                <input type="id" name="id" placeholder="UserName">
                <br>
                <input type="password" name="password" placeholder="Password">
                <br>
                <button type="button" onClick="clickButton();">Login</button>
            </form>
        </center>
    </body>
</html>
```

### [2-2]ログイン成功ページ：success.html

```ruby:success.html
<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="process.js"></script>
        <title>Success Page</title>
    </head>

    <body>
        <center>
            <h1>Success Page</h1>       
            <p>This is Success Page !</p>
            <dl>
                <dt>RPAのクラス_総務省HPより(https://www.soumu.go.jp/menu_news/s-news/02tsushin02_04000043.html)</dt>
                <dd>
                    <table class="tableList" border="1">
                        <thead>
                            <tr>
                                <th scope="col" style="width: 25%;">クラス</th>
                                <th scope="col" style="width: 20%;">主な業務範囲</th>
                                <th scope="col">具体的な作業範囲や利用技術</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">クラス1<br />RPA（<span xml:lang="en" lang="en">Robotic Process Automation</span>）</th>
                                <td>定型業務の自動化</td>
                                <td>
                                    <ul class="normal">
                                        <li>情報取得や入力作業、検証作業などの定型的な作業</li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row">クラス2<br />EPA（<span xml:lang="en" lang="en">Enhanced Process Automation</span>）</th>
                                <td>一部非定型業務の自動化</td>
                                <td>
                                    <ul class="normal">
                                        <li>RPAとAIの技術を用いることにより非定型作業の自動化</li>
                                        <li>自然言語解析、画像解析、音声解析、マシーンラーニングの技術の搭載</li>
                                        <li>非構造化データの読み取りや、知識ベースの活用も可能</li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row">クラス3<br />CA（<span xml:lang="en" lang="en">Cognitive Automation</span>）</th>
                                <td>高度な自律化</td>
                                <td>
                                    <ul class="normal">
                                        <li>プロセスの分析や改善、意思決定までを自ら自動化するとともに、意思決定</li>
                                        <li>ディープラーニングや自然言語処理</li>
                                    </ul>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </dd>
            </dl>
        </center>
    </body>
</html>
```






### [2-3]ログイン失敗ページ：failure.html
```ruby:failure.html
<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="process.js"></script>
        <title>Failure Page</title>
    </head>

    <body>
        <center>
            <h1>Failure Page</h1>
            
            <p>This is Failure Page !</p>
        </center>
    </body>

</html>
```

## [3]javaScriptコード
### [3-1]ログインページ：prcess.js
```ruby:prcess.js
function clickButton() {
    input_id = document.login_form.id.value;
    input_pwd = document.login_form.password.value;
    if(input_id == "testuser" && input_pwd == "password"){
        location.href = "success.html";
        return;
    }
    location.href = "failure.html";
}
```

UserName(input_id)とPassword(input_pwd)の値はname属性で取得して、IF文で成功ページと失敗ページの遷移を分岐しています。

```ruby:name属性を指定してテキストボックス内の値を取得する
input_id = document.login_form.id.value;
input_pwd = document.login_form.password.value;
```

## [4]まとめ
いかがでしょうか。
ネットの情報を組み合わせて作っているだけなので詳しくはありませんが、
RPA(UiPath)で色々やるときの手段として作成してみました。