StudioXでリストの情報をアプリケーションに入力してみた！


#はじめに
本記事では StudioX でとりあえず**リストの情報をアプリケーションに入力してみたい**:bangbang:
という方向けに**デモ用の経費登録システムにダミーのデータを入力する方法**をご紹介します。

まだ、StudioXをインストールされていない方は[こちらの記事](https://qiita.com/T_OMORI/items/1f44d485dcbb0516f130)を参考にしてインストールしてください :bow:
※ここでは 20.10.2を使用しています。

:movie_camera: 動作イメージは[こちら](https://twitter.com/i/status/1348647087928328194
)を参照ください。

#事前準備
**1. デモ用の経費システムをブラウザで表示**
https://www.expense-demo.com/ を IE、Chrome、Firefox、Edgeのいずれかのブラウザで表示してください。
IE以外（Chrome、Firefox、Edge）を使う場合は拡張機能をインストールする必要があるので[こちらの記事](https://qiita.com/T_OMORI/items/1f44d485dcbb0516f130#%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB
)を参考にしてください。

**2. ダミーの経費データをダウンロード**
https://www.expense-demo.com/ の [サンプルのダウンロード] からダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/ff3745b7-793f-8ec0-8a30-ae4474a4ec50.png)
**3. StudioXで新規プロジェクト作成**
ホーム > スタート > 空のタスク をクリックして新規プロジェクトを作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/1d5fea7a-0efe-378d-56c1-09d07316b6d0.png)

#そもそも手入力するときはどんな順序？
自動化プロセスを作成する前に、まずはロボットではなく自分自身が一つ一つのデータを入力するとなるとどうなるかを考えてみましょう。
作り方は多種多様なので人によってここでの考え方はいろいろとあると思いますが、今回考えた流れは次の様になります。
※実際にブラウザ上で操作してみるとイメージしやすいかと思います。

+ [経費を登録する]をクリックして経費一覧画面にブラウザで移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/4352745e-b815-d369-08f0-ef3455f99475.png)
+ ダミーの経費データのヘッダの内容（1行目）と各データ（2~4行目）を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/08e7c738-2a6c-5dd1-0ed1-898c7777bc6b.png)
+ [明細を登録する]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/3ed1fe8f-448d-6dbd-9280-c0ff4de51241.png)
+ [タイトル] [種別] [金額] [備考]に**2行目のデータ**を入力し、[登録する]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/fa9b9e21-ab16-d408-2c6d-282e16b35531.png)
+ [戻る]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/6e5fdb96-30da-5f84-1ebd-63cf1770904c.png)
+ [明細を登録する]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/3ed1fe8f-448d-6dbd-9280-c0ff4de51241.png)
+ [タイトル] [種別] [金額] [備考]に**3行目のデータ**を入力し、[登録する]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/7168bb12-e4fc-ce27-6b87-de49194621a0.png)
+ [戻る]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/6e5fdb96-30da-5f84-1ebd-63cf1770904c.png)
+ [明細を登録する]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/3ed1fe8f-448d-6dbd-9280-c0ff4de51241.png)
+ [タイトル] [種別] [金額] [備考]に**4行目のデータ**を入力し、[登録する]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/8cb1e36c-550e-a2a4-b3ad-10bf82a12d79.png)
+ [戻る]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/6e5fdb96-30da-5f84-1ebd-63cf1770904c.png)


# StudioXで自動化プロセスを作成！
では、先ほどの流れをイメージしながら自動化プロセスを作成します！

+ 改めて https://www.expense-demo.com/ を IE、Chrome、Firefox、Edgeのいずれかのブラウザで表示
+ [アプリケーション/ブラウザーを使用] をデザイナーパネルに配置
+ [自動化するアプリケーションを指定] をクリックして https://www.expense-demo.com/ を表示しているブラウザを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/d0900daf-5172-6c82-ef27-8ca164df2d17.png)
+ [クリック] を [アプリケーション/ブラウザーを使用] の中に配置
+ [画面上でターゲットを指定] をクリックしてブラウザ上の [経費を登録する] を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/9f0bdb57-0b8a-8470-95d5-48bc4a93632d.png)
+ [Excelファイルを使用] を [クリック] の下に配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/5a5cc90c-5651-c943-90dd-c11d5ca452d1.png)
+ [ファイルを参照] をクリックしてダミーの経費データを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/4f4909e7-ac64-30c4-c2b6-f356dc923166.png)
+ [Excelの繰り返し（各行）] を [Excelファイルを使用] の中に配置
+ 対象範囲として Excel > Sheet1 [シート] を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/2aae6885-af82-16c1-3d75-67feefa335eb.png)
+ 先頭行をヘッダーとするにチェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/a2fef79f-32af-4471-270c-f208b360c116.png)
+ [クリック][文字を入力][項目を選択][文字を入力][文字を入力][クリック] を [Excelの繰り返し（各行）] の中に配置
 + [クリック] の [画面上でターゲットを指定] で [明細を登録する] を選択
 + [文字を入力] の [画面上でターゲットを指定] で タイトルの横の入力欄を選択
 + [文字を入力] の [以下を入力] で CurrentRow > タイトル を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/3822cc42-6f08-b434-9266-20443e404f8f.png)
 + [項目を選択] の [画面上でターゲットを指定] で タイトルの横の入力欄を選択
 + [項目を選択] の [選択する項目] で CurrentRow > タイトル を選択
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/ede52be0-35e3-d8db-7180-1fd6b6b64423.png)
 + [文字を入力] の [画面上でターゲットを指定] で タイトルの横の入力欄を選択
 + [文字を入力] の [以下を入力] で CurrentRow > タイトル を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/158627a0-23ad-e358-0b16-85bb6429b5a3.png)
 + [文字を入力] の [画面上でターゲットを指定] で タイトルの横の入力欄を選択
 + [文字を入力] の [以下を入力] で CurrentRow > タイトル を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/67b05bfb-78a4-683e-0139-44618daa7ece.png)
 + [クリック] の [画面上でターゲットを指定] で [登録する] を選択
 + [クリック] の [画面上でターゲットを指定] で [戻る] を選択

こちらで完成です！
全体像はこのようになります。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/5ac33837-9eef-09fc-f9b2-79dcc1517c57.png)

# 実行
改めて https://www.expense-demo.com/ を IE、Chrome、Firefox、Edgeのいずれかのブラウザで表示した状態で、StudioXの [実行] をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/cc8457cf-7c2b-399f-724f-7009a8a2a3af.png)

:warning: **注意点** :warning:

+ 実行中にマウスを動かしたりするとロボットの動作を妨げるので動かさないように注意してください。
+ このサイトではキーボード入力が全角になっていると数字入力の部分でエラーになるので、**半角にして実行**するか、もしくは、金額を入力している [文字を入力] の プロパティ > オプション > **入力モード をシミュレート**に変更してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/8cd4fc80-cca8-2788-92f6-ae1e2a2c8b25.png)

#まとめ
本記事では StudioX でデモ用の経費登録システムにダミーのデータを入力してみました :rocket:
リストの情報をアプリケーションやブラウザに入力するという場合は基本的に今回のの流れで作っていただければOKです！
今後も StudioX で自動化プロセスを作るための Tips などをシェアできればと思います:smiley:

#おまけ
:warning: **以下は細かい話なので気になる方向けです。。。（初学者の方は基本的に読み飛ばして頂いてOKです！）**

今回のWebサイトで入力が全角の場合に失敗するのは、金額の input の type が number ではなく text になっているためです。
キーボード入力が全角になっていると数字が全角で入力されてしまうのですが、この Webサイトは金額として半角の数字を期待しているためにエラーとなってしまいます :worried:

こういったWebサイトの場合対応方法としては大きく３つの方法があります。

**1.　Webサイトを修正する
2.　キーボード入力を半角にして実行
3.　アクティビティの入力モードを修正**

1.の対応ができると非常に良いのですが、なかなかWebサイト自体を修正することは難しいため、現実的には2.か3.が選択肢となります。そして、2.は試しにちょっと実行する分には良いのですが、実行するたびに半角/全角を確認するのも難しいと思うので、3.の方法が個人的にはおすすめです :thumbsup: 
※入力タイプに関して気になる方はこちらも[参照](https://docs.uipath.com/studio/lang-ja/docs/ui-automation#the-sendwindowmessages-property)ください。

ちなみに、すべての Webサイトで同様の事象が起きるわけではないのでご安心ください :sweat_drops: 
例えば、この Webサイトでも type が number になっていれば半角入力されるのでエラーは発生しません。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/1afa2d70-c0a0-f632-7f2c-2cfc00dae30e.png)