<p><img src="https://storage.googleapis.com/zenn-user-upload/fd59af65d45b-20230318.gif" alt loading="lazy" class="md-img"><br>
商品一覧をページ送りで実装する例です。<br>
下の方にいけば処理内容をコピペできます。</p>
<h2 id="%E5%95%86%E5%93%81%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E5%95%86%E5%93%81%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 商品データの作成</h2>
<p>Widgetに表示する商品データを作ります。<br>
その際に、構造体とDataTableを使います。</p>
<h3 id="1.datatabale%E7%94%A8%E3%81%AE%E6%A7%8B%E9%80%A0%E4%BD%93%E3%82%92%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#1.datatabale%E7%94%A8%E3%81%AE%E6%A7%8B%E9%80%A0%E4%BD%93%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 1.DataTabale用の構造体を作成</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/51602f75c96b-20230315.png" alt loading="lazy" class="md-img"><br>
<em>構造体名：S_Item</em></p>
<p>DataTable作成には構造体が必要です。<br>
まずは構造体を作ります。商品データ用の構造体です。<br>
サンプルなので、テキトーな構造体です。<br>
必要に応じて、値段や説明文、画像など追加するのもありかもしれません。</p>
<h3 id="2.datatabale%E3%82%92%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#2.datatabale%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 2.DataTabaleを作成</h3>
<p>先ほど作った構造体：「S_Item」を使ってDataTabaleを作成します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/774e774fdf62-20230315.png" alt loading="lazy" class="md-img"><br>
<em>DataTabale名：DT_Item</em></p>
<p>10個単位でページ送りしたいので、こんな感じの中身にしました。</p>
<h2 id="1%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%94%E3%81%A8%E3%81%AB%E5%95%86%E5%93%81%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E5%88%86%E3%81%91%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#1%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%94%E3%81%A8%E3%81%AB%E5%95%86%E5%93%81%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E5%88%86%E3%81%91%E3%81%99%E3%82%8B" aria-hidden="true"></a> 1ページごとに商品データをグループ分けする</h2>
<h3 id="%E6%A7%8B%E9%80%A0%E4%BD%93%E3%82%92%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E6%A7%8B%E9%80%A0%E4%BD%93%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 構造体を作成</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/bbdb86008741-20230315.png" alt loading="lazy" class="md-img"><br>
<em>構造体名：S_NameArray</em></p>
<p>中身はName型の配列です。この配列には、1ページ分の商品データを格納します。<br>
そして、この構造体を配列として使用することで、以下のような感じにしていこうと思います。</p>
<p>1ページ目(S_NameArray[0:トマト×10])<br>
2ページ目(S_NameArray[1:お肉×10])<br>
3ページ目(S_NameArray[2:にんじん×10])<br>
4ページ目(S_NameArray[3:どらやき×2])</p>
<h2 id="widgetbp%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#widgetbp%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> WidgetBPの作成</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/d143eecbbe5a-20230315.png" alt loading="lazy" class="md-img"><br>
<em>Widget名：W_Paging</em><br>
ページ送りするためのボタンと商品名を表示するためのテキストを用意しました。</p>
<h3 id="1.bp%E5%81%B4%E3%81%A7%E3%81%84%E3%81%98%E3%82%8C%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E5%A4%89%E6%95%B0%E3%82%92%E8%A1%A8%E7%A4%BA">
<a class="header-anchor-link" href="#1.bp%E5%81%B4%E3%81%A7%E3%81%84%E3%81%98%E3%82%8C%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E5%A4%89%E6%95%B0%E3%82%92%E8%A1%A8%E7%A4%BA" aria-hidden="true"></a> 1.BP側でいじれるように変数を表示</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/408a8e28634c-20230315.png" alt loading="lazy" class="md-img"><br>
<em>VerticalBox_ItemListを変数として表示させる</em></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/42dbca74f887-20230315.png" alt loading="lazy" class="md-img"><br>
<em>Widgetが変数として表示されているのを確認</em></p>
<p>これでBPから「VerticalBox_ItemList」を触れるようになりました。<br>
これをする理由としては、「VerticalBox_ItemList」経由でテキスト一覧を取得するためです。</p>
<h3 id="2.%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A%EF%BC%9A%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E7%94%A8%E6%84%8F">
<a class="header-anchor-link" href="#2.%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A%EF%BC%9A%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E7%94%A8%E6%84%8F" aria-hidden="true"></a> 2.ボタンの設定：クリックイベントを用意</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/11c69bd34346-20230315.png" alt loading="lazy" class="md-img"><br>
次ページへ、前ページへとページ更新させるために、クリックイベントを用意します。</p>
<h3 id="3.%E5%A4%89%E6%95%B0%E3%82%92%E7%94%A8%E6%84%8F">
<a class="header-anchor-link" href="#3.%E5%A4%89%E6%95%B0%E3%82%92%E7%94%A8%E6%84%8F" aria-hidden="true"></a> 3.変数を用意</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/7175c293d4ed-20230318.png" alt loading="lazy" class="md-img"><br>
新たに変数を用意します。</p>
<h4 id="%E5%A4%89%E6%95%B0%E3%81%AE%E8%AA%AC%E6%98%8E">
<a class="header-anchor-link" href="#%E5%A4%89%E6%95%B0%E3%81%AE%E8%AA%AC%E6%98%8E" aria-hidden="true"></a> 変数の説明</h4>
<ul>
<li>
<strong>変数名：ItemList/型：Widget</strong><br>
<img src="https://storage.googleapis.com/zenn-user-upload/a939539c4335-20230318.png" alt loading="lazy" class="md-img">
</li>
</ul>
<p>「ItemList」は「VerticalBox_ItemList」内にあるテキスト一覧を格納するためのものです。</p>
<ul>
<li>
<strong>変数名：PageItems/型：S_NameArray</strong><br>
<img src="https://storage.googleapis.com/zenn-user-upload/6adc6fcb9099-20230318.png" alt loading="lazy" class="md-img">
</li>
</ul>
<p><a href="#1%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%94%E3%81%A8%E3%81%AB%E5%95%86%E5%93%81%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E5%88%86%E3%81%91%E3%81%99%E3%82%8B">ここ</a>で作った構造体の配列です。<br>
1ページごとの商品データを格納しています。</p>
<ul>
<li>
<strong>変数名：RowNames/型：Name</strong><br>
<img src="https://storage.googleapis.com/zenn-user-upload/c70855f59327-20230318.png" alt loading="lazy" class="md-img">
</li>
</ul>
<p>「変数：PageItems」に値を格納するための一時的な変数です。<br>
1ページ分の商品データだけを扱います。</p>
<ul>
<li>
<strong>変数名：PageIndex/型：Integer</strong><br>
<img src="https://storage.googleapis.com/zenn-user-upload/0cc754455dfc-20230318.png" alt loading="lazy" class="md-img">
</li>
</ul>
<p>現在が何ページ目かを把握するために、必要な変数です。<br>
この変数を使うことで、ページごとの商品一覧を取得することが可能です。</p>
<h3 id="4.%E3%81%82%E3%81%A8%E3%81%AF%E5%87%A6%E7%90%86%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%A0%E3%81%91%EF%BC%81">
<a class="header-anchor-link" href="#4.%E3%81%82%E3%81%A8%E3%81%AF%E5%87%A6%E7%90%86%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%A0%E3%81%91%EF%BC%81" aria-hidden="true"></a> 4.あとは処理を書くだけ！</h3>
<p>こちらをFullScreenで見ていただくと処理の流れを把握しやすいかと思います。<br>
コピペして、ご自身の環境で動かしてみるのも良いかもしれません。<br>
処理についてはコメントで補足していますので、そちらも見ていただけたらと思います。</p>
<span class="embed-block embed-blueprintue"><iframe src="https://blueprintue.com/render/ji4w2ibu/" width="100%" style="aspect-ratio:16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe></span>
<h3 id="%E4%B8%80%E5%BF%9C%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E8%AA%AC%E6%98%8E%E3%82%82%E3%81%AE%E3%81%9B%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#%E4%B8%80%E5%BF%9C%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E8%AA%AC%E6%98%8E%E3%82%82%E3%81%AE%E3%81%9B%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%BE%E3%81%99" aria-hidden="true"></a> 一応イベントの説明ものせておきます</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/3af812858a82-20230318.png" alt loading="lazy" class="md-img"></p>


【UE5/Widget】ページ送りのサンプル

1ページごとに商品データをグループ分けする

1.BP側でいじれるように変数を表示

2.ボタンの設定：クリックイベントを用意

一応イベントの説明ものせておきます

Discussion