Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@Zitan

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

[0]はじめに

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

[1]GitHub Pagesを使う

筆者はGithub初心者なので詳しくないのですが、、、
ここに残したのでZipファイルでダウンロードできます。

作ったサイトを見るには。。。
image.png

下の方に「GitHub Pages」がありますので、クリック。
image.png

このURLをコピペすれば誰でもアクセスできます。自由に使って下さい。※UI変更する可能性はありますが。。
静的なページであれば作成できるらしいです。今回は、HTMLとjavaScripのみを使っています。
image.png

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

[1-1]ログインページ

image.png

[1-2]ログイン成功

image.png

[1-3]ログイン失敗

image.png

コードは全部同じ階層です。
image.png

[2]HTMLコード

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

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

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>RPAAIの技術を用いることにより非定型作業の自動化</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

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

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文で成功ページと失敗ページの遷移を分岐しています。

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

[4]まとめ

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

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Zitan
転職活動のため、ポートフォリオとして活用しています。 業務改善・時短がテーマです。 皆様の記事が勉強になります。 Qiitaが好きだ!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?