【UiPath Studio】オブジェクトリポジトリの定義を作成し、共有する。

# はじめに

タイトルの通りの手順をご紹介します。当記事では実際の手順にフォーカスしています。
機能については公式ドキュメントをご参照ください。

https://docs.uipath.com/ja/studio/standalone/2024.4/user-guide/about-object-repository

:::note
オブジェクトリポジトリは**UiPath Studio v23.10**で内部処理がかなり向上されています。活用される場合は**v23.10以降**のご利用をお奨めします。
:::

オブジェクトリポジトリは **UiPath Studio v23.10** で追加された **「コード化されたワークフロー」、「コード化されたテストケース」** で画面操作をする前提ともいえる機能ですので、定義の方法を一通りご紹介することにしました。


UiPathのデモサイトであるUiBankサイトを利用し、具体的な作成手順と共有を試みます。

#### 対象のデモサイト：UiBank

https://uibank.uipath.com/

### オブジェクトリポジトリ定義済のプロジェクトが欲しい方はこちら…
手っ取り早くオブジェクトリポジトリを定義済のプロジェクトを使って機能概要を把握したい方は、以下のサンプルプロジェクトをご参照ください。

https://docs.uipath.com/ja/studio/standalone/2023.10/user-guide/apply-for-a-loan-with-uibank#sample-project

↑ の公式ドキュメントの一番下にある下図のリンクから、定義済のオブジェクトリポジトリを含んだプロジェクトをダウンロードできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/9888cd5e-9d87-6e12-d843-1397d5d0107c.png)

:::note warn
上記のサンプルプロジェクトと、当記事の直接の関連はありません。
名前の付け方などは異なるのでご注意ください。
:::


## ■ デモサイトUiBankで想定するシナリオ

オブジェクトリポジトリを作成するにあたり、操作シナリオを特定し、対象の画面および画面遷移を特定する必要があります。

今回は、銀行へのローン申請をするシナリオを想定します。
入力する属性値に応じて、承認されれば利率と承認メッセージが表示され、否認されれば否認メッセージが表示されます。


① 右上のメニューから　「Products」 > 「Loans」 をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/89d8fd74-6e93-913a-44ce-6a78cfaa8ff3.png)

② 画面中央の 「Apply For A Loan」 をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/9527f8b6-6da4-c5f0-f984-84dfb3fd9ae7.png)

③ 表示された入力欄に入力し、「Submit Loan Application」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/69bd0a8c-4598-4854-a24e-51f06baf5f14.png)

④ 入力された内容に応じた結果が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/0d11d194-5610-7047-abc7-f534e162b098.png)

:::note
否認されるパターンは、極端な数値を入力するか、18歳未満で申請すると再現できます。
:::

以上から必要な画面数は４つほどであることが分かりました。

:::note
業務シナリオで応用する場合は、URLの変化なども追ってみましょう。見た目は違ってもURLが同じであれば、同じ画面の処理として扱います。
（下図のように、画面情報にはURLが含まれています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/10bebc06-7831-a1c8-8ee0-bfda41f0bcf5.png)
:::

# オブジェクトリポジトリを作成する手順です。

事前に対象のサイト https://uibank.uipath.com を開きます。

## ■ 要素を取得する手順

① UiPath Studioの右側のレコーディングボタン（要素をキャプチャ）をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/83da5ebf-4d91-34a2-cf88-31c6f882ecf8.png)

② 表示されたダイアログの「すべての要素をキャプチャ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/3cfbb269-717f-45c0-0e31-d49ff2234532.png)

:::note warn
業務アプリケーションを対象にする場合で…
「すべての要素をキャプチャ」だと対象の要素数が多すぎる場合や、特定の要素のみで良い場合は、**当記事内の "要素を作成する手順" の章の手順** で手動で要素を定義します。

※ UiBankサイトの場合は要素数は限られているため「すべての要素をキャプチャ」の手順で問題にならないはず…です。
:::

③ 起動中のアプリケーションから、対象のブラウザ画面を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/8fc6ec1d-78e6-0ec2-8c04-832b97bdaa4d.png)

通常のセレクターと同様に、画面の要素を認識した状態となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/65f951a2-5724-c353-3fd5-5dc34ad60f70.png)

④ 表示されているダイアログの「キャプチャ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/cacffc1f-0b69-1f42-e957-6a9febd0d181.png)

自動的に要素の取得が進み、結果が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/73ac91e3-f39b-8e77-3b8c-3f81be499648.png)

⑤ 保存ボタンをクリックします。
左のペインに取得された要素が表示されていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/ce971616-2aad-8815-e71b-9748fb90b1fa.png)


## ■ 要素を修正する手順

① オブジェクトリポジトリのメニューから対象の要素を選択し、右クリック「要素を編集」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/7d937012-947e-0fa4-6efc-ff1225043b77.png)

② セレクターを変更する場合、中央の「記述子を編集」をクリックします。
要素名の変更はこの画面でできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/d952c19b-6dca-c749-2ffc-078b28cea3a8.png)

③ 必要に応じてセレクターの内容を編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/5072ef9e-22c7-84a2-a01a-68962b192357.png)
（セレクターの編集方法は、通常のセレクターの扱い方と同じですので詳細は割愛します）


## ■ 要素を作成する手順

① オブジェクトリポジトリのメニューから**適当な箇所**で、右クリック「要素を作成」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/d03d561d-52d9-0fd8-5186-6c1e42f4b3f0.png)

:::note
選択した要素の下位構造として作成されますが、作成した要素は移動可能です。適当な場所に作成して構成を整理すれば良いです。
:::

② 適切な「要素名」を設定します。「要素を指定」からセレクターで対象の要素を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/9d454e15-02c6-17d5-eeda-d664ce6fedfa.png)

中央の「種類」は「ｘ」で削除すると変更可能ですが、こちらの設定は任意です。
管理の観点で、どこまで精緻に設定するかをご判断ください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/f07d09e6-286d-0444-359b-34577cdbbbaf.png)



#### 作成例

右上の「Loans」メニューを手動で追加した例です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/c346beea-bef0-af09-2241-0cd2f8eb6dcd.png)

要素名に「Loans」を入力し保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/de325ec1-4532-b3c0-4925-06ee609127d0.png)

作成後、マウスドラッグで構成を整理しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/9c51ddcb-0431-bb0a-61f7-e7e9b742333f.png)

## ■ 複数画面の定義

上記の手順で遷移後の画面も追加します。

① アプリケーションを右クリック、「画面を作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/23daa1fd-e600-e5f3-301c-22c65ec6579d.png)

② 適切な「画面名」を入力し、「画面を指定」で対象のブラウザを指定し「画面を作成」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/0871c0b0-3697-e654-bf54-e08aa8363602.png)

#### 作成例

下図のように定義し…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/a5b38e04-b78e-207e-d306-e6dcf8cd514d.png)

下図のようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/3aab955b-cdda-a301-0c52-e7a6b8c0235b.png)

:::note
### 新規作成時と同じ手順で作成しても、マウスドラッグで構成の整理が可能です。

新規作成時の手順で実施すると、下図のようになります。
画面名をリネームして、マウスドラッグすることで画面と要素のツリー構成を整えることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/775bbfe2-5def-02b8-c5c8-3e7764ec01fa.png)
:::

# …上記手順を繰り返し、各画面の要素を取得＆整理した例がこちらです。
画面の名前、要素の名前、画面のツリー構成などは、分かりやすく使いやすい状態であれば良いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/eb76182b-f8b3-4d13-05f7-1258e89c3d3b.png)


# オブジェクトリポジトリを部品として共有する手順です。

① 作成した定義の右端のマーク（**UIライブラリ プロジェクトとして抽出**）をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/fd82426c-479b-91bd-3f29-885f3b4b225c.png)

② 表示されたダイアログに適切な「名前」を付けて「作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/5ff4c077-2a98-8802-e06f-0ee19377c2ef.png)

③ 作成後に表示されるダイアログで「はい」をクリックします。⇒　作成されたプロジェクトが開きます。
（閉じても保存したファイルを指定して開くことができます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/65b966eb-986f-e238-384b-e4962813749d.png)

:::note
「UIライブラリ プロジェクトとして抽出」の手順で作成されたプロジェクトは「**ライブラリ**」（共通部品）です。

ライブラリについての詳細は公式ドキュメントを参照してください。
https://docs.uipath.com/ja/studio/standalone/2023.10/user-guide/about-libraries
:::

:::note warn
作成された時点の依存関係は、不要なものも含まれています。
「ライブラリ」（共通部品）であることを考慮し、不要な依存関係は「右クリック → 依存関係を削除」をしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/e3dfd82c-829a-1494-7e4b-469bf16e0e48.png)

オブジェクトリポジトリ（UIライブラリ）として利用するのみならば、最低限 必要なアクティビティは下図 **UiPath.UIAutomation.Activities** です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/778eb77b-bc23-bf5d-1e76-fdf317314168.png)

:::

④ 開かれたプロジェクトをパブリッシュします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/18390bf2-e99d-5c56-c608-09e5aaffd5f1.png)

:::note warn
ライブラリ（部品）の共有方法は組織の管理ルールに依存します。
共有方法は様々なパターンがありますが、一例としてOrchestratorにパブリッシュするケースをご紹介しました。
:::

以上の手順にて、ライブラリとして作成したオブジェクトリポジトリを利用することが可能になりました。

:::note
下図は**別のプロジェクト**から検索したキャプチャです。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/56508c9c-296b-907a-c76c-d89c771b7ba1.png)

取り込んだオブジェクトリポジトリは **「UIライブラリ」** 以下に追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/fd7ba8f0-f973-99a9-2a86-7f5bad6399d5.png)

:::note
UIライブラリは参照のみの定義です。
**自身のプロジェクト内で編集が必要** な場合は以下の操作をします。

アプリケーション定義を右クリック、**「UIオブジェクトに追加」** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/58c68dbf-156a-e89a-e55a-62af7b03b76b.png)
この操作により、定義が **「プロジェクトUI記述子」** に複製され編集可能になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/774ab370-a114-553c-caf8-4dd3b02faee9.png)
:::


# まとめ

UiPath Studioのオブジェクトリポジトリ関連の操作を、具体的なユースケースを通して一通り記載しました。
手順はこの限りではありませんが一例として、機能や使い方の参考になれば幸いです。