【RPA】UiPathで湯婆婆を実装してみる（画像多め）


# はじめに

この投稿は、[[RPA] UiPath Friends 公式 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/uipathfriends)　1日目の投稿です。

- 12/01 から 12/25 までの記事はこちら ↓

https://qiita.com/advent-calendar/2020/uipathfriends

- 12/26 以降の増設カレンダーはこちら ↓

https://forum.uipath.com/t/topic/270873/4

増設カレンダーサマリ

| 日付 | ユーザ | タイトル |
|:-:|:-|:-|
|12/26 | HANACCHI | [UiPath：カスタムアクティビティを維持するのもつらいよ](https://qiita.com/HANACCHI/items/634898adbef707f91095)|
|12/27 | masaki_kumamoto | [UiPath Apps 開発の仕方 基本操作編](https://qiita.com/masaki_kumamoto/items/a726e1d1f700afd07df7)|
|12/28 | shimizu.y | [Note] [UiPath HyperHack応募のポイント](https://note.com/syohsuke/n/n374138237ff7)|
|12/29 | TetsujiEndo | [Note] [RPA品質を効率良く高めるテスト５か条](https://note.com/tetsuji_endo/n/nf9ae1c371345)|
|12/30 | ParkSetagaya | [RPAの上流工程を3段階に分け、勘所を考えた。](https://qiita.com/ParkSetagaya/items/9c0c06d684e35c2a472e)|

# 昨年までのカレンダー

UiPath関連の昨年までのカレンダーはこちら

https://qiita.com/advent-calendar/2018/uipath_ja

https://qiita.com/advent-calendar/2019/uipath_ja

# UiPath Friendsとは

UiPath Friendsは、UiPath ユーザー有志によって運営される非営利の公式ユーザーコミュニティです。詳細はこちら

https://uipath-friends.doorkeeper.jp/

# 内容

今日は、以前に書いた [【RPA】UiPathで湯婆婆を実装してみる](https://qiita.com/miya_g/items/127655d5d6df76233525)　の続きを書きます。
※ 12/01の0時過ぎに、アドカレ初日にエントリしてたことを思い出して、急いで書きました。 :sweat: 


# 湯婆婆とは

湯婆婆とは、ジブリ映画『千と千尋の神隠し』に登場するキャラクターで、主人公千尋を油屋という温泉旅館で雇う際に、名前を1文字だけ残して奪い、支配します。

前回の投稿で、UiPathで「ウィンドウを表示するだけ」というシンプルな実装をしたのですが、少し物足りないので、手を加えてみます。

# アイコン画像を表示したい

湯婆婆の写真付きでセリフを表示したら、それっぽく見えるかも？
と思って、以前に作成した下記のカスタムコンポーネントで、デスクトップ上にメッセージを表示します。

[Desktop Notification With Xaml](https://connect.uipath.com/ja/marketplace/components/agz47q5irq6skuct74k7zg)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/1b6809c0-323c-5cfb-d66c-3911ba5ca916.png)

（カスタムアクティビティ版もあるのですが、そっちはアイコン画像対応していないので、xaml版を使用）
湯婆婆のアイコンを載せて、表示するとこんな感じになりました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/d65544ab-0e80-3f17-33a7-3db267439464.png)


# 契約書に手書き入力したい

画像検索すると「湯婆婆が手に持った契約書の画像」が出てきました。
この画像を使って、手書き入力してOCRで認識させて名前を取りたいと思って、最初は「HTML5のCanvas使ってBase64で画像をGoogleVisionAPIにPostしよう」と思ったのですが、調べたところ、Windowsマシンには標準搭載の認識エンジンがあるらしい。ということで、下記の記事を参考にして、フォームアプリケーションを作りました。
　[Windowsフォームのインク機能①](http://blog.wdnet.jp/tech/archives/129)

画面を「契約書」っぽくアレンジして、こんな感じにしました。↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/228a423c-39ce-2894-8714-030185a4df5b.png)

手書き入力後に「認識」ボタン押下で識別された文字が表示され「OK」ボタンを押してサインを確定します。
このアプリをUiPathから起動して、認識した文字をテキスト取得すればOKなはず。


# 湯婆婆に名前を考えさせたい

これも [Desktop Notification With Xaml](https://connect.uipath.com/ja/marketplace/components/agz47q5irq6skuct74k7zg) を使います。進捗率を表示してループさせ、考えている風な演出で。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/44884614-c050-485a-0b31-078d8b1168aa.png)

# 通しで見てみる

こんな感じになりました。
![yubaba2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/83e7acb0-90b8-e0c4-1ca0-a37307377e28.gif)

ノートPCのタッチパッドに手で文字を書いてるのですが、すごく難しい。
そして字が汚い。かろうじて目視できるレベル。。。でも認識できた！（感動）

# ソースコード

Uipathのコードはこちら
　https://github.com/miyag/UiPath.Yubaba/tree/master/UipathWorkFlow
UiPathStudioで見ると、こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/a99dfa55-6f0f-2f79-ca3a-da201aade0b7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/9fff5d13-5803-a276-a3c7-1703d3e685f9.png)

手書きのフォームアプリはこちら
　https://github.com/miyag/UiPath.Yubaba/tree/master/FormApplication
VisualStudioで見ると、こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/5efe45ec-c064-f841-286b-abb4de153340.png)


# 終わりに

以上、終始、湯婆婆ネタになってしまいました。すいません。

今回使用した、[Desktop Notification With Xaml](https://connect.uipath.com/ja/marketplace/components/agz47q5irq6skuct74k7zg)　を使うと、処理の進行状況や進捗を視覚的に伝えることができます。ロゴ画像をアイコン表示をすると、視覚的なインパクトがあって、機械的な印象のRPAが大分フレンドリーになります。UiPathマーケットで公開していますので、良かったらダウンロードください。

最後までご覧いただき、ありがとうございました。