Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@OuyanginUiPath

JSスクリプトを使って一括で表データを登録してみよう

Last updated at Posted at 2024-11-08

はじめに

前回、「クリック」や「文字を入力」といった人間の手の動きを真似するアクティビティの代わりに、「JSスクリプトを挿入」を使って電光石火のスピードでデータを登録した方法をご紹介しました。ただし、その際はハードコーディングで1行のデータだけを実行しました。「大量のデータがあった場合はどうするのか？」というご質問もいただいたため、今回は表データをJavaScriptでよく使うJSON Objectに変換し、あっという間に一括で表データをウェブサイトに登録する方法を説明しようと思います。

前提知識

この記事は前回の知識を利用するため、まだ前回の内容をご覧になっていない方は、以下の記事に目を通していただけますと幸いです。

環境準備

まず、今回は以下の環境でデモを作成していきます。

項目 バージョン
UiPath Studio 2024.10.6
UiPath.UiAutomation.Activities 24.10.0
Chrome 130.0.6723.116

次に、今回は筆者が用意したコードでウェブサイトを構築する予定なので、以下の手順に従って簡単なサイトを作ってください。

①新しいファイルを作成し、ファイル名を「index.html」にします。次に、そのファイルをメモ帳（またはNotepad++）で開き、以下のコードを貼り付けてください。

htmlコード
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Input Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>User Information Form</h1>
        <form id="userForm">
            <label for="firstname">First Name:</label>
            <input type="text" id="firstname" required>

            <label for="lastname">Last Name:</label>
            <input type="text" id="lastname" required>

            <label for="companyName">Company Name:</label>
            <input type="text" id="companyName" required>

            <label for="role">Role in Company:</label>
            <input type="text" id="role" required>

            <label for="address">Address:</label>
            <input type="text" id="address" required>

            <label for="email">Email:</label>
            <input type="email" id="email" required>

            <button type="submit">Submit</button>
            <button type="button" id="showData">Show Data</button>
        </form>

        <table id="dataTable" style="display:none;">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Company Name</th>
                    <th>Role</th>
                    <th>Address</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody id="tableBody"></tbody>
        </table>
    </div>

    <script src="script.js"></script>
</body>
</html>

②新しいファイルを作成し、ファイル名を「styles.css」にします。次にそのファイルをメモ帳（またはNotepad++）で開き、以下のコードを貼り付けてください。

CSSコード
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin: 10px 0 5px;
}

input {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    padding: 10px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 15px; 
}

button[type="submit"] {
    background-color: #28a745;
}

button[type="submit"]:hover {
    background-color: #218838;
}

button#showData {
    background-color: #007bff; 
}

button#showData:hover {
    background-color: #0056b3;
}

table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

③新しいファイルを作成し、ファイル名を「script.js」にします。次に、そのファイルをメモ帳（またはNotepad++）で開き、以下のコードを貼り付けてください。

JavaScriptコード
localStorage.removeItem('users');

document.getElementById('userForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const firstname = document.getElementById('firstname').value;
    const lastname = document.getElementById('lastname').value;
    const companyName = document.getElementById('companyName').value;
    const role = document.getElementById('role').value;
    const address = document.getElementById('address').value;
    const email = document.getElementById('email').value;

    const userData = { firstname, lastname, companyName, role, address, email };

    let users = JSON.parse(localStorage.getItem('users')) || [];
    users.push(userData);
    localStorage.setItem('users', JSON.stringify(users));

    document.getElementById('userForm').reset();
});

document.getElementById('showData').addEventListener('click', function() {
    const users = JSON.parse(localStorage.getItem('users')) || [];
    const tableBody = document.getElementById('tableBody');
    tableBody.innerHTML = '';

    users.forEach(user => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${user.firstname}</td>
            <td>${user.lastname}</td>
            <td>${user.companyName}</td>
            <td>${user.role}</td>
            <td>${user.address}</td>
            <td>${user.email}</td>
        `;
        tableBody.appendChild(row);
    });

    document.getElementById('dataTable').style.display = 'table';
});

④上記の3つのファイルを同じフォルダーに保存してください。その後、「index.html」をChromeで開くと、以下のページが表示されるはずです。

image.png

試しに情報を入力して「Submit」をクリックし、「Show Data」をクリックすると、以下の表データが登録されます。

image.png

以上で問題なければ、サイトの構築は完成!!!

さらに、今回のRPA開発用のデータとJavaScriptのコードを格納するファイルを作成します。

⑤以下のDataTableは今回登録対象のデータです。Studioの表抽出でデータを取ってExcelに保存しましょう。（そのままコピーすると、データが乱れる可能性はあります）

FirstName LastName CompanyName RoleinCompany Address Email
John Smith IT Solutions Analyst 98 North Road jsmith@itsolutions.co.uk
Jane Dorsey MediCare Medical Engineer 11 Crown Street jdorsey@mc.com
Albert Kipling Waterfront Accountant 22 Guild Street kipling@waterfront.com
Michael Robertson MediCare IT Specialist 17 Farburn Terrace mrobertson@mc.com
Doug Derrick Timepath Inc. Analyst 99 Shire Oak Road dderrick@timepath.co.uk
Jessie Marlowe Aperture Inc. Scientist 27 Cheshire Street jmarlowe@aperture.us
Stan Hamm Sugarwell Advisor 10 Dam Road shamm@sugarwell.org
Michelle Norton Aperture Inc. Scientist 13 White Rabbit Street mnorton@aperture.us
Stacy Shelby TechDev HR Manager 19 Pineapple Boulevard sshelby@techdev.com
Lara Palmer Timepath Inc. Programmer 87 Orange Street lpalmer@timepath.co.uk

⑥先ほどと同じフォルダーでも別の場所でも構いませんが、「Inject_JS_Script.js」という名前のファイルを作成しておいてください。
image.png

ワークフロー作成

①上記の表データを読み込み、DataTable変数「dtData」に保存。
image.png

②DataTableをJSONに変換。

ここで「なぜDatatableをJSONに変換するのか？」と戸惑う方もいらっしゃるかもしれませんので、簡単に説明します。JSONはJavaScriptのオブジェクト形式に直接対応し、JavaScriptのオブジェクトリテラルに非常に似た構造を持っています。そのため、JSONはJavaScriptと非常に親和性が高く、サーバーとクライアント間でデータをやり取りする際、軽量で人間が読みやすい形式として一般的に利用されています。

DatatableをJSONに変換するためには、Newtonsoft.Jsonライブラリを使用すると簡単です。Newtonsoft.Jsonは、JSONデータを処理するための.NET用ライブラリです。以下の主な機能があります：

i.シリアライズ：DataTableなどのオブジェクトをJSON文字列に変換する。

ii.デシリアライズ：JSON文字列をJavaScriptのオブジェクトに変換する。

Newtonsoft.Jsonは、JsonConvertというクラスを提供しており、その中の SerializeObjectメソッドを使ってオブジェクトをJSON文字列に変換することができます。コードは以下の通りです。

image.png

Serialize Code
Newtonsoft.Json.JsonConvert.SerializeObject(dtData)

JSON文字列に変換したら、こうなりますね。すべての情報はJSONのように整形されています。

image.png

③「アプリケーション/ブラウザを使用」を配置し、デモサイトを指定する。

image.png

指定が失敗することもあるかと思います。その場合は、Chromeの拡張機能画面を開き、UiPath拡張機能の詳細設定に入り、「ファイルのURLへのアクセスを許可する」をONにしてください。

image.png

④「JSスクリプトを挿入」をスコープの中に配置、設定する。

i.前回よりコードが少し長いため、直接スクリプトコードを書き込むのではなく、先ほど作成した「Inject Js_Script.js」でコードを埋め込みます。そのため、スクリプトコードのところで「Inject Js_Script.js」を選択してください。

ii.先ほど、DataTableから変換されたJSON文字列を引数としてスクリプトコードにインプットしてデータを処理します。そのため、入力パラメータのところにjsonStringを入れてください。

完成のイメージです。

image.png

⑤Inject Js_Script.jsでコーディング

まず、引数としてjsonStringを設定します。

引数設定
function (element,jsonString)

次に、登録処理で情報を抽出しやすくするため、JsonStringをJSON Objectに変換する必要があります。

JSON Objectに変換
const jsonObject = JSON.parse(jsonString)

すると、一行一行の情報はループ可能のJSON Objectになったので、一行ずつ情報を読み取ってウェブサイトの欄に埋めてSubmitします。（DOMコードの書き方は前回の記事で説明していますので、ご参考ください。）

JSON Objectをループしてデータ登録を行う
 for(i=0;i<jsonObject.length;i++){
	document.getElementById('firstname').value = (jsonObject[i]['FirstName']);
    document.getElementById('lastname').value = (jsonObject[i]['LastName']);
    document.getElementById('companyName').value = (jsonObject[i]['CompanyName']);
    document.getElementById('role').value = (jsonObject[i]['Roleinompany']);
    document.getElementById('address').value = (jsonObject[i]['Address']);
    document.getElementById('email').value = (jsonObject[i]['Email']);

    document.getElementById('userForm').dispatchEvent(new Event('submit'));

 };

最後に、登録された表データを表示させます。

登録データの表示
document.getElementById('showData').click();

コードの完全版です。

コードの完全版
function (element,jsonString) {
	
 const jsonObject = JSON.parse(jsonString);

 for(i=0;i<jsonObject.length;i++){
	document.getElementById('firstname').value = (jsonObject[i]['FirstName']);
    document.getElementById('lastname').value = (jsonObject[i]['LastName']);
    document.getElementById('companyName').value = (jsonObject[i]['CompanyName']);
    document.getElementById('role').value = (jsonObject[i]['Roleinompany']);
    document.getElementById('address').value = (jsonObject[i]['Address']);
    document.getElementById('email').value = (jsonObject[i]['Email']);

    document.getElementById('userForm').dispatchEvent(new Event('submit'));

 };

 document.getElementById('showData').click();

}

最後に

実装が完了したため、まずワークフローの全体図を確認して、問題なければ、実行してみましょう！

ワークフローの全体完成図です。

image.png

問題なければ、実行します。

image.png

複数行がありますが、本当に一瞬で終わりました！「文字を入力」と比べてだいぶ時間が節約できるのでは？データ量が多ければ多いほど、「JSスクリプトを挿入」と通常のUI操作の時間差も大きくなるでしょう！

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?