close
Ag-gridスクリーンショット

Ag-gridスクリーンショット

Ag-gridスクリーンショット

Ag-gridスクリーンショット

AG Grid Enterprise は、Web アプリケーションで大量データを扱うために開発されたハイパフォーマンスな JavaScript データグリッドです。

AG-Grid Enterprise

商品コード:
10012028*120101~10012028*120302

-

メーカーへの確認が必要な製品です。見積依頼からお手続きください。

メーカー:
ag-Grid Ltd.
JANコード:
10002660
関連カテゴリ:
開発&プログラミング > 開発ツール

【ライセンス名×ライセンス種類】

Single Application Development License Multiple Application Development License Add on: Deployment License
新規 要見積 要見積 要見積
サポートメンテナンス更新 要見積 要見積 要見積

AG Grid Enterprise|高度なデータ操作・分析・可視化を実現するJavaScriptデータグリッド

AG Gridは、業務アプリケーションにおけるデータ表示、検索、編集、集計、分析、エクスポート、チャート表示を支えるJavaScriptソフトウェア製品群です。

一般的な表コンポーネントとは異なり、AG Grid Enterpriseでは、大量データの段階的な読み込み、行グループ化、ピボット、集計、Excelエクスポート、階層データ表示、詳細情報の展開、セル範囲の選択など、業務システムで求められる高度なデータ操作を実装できます。

さらに、数式から列を作成する計算列、集計値を全体比や差分として表示するShow Values As、データ構造から列定義を生成する列の自動生成により、元データを変更せずに分析しやすい画面を構築できます。

AG Charts Enterpriseを組み合わせることで、金融チャート、マップ、ゲージ、ズーム、注釈、同期チャートに加え、リモートデータの非同期読み込み、BigInt、ISO 8601形式の日付、CSS変数による配色、ラベル内への画像表示にも対応できます。

AG Gridの製品は、React、Angular、Vue、JavaScriptを使用する業務アプリケーション、SaaS製品、社内システム、管理画面、分析画面、業務ポータル、監視画面、顧客向けダッシュボードなどに適しています。

主な製品

  • AG Grid Enterprise
  • AG Charts Enterprise
  • Enterprise Bundle
  • AG Studio

AG Grid Enterpriseは、高度な表形式データ操作を実現する商用データグリッド製品です。大量データ、グループ化、ピボット、集計、計算列、Excelエクスポート、Master/Detailなどを必要とする業務画面に適しています。

AG Charts Enterpriseは、専門的なチャートタイプと高度な操作機能を備えたJavaScriptチャート製品です。金融チャート、マップ、ゲージ、ズーム、注釈、同期チャートなどを利用できます。

Enterprise Bundleは、AG Grid EnterpriseとAG Charts Enterpriseを組み合わせたライセンスです。高度なデータグリッド機能とエンタープライズ向けチャート機能を同じアプリケーションで利用する場合に適しています。

AG Studioは、JavaScriptアプリケーションにダッシュボードや組み込み分析機能を直接組み込むための製品です。グリッド、チャート、KPI、フィルター、ウィジェット、クロスフィルターなどを組み合わせた分析画面を構築できます。

AG Grid Enterprise

エンタープライズ向けJavaScriptデータグリッド

AG Grid Enterpriseは、業務アプリケーションに高度なデータ操作機能を組み込むための商用データグリッドです。

データを一覧表示するだけでなく、ユーザーが検索、並べ替え、編集、グループ化、集計、ピボット、計算、コピー、エクスポートを行うための作業画面として利用できます。

主な機能

  • Server-Side Row Model
  • 計算列(Calculated Columns)
  • 集計値の割合・差分表示(Show Values As)
  • 列定義の自動生成
  • Excelエクスポート
  • 行グループ化
  • ピボット
  • 集計
  • セル範囲選択とFill Handle
  • Master/Detail
  • Tree Data
  • 高度なフィルター
  • 高度なクリップボード操作
  • Tool Panelsとサイドバー
  • カスタムコンテキストメニュー
  • カスタムセル、ヘッダー、フィルター、エディター
  • 大量データ向けの仮想化とパフォーマンス機能
  • テーマ設定とレスポンシブ表示
  • キーボード操作とスクリーンリーダーへの配慮
  • LLM連携を支援するAI Toolkit

計算列(Calculated Columns)

計算列は、既存の列を参照する数式から新しい列を作成する機能です。元のデータソースを変更せずに、売上と原価から利益を算出したり、数量と単価から金額を計算したりできます。

数式には、関数、演算子、他の列への参照を使用できます。開発者が列定義としてあらかじめ設定できるほか、構成によってはユーザーが画面上の操作から計算列を作成できます。

作成した計算列は通常の列と同様に扱われ、並べ替え、フィルター、行グループ化、Tree Data、書式設定、セルコンポーネントなどの機能を適用できます。

主な利用例は以下の通りです。

  • 売上-原価による利益の算出
  • 利益÷売上による利益率の算出
  • 数量×単価による金額の算出
  • 予算-実績による差異の算出
  • 開始日時と終了日時から処理時間を算出
  • 複数の評価項目からスコアを算出

集計値の割合・差分表示(Show Values As)

Show Values Asは、集計値を単純な合計として表示するだけでなく、他の合計値に対する割合や差分として表示する機能です。

列合計、行合計、総合計、親グループの合計などを基準にして、値の構成比や差分を表示できます。元データを加工したり、画面ごとに個別の計算ロジックを作成したりせずに、集計結果を業務上分かりやすい形で表現できます。

主な利用例は以下の通りです。

  • 全社売上に対する部門別構成比
  • カテゴリ合計に対する製品別構成比
  • 行合計または列合計に対する割合
  • 親グループ合計との差分
  • 総合計に対する各拠点の寄与度

Show Values Asを採用する場合は、対象となるRow Modelや集計方法が要件に合うかを確認します。

列定義の自動生成

列定義の自動生成を利用すると、事前にすべての列を定義しなくても、渡された行データのキーから列を生成できます。

APIから返される項目が一定でない画面、データ構造を確認する調査画面、管理者向けの汎用ビュー、プロトタイプなど、動的または未知のデータ構造を扱う場面に適しています。

自動生成された列に共通の初期設定を適用し、必要な列だけを個別に調整する構成も可能です。

Server-Side Row Model

Server-Side Row Modelは、大量のレコードを扱うアプリケーションで、必要なデータをサーバーから段階的に取得しながら表示するための機能です。

すべてのデータをブラウザに読み込む方式と比較して、ブラウザ側のメモリ使用量を抑えやすく、データベースやAPI側の検索・集計機能を活用できます。

次のような処理に適しています。

  • サーバー側での並べ替え
  • サーバー側でのフィルター
  • サーバー側でのページング
  • サーバー側での行グループ化
  • サーバー側でのピボット
  • サーバー側での集計
  • スクロールや展開操作に応じたデータ取得

取引データ、顧客データ、在庫データ、監査ログ、運用ログ、請求明細、サポートチケットなど、大量データを扱う業務システムに有効です。

Excelエクスポート

AG Grid Enterpriseでは、グリッド上のデータをExcel形式で出力できます。業務報告、社内共有、監査、確認作業、二次分析など、Excelファイルが必要な業務フローに対応できます。

書式、数式、複数シート、画像、ハイパーリンク、行や列の設定など、要件に応じた出力を検討できます。

行グループ化、ピボット、集計

行グループ化、ピボット、集計を利用すると、一覧データを地域、部門、製品、期間、担当者などの単位でまとめ、さまざまな切り口から分析できます。

Tool Panelsを利用して、ユーザー自身が列をグループ、値、ピボットの領域へ移動し、表示内容を調整することもできます。

Master/DetailとTree Data

Master/Detailは、一覧行を展開して関連する詳細情報を同じ画面内に表示する機能です。注文と注文明細、顧客と取引履歴、請求と支払履歴などを、画面遷移を抑えながら確認できます。

Tree Dataは、組織、部品構成、フォルダー、カテゴリ、プロジェクトとタスクなどの階層データをツリー形式で表示するために利用できます。

セル範囲選択とクリップボード操作

セル範囲選択、コピー&ペースト、Fill Handleなどを利用することで、スプレッドシートに近い操作性を業務画面へ組み込めます。

複数セルの転記、一括入力、範囲のコピー、連続値の入力など、日常的に表形式データを扱うユーザーの作業効率向上に役立ちます。

高度なフィルター、Tool Panels、サイドバー

列ごとのフィルターに加えて、複数列を対象とした条件を組み立てる高度なフィルターを利用できます。

Tool Panelsやサイドバーを利用すると、列の表示切り替え、フィルター、グループ化、ピボットなどを画面上から調整できます。利用者ごとに必要な表示へ変更できる業務画面を構築しやすくなります。

AI Toolkit

AI Toolkitは、LLMとAG Gridを連携させ、自然言語によるグリッド操作を実装するための機能です。

利用するLLMやデータ共有の範囲はアプリケーション側で管理でき、自然言語の指示をフィルター、並べ替え、グループ化などのグリッド状態へ反映する構成を支援します。

  • 「未対応のチケットだけを表示」
  • 「地域別にグループ化して売上順に並べる」
  • 「遅延している注文を優先表示する」
  • 「部門別に集計する」

アクセシビリティ、テーマ、レスポンシブ表示

AG Grid Enterpriseは、キーボード操作、ARIA、スクリーンリーダーを考慮した画面設計に利用できます。固定列を含むグリッド内を移動する際も、列の位置関係を利用者へ伝えやすい設計が行われています。

テーマ設定、CSS変数、レイアウト調整を利用して、企業のデザインシステム、ライトモード、ダークモード、画面幅に合わせたUIを構築できます。

AG Charts Enterprise

高度な業務可視化に対応するJavaScriptチャート製品

AG Charts Enterpriseは、業務アプリケーションに専門的なチャートと高度なインタラクションを組み込むためのJavaScriptチャート製品です。

一般的な棒グラフ、折れ線グラフ、円グラフに加えて、金融、地理、統計、階層、フローなどのデータを可視化するチャートタイプを利用できます。

主な機能

  • 金融チャート
  • マップ
  • ゲージ
  • Box Plot、Waterfall、Treemap、Sunburst、Sankeyなどの高度なチャート
  • ズームとパン
  • ナビゲーター
  • クロスヘア
  • コンテキストメニュー
  • 注釈
  • 同期チャート
  • 非同期データ読み込み
  • 読み込み中のオーバーレイ表示
  • BigIntへの対応
  • ISO 8601形式の日付・日時への対応
  • ラベル、キャプションなどへの画像表示
  • CSS変数、HSL、色のミックスによる配色設定
  • レスポンシブ表示とテーマ設定
  • ローカライズ
  • イベントAPI
  • 画像エクスポート

リモートデータの非同期読み込み

非同期データ読み込みを利用すると、外部APIやページ分割されたデータソースから、必要な範囲のデータをオンデマンドで取得できます。

すべてのデータを最初に読み込むのではなく、ズーム、スクロール、表示範囲の変更など、ユーザーの操作に応じて必要なデータを取得できます。データの取得中は、読み込み状態を示すオーバーレイを表示できます。

次のような用途に適しています。

  • 長期間の取引データ
  • 大量の時系列データ
  • センサーやテレメトリーデータ
  • ログや監視データ
  • ページ分割された外部API
  • 表示範囲に応じて取得する分析データ

BigIntとISO 8601形式への対応

BigIntに対応しているため、JavaScriptの通常のNumber型では安全に表現しにくい大きな整数を扱う可視化に利用できます。

ISO 8601形式の日付・日時文字列を直接受け取れるため、APIから返された日時文字列をJavaScriptのDateオブジェクトへ変換する処理を減らせます。日時変換やタイムゾーン処理を複数箇所に実装することによるミスの抑制にも役立ちます。

ラベルやキャプション内への画像表示

軸ラベル、シリーズラベル、キャプションなど、テキスト要素を受け付ける場所に画像を組み込めます。

国旗、企業ロゴ、製品画像、担当者のアバター、ステータスアイコンなどを文字と組み合わせることで、データの意味を視覚的に伝えやすくなります。

CSS変数と柔軟な色設定

CSS変数、HSL形式、テーマパラメーターを利用した色のミックスに対応しています。

Webアプリケーションのデザインシステムと色設定を共有し、ライトモードとダークモードの切り替え、ブランドカラーの適用、状態に応じた色分けなどを行いやすくなります。

金融チャート

ローソク足、OHLCなどの金融チャートを利用して、価格変動や取引データを表示できます。

ズーム、クロスヘア、ナビゲーター、注釈などを組み合わせることで、市場データ、価格推移、取引履歴、リスク分析などの画面を構築できます。

マップ、ゲージ、高度なチャートタイプ

地域別実績、拠点情報、配送エリア、顧客分布などの地理データにはマップを、達成率や稼働率などのKPIにはゲージを利用できます。

さらに、Treemap、Sunburst、Sankey、Chord、Waterfall、Box Plot、Range Chartなどを利用して、階層、流れ、分布、変動幅を可視化できます。

ズーム、ナビゲーター、クロスヘア

大量の時系列データや高密度なグラフでは、表示範囲を移動しながら詳細を確認できることが重要です。

ズーム、パン、スクロールバー、ナビゲーター、クロスヘアを利用することで、長期間のデータから特定の期間や値を詳しく確認できます。

注釈と同期チャート

注釈を利用すると、重要な変化、障害、施策、取引ポイントなどをチャート上に記録できます。

同期チャートでは、複数のチャートの表示範囲や操作を連動させ、売上と利益、価格と出来高、稼働率と障害件数など、関連する指標を比較しやすくなります。

Enterprise Bundle

AG Grid EnterpriseとAG Charts Enterpriseを組み合わせたライセンス

Enterprise Bundleは、AG Grid EnterpriseとAG Charts Enterpriseの両方を利用する場合に適したライセンスです。

業務アプリケーションでは、グリッドで詳細データを確認し、同じデータをチャートで比較・分析する構成が多く利用されます。Enterprise Bundleにより、高度なデータ操作とエンタープライズ向け可視化を同じ製品ファミリー内で扱えます。

適しているケース

  • 高度なデータグリッドとチャートの両方が必要
  • グリッドからチャートを作成するIntegrated Chartsを高度に活用したい
  • 表で選択・集計したデータをチャートで確認したい
  • 金融チャート、マップ、ゲージなどをグリッドと組み合わせたい
  • 複数の業務アプリケーションでグリッドとチャートを標準化したい
  • SaaS製品に詳細分析と可視化を組み込みたい

利用イメージ

販売管理システムでは、AG Grid Enterpriseで受注データを検索、グループ化、集計し、AG Charts Enterpriseで売上推移、商品別構成、地域別実績を表示できます。

在庫管理システムでは、在庫一覧や出荷状況をグリッドで操作し、在庫推移、倉庫別負荷、遅延件数をチャートで確認できます。

AG Studio

JavaScriptアプリケーションへ直接組み込むダッシュボード・分析製品

AG Studioは、JavaScriptコンポーネントとしてアプリケーションへ直接組み込み、ダッシュボードやセルフサービス型の分析機能を提供するための製品です。

外部のBI画面をiframeで表示する方式とは異なり、既存アプリケーションの認証、データ、デザインシステム、インフラストラクチャーと統合しやすい構成を採用できます。

主な機能

  • ダッシュボード
  • AG GridとAG Chartsを利用したウィジェット
  • KPIウィジェット
  • フィルターとクロスフィルター
  • ドラッグ&ドロップによるレイアウト
  • 編集モードと表示モード
  • カスタムウィジェット
  • 事前設定済みウィジェット
  • 時間単位の集計とフィルター
  • フィールド名、説明、表示形式のカスタマイズ
  • 凡例によるグループ分け
  • テーマビルダー
  • キーボードショートカット
  • AIアシスタントとAIコマンドの拡張
  • アプリケーション内への組み込み

ダッシュボードとクロスフィルター

グリッド、チャート、KPI、フィルターなどを配置し、業務データを一つの画面で確認できます。

クロスフィルターを利用すると、一つのチャートやウィジェットで選択した条件を、他のグリッドやチャートへ反映できます。全体指標から詳細データまで連動して確認する分析画面を構築できます。

時間単位の集計とフィルター

日付・日時フィールドを、時間、日、週、月、四半期、年などの単位でまとめ、時系列分析に利用できます。

売上、申込、障害、アクセス、稼働状況などを期間単位で集計し、ダッシュボード上で切り替えながら確認できます。

事前設定済みウィジェットとカスタムウィジェット

開発者は、利用するフィールド、集計、並べ替え、表示形式などを設定済みのウィジェットを用意できます。利用者は一から設定することなく、業務目的に合ったウィジェットをダッシュボードへ追加できます。

独自のJavaScriptコンポーネントをカスタムウィジェットとして組み込み、AG Studioのデータ処理やクロスフィルターと連携させる構成も可能です。

フィールドカスタマイズとテーマビルダー

データベース上の項目名を、利用者に分かりやすい表示名へ変更し、説明や数値形式を設定できます。元のデータモデルを変更せずに、業務用語に合わせた分析画面を作成できます。

テーマビルダーでは、色、フォント、余白、境界線などを調整し、アプリケーションのデザインシステムに合わせたテーマを作成できます。

AI拡張

AG StudioのAI機能は、利用するLLMやインフラストラクチャーをアプリケーション側で管理できる構成を採用できます。

組み込みのAIコマンドを利用して、データの照会、ウィジェットのフィルター、配置変更などを、自社のLLM連携基盤へ組み込むことができます。

適しているケース

  • SaaS製品に分析機能を組み込みたい
  • 顧客向けポータルにダッシュボードを提供したい
  • 社内システムにセルフサービス型の分析画面を追加したい
  • 外部BIツールへ画面遷移せず、アプリケーション内で分析を完結したい
  • 認証、データ、デザインを既存アプリケーションと統合したい

製品ファミリーとしての強み

AG Gridの製品は、それぞれ単独で利用できるだけでなく、データグリッド、チャート、ダッシュボードを関連した製品群として組み合わせられます。

  • AG Grid Enterprise
    表形式データの検索、編集、計算、集計、ピボット、出力を実現
  • AG Charts Enterprise
    業務データを専門的なチャートで可視化
  • Enterprise Bundle
    高度なグリッド機能とチャート機能を一つのライセンスで利用
  • AG Studio
    ダッシュボードと組み込み分析機能をアプリケーション内に構築

これにより、データを「表示する」「操作する」「計算する」「集計する」「可視化する」「ダッシュボードで共有する」という流れを、同じ製品ファミリー内で設計しやすくなります。

複数のテーブル、チャート、ダッシュボードライブラリを個別に選定・統合する構成と比較して、UI、テーマ、操作性、保守方法の標準化を進めやすい点もメリットです。

導入メリット

1. 高度な業務画面を効率的に構築できる

フィルター、並べ替え、仮想スクロール、グループ化、ピボット、Excel出力、詳細展開などを個別に開発する負担を抑え、業務向けのデータ操作画面を構築できます。

2. 元データを変更せずに計算・分析できる

計算列を利用して、利益、利益率、金額、差異、スコアなどをグリッド上で算出できます。Show Values Asを利用すれば、集計値を全体比、親グループ比、差分などとして表示できます。

3. 大規模データに対応しやすい

Server-Side Row Modelを利用して、必要なデータをサーバーから段階的に取得できます。データベースやAPI側の検索・集計機能を活用しながら、大量レコードを扱う画面を設計できます。

4. 動的なデータ構造を表示しやすい

列の自動生成により、項目が固定されていないデータや、APIごとに構造が異なるデータを表示しやすくなります。

5. 業務ユーザーがデータを直接操作できる

ユーザー自身が列、フィルター、グループ、ピボット、集計条件を変更し、必要な表示へ調整できます。Excelへ出力する前に、Webアプリケーション内でデータを探索・分析できます。

6. 表とチャートを組み合わせた分析画面を構築できる

AG Charts Enterpriseを組み合わせることで、グリッドによる詳細確認とチャートによる傾向把握を同じ画面で実現できます。

7. リモートの大量データをチャート化しやすい

AG Chartsの非同期データ読み込みにより、ユーザーのズームやスクロールに応じて必要な範囲を取得できます。大量の時系列データや外部APIを利用する画面に有効です。

8. 複数フレームワークで標準化しやすい

React、Angular、Vue、JavaScriptに対応しているため、異なるフロントエンド技術を使用する複数のアプリケーションで、グリッドとチャートの標準化を進めやすくなります。

9. デザイン、アクセシビリティ、ローカライズに配慮できる

テーマ、CSS変数、キーボード操作、ARIA、ローカライズなどを考慮し、企業のデザイン標準や利用者の要件に合わせた画面を構築できます。

主な用途

1. 金融サービス・取引管理

  • 取引一覧とポジション管理
  • 市場データと価格推移
  • リスク管理と例外処理
  • 監査・コンプライアンス確認
  • ローソク足、OHLC、出来高などの金融チャート
  • BigIntを使用する高精度な数値データ

2. 製造・物流・サプライチェーン

  • 在庫一覧と在庫金額の計算
  • 出荷・配送状況
  • 遅延注文と例外データ
  • 倉庫別・拠点別の集計
  • 製造ラインや設備の時系列データ
  • サプライチェーンKPIのダッシュボード

3. SaaS管理コンソール

  • テナント、ユーザー、契約の管理
  • 利用状況と請求イベント
  • 監査ログとアクティビティ履歴
  • 権限設定とサポート対応履歴
  • 顧客向けの利用状況ダッシュボード

4. 販売・財務・経営管理

  • 売上、原価、利益、利益率の計算
  • 予算と実績の差異分析
  • 部門別、地域別、商品別の構成比
  • 請求、支払、経費データの確認
  • KPIと詳細明細を連携した管理画面

5. 監視・ログ・セキュリティ運用

  • 大量ログの検索とフィルター
  • アラート、イベント、インシデントの一覧
  • 時系列データの非同期読み込み
  • 重要度、部門、端末別の集計
  • 異常件数や傾向のチャート表示

6. 顧客向け組み込み分析

  • 顧客ポータル内のレポート
  • セルフサービス型ダッシュボード
  • 利用者によるフィルターとレイアウト変更
  • KPI、グリッド、チャートのクロスフィルター
  • 既存の認証・デザインと統合した分析機能

一般的な比較観点

1. ヘッドレス型テーブルライブラリとの違い

ヘッドレス型テーブルライブラリは、状態管理やロジックを提供し、UIを開発者が構築する方式です。独自UIを細かく設計できる一方、高度なフィルター、グループ化、ピボット、Excel出力、セル範囲操作などを追加するほど実装範囲が大きくなります。

AG Grid Enterpriseは、業務向けのUIと高度な機能を備えたデータグリッドとして利用できるため、複雑なデータ操作を短期間で実装したい場合に適しています。

2. UIコンポーネントスイートの簡易テーブルとの違い

簡易的な一覧表示であれば、UIコンポーネントスイートに含まれるテーブルで対応できる場合があります。

一方、大量データ、複雑なフィルター、ピボット、計算列、Excel出力、Master/Detail、Server-Side Row Modelなどが必要な場合は、専用データグリッドであるAG Grid Enterpriseが適しています。

3. 単体チャートライブラリとの違い

AG Charts Enterpriseは、単体のJavaScriptチャート製品として利用できるだけでなく、AG Grid Enterpriseと同じ製品ファミリーとして統合できます。

グリッドの選択データをチャート化する、集計結果を可視化する、表とチャートのテーマを統一するといった業務画面を設計しやすくなります。

4. 外部BIツールとの違い

外部BIツールは、組織横断の分析や独立したレポーティング環境に適しています。

AG Studioは、既存のJavaScriptアプリケーションに分析機能を直接組み込み、認証、データ、デザイン、操作フローをアプリケーションと統合したい場合に適しています。

実装時の検討ポイント

1. 必要な製品範囲

  • 高度な表形式データ操作が必要
    → AG Grid Enterprise
  • 高度なチャートや専門的な可視化が必要
    → AG Charts Enterprise
  • データグリッドとチャートの両方が必要
    → Enterprise Bundle
  • 組み込みダッシュボードやセルフサービス分析が必要
    → AG Studio

2. データ量とRow Model

データ件数、初回表示時間、更新頻度、フィルター方法、集計方法に応じて、Client-Side Row ModelまたはServer-Side Row Modelを選択します。

Show Values Asなど、一部の機能は対応するRow Modelや設定に条件があるため、必要な分析機能とデータ取得方式を合わせて確認します。

3. 計算を行う場所

計算列をグリッド内で実行するか、APIやデータベース側で計算するかを検討します。

表示用の計算やユーザーごとの試算には計算列が適しています。一方、監査対象となる確定値、非常に大きなデータセット、複雑な権限制御を伴う計算では、サーバー側処理との役割分担が重要です。

4. 動的スキーマと列管理

列の自動生成を使用する場合は、表示順、見出し名、データ型、フィルター、書式、非表示項目などをどこまで自動化するかを決めます。

5. チャートのデータ取得方式

大量の時系列データやページ分割されたAPIを利用する場合は、非同期データ読み込み、表示範囲、キャッシュ、エラー処理、読み込み中の表示を設計します。

6. フレームワークと既存システム

  • 使用中のReact、Angular、Vue、JavaScriptの構成
  • TypeScriptとビルド環境
  • 既存コンポーネントとの整合性
  • APIとデータモデル
  • 状態保存とユーザー設定
  • テスト方法とアップデート手順

7. テーマ、アクセシビリティ、ローカライズ

  • 企業のデザインシステム
  • ライトモードとダークモード
  • 画面幅とレスポンシブ表示
  • キーボード操作
  • スクリーンリーダー
  • 表示言語、日付、数値形式

8. セキュリティとCSP

  • Content Security Policy
  • nonceやスタイルの扱い
  • 依存パッケージの管理
  • 脆弱性対応と更新方針
  • AI連携時にLLMへ渡すデータの範囲
  • ユーザー権限とデータアクセス制御

9. ライセンス範囲

開発者数、利用するアプリケーション、展開環境、AG Grid EnterpriseとAG Charts Enterpriseの組み合わせなどに応じて、必要なライセンス範囲を確認します。

製品別の位置づけ

AG Grid Enterprise

適している要件:

  • 大量データを扱う業務アプリケーション
  • 計算列、集計、ピボット、構成比分析が必要
  • Excel出力やセル範囲操作が必要
  • Master/DetailやTree Dataが必要
  • サーバー側でデータを段階的に取得したい

AG Charts Enterprise

適している要件:

  • 金融チャート、マップ、ゲージが必要
  • ズーム、注釈、同期チャートが必要
  • 大量のリモートデータをオンデマンドで表示したい
  • BigIntやISO 8601形式のデータを扱いたい
  • ブランドに合わせて配色やラベルを細かく調整したい

Enterprise Bundle

適している要件:

  • AG Grid EnterpriseとAG Charts Enterpriseの両方を利用する
  • 表とチャートを同じ画面で連携させる
  • Integrated Chartsで高度なチャート機能を利用する
  • 複数アプリケーションでグリッドとチャートを標準化する

AG Studio

適している要件:

  • アプリケーション内にダッシュボードを組み込む
  • 利用者が自分で分析画面を構成する
  • KPI、グリッド、チャート、フィルターを統合する
  • 既存認証とデザインシステムを利用する
  • カスタムウィジェットやAI連携を組み込む

担当者別の確認ポイント

開発者・技術評価担当者

  • 必要なRow Modelとデータ取得方式
  • 計算列、Show Values As、列自動生成の適用範囲
  • カスタムセル、エディター、フィルターの実装方法
  • Excel出力の要件
  • React、Angular、Vue、JavaScriptとの統合
  • テーマ、状態保存、テスト、更新手順
  • チャートの非同期データ取得とエラー処理

情報システム・IT管理部門

  • 複数システムでの標準化
  • ライセンス対象と管理方法
  • CSPと依存パッケージ管理
  • アクセシビリティとローカライズ
  • 長期運用における保守体制
  • AI連携時のデータ管理

業務部門・導入判断者

  • 必要なデータを素早く検索できるか
  • ユーザー自身が計算、集計、構成比分析を行えるか
  • Excel出力やコピー&ペーストが業務に合うか
  • 表とチャートで傾向を確認できるか
  • ダッシュボードでKPIと詳細を連動できるか
  • 画面遷移や手作業を減らせるか

導入イメージ

1. 販売・利益分析画面

売上と原価の列から計算列で利益や利益率を算出し、行グループ化で地域、部門、商品カテゴリごとに集計します。Show Values Asを利用して、全体売上に対する構成比を表示できます。

AG Charts Enterpriseを組み合わせることで、売上推移、利益率、商品別構成をチャートで確認できます。

2. 物流・在庫管理システム

Server-Side Row Modelで大量の在庫・出荷データを取得し、拠点、商品、ステータスでフィルターします。計算列で在庫金額や遅延日数を算出し、Master/Detailで出荷明細を展開できます。

3. 時系列監視ダッシュボード

AG Charts Enterpriseの非同期データ読み込みを利用し、ズームやスクロールに応じてログ、センサー、テレメトリーデータを取得します。

グリッドにはアラートやイベントの詳細を表示し、チャートには件数、負荷、エラー率などの推移を表示できます。

4. SaaS管理画面

ユーザー、契約、利用状況、請求、監査ログをAG Grid Enterpriseで管理し、AG Studioで顧客別または社内向けの分析ダッシュボードを提供できます。

5. 顧客向け組み込み分析ポータル

既存の認証とデザインを利用し、AG Studioをアプリケーションへ直接組み込みます。利用者はKPI、グリッド、チャート、フィルターを使い、外部BI画面へ移動せずにデータを分析できます。

よくある質問

AG Grid Enterpriseとは何ですか?

AG Grid Enterpriseは、業務アプリケーションに高度なデータグリッド機能を組み込むための商用JavaScript製品です。大量データ、Server-Side Row Model、計算列、グループ化、ピボット、Excelエクスポートなどに対応します。

計算列とは何ですか?

他の列を参照する数式から新しい列を作成する機能です。元データを変更せずに、利益、利益率、金額、差異などを算出できます。

計算列でもフィルターや並べ替えを利用できますか?

はい。計算列は通常の列と同様に扱われ、並べ替え、フィルター、グループ化、書式設定などを適用できます。

Show Values Asとは何ですか?

集計値を列合計、行合計、総合計、親グループ合計などに対する割合や差分として表示する機能です。売上構成比や部門別寄与度などの分析に利用できます。

データから列を自動生成できますか?

はい。行データのキーをもとに列定義を自動生成できます。項目が固定されていないAPIデータや調査用画面などに適しています。

AG Grid Enterpriseは大量データに適していますか?

はい。Server-Side Row Modelを利用して、必要なデータをサーバーから段階的に取得できます。サーバー側の並べ替え、フィルター、グループ化、集計にも対応できます。

Excelエクスポートはできますか?

はい。Excel形式でデータを出力できます。業務レポート、社内共有、監査、確認作業などに利用できます。

React、Angular、Vue、JavaScriptで利用できますか?

はい。AG Grid EnterpriseとAG Charts Enterpriseは、React、Angular、Vue、JavaScript環境で利用できます。

AG Charts Enterpriseとは何ですか?

金融チャート、マップ、ゲージ、ズーム、注釈、同期チャートなどの高度な可視化機能を備えたJavaScriptチャート製品です。

チャートのデータを外部APIから段階的に読み込めますか?

はい。非同期データ読み込みを利用して、表示範囲やユーザー操作に応じて必要なデータを取得できます。読み込み中のオーバーレイ表示にも対応します。

ISO 8601形式の日付をそのまま利用できますか?

はい。ISO 8601形式の日付・日時文字列を直接扱えるため、APIから受け取った日時をDateオブジェクトへ変換する処理を減らせます。

BigIntをチャートで利用できますか?

はい。大きな整数や高精度な整数データを扱う可視化にBigIntを利用できます。

Enterprise Bundleはどのような場合に必要ですか?

AG Grid EnterpriseとAG Charts Enterpriseの両方を利用する場合や、Integrated Chartsでエンタープライズ向けチャート機能を利用する場合に適しています。

AG Studioとは何ですか?

JavaScriptアプリケーションにダッシュボードやセルフサービス型の分析機能を直接組み込むための製品です。グリッド、チャート、KPI、フィルター、ウィジェットを組み合わせられます。

AI Toolkitは特定のLLMに限定されますか?

特定のLLMに固定されず、アプリケーション側で選択したLLMや連携基盤と組み合わせる構成を採用できます。共有するデータや実行可能な操作もアプリケーション側で管理します。

デザインをカスタマイズできますか?

はい。テーマ、CSS変数、フォント、色、余白、行高などを調整できます。AG ChartsではCSS変数やHSLを利用した色設定、AG Studioではテーマビルダーも利用できます。

メーカーの製品サイト
https://www.ag-grid.com/

worldsoft のブログにも AG Grid に関する Q&A 等を掲載しています。ぜひ一度ご覧ください。↓↓

worldsoft blog AG Grid

【言語】英語