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

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

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

https://qiita.com/Ouyang/items/00d696c00bab77fb3f61

## 環境準備
まず、今回は以下の環境でデモを作成していきます。
| 項目 | バージョン |
|:-----------|------------:|
| UiPath Studio| 2024.10.6        |
| UiPath.UiAutomation.Activities     | 24.10.0      |
| Chrome     | 130.0.6723.116      |

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

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

```ruby: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++）で開き、以下のコードを貼り付けてください。

```ruby: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++）で開き、以下のコードを貼り付けてください。

```ruby: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/5142b7ab-cd3e-c62e-5e7c-d1d827563e4c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/fc367b47-ffea-75dc-2d56-c967b18c35da.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/a3f02f6d-9c96-f49f-14c1-89b9459d29a6.png)

## ワークフロー作成

①上記の表データを読み込み、DataTable変数「dtData」に保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/db0254df-a990-e0ca-df0c-4036b63232f9.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/aa5d5342-48d7-7d56-4f64-93f78e35f1c2.png)

```ruby:Serialize Code
Newtonsoft.Json.JsonConvert.SerializeObject(dtData)
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/2262e8c3-2b1f-5ee1-9ce6-45867cfbbb82.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/c6820d26-4cb2-6ea2-5382-20c3cbaf9e44.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/829ea2d3-ed88-b503-edfe-55441bb2392a.png)

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

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

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

完成のイメージです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/b490c0c8-1422-653e-28bc-2150d5aae840.png)

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

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

```ruby:引数設定
function (element,jsonString)
```

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

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

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

```ruby: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'));

 };
```

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

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

コードの完全版です。

```ruby:コードの完全版
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/c74cc973-cae3-9c04-9c64-d49effa75df8.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334103/3c3ecef5-b8b3-91dc-cc61-70dfd336001b.png)

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