インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

トップ > App Builder > ついに登場！App Builderの新機能「ページング」で大規模データも快適に表示！
最終更新日

ついに登場！App Builderの新機能「ページング」で大規模データも快適に表示！

App Builder Web開発
Facebook Twitter Pocket Hatebu

こんにちは！ソリューションコンサルタントの田上です。

Webアプリ開発において、大量のデータを扱う際に不可欠なのが「ページング機能」です。データの量が増えるほど、全件表示ではパフォーマンスが低下し、ユーザー体験も悪化してしまいます。

そんな中、App Builder に「ページング機能」がついにリリースされました！

これにより、繰り返しData（API連携）を行うコンポーネントに対して、リモートページング対応のAPIがあれば、簡単にページングを設定できるようになりました。本記事では、App Builderの新機能「ページング」を活用し、大規模データを快適に表示する方法をご紹介します。

ページング機能の完成イメージ

今回の新機能を使うことで、以下のようなデータ一覧のページングが簡単に実装できます。ページごとにデータを取得し、必要な分だけ表示することで、動作の軽量化と高速なデータ取得を実現できます。

  • 5件表示
  • 10件表示
  • 15件表示
  • 25件表示
  • 50件表示
  • 100件表示
  • 500件表示

ページングの機能は今までなかった？

これまで、ページング機能は「Grid コンポーネント」でのみ利用可能でした。しかし、それ以外のコンポーネントではページングができず、多くの皆さまから「ECサイトなど商品の Card コンポーネントでもページングできないの？」といったご要望をいただいていました。

今回の新機能リリースにより、App Builder 上でのデザインの自由度がさらに向上し、ページングを含めた柔軟な UI 設計が可能になりました。さらに、コードの自動生成によって、デザインとコーディングの整合性を効率的に保つことができます。

下記の4つのコンポーネントがページング機能に対応しています。

  • Card (カード)
  • Column Layout (列レイアウト)
  • Row Layout (行レイアウト)
  • Absolute Layout (絶対レイアウト)

特に「Layout（Column, Row, Absolute）」には、様々なUIコンポーネントをドラッグ＆ドロップで配置できるため、ページングを実現したいデザインの自由度が大きく拡張されました。

Column Layout 上に Card, Rating, Check, Button などを配置したサンプル

ページング機能を有効化してみよう！

まず、Card コンポーネントを選択して設定変更します。初期設定はシンプルで「Data（繰り返し）＝ON」とし、「Paging＝ON」に設定するのみで、中央キャンバスに「ページング」のUIコンポーネントが出現します。

  • Data: 繰り返しONへ設定する
  • Paging: ページングONへ設定する

「Paging」をONへ有効化する

「Paging」をONへ有効化する

ページングのセットアップを実行しよう！

1. セットアップを実行する

次に、Paging の「セットアップを実行」する必要があります。ページネーションの戻り値を返すAPIを事前に連携しておく必要性がありますが、API登録済みであれば、セットアップを実行していくだけで簡単にページング設定が完了します。

セットアップを実行する

ページネーションをサポートするAPI例として、下記の戻り値を返すAPIである必要があります。今回は「pageSize（ページサイズ）」と「pageIndex（先頭行番号）」のみを指定して、実行します。

  • pageSize: ページサイズ
  • pageIndex: データを抽出する先頭行番号
  • orderBy: 並び替え
  • totalRecordsCount: 合計レコード数

1. データに接続

2. クエリパラメーターへのマップ

3. レコードの合計

4. 集計（変数の自動生成）

関連記事・ヘルプドキュメント

詳細なヘルプドキュメントはこちらです。

www.appbuilder.dev

完成したサンプルを動かしてみよう！

コチラから、完成したサンプルアプリケーションを動作確認していただけます。

  • App Builderへのログインが必要です。
  • App Builder無料トライアルに参加することでログイン可能です。

my.appbuilder.dev

App Builder でページングを始めよう！

このブログ記事では App Builder を活用して、Webアプリの「ページング」を構築する手順を詳しく解説しました。

App Builder はWebアプリケーションの開発プロセスを、効率的にサポートする強力なツールです。ページングを簡単に構築できることは、プロジェクトの開発スピードの向上と、大量データの表示スピード向上に役立つことが期待されます。

ぜひ、App Builder を活用してデザインからコード自動生成する世界を体験してみてください。すべてを体験するには、App Builder 無料トライアル にアクセスして最新バージョンを入手してください。

  • 「こんなことは実現できるの？」
  • 「どうやって実装すれば良いの？」

といった開発上の疑問にソリューションコンサルタントが直接お答えします。

ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。

無料トライアルのご案内

こちらからトライアルへご参加できます。

無料相談会のご案内

専門コンサルタントが直接ご質問にお答えし、貴社に最適な移行戦略をご提案します。

https://jp.infragistics.com/products/appbuilder