GeeLark InspectorでAndroid UI要素を調べる方法
GeeLark RPAで自動化フローを作るとき、多くのステップではアプリ内のボタン、入力欄、その他のUI要素を操作する必要があります。
ワークフロー実行時にRPAが正しい要素を見つけられるようにするには、まず要素の属性を確認し、適切な属性を使って要素セレクターを作成します。
この記事では、GeeLark InspectorでAndroid UI要素を調べ、属性を確認し、その属性をGeeLark RPAの要素セレクターに活用する方法を紹介します。
GeeLark Inspectorとは？
GeeLark Inspectorは、Androidアプリ内のUI要素を表示・分析するためのツールです。アプリのUI階層を確認でき、resource ID、text、class、content descriptionなどの要素属性をチェックできます。
GeeLark Inspectorを使うと、操作したい要素の重要な属性を素早く見つけ、その情報をもとに要素セレクターを設定できます。
GeeLark InspectorでAndroid UI要素を調べる方法
ここではTikTokを例に、GeeLark InspectorでAndroid UI要素を調べ、属性を確認し、その属性をGeeLark RPAの要素セレクターに使う流れを説明します。
GeeLark Inspectorを開いてUI要素を読み込む
GeeLark Inspectorは通常のWorkflow editorではなく、Flow Canvasで利用できます。
Custom tasksに移動します。既存のカスタムタスクがある場合は、編集したいタスクを選び、Edit flowをクリックします。
Workflow editorを開いている場合は、先にFlow Canvasへ切り替えます。
まだカスタムタスクを作成していない場合は、Create flowをクリックし、Create new flowを選びます。
Flow Canvasに入ったら、次の手順で進めます。
1. 右上のLayout Viewerをクリックします。
2. 自動化したいアプリが入っているクラウドスマホを選択します。
3. クラウドスマホが起動するのを待ち、アプリを開いて操作したい画面へ移動します。
4. GeeLark InspectorでRefresh UI nodesをクリックし、現在の画面のUI要素を読み込みます。
5. Layout scope analysisをクリックします。現在の画面上のUI要素が青い枠で表示されます。
青い枠が画面上のUI要素と合っていれば、必要な要素の確認を始められます。枠が表示されない、または現在のUIとずれている場合は、Refresh UI nodesをクリックしてからLayout scope analysisをもう一度実行してください。
GeeLark Inspectorを開く流れは、以下のデモでも確認できます。
例1：テキストで要素を調べる
TikTokには、画面上にテキストが表示されるUI要素が多くあります。たとえば、次のようなものです。
- テキスト：For You、Shop、Following
- テキストや数字付きのアイコン：Home、Friends、1.2M、1,875
要素に表示テキストがある場合、そのテキストで検索するのがGeeLark Inspectorで要素を見つける最も早い方法です。
たとえば、RPAワークフローのあるステップでFor Youをクリックする必要があるとします。
1. GeeLark Inspectorの検索バーにFor Youと入力します。画面に表示されている表記と大文字・小文字を合わせてください。
2. UIツリーで一致するUIノードを探します。すぐに見つからない場合は下へスクロールしてください。一致するノードはツリーの下の方にあることもよくあります。ノードを選択し、クラウドスマホ画面を確認します。
3. ハイライトされた枠がFor You要素と一致していることを確認します。
4. 下部のAttributeセクションを確認します。この要素には content-desc: For You があります。
これで、その要素に使える明確な属性がわかります。GeeLark Inspectorのcontent-descは、RPAのElement selectorではdescに対応します。
そのためClickステップでは、セレクターを desc → Equal → For You に設定します。
例2：アイコンだけのボタンを調べる
アプリには、テキストが表示されないUI要素もたくさんあります。たとえば、次のようなものです。
- 検索アイコン
- プロフィール画像
- いいねボタン
- コメントボタン
- 保存ボタン
- 投稿ボタン
この例では、猫の動画にあるLikeボタンを使います。猫がかわいすぎますね。
アイコンだけのボタンには表示テキストがないため、Layout scope analysisを使って要素を調べます。
1. Layout scope analysisをクリックします。アプリ画面上のUI要素が青い枠で表示されます。
2. Likeアイコンをクリックします。選択されたことを示す赤い枠が表示されます。
3. すると、Likeアイコンに対応するUIノードがUIツリー内でハイライトされます。
4. Attributeセクションを確認します。この例で使いやすい属性は次の2つです。
- class: android.widget.ImageView
- content-desc: Like
ヒント：スクロールしたり、別の画面を開いたり、アプリ内で別ページへ移動したりした場合は、先にRefresh UI nodesをクリックしてください。これにより、GeeLark Inspectorが現在の画面のUI要素を読み取っている状態にできます。
5. 属性値をクリックすると、クリップボードにコピーできます。
次にRPA editorへ戻り、先ほど見つけた2つの属性をClickアクションのElement selectorに追加します。
- class → Equal → android.widget.ImageView
- desc → Equal → Like
そのうえでAndを使って2つの条件を組み合わせます。これによりRPAは、1つの属性だけに頼らず、要素タイプと説明の両方でLikeボタンを識別できます。
例3：より安定したノードを見つける
最初に選択したノードが、要素を特定するうえで最適とは限りません。
TikTokのCommentsボタンは、そのわかりやすい例です。
まずLayout scope analysisをクリックし、次のように確認します。
1. Commentsアイコンをクリックすると、周囲に赤い枠が表示されます。
2. Commentsアイコンに対応するUIノードがUIツリー内でハイライトされます。
3. 属性を確認します。このノードには次の属性があります。
- resource-id: com.zhiliaoapp.musically:id/eb6
- class: android.widget.ImageView
これらの属性でも現時点では要素を識別できますが、あまり安定しない場合があります。多くのUI要素が同じandroid.widget.ImageViewクラスを共有することがあり、resource-idもアプリのアップデート後に変わる可能性があります。
そのため、最初のノードだけで判断しないことが大切です。
4. UIツリーを上にたどり、親ノードにより適した要素特定用のノードがないか確認します。
この例では、セレクターにより適した属性を持つButtonノードがあります。そのButtonノードをクリックします。
5. 左側のCommentsボタンを確認します。ボタン全体を囲む赤い枠が表示され、このButtonノードがCommentsボタン全体に対応していることがわかります。
6. このノードには次の属性があります。
- class: android.widget.Button
- content-desc: Read or add comments. 4,182 comments
このノードの方が適しています。属性の特徴がはっきりしているため、安定した要素セレクターを作りやすくなります。
Element selectorには、次の2つの条件を追加します。
- class → Equal → android.widget.Button
- desc → Contains → Read or add comments.
そしてAndで組み合わせます。
コメント数は動画ごとに変わりますが、Read or add commentsの部分は変わりません。そのため、ここではContainsの方が適しています。固定されている部分に一致させながら、Commentsボタンを見つけられるからです。
