【UE5】UMG ViewModelプラグインを使ってListViewに文字列のリストを表示する

## はじめに
UMG ViewModel(MVVM)プラグインで、単体テキストや体力バーの表示は紹介されていたのですが、リストビューへの反映の手順が見当たらなかったので調べました。

## 公式ドキュメント
https://dev.epicgames.com/documentation/ja-jp/unreal-engine/umg-viewmodel?application_version=5.2

## 導入
Edit > Plugins から UMG ViewModelを有効にする（要再起動）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/c660169c-81f8-4cc0-a293-f24f48ff2b90.png)

## やりたいこと
- ViewModelの仕組みを使って `ListView` に文字列のリストを表示する

## 構成

| 名前 | 種類 | 親クラス | 内容 |
|------|------|----------|------|
| `VM_TextEntry` | ViewModel | `MVVMViewModelBase` | 各行の表示テキストを保持 |
| `VM_TextList` | ViewModel | `MVVMViewModelBase` | 複数の EntryViewModel を保持 |
| `WBP_TextEntry` | ウィジェット | `UserWidget` + **`UserObjectListEntry`** | テキスト1行の UI |
| `WBP_MainView` | ウィジェット | `UserWidget` | `ListView` を配置するメイン UI |

## 手順

### (1)各行のViewModelの作成（行ごとのテキストを表示）

1. Blueprint クラス作成：親 = `MVVMViewModelBase`  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/0e8b03c5-a749-4cca-b4d2-f53d4e1375fa.png)
　名前：`VM_TextEntry`
1. 変数を追加  
　名前：`Text` / 型：`Text`  
 　Field Notify（ベルのアイコン）にチェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/abcecd7f-589a-4c2f-9417-6ef38f418ef0.png)

### (2)メインViewModelの作成（テキストのリスト）

1. Blueprint クラス作成：親 = `MVVMViewModelBase`  
　名前：`VM_TextList`
2. 変数を追加  
　名前：`TextEntries` / 型：`VM_TextEntryの配列`  
 　Field Notify（ベルのアイコン）にチェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/2622d4ed-57b7-414e-8ffe-7725e53b4791.png)

### (3)Entryウィジェットの作成と設定：`WBP_TextEntry`

#### A. 作成
1. Blueprint Class → `UserWidget` → 名前：`WBP_TextEntry`

#### B. インターフェース追加（ここ重要！）
1. クラス設定 → インターフェース → `UserObjectListEntry` を追加

#### C. UIデザイン
1. `TextBlock` を1つ追加（表示用）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/cd4d9605-129e-4724-b39f-1858be5b0a73.png)

#### D. MVVM Binding
1. `Bindings` → `TextBlock.Text` を ViewModel の `Text` にバインド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/d3ac2ce8-bbe8-4a59-bdad-a448d84ffc97.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/83bbf5b8-e306-4f68-b524-b8855fd9a9bb.png)

#### E. イベント実装（`OnListItemObjectSet`）
追加したインターフェースでViewModelを設定する
```
Event OnListItemObjectSet(InObject)
→ Cast to VM_TextEntry
→ Set ViewModel ノードで ViewModel を設定（MVVM用のViewModel変数へ）
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/d8ed74cd-ef22-41b7-befc-ea53a9fb93e7.png)

このステップが「ListView の表示行ごとに ViewModel をバインド」する要になります。

### (4)メインウィジェットの作成：`WBP_MainView`

1. Blueprint Class → `UserWidget` → 名前：`WBP_MainView`
2. UI に `ListView` を配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/423fe541-d4b7-4a54-957e-55d03f69a9f0.png)

#### A. MVVM Binding
- ViewModel を指定：`VM_TextList`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/b39a665b-03eb-46e9-a788-d51f55557772.png)

#### B. ListView 設定
- `Entry Widget Class`: `WBP_TextEntry`
- `Entry ViewModel Class`: `VM_TextEntry`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/ec7fa6a4-d619-465b-a22e-0624fa2b9a11.png)
- `Items` → バインド → ViewModel の `TextEntries`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/95d4bffa-62f8-4037-a2c8-b2246545de4e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/3d8f6a27-9900-4857-88a5-e5793962d159.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/fafef345-2898-47e3-91c6-bc6e3f4ff3fc.png)

#### C. Creation Typeの設定
`Creation Type` を `Create Instance` に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/a7e85d7f-a223-431e-8202-1f3df8b88e1b.png)

### 表示するテキストデータを追加
今回は WBP_MainView の `Event Construct` で行いました。

1. "Apple", "Orange", "Lemmon", "Banana", "Strawberry"のText Arrayを作成
1. それぞれ Construct Object from Class に VM_TextEntry を指定してViewModel を作成して配列に保存
1. VM_TextList の TextEntries に設定（SET w/ Broadcast）する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/3bc995e4-91a9-494c-982d-0305474c493f.png)

### リストビューを表示
今回は Level Blueprint に実装しました。
1. Level Blueprintを開く
1. Create Widget で WBP_MainView を作成
1. Add to Viewport で表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/2224f54a-fd2a-483b-be74-c761658236de.png)

### 実行
プレイするとリストビューにテキストが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123750/c6b6949c-06d0-4492-9a36-11e797fcc2b4.png)

## まとめ
使い勝手が良くなりそうなプラグインだと思って使い始めました。
リストビューを使った資料がなくて調べたのでまとめました。
参考になれば幸いです。

## 参考
https://qiita.com/HSKKOU/items/abc562a9decf7409322e
https://qiita.com/HSKKOU/items/e31e393cdac2309b4d1e
https://www.youtube.com/watch?v=1PNpRdVP_68&t=1737s&ab_channel=LifeEXE