【UiPath Studio】新しくなったFormアクティビティを使って、子供向けに足し算アプリを作ってみた。（UiPath.Form.Activities v23.4系）

# はじめに
前回記事にて確認したとおり **UiPath.Form.Activities v23.4** ではアクティビティの内容が大きく変わっていたため、新しいFormアクティビティの使い方も確認してみます。

#### 何を作ろうかな…。

- 保育園に通う我が子（４歳）にプログラミングの面白さを伝えたいな。
- 自宅でも自動化っぽいことできないかな。
…そんなアイデアを融合してみることにしました。

上記のアイデア実現に向けて必要なことは **対話的な仕組みであることであろう** と考えました。
大人が使う分にはログ出力やメッセージボックスでも良いですが、子供にプログラミングの面白さは伝わりません。
**Formアクティビティ** はそんな役割にマッチしそうです。


:::note
当記事の内容は **UiPath Studio Community v23.4** と **UiPath.Form.Activities v23.4** で実行しています。
:::

#### 参考：　以前のバージョンの基本的な使い方や考え方は以下の記事に記載しています。

https://qiita.com/moripo/items/fc66a6d13c3cac3b1c52


# まずは結果から…こんなもの作ってみました。
前提として、 **足し算を覚えたくらいのレベルの我が子を対象** にしています。
足し算のルール(？)を理解しているか微妙な我が子向けに、**３＋２** のような表示を ●●●＋●● のような記号に置き換えて表現しています。

![formで計算.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/ab497e0d-2e69-2383-382d-352c671be957.gif)

#### 以降、アクティビティの配置など、概要レベルの設計についてご紹介します。

## Form以外の実装概要
- 変数の生成など細かいロジックの記述は意外と大変です。Excelの関数を使って  **RANDBETWEEN(0,9)**  のように問題となる数を生成しました。
- どの位置に正解を置くかもランダム値に任せています。

Excelはこんな感じで、いくつかの変数を列として用意しました。
行が出題の１問に対応する形です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/0ccf3d8c-090e-499d-c5bc-ffcaddb78653.png)
Excelには10行（10問）ほど用意しておいて、実行時に出題数を指定するようにしました。

## 設計
作成したプロジェクトをフローチャート風に表現すると下図のようなイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/450f587e-788b-832f-d9e9-ed724f3168f1.png)

今回の実装に使ったアクティビティは以下の３つです。
- **フォームを表示**
- **フォームの値を設定**
- **フォームの値を取得**

:::note
ifや繰り返しの実装は通常のワークフローの実装と同等なので説明を省略します。
Formアクティビティの使い方にフォーカスします。
:::


## 今回使用したFormのアクティビティの紹介
UiPath.Form.Activities v23.4で用意されているアクティビティはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/1ff3b4aa-c1f5-7f57-3901-794f9c2f0c36.png)
このうち３つのアクティビティを利用しました。

### フォームを表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/a2afe368-aa18-05b3-e2f5-6979f19618b9.png)

今回定義した **フォーム** は以下のような感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/a5f729bf-e216-a1b3-6b58-de32cf0b8a3e.png)

各コンポーネントは **編集** のメニューで詳細な設定を追加できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/7e956f4e-902e-bd28-212e-dd89af120219.png)

左下にボタン押下時のロジックを少し記述しています。
何番のボタンが押されたか、数字の値がいくつであったか、を保持するようにしました。
（いずれかの値があれば良いのですが、検証も兼ねての実装です…）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/0988866e-3783-c6f1-03d7-61751d1d34b7.png)
**？** をクリックすると、対象のボタンをクリックしたときに評価されるロジックであることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/54804775-bd83-5adb-41d9-eeede9b3a6c8.png)

:::note
ちなみに、「フォームを表示」で作成したform定義はuiformファイルとして見える状態になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/21809095-b79f-6faf-cdf6-fe532ba4ddfe.png)

uiformファイルの中身はJSON形式の記述になっていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/4d93681f-9858-0930-815a-74c5d4ee3e68.png)
:::

### フォームの値を設定
実装は以下のような感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/a4b19510-77bb-45dd-ace0-1f593c354d18.png)

引数（ディクショナリ内の～）の部分をクリックすると、フォームに渡す値の定義が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/1de3b8f1-9cec-2a48-b035-d7c314c7e308.png)

:::note
引数のキーはフォーム内に定義した値です。
:::


### フォームの値を取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/4e1e82ec-06c9-adfd-9539-ea3d26aba220.png)

引数（ディクショナリ内の～）の部分をクリックすると、フォームから取得する値の定義が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/76356027-ef18-555c-b3ac-7902ef7aaf6c.png)


### 実装のポイントは以下。
- 「 **フォームを表示** 」の **ワークフローの実行を継続** を **オン** （デフォルトのまま）にしています。これによりフォーム画面の描画中もワークフロー処理は進んでいきます。
- 必要な処理のタイミングで「 **フォームの値を設定** 」でフォーム画面上の値を書き換えています。
- 繰り返しの中で、回答の選択（人手の入力）があったかを判断するフラグを用意し、「 **フォームの値を取得** 」で値を取得しています。

# まとめ

Formアクティビティの新旧の内容に差異があったので動作を確認してみました。
個人的な感想ですが、よりプログラミングに近い実装になって自由度は高まった分、実装や設計の緻密さを求められるように感じました。

今回は簡単な実装のみでしたが、もっと子供がわくわくするようなアイデアを考えてみたいと思います。
子供向け、ということを考えるとインタラクティブな仕組みが良いので、やはりFormアクティビティを活用することになりそうです。