ActiveReportsJSのAI機能を使ってテーブルやチャートを作成する

2026年11月11日(水)にリリースしたJavaScript帳票ライブラリ「ActiveReportsJS(アクティブレポートJS)」の最新版「V6.2J」では、レポートデザイナにAIを活用したレポート作成支援機能が追加されました。

この機能を利用すると、レポートで使用するデータセットのフィールドをもとに、TableやTablix、Chartの構成をAIに提案してもらうことができます。フィールドの配置に加えて、データに応じた集計方法やグループ化なども含めたレイアウトが生成されるため、データ領域を設定する際の作業を効率化できます。

本記事では、ActiveReportsJSでAI機能を利用するための設定方法と、実際にAI機能を使ってテーブルやチャートを作成する方法を紹介します。

AI機能を利用するための事前準備

ActiveReportsJSのAI機能を利用するには、AIサービスの準備とレポートデザイナの設定が必要です。

AIサービス(言語モデルAPI)の準備

ActiveReportsJSのAI機能では、以下のAIサービス(言語モデルAPI)を利用できます。

  • OpenAI
  • Azure OpenAI
  • Google Gemini
  • Ollama(ローカル環境)

利用するAIサービスに応じて、APIキーやモデルなど、接続に必要な情報をあらかじめ準備しておきます。

本記事では、Azure OpenAIの「gpt-6-luna」モデルを使用して設定を行います。

ActiveReportsJSのレポートデザイナに設定ファイルを追加する

次に、ActiveReportsJSのレポートデザイナでAI機能を利用するための設定ファイルを追加します。

AI機能はデフォルトでは無効になっているため、ai-config.jsonを作成し、使用しているOSに応じて所定のフォルダに配置します。

OS 配置先
Windows %AppData%\ActiveReportsJS Designer
macOS ~/Library/Application Support/ActiveReportsJS Designer

今回はAzure OpenAIを使用するため、ai-config.jsonにAPIキー、モデル、エンドポイント、デプロイ名などの情報を設定します。

{
  "Provider": "AzureOpenAI",
  "ApiKey": "*****",
  "Model": "gpt-6-luna",
  "Endpoint": "https://*****.services.ai.azure.com/",
  "DeploymentName": "gpt-6-luna",
  "Timeout": "90000"
}

Timeoutには、AIサービスへのリクエストのタイムアウト時間をミリ秒単位で設定できます。デフォルトは90000(90秒)です。

メモ

AIサービスに送信されるのは、データセットのフィールド名やデータ型などの構造に関する情報のみです。実際のデータ(レコード)は送信されません。

本記事ではAzure OpenAIを使用した設定方法を紹介しています。OpenAI、Google Gemini、Ollamaを利用する場合の設定方法については、以下のヘルプをご確認ください。

AI機能を使ってテーブルやチャートを作成する

事前準備が完了したら、AI機能を使って実際にテーブルやチャートを作成してみましょう。今回は、サンプルの売上データを使用して、AIがデータセットのフィールドからどのようなTable、Tablix、Chartを提案するのかを確認します。

売上データを設定する

AI機能を試すため、はじめにレポートデザイナで使用するデータを設定します。

今回は、受注日、地域、商品カテゴリ、商品名、数量、単価、売上金額、原価、利益を持つサンプルの売上データを使用します。

フィールド名 データ型 内容
OrderDateDateTime受注日
RegionString地域
CategoryString商品カテゴリ
ProductNameString商品名
QuantityNumber数量
UnitPriceNumber単価
SalesAmountNumber売上金額
CostNumber原価
ProfitNumber利益

レポートデザイナを起動し、データソースとデータセットを追加して、上記の売上データを設定します。

まず、レポートデザイナの[データ]タブからデータソースを追加します。

今回はJSON形式のサンプルデータを使用するため、データソースの種類に「JSON」、形式に「埋め込み」を選択し、用意した売上データを設定します。

データソースの設定

続いて、作成したデータソースにデータセットを追加します。JSONパスに $.* を設定し、売上データの各フィールドが取得されていることを確認して保存します。

データセットの設定

以上で、AI機能で使用する売上データの設定は完了です。続いて、このデータセットを使ってTableを作成していきます。

AI機能でTableを作成する

それでは、設定した売上データを使用してTableを作成してみましょう。

データセットからTableの作成に使用するフィールドを選択し、[データ分析(AI機能)]アイコンをクリックします。今回は、OrderDate、Region、Category、ProductName、Quantity、SalesAmountの6つのフィールドを選択します。

AI機能で使用するフィールドの選択

AI機能を実行すると、選択したフィールドの名前やデータ型をもとに、AIが生成した複数のTableレイアウトが表示されます。

AIが提案したTableレイアウト

提案されるレイアウトでは、フィールドの配置に加えて、グループ化や集計方法なども考慮されます。今回は、提案されたレイアウトの中から「地域ごとに受注日、カテゴリ、商品を並べ、数量と売上金額の合計を確認する表です。」を選択します。

選択したTableレイアウト

作成されたTableをプレビューすると、以下のように地域ごとに売上データがグループ化され、数量と売上金額の合計が表示されます。

AI機能で作成したTable

AI機能でTablixを作成する

続いて、AI機能を使ってTablixを作成してみましょう。

データセットからTablixの作成に使用するフィールドを選択し、AI機能を実行します。

今回は、Region、Category、ProductName、Quantity、SalesAmountの5つのフィールドを選択します。

tablix向けにフィールドを選択

AI機能を実行すると、選択したフィールドをもとに、複数のTablixレイアウトが提案されます。

今回は、提案されたレイアウトの中から「地域別・カテゴリ別の売上金額合計と数量合計」を選択して、レポートに追加します。

AIが提案したTablixレイアウト

選択したレイアウトでは、Regionを行グループ、Categoryを列グループとして、SalesAmountとQuantityが集計されるTablixが作成されます。

作成されたTablixをプレビューすると、地域と商品カテゴリごとに売上金額と数量を集計した結果が表示されます。

Tablixのプレビュー

AI機能でChartを作成する

最後に、AI機能を使ってChartを作成してみましょう。

データセットからChartの作成に使用するフィールドを選択し、AI機能を実行します。今回は、Region、Category、Quantity、SalesAmountの4つのフィールドを選択します。

AI機能を実行すると、選択したフィールドをもとに、グラフの種類やカテゴリ、系列、集計方法などを組み合わせた複数のChartレイアウトが提案されます。

今回は、提案されたレイアウトの中から、カテゴリを横軸、地域を系列として、売上金額を比較する縦棒グラフを選択して、レポートに追加します。

AIが提案したChartレイアウト

作成されたChartをプレビューすると、商品カテゴリごとの売上金額を地域別に比較できます。

Chartのプレビュー

AI機能はどのようにレイアウトを提案するのか

ActiveReportsJSのAI機能では、選択したデータセットのフィールド名やデータ型などの情報を言語モデルに渡し、その内容から各フィールドの役割や組み合わせを判断して、レポートに適したレイアウトを提案します。

たとえば今回使用した売上データでは、RegionやCategoryなどをグループ化に使用する項目、QuantityやSalesAmountなどを集計対象となる数値項目として捉え、それらを組み合わせたレイアウトが提案されます。

また、単にフィールドを配置するだけではなく、Tableではグループ化や合計、平均などの集計方法、Tablixでは行・列のグループと集計値、Chartではグラフの種類やカテゴリ、系列、集計方法なども含めてAIが構成を検討します。

そのため、同じデータセットを使用していても、AI機能を実行する際に選択するフィールドによって、提案されるレイアウトは変化します。作成したいレポートに必要なフィールドを選択してAI機能を実行することで、自分では思いつかなかったレイアウトも含め、複数の候補から用途に合った構成を選択できます。

注意

AI機能では生成AIを利用してレイアウトを提案するため、同じフィールドを選択して実行した場合でも、本記事の例とは異なるレイアウトやグラフの種類、集計方法などが提案される場合があります。

さいごに

本記事では、ActiveReportsJS V6.2Jで追加されたAI機能を使って、Table、Tablix、Chartを作成する方法を紹介しました。

AI機能を利用することで、データセットのフィールドをもとに、フィールドの配置やグループ化、集計方法、グラフの種類などを組み合わせた複数のレイアウトを提案してもらうことができます。レポートを一から設計する場合だけでなく、レイアウトを検討するときの選択肢としても活用できます。

ActiveReportsJS V6.2Jでは、今回ご紹介したAI機能をはじめ、多くの新機能の追加や機能改善を行っています。その他の新機能については、V6.2Jの新機能ページで詳しく紹介していますので、ぜひあわせてご覧ください。

ActiveReportsJSにはこの他にも日本の帳票開発のディープな要件に対応するための機能が多数搭載されていますので、ぜひWebサイトで詳しい情報をご覧ください。

Webサイトでは製品の機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

\  この記事をシェアする  /