AI/Gemini API/JavaScript/SpreadJS

SpreadJSのAIアシスタント機能でピボットテーブルの自動生成と分析を行う

by MESCIUS-dev

2026年3月26日にリリースされた「SpreadJS（スプレッドJS）」の最新バージョン「V19J」では、AIプラットフォームのAPIを利用する「AIアシスタント」を使用して、ピボットパネル上でピボットテーブルの自動生成やデータ分析を自然言語による指示で実施できるようになりました。

AIアシスタント機能によるピボットテーブルの生成

本機能の使用により、たとえば次のような操作を自然言語による指示やマウスクリックで実現できるので、ピボットテーブルに不慣れなユーザーでも高度なデータ分析が容易になります。

  • 「期間とカテゴリ別の売上推移」と入力するだけでピボットテーブルを自動生成
  • 「売上高の増加率が一番高い製品カテゴリは？」といった指示でデータを分析
  • ［AIの提案］ボタンのクリックでピボットテーブルのレイアウト推奨案を提示

本記事ではピボットパネルの「AIアシスタント」機能の特長や導入メリット、具体的な使用方法についてご紹介します。
※ AIアシスタント機能の使用には、あらかじめAIプラットフォームのAPIキーを準備・設定する必要があります。

ピボットパネルのAIアシスタントとは

SpreadJSのAIアシスタント機能は初回と前回の記事で紹介したAI関数と数式エディタパネル上での数式自動生成の機能に加えて、自然言語による指示でピボットテーブルを自動生成し、ピボットテーブルのデータを分析できる機能を提供します。

ピボットテーブルの自動生成

ピボットパネルに自然言語で要件を入力すると、その要件を満たすピボットレイアウトが自動的に生成され、それに対応したピボットテーブルがワークシート上に作成されます。以下は、ピボットレイアウトが自動生成される様子をキャプチャしたものです。

ピボットテーブルの分析

ピボットパネルの「インテリジェントデータ分析」パネルに質問を入力することで、ピボットテーブル上のデータを分析した結果とその解説が表示されます。

AIアシスタントの特長

SpreadJSのAIアシスタントには以下のような特長があります。

コンテキスト認識

SpreadJSのAIアシスタント機能は単にAIプラットフォームのAPIを呼び出すだけではなく、ワークシートのデータ（テーブル構造、名前付き範囲、セル内容など）を自動的に抽出、理解し、AIモデルに適切なコンテキスト（文脈情報）として渡します。これにより、AIはワークシートの実際の構造に基づいた精度の高い応答を生成できます。

AI機能を後付けできるプラガブルな設計

AI関数を含めたSpreadJSのAIアシスタント機能は、既存のSpreadJS環境に後付けで導入できる設計となっています。本機能はAIアドオンのモジュール参照を追加することで利用が可能となっており、参照方式は用途や開発環境に応じて以下から選択できます。

scriptタグによる参照
<script src="gc.spread.sheets.ai.x.x.x.min.js"></script>
ESモジュール（import）による参照
import '@mescius/spread-sheets-ai-addon';

いずれの方式でも、既存のSpreadJSアプリケーションの構成を大きく変更することなく、AI 機能を組み込むことが可能です。

注記：

本番環境でAIアシスタント機能を利用する場合は、APIキーの保護などセキュリティの観点から、AIサービスへのリクエストはサーバーを経由して送信する構成が推奨されます。これは一般的なAI連携と同様の構成であり、フロントエンド側の実装やUI構成を大きく作り替える必要はありません。

さまざまなAIプラットフォームと連携できる

AI関数を含めたSpreadJSのAIアシスタント機能は、OpenAI形式のAPIと互換性のあるリクエスト／レスポンス設計を採用しておりますが、異なるAIプラットフォームを使用する場合であっても、リクエストやレスポンス形式の差分を適切な形式に整合させるカスタムアダプターを独自で用意することで連携が実現可能となっています。

本記事後半では一例として「Gemini API」と連携する方法をご紹介します。

AIアシスタントのメリット

AIアシスタントを使ったピボットテーブル生成とデータ分析の機能には、次のような利点があります。

ピボットテーブルの知識がなくても自然言語でピボットテーブルを作成できる

ワークシート上に設定されたテーブルなどのコンテキストに基づいた単語（このサンプルでは「商品」や「売上高」）を用いて、ピボットテーブルの知識がなくても自然言語での指示でピボットテーブルを自動で生成できます。

ピボットテーブルのデータから目的とする情報を簡便に取得できる

自動生成されたピボットテーブルや既存のピボットテーブルに設定されているデータから、自然言語での指示によりデータを解析した結果とそれに関する解説を取得できます。

ピボットパネルのAIアシスタント機能を使ってみよう

ここからは実際にSpreadJSでAIアシスタントを使ってピボットテーブルを生成し、生成したピボットテーブルのデータを解析した結果とそれに関する解説を取得する方法について解説していきます。

事前準備

開発環境

この記事では以下の開発環境を使用します。

  • Visual Studio Code
  • Express 5.2.1
  • dotenv 17.4.2
  • Google Gen AI SDK 2.8.0
  • SpreadJS 19.0.6

Gemini APIのAPIキーの入手

このプロジェクトでは、AIプラットフォームとして無料でも利用できる「Gemini API」を使用します。Gemini APIについてはこちらの記事もご参考にしていただければと思います。

Gemini APIを使うために必要なAPIキーを入手するには、Gemini APIのページを開いて上部にある［APIキーを取得する］ボタンをクリックします。

APIキーを取得する
出典：Gemini API  |  Google AI for Developers（2026年6月8日閲覧）

続いて、表示された「APIキー」ページで右上の［APIキーを作成］ボタンをクリックすると、キーが発行されます。リンク表示になっているキー部分をクリックするとキーの内容を確認できます。

なお、Gemini APIにはレート制限があります。無料のキーにはかなり厳しい制限があるので、最初にレート制限を確認することをお勧めします。

SpreadJSでAI連携する仕組み

今回作成するプロジェクトは、下図のような構造になります。

SpreadJSでAI連携する仕組み

前述の通り、SpreadJSのAI機能はOpenAI形式のリクエストとレスポンスを処理するように設計されています。そのため、OpenAI以外のAIプラットフォームを利用する場合は、バックエンドでリクエストとレスポンスのフォーマットを変換する必要があります。

また、AIプラットフォームを利用するには何らかの方法でAPIキー（認証情報）を設定する必要がありますが、こちらも前述の通り、セキュアな構成にするために、バックエンドを経由することでAPIキーを秘匿することが推奨されています。

SpreadJSをAIプラットフォームと連携する方法やその際に注意すべき点については、ヘルプでも詳しく解説しているので、ぜひご一読ください。

プロジェクトのファイル構成

今回作成するプロジェクトのファイル構成は次のとおりです。バックエンドを構成するファイルはプロジェクトのルートに置き、フロントエンドを構成するものは「public」フォルダ内に配置します。

project/
├── server.js
├── package.json
├── .env
└── public/
    ├── index.html
    ├── css/
    ｜  ├── gc.spread.sheets.excel2013white.19.0.6.css
    ｜  └── styles.css
    └── scripts/
        ├── app.js
        ├── data.js
        ├── gc.spread.sheets.all.19.0.6.min.js
        ├── plugins/
        ｜  └── gc.spread.pivot.pivottables.19.0.6.min.js
        ｜  └── gc.spread.sheets.ai.19.0.6.min.js
        └── resources/
            └── gc.spread.sheets.resources.ja.19.0.6.min.js

バックエンドの作成

このプロジェクトでは、SpreadJSコントロールをバックエンドのサーバーを経由してGemini APIと連携します。

バックエンドを作成する具体的な手順などについては、初回の記事で詳しく解説しているのでそちらをご参照ください。

フロントエンドの作成

フロントエンドは次のように実装します。

プロジェクト直下に「public」フォルダを作成し、以下の4つのファイルを作成します。

index.htmlページ本体。ページの要素としてSpreadJSとピボットパネルを配置します
scripts/app.jsSpreadJSとピボットパネルを作成するコードを記載します
scripts/data.jsSpreadJSに表示するデータを記載します
css/styles.cssページ上の各要素のスタイル定義を記載します
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="scripts/gc.spread.sheets.all.19.0.6.min.js"></script>
  <script src="scripts/plugins/gc.spread.pivot.pivottables.19.0.6.min.js"></script>
  <script src="scripts/plugins/gc.spread.sheets.ai.19.0.6.min.js"></script>
  <script src="scripts/resources/gc.spread.sheets.resources.ja.19.0.6.min.js"></script>
  <link href="css/gc.spread.sheets.excel2013white.19.0.6.css" rel="stylesheet" />
  <link href="css/styles.css" rel="stylesheet" />
  <script src="scripts/app.js"></script>
  <script src="scripts/data.js"></script>
</head>

<body>
  <div class="main-panel">
    <div id="ss"></div>
    <div class="pivot-table-panel">
      <button id="test1" type="button">テスト用文字列１</button>
      <button id="test2" type="button">テスト用文字列２</button>
      <div id="panel"></div>
    </div>
  </div>
</body>

</html>

上記で参照しているSpreadJSのモジュールはnpmなどから入手する方法もありますが、今回は環境に直接SpreadJSのモジュールを配置していきます。あらかじめSpreadJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。CSSファイルは以下に記載のもの含め7種類あるのでお好みのテーマのものを選択してください。

  • scripts/gc.spread.sheets.all.19.0.6.min.js
  • scripts/plugins/gc.spread.pivot.pivottables.19.0.6.min.js
  • scripts/plugins/gc.spread.sheets.ai.19.0.6.min.js
  • scripts/resources/gc.spread.sheets.resources.ja.19.0.6.min.js
  • css/gc.spread.sheets.excel2013white.19.0.6.css

「app.js」では、SpreadJSの初期化処理や、バックエンドとの連携処理を行います。
※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。

// 名前空間のエイリアス名
const spreadNS = GC.Spread.Sheets;
const pivotdNS = GC.Spread.Pivot;

// ライセンスキーとカルチャの設定
// spreadNS.LicenseKey = 'ここにSpreadJSのライセンスキーを設定します';
GC.Spread.Common.CultureManager.culture("ja-jp");

document.addEventListener("DOMContentLoaded", () => {
  // SpreadJSの生成
  const spread = new spreadNS.Workbook("ss", { sheetCount: 2 });
  spread.options.allowDynamicArray = true;
  spread.options.tabStripRatio = 0.8;
  injectAI(spread);
  initSheet(spread);

  // クリップボードにテスト用文字列を設定
  document.getElementById("test1").addEventListener("click", (e) => {
    const test1 = "期間とカテゴリ別の売上推移";
    navigator.clipboard.writeText(test1);
  });

  document.getElementById("test2").addEventListener("click", (e) => {
    const test2 = "売上高の増加率が一番高い製品カテゴリは？";
    navigator.clipboard.writeText(test2);
  });
});

// ワークシートの初期化
const initSheet = (spread) => {
  // ワークシートの基本設定
  const sheet0 = spread.getSheet(0);
  sheet0.name("PivotLayout");
  sheet0.defaults.colWidth = 120;

  const sheet1 = spread.getSheet(1);
  sheet1.name("DataSource");
  sheet1.defaults.colWidth = 120;
  sheet1.getRange(-1, 3).formatter("#,##0");

  // テーブルの作成
  const table = sheet1.tables.addFromDataSource("table", 0, 0, data);
  table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);

  const pivotTable = sheet0.pivotTables.add(
    "pivotTable",
    "table",
    0,
    0,
    pivotdNS.PivotTableLayoutType.outline,
    pivotdNS.PivotTableThemes.light8
  );

  // ピボットパネルの作成
  const panel = new pivotdNS.PivotPanel(
    "pivotPanel",
    pivotTable,
    document.getElementById("panel")
  );
}

// AIリクエストをサーバーを経由してAIサービスに送信
const serverCallback = async (requestBody) => {
  const response = await fetch("/api/queryAI", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(requestBody),
  });
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response;
};

const injectAI = (spread) => {
  spread.injectAI(serverCallback);
}

上記のコードでは、SpreadJSのワークシート上にデータソース用のテーブルを作成し、自然言語によるピボットテーブル作成機能を備えたピボットパネルや動作確認時にテスト用文字列をクリップボードに設定するボタンも実装しています。ピボットパネルについては、以下の記事で解説していますので、そちらもご参考にしていただければと思います。

また、コードの最後の部分では、serverCallback関数式とWorkbookクラスのinjectAIメソッドを使ってバックエンドとやりとりを行っています。injectAIメソッドはSpreadJSのAI機能と外部AIサービスを接続するための重要なポイントとなっており、ここで指定したコールバック関数がAIリクエスト送信時に実行されます。

このコールバック関数では、SpreadJSから渡されたリクエストをそのままバックエンドに送信しており、AIサービスごとの差異はバックエンド側で吸収する設計にすることで、フロントエンドの実装をシンプルに保つことができます。

続いて「data.js」には次のようなデータを記述します。

// データの設定
const data = [
  { 対象期間: "2025年第1四半期", カテゴリ: 'PC本体', 商品: 'デスクトップPC', 売上高: 24000000 },
  { 対象期間: "2025年第1四半期", カテゴリ: 'PC本体', 商品: 'ラップトップPC', 売上高: 86400000 },
  { 対象期間: "2025年第1四半期", カテゴリ: '周辺機器', 商品: 'マウス', 売上高: 240000 },
  { 対象期間: "2025年第1四半期", カテゴリ: '周辺機器', 商品: 'キーボード', 売上高: 480000 },
  { 対象期間: "2025年第1四半期", カテゴリ: '周辺機器', 商品: 'プリンタ', 売上高: 5760000 },
  { 対象期間: "2025年第1四半期", カテゴリ: 'PCパーツ', 商品: 'SSD', 売上高: 7200000 },
  { 対象期間: "2025年第1四半期", カテゴリ: 'PCパーツ', 商品: 'HDD', 売上高: 7000000 },
  { 対象期間: "2025年第2四半期", カテゴリ: 'PC本体', 商品: 'デスクトップPC', 売上高: 20000000 },
  { 対象期間: "2025年第2四半期", カテゴリ: 'PC本体', 商品: 'ラップトップPC', 売上高: 62400000 },
  { 対象期間: "2025年第2四半期", カテゴリ: '周辺機器', 商品: 'マウス', 売上高: 120000 },
  { 対象期間: "2025年第2四半期", カテゴリ: '周辺機器', 商品: 'キーボード', 売上高: 360000 },
  { 対象期間: "2025年第2四半期", カテゴリ: '周辺機器', 商品: 'プリンタ', 売上高: 3420000 },
  { 対象期間: "2025年第2四半期", カテゴリ: 'PCパーツ', 商品: 'SSD', 売上高: 6500000 },
  { 対象期間: "2025年第2四半期", カテゴリ: 'PCパーツ', 商品: 'HDD', 売上高: 4200000 },
  { 対象期間: "2025年第3四半期", カテゴリ: 'PC本体', 商品: 'デスクトップPC', 売上高: 18000000 },
  { 対象期間: "2025年第3四半期", カテゴリ: 'PC本体', 商品: 'ラップトップPC', 売上高: 60000000 },
  { 対象期間: "2025年第3四半期", カテゴリ: '周辺機器', 商品: 'マウス', 売上高: 200000 },
  { 対象期間: "2025年第3四半期", カテゴリ: '周辺機器', 商品: 'キーボード', 売上高: 420000 },
  { 対象期間: "2025年第3四半期", カテゴリ: '周辺機器', 商品: 'プリンタ', 売上高: 3200000 },
  { 対象期間: "2025年第3四半期", カテゴリ: 'PCパーツ', 商品: 'SSD', 売上高: 5800000 },
  { 対象期間: "2025年第3四半期", カテゴリ: 'PCパーツ', 商品: 'HDD', 売上高: 3600000 },
  { 対象期間: "2025年第4四半期", カテゴリ: 'PC本体', 商品: 'デスクトップPC', 売上高: 21000000 },
  { 対象期間: "2025年第4四半期", カテゴリ: 'PC本体', 商品: 'ラップトップPC', 売上高: 82000000 },
  { 対象期間: "2025年第4四半期", カテゴリ: '周辺機器', 商品: 'マウス', 売上高: 210000 },
  { 対象期間: "2025年第4四半期", カテゴリ: '周辺機器', 商品: 'キーボード', 売上高: 420000 },
  { 対象期間: "2025年第4四半期", カテゴリ: '周辺機器', 商品: 'プリンタ', 売上高: 5100000 },
  { 対象期間: "2025年第4四半期", カテゴリ: 'PCパーツ', 商品: 'SSD', 売上高: 7500000 },
  { 対象期間: "2025年第4四半期", カテゴリ: 'PCパーツ', 商品: 'HDD', 売上高: 6800000 },
];

最後にSpreadJSとピボットパネルに関連するスタイルを「styles.css」に記述します。

/* メインパネルのスタイル */
.main-panel {
  border: 1px solid silver;
  display: flex;
  block-size: 600px;
  inline-size: 1188px;
  padding: 10px;
}

/* SpreadJSのスタイル */
#ss {
  border: 1px solid gray;
  flex: none;
  block-size: 600px;
  inline-size: 674px;
}

/* ピボットパネルに関連する要素のスタイル */
.pivot-table-panel {
  flex: none;
  block-size: 600px; 
  inline-size: 500px;
  margin-inline-start: 10px;
}

#panel {
  border: 1px solid gray;
  block-size: 570px; 
  margin-block-start: 4px; 
}

今回作成したサンプルは以下よりダウンロード可能です。実際に動かしながら動作を確認したい方はぜひご利用ください。

AIアシスタントの動作確認

以上ですべての準備が完了したので、以下のコマンドを実行してサーバーを起動します。

node server.js

ブラウザで「http://localhost:3000」にアクセスすると、次のようにSpreadJSが表示されます。

SpreadJSの表示

自然言語によるピボットテーブルの生成

次の手順でピボットテーブルを生成してみましょう。

  1. ピボットパネル内の右上にある［スマートピボットレイアウト生成］ボタンをクリックする
  2. 「スマートピボットレイアウト生成」領域がピボットパネルの下部に表示される
  3. ［テスト用文字列１］ボタンをクリックしてピボットテーブル生成用文字列をコピーする
  4. ピボットパネル上でCtrl+Vキーを押下してペーストする
  5. ピボットパネルの［要件をAIに送信］ボタンをクリックする
  6. ピボットパネル上でフィールドが配置され、ピボットテーブルが生成される

自然言語によるデータの分析

続いて次の手順を実行して、表示されているピボットテーブルから目的の情報を取得します。

  1. ［インテリジェントデータ分析］ボタンをクリックしてデータ分析用パネルを表示する
  2. ［テスト用文字列２］ボタンをクリックして分析を指示する文字列をコピーする
  3. ピボットパネル上でCtrl+Vキーを押下してペーストする
  4. ピボットパネルの［質問をAIに送信］ボタンをクリックする
  5. ピボットパネルに質問に対する回答が表示される

注記：

表示される説明の内容は、AIの生成結果に依存するため、動画の内容と異なる場合や、実行する度に変化することがあります。

AIによるレイアウト推奨案の提示とそれに基づいたピボットテーブルの自動生成

次の手順を実行すると、データ構造に適したピボットテーブルのレイアウト候補が自動的に提示され、項目を選択するとその内容に応じたピボットテーブルが自動生成されます。

  1. ピボットパネル内の右上にある［スマートピボットレイアウト生成］ボタンをクリックする
  2. ピボットパネル内の最下部の［AIの提案］ボタンをクリックする
  3. 表示された3件の項目から目的に近いものを選択する
  4. ピボットパネル上でフィールドが配置され、ピボットテーブルが生成される

なお、ヘルプの「AIアシスタント」の末尾にある「AI生成機能に関する注意」に記載しているように、AI生成結果には不正確な情報や不完全な表現、または誤解を招く内容が含まれる可能性があるので、ご留意ください。

今回作成したサンプルは以下よりダウンロード可能です。実際に動かしながら動作を確認したい方はぜひご利用ください。

さいごに

今回の記事では、SpreadJSのAIアシスタントを使ったピボットテーブルの生成と分析の特長や導入メリット、具体的な利用方法についてご紹介しました。ピボットパネルのAIアシスタントは特に以下のようなケースで効果を発揮します。

  • 業務システムに非エンジニアが多く関わる
  • ピボットテーブルの理解に課題がある
  • 高度な分析ロジックを簡単に扱いたい

業務システムへのAI活用に興味のある方はぜひお試しください。

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

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

＼  この記事をシェアする  ／