この記事では、UE5 で VaRest プラグインを使用して JSON ファイルを読み込み、データを無限スクロールのリストに表示する方法を示します。VaRest は強力なオープンソースプラグインで、UE5 での HTTP リクエストと JSON データ処理を簡単かつ直感的に行うことができます。
VaRest プラグインのインストールと有効化#
まず、Unreal MarketplaceでVaRestキーワードを検索し、プラグインを見つけて「無料ボタン」をクリックします。その後、ライブラリに切り替え、ライブラリから VaRest を必要なプロジェクトエンジンにインストールします。
最後に、エンジン内でこのプラグインの使用を有効にするために、メニューバーで編集 -- プラグイン -- 検索して VaRest にチェックを入れる -- エンジンを再起動します。
Json ファイルの作成と無限リストの構築#
- Json オンラインエディタを使用して Json データをシミュレート
プロジェクトの Content ディレクトリ内に Data フォルダを新規作成し、Info.json という名前のテキストファイルを作成します。オンライン Json エディタでシミュレートしたデータを Info.json にコピー＆ペーストします。
- 無限リスト UI の構築
Json データを表示する UI を作成する必要があります。
まず、無限リストを表示する Item を作成します：WBP_StudentPanel という名前を付け、ListView コントロールを追加します。そのリスト記録バーの下で + ボタンをクリックして新しい EntryWidgetClass ブループリントクラスを作成し、単一の学生情報を表示するプレハブ UI を WBP_StudentItem という名前で作成します。以下の図のように：
ブループリントノードの接続#
データ構造の定義#
ここでは、データの解析と表示に使用する 2 つの基本データ構造を定義する必要があります。新しい構造体ブループリントを作成し、S_StudentInfo という名前を付け、以前の Json データに一致する 4 つの変数：name、number、height、weight を定義します。これらは Json データを解析した後に構築されるデータ構造体です。Object クラスを継承したブループリントクラスを新規作成し、O_StudentInfo という名前を付けます。先ほど定義した構造体 S_StudentInfo を使用して、データ構造体を表示するための変数を定義します。以下の図の 2 つの基本ブループリントクラス：
テストブループリントロジックの改善#
初期表示無限リスト UI#
カメラ制御のブループリントクラス内で、BeginPlay ノードを Create Widget ノードに接続し、Class ピンで WBP_StudentPanel を選択し、実行ピンを Add to Viewport に接続します。以下の図：
数字 0 キーを押して Json を解析し、リストに表示#
ここでは、VaRest プラグインが提供する API を使用しますので、その前に VaRest プラグインが有効になっていることを確認してください。
- Json を解析するブループリントロジック
まず、Load Json from File 関数を使用して Content ディレクトリ内の json ファイルを解析しますので、Path ピンには Data/Info.json を入力します。その後、Get Array Field メソッドを使用して data ノード下のデータを解析し、Student Data の Json データを構築します。以下の図：
次に for ループでこの Json 配列を反復処理し、各要素を個別に解析します。ここでは Get String Field メソッドを使用して name、number、height、weight を個別に解析し、S_StudentInfo を構築して StudentInfoList 配列に追加します。最後に、ParseStudentInfoCompleted というイベントディスパッチャーを定義し、解析が完了した後に StudentInfoList を渡します。以下の図：
- イベントディスパッチャー ParseStudentInfoCompleted をバインド
WBP_StudentPanel 内で、Event Construct からカメラコントローラーの参照を取得し、イベントディスパッチャーをバインドし、Create Event ノードを使用してイベントトリガー関数 ParseStudentInfoCompletedCallBack を作成します。
関数 ParseStudentInfoCompletedCallBack を改善：
変数 StudentInfos を定義し、タイプは O_StudentInfo です。渡された構造体配列を反復処理し、各要素を O_StudentInfo として構築します。Add item ノードを使用して StudentListView（ここは無限リスト ListView コントロールです）に追加し、完了後に ListView のアイテムを設定します。SetListItems を使用します（ここは非常に重要で、後続の更新インターフェースイベントをトリガーします）：
- データを単一のリスト要素に表示
ここでの重要なステップは、WBP_StudentItem ブループリントのクラス設定でインターフェース：User Object List Entryを実装することです。
その後、On List Item Object Set イベントを実装し、渡された Object オブジェクトを O_StudentInfo に変換し、構造体 S_StudentInfo の参照を取得し、最後に Text コンポーネントに値を設定します。
実行テスト結果#
Play をクリックして実行し、キーボードの数字キー 0 を押すと、無限リストが Json データを正常に表示します：
この ListView は大量のデータにとって非常に役立ちます。