コンテンツへスキップ
製品ページに戻る

Umitake BI for kintone — 利用マニュアル

目次

  1. 概要
  2. 動作環境
  3. インストール手順
  4. 初回セットアップ
  5. データソースの設定
  6. グラフの作成
  7. ダッシュボードの作成・公開
  8. ダッシュボードの閲覧
  9. エクスポート(PNG / PDF / CSV / Excel)
  10. FAQ・トラブルシューティング

1. 概要

Umitake BI for kintone は、kintone 上で PowerBI のようにグラフ・ダッシュボードを作成・閲覧できるプラグインです。
データ取得・加工・グラフ描画はすべてブラウザ内で完結するため、追加のサーバーは不要です。

主な機能:

  • 複数 kintone アプリのデータを結合(JOIN)して分析
  • 複数アプリのデータを縦結合(Union)して1つのソースとして分析
  • 棒グラフ・折れ線グラフ・円グラフ・散布図・ヒートマップ・ピボットテーブル・KPI カードなど多彩なグラフ種別
  • 仮想テーブルによるデータ加工(列選択・計算列・行フィルター・重複除去)
  • スライサー(日付範囲・カテゴリ・数値範囲)によるインタラクティブなフィルタリング
  • ダッシュボード全体・個別グラフの PNG / PDF エクスポート
  • localStorage によるデータキャッシュ(TTL 設定可)

ユーザーロール:

ロールできること
管理者データソース定義・グラフ作成・ダッシュボード編集・公開
一般ユーザー公開済みダッシュボードの閲覧のみ

2. 動作環境

  • kintone(スタンダードコース以上を推奨)
  • 対応ブラウザ: Google Chrome(最新版)、Microsoft Edge(最新版)
  • JavaScript を有効にしてください

3. インストール手順

3.1 プラグインファイルの取得

配布された kintone-bi-tool.zip を用意します。

3.2 kintone へのアップロード

  1. kintone の「システム管理」→「プラグイン」を開く
  2. 「読み込む」をクリックし、kintone-bi-tool.zip をアップロード
  3. アップロードが完了するとプラグイン一覧に表示される

3.3 BIハブアプリの作成

  1. kintone のトップページで「+」→「アプリをはじめから作成」
  2. アプリ名を「BIハブ」(任意)として作成
  3. フィールドは追加不要(レコード一覧画面を置き換えて使用するため)
  4. アプリを公開する

3.4 カスタマイズビューの設定

ダッシュボードを表示するには、BIハブアプリにカスタマイズビューを設定する必要があります。

  1. BIハブアプリの「設定」→「一覧」を開く
  2. 「+」で新しい一覧を追加
  3. 「ビューの種類」を「カスタマイズビュー」に設定
  4. ビュー名を任意で入力(例: 「ダッシュボード」)
  5. 「HTML」欄に以下を入力する(必須):
    <div id="bi-viewer-placeholder"></div>
    
  6. 保存してアプリを更新する
  7. 作成したカスタマイズビューをデフォルトビューに設定する

3.5 プラグインのインストール

  1. BIハブアプリの「設定」→「プラグイン」を開く
  2. 「プラグインの追加」をクリック
  3. 一覧から「Umitake BI for kintone」を選択して追加
  4. アプリを更新する

4. 初回セットアップ

4.1 プラグイン設定画面を開く

  1. BIハブアプリの「設定」→「プラグイン」を開く
  2. 「Umitake BI for kintone」の「設定」をクリック

4.2 BI設定アプリの作成

プラグインを初めて設定する場合、BI設定アプリが存在しません。

  1. 「BI設定アプリを自動作成する」ボタンをクリック
  2. 自動的に kintone 上にBI設定アプリが作成されます
  3. 作成完了後、設定画面が表示されます

補足: BI設定アプリは、データソース・グラフ・ダッシュボードの定義を JSON として保存するための専用アプリです。手動での操作は不要です。


5. データソースの設定

設定画面の「データソース」タブで操作します。
データソース → JOIN / Union(縦結合)→ 仮想テーブルの順に設定するのが基本の流れです。


5.1 データソースの追加

kintone アプリ1つを「データソース」として登録します。

  1. 「+ データソースを追加」をクリック
  2. 名前を入力(例: 受注データ
  3. 「アプリを選択」でデータを取得する kintone アプリを選ぶ
  4. フィールド設定で使用するフィールドを選ぶ(下記参照)
  5. 必要に応じて kintone の絞り込み条件を入力(kintone クエリ書式)
    • 例: status = "完了" and order_date >= "2024-01-01"
  6. 「保存」をクリック

フィールド設定(左右2パネル)

パネル内容
左: 未選択フィールド取得しないフィールド。ラベル順に並びます
右: 選択済みフィールド(列順)取得するフィールド。上から順が表の列順になります
  • 左のチェックボックスをクリックすると右へ、右の × で左へ戻ります
  • すべて追加 → / ← すべて解除 で一括操作できます(検索で絞り込み中は、その結果だけが対象)
  • 上部の検索ボックスでフィールドを絞り込めます
  • 右パネルは行頭の ⋮⋮ をドラッグして並び替えられます。この順序が、フラット表やデータソースビューアーの列の並び順になります
  • レコードID ($id) も選択できます。JOIN キーやグラフの軸に使いたい場合は選択済みに入れてください

ポイント: グラフやフィルターに使わないフィールドは未選択のままにすると取得データが減り、パフォーマンスが向上します。

注意: JOIN の結合キーに使うフィールドは、表示に使わなくても必ず選択済みにしてください。選択されていないフィールドは kintone から取得されないため、結合キーが空とみなされ正しく結合できません。

サブテーブルの展開

kintone のサブテーブル(テーブル形式のフィールド)を含むアプリでは、フィールド設定の下に「サブテーブルを展開」の選択欄が現れます。

  • 展開するサブテーブルを1つだけ選べます。既定は「(展開しない)」
  • 展開すると、1レコードがサブテーブルの行数分の行に分解されます。親レコードの項目は各行に複製されます
  • 保存時に、そのサブテーブルの子フィールドが選択済みフィールドに自動追加されます
  • サブテーブル内のフィールドは、展開設定をしない限り値を取得できません。フィールド一覧に名前が残っていても常に空になります

注意 — 金額の二重計上: 1レコードがN行に分解されると、親レコード側の金額なども N 回複製されます。展開したデータで親の金額を SUM すると N 倍になるため、MAX を使うか、金額はサブテーブル側の行別金額を使ってください。

フィールドリフレッシュ: データソースカードの 🔄 ボタンをクリックすると、kintone からフィールド一覧を再取得して保存します。kintone 側でフォームにフィールドを追加・変更した後に使ってください。データソースを削除して作り直す必要はありません。


5.2 JOIN の設定

異なるアプリのデータを1つのテーブルとして扱うには JOIN を使います。

  1. 「+ JOIN を追加」をクリック
  2. 名前を入力(例: 受注+顧客
  3. 左テーブル右テーブルにデータソース(または別のJOIN・仮想テーブル)を選択
  4. 結合キーペアを設定する — 左フィールドと右フィールドを 1 組として指定します:
    • + キーペア追加」ボタンで行を増やすと複合キー(複数フィールドの組み合わせ)で結合できます
    • 1 行だけの場合は従来の単一キー結合と同等です
  5. JOIN の種別を選択:
種別結果
INNER両方のテーブルにキーが存在するレコードのみ
LEFT左テーブルのすべてのレコード+右テーブルで一致するもの
RIGHT右テーブルのすべてのレコード+左テーブルで一致するもの
  1. 必要に応じてエイリアスを設定(フィールド名が重複する場合に区別できます)
  2. 「保存」をクリック

設定例(単一キー):

左テーブル: 受注データ(フィールド: customer_code)
右テーブル: 顧客マスタ(フィールド: code)
JOIN 種別: LEFT JOIN
→ 結果: 受注データのすべての行に、一致する顧客情報を付加

設定例(複合キー):

左テーブル: 受注明細(フィールド: customer_code  + product_code)
右テーブル: 価格マスタ(フィールド: cust_code  + prod_code)
JOIN 種別: INNER JOIN

→ キーペアを2行追加:
   行1: 左=customer_code  右=cust_code
   行2: 左=product_code   右=prod_code
→ 両フィールドが一致する行だけを結合

補足: JOIN は入れ子にできます。JOIN の結果をさらに別の JOIN の入力として使えます(JOIN-of-JOIN)。また、JOIN の左右テーブルに仮想テーブルも選択できます。

注意: どちらかのテーブルが 20,000 件を超える場合、パフォーマンス警告が表示されます。


5.3 仮想テーブルの設定

データソースや JOIN の結果に対して、列の絞り込み・重複除去・計算列・行フィルターを定義できます。
グラフに渡す前にデータを整形するためのステップです。

  1. 「+ 仮想テーブルを追加」をクリック
  2. 名前を入力(例: 月別売上集計用
  3. ソース(データソースまたはJOIN)を選択
  4. 各設定(下記参照)を行う
  5. 「保存」をクリック

編集について: 既存の仮想テーブルカードの ✏️ Edit ボタンをクリックすると、設定モーダルが開いて再編集できます。保存するとその仮想テーブルが上書き更新されます(新規作成にはなりません)。

DISTINCT(重複除去)

「DISTINCT ON」をオンにすると、指定したキーの組み合わせで重複するレコードを1件に絞ります。

  • キーを指定しない場合: 全列の値が完全に一致する行を除去します
  • キーを指定する場合: チェックを入れたフィールドの値の組み合わせで重複を除去します

設定例:

ソース: 受注データ(受注ID・顧客コード・商品コード・金額 を含む)

「DISTINCT ON」→ ON
キー: 顧客コード  ✓
    商品コード  ✓
    受注ID     (チェックなし)
    金額       (チェックなし)

→ 同じ顧客が同じ商品を複数回購入しているレコードが1件になる

行フィルター(WHERE)

条件に一致する行だけを残します。フィールドコードで参照できます。

  • 入力欄の下に表示されているフィールド名をクリックすると、カーソル位置にフィールドコードが挿入されます

例:

amount > 10000
status == "完了"
YEAR(order_date) == 2024
amount > 1000 AND status == "完了"
(amount > 100000 OR qty > 50) AND status == "完了"

計算列

既存フィールドを使って新しい列を追加できます。

「+ 計算列を追加」をクリックし、列名を入力します。

例:

列名説明
tax_amountamount * 0.1消費税額
totalamount + amount * 0.1税込合計
year_monthCONCAT(YEAR(order_date), "/", MONTH(order_date))年月文字列
size_labelIF(amount > 100000, "大口", "小口")大小分類
rounded_amountROUND(amount, -3)千円単位に丸め

GROUP BY(事前集計)

仮想テーブルで GROUP BY を設定すると、JOIN 前にファクトテーブルをキー単位に集計できます。
粒度の異なる2つのファクトテーブルを結合する際に発生する「ファンアウト(行の掛け算)」を防ぐために使います。

ファンアウトとは?

たとえば下記のように粒度が違うテーブルを直接 JOIN すると問題が起きます:

受注明細: staff_id | invoice_id | qty    (1スタッフ × 複数明細)
残業:     staff_id | date       | hours  (1スタッフ × 複数日)

→ 直接 JOIN すると 明細数 × 日数 の行が生成され、SUM(hours) が明細件数分だけ多重計上される

GROUP BY を使った解決方法:

手順1: 残業データソースに対して仮想テーブルを作成
  - 集計キー(GROUP BY): staff_id
  - 集計メジャー: overtime_hours → sum → total_overtime

  → 出力: staff_id ごとに1行(残業合計が事前計算済み)

手順2: この仮想テーブルを JOIN の右テーブルとして使用
  受注明細 LEFT JOIN 残業集計VT on staff_id

  → 1対1 結合になるためファンアウトが発生しない

手順3: グラフのディメンションに staff_id、メジャーに SUM(qty) と SUM(total_overtime) を設定
  → 正しい値で集計される

設定手順:

  1. 「+ 仮想テーブルを追加」をクリック
  2. ソースに残業データソースを選択
  3. 「GROUP BY(事前集計)」セクションの集計キーにチェック(例: staff_id
  4. 「+ 集計メジャーを追加」をクリックし、集計列を定義:
    • ソースフィールド: overtime_hours(集計元フィールド)
    • 集計関数: sum
    • 出力列名 (AS): total_overtime(グラフで参照する名前)
  5. 「保存」をクリック

集計関数の一覧:

関数内容
sum / avg合計 / 平均(数値のみ)
min / max最小 / 最大。値がすべて数値なら数値比較、それ以外は文字列比較(2025-11-07 のような日付も正しく並びます)
count値が入っている行数(空欄は数えません)。フィールドを選ばなければグループ内の全行数
countd値の種類数(空欄は数えません)
listaggグループ内の値を区切り文字で連結(文字列)
listaggdlistagg の重複除去版。最初に出現した順を保ちます

listagg / listaggd:

「この親レコードに紐づく子レコードを1セルにまとめて出したい」場合に使います。listagg を選ぶと区切りの入力欄が現れます。

  • 空欄なら改行区切り。\n(改行)、\t(タブ)の表記も使えます
  • 空欄の値はスキップされます。グループに値が1つもなければ空になります
  • 明細を「#12 2025-11-07 4,656」のような形にしたい場合は、計算列CONCAT(...) を作ってから、それを listagg してください(計算列は GROUP BY より前に評価されます)

注意: listagg / listaggd は仮想テーブルの GROUP BY 専用です。グラフのメジャーでは選択できません(グラフの表は集計を行わないため)。

注意: GROUP BY が有効な場合、「カラム選択(SELECT)」と「DISTINCT」の設定は無視されます。GROUP BY が出力スキーマを確定します。

補足: 計算列(GROUP BY 前に実行)と組み合わせることで、計算済みフィールドを集計キーや集計元に使えます。例えば YEAR(date) の計算列を追加してから年単位で GROUP BY するなど。
計算列を定義すると、そのエイリアス名が集計キーのチェックボックス候補および集計メジャーのフィールド選択候補にも自動で追加されます。


5.4 縦結合(Union)の設定

複数のデータソースを 縦につなげて(行を追加して) 1つのソースとして扱えます。JOIN が列を横に結合するのに対し、Union は同じ列構成のテーブルを縦に積み上げます。
例: 「2024年売上」アプリと「2025年売上」アプリを1つに統合する、複数拠点のアプリをまとめる、など。

  1. 「+ Union を追加」をクリック
  2. 名前を入力(例: 売上統合
  3. 入力テーブルを2件以上追加(データソース・JOIN・仮想テーブル・他のUnionを指定可)。各入力に表示名を付けられます
  4. 出力列を定義する(下記参照)
  5. 必要に応じてオプション(出所列・重複除外)を設定
  6. 「保存」をクリック

編集について: 既存の Union カードの ✏️ Edit ボタンで設定モーダルを再編集できます。保存するとその Union が上書き更新されます。

入力テーブル

「+ テーブルを追加」で縦に積むテーブルを追加します。最低2件必要です。並び順がそのまま結合後の行の順序になります(先頭テーブルの全行 → 次のテーブルの全行 …)。

出力列(列の対応付け)

出力する列を定義し、各列が各入力テーブルのどのフィールドに対応するかをマトリクス表で指定します。

  • コード自動一致: 入力テーブルを追加すると、同じフィールドコードの列が自動でマッピングされます。「⟳ コード自動一致」ボタンでいつでも全列を再生成できます
  • 手動調整: 「+ 出力列を追加」で列を追加し、各入力テーブルのフィールドをドロップダウンで割り当てます。フィールドコードが異なるアプリ同士でも、出力列に対して別々のフィールドを対応付けられます
  • 未割当(—): ある入力テーブルにその列が存在しない場合は「—(なし)」を選びます。その入力由来の行では空値になります
  • : 各出力列に 数値/文字/日付 を指定します

オプション

オプション説明
出所列を付ける各行がどの入力テーブル由来かを示す列(既定 _source)を追加します。値は入力テーブルの表示名になります。グラフで「テーブル別に色分け」などに使えます
重複行を除外(DISTINCT)既定はオフ(UNION ALL=全行保持)。オンにすると、全出力列の値が一致する行を1件に絞ります

集計したい場合: Union 自体は「行を縦に積む」ことに専念します。集計・絞り込み・GROUP BY が必要な場合は、Union を仮想テーブルのソースに指定してラップすれば、既存の仮想テーブル機能(WHERE・GROUP BY・計算列)がそのまま使えます。

スライサー連動: Union を対象にしたスライサーも、Union を使うグラフに正しく適用されます。


5.5 式の書き方(行フィルター・計算列共通)

行フィルターと計算列は同じ式エンジンを使います。グラフの expr メジャーでも同じ式が使えます。

重要 — フィールド名は半角英数字のみ:
式の中でフィールドを参照できるのは、フィールドコードが半角英数字・アンダースコア・$ の場合だけです(例: amountorder_datePR_$id)。
金額受注日 のような日本語のフィールドコードは式では参照できず、空として扱われます。
日本語コードのフィールドを式で使いたい場合は、JOIN の別名や仮想テーブルの GROUP BY の出力列名(AS)を半角英数字にして、その名前を参照してください。

演算子

演算子使い方
+ - * /四則演算price * quantity
== !=等値比較status == "完了"
> >= < <=大小比較amount >= 10000
AND論理積(両方が真)amount > 0 AND status == "完了"
OR論理和(どちらかが真)type == "A" OR type == "B"
( )グループ化・優先順位制御(a > 1 OR b > 1) AND c == "ok"

関数

関数説明
CONCAT(a, b, ...)文字列結合。空欄の項目は何も出力しませんCONCAT(last_name, " ", first_name)
YEAR(date)年を取得YEAR(order_date)2024
MONTH(date)月を取得(1〜12)MONTH(order_date)3
DAY(date)日を取得(1〜31)DAY(order_date)15
IF(条件, 真の値, 偽の値)条件分岐IF(amount > 100000, "大口", "小口")
ABS(n)絶対値ABS(profit)
ROUND(n, 桁数)四捨五入。桁数は省略可(デフォルト0)ROUND(amount, 2)

桁数の指定(ROUND):
ROUND(amount, 2) → 小数点以下2桁
ROUND(amount, 0) → 整数
ROUND(amount, -3) → 千の位で丸め(1234567 → 1235000)

複合条件の例

# 2024年の完了案件で10万円超
YEAR(order_date) == 2024 AND status == "完了" AND amount > 100000

# AまたはBカテゴリで、かつ金額が正
(category == "A" OR category == "B") AND amount > 0

# 特定の担当者が対応した大口案件
(amount > 500000 OR qty > 100) AND assignee == "山田 太郎"

6. グラフの作成

設定画面の「グラフ」タブで操作します。

6.1 グラフの追加

  1. 「+ グラフを追加」をクリック
  2. グラフ名を入力(例: 月別売上棒グラフ
  3. グラフ種別を選択
  4. データソース(仮想テーブル・JOIN・データソースのいずれか)を選択
  5. ディメンション・メジャーを設定(下記参照)
  6. 設定パネル下部のプレビューで表示を確認
  7. 「保存」をクリック

6.2 グラフ種別とディメンション・メジャーの設定

グラフ種別ごとに設定できるディメンション数・メジャー数・ロールが異なります。

グラフ種別ディメンションメジャー説明
棒グラフ最大2つ無制限X軸カテゴリ+色分け(系列)で積み上げ・グループ棒グラフも可
折れ線グラフ最大2つ無制限X軸(時系列等)+色分けで複数ライン
面グラフ最大2つ無制限折れ線+塗りつぶし。積み上げ面グラフにも対応
円グラフ1つ1つ構成比を確認。凡例クリックで項目の表示/非表示
ドーナツグラフ1つ1つ円グラフの中心が空洞
散布図最大2つ1つX軸・Y軸に数値フィールドを指定
バブルチャート最大2つ最大2つ散布図+バブルサイズで3変数
ヒートマップ2つ(x・y)1つ2軸×値の密度・強度
表(フラット)無制限なしレコード一覧。ソート・ページング対応
ピボットテーブル無制限(row・column)無制限行・列クロス集計。複数メジャー対応
KPI カードなし最大2つ単一集計値の大きな数字表示

6.3 ディメンションのロール

ディメンションには「ロール」を指定して、グラフ上での役割を決めます。

ロール対応グラフ使い方
x(X軸)棒・折れ線・面・散布図・バブル横軸のカテゴリや時間軸
color(系列・色分け)棒・折れ線・面・散布図・バブルこのフィールドの値ごとに色を分ける
y(Y軸)ヒートマップ縦軸のカテゴリ
row(行軸)ピボットテーブル行ヘッダーになるフィールド
column(列軸)ピボットテーブル列ヘッダーになるフィールド

棒グラフの設定例

月別・商品カテゴリ別の売上積み上げ棒グラフ:

ディメンション1: year_month(ロール: x)
ディメンション2: category(ロール: color)
メジャー: amount(集計: SUM)

→ X軸が年月、各カテゴリが色分けされた積み上げ棒グラフになります

シンプルな月別売上棒グラフ(系列なし):

ディメンション1: year_month(ロール: x)
メジャー: amount(集計: SUM)

折れ線グラフの設定例

担当者別の月次売上推移:

ディメンション1: order_month(ロール: x)
ディメンション2: assignee(ロール: color)
メジャー: amount(集計: SUM)

→ 担当者ごとに色分けされた複数ラインが表示されます

ヒートマップの設定例

曜日×時間帯の問い合わせ件数:

ディメンション1: weekday(ロール: x)
ディメンション2: hour(ロール: y)
メジャー: count(集計: COUNT)

ピボットテーブルの設定例

地域×商品カテゴリの売上クロス集計(複数メジャー):

ディメンション1: region(ロール: row)
ディメンション2: category(ロール: column)
メジャー1: amount(集計: SUM、ラベル: 売上合計)
メジャー2: qty(集計: SUM、ラベル: 数量合計)

→ 列ヘッダーが「カテゴリ値 × メジャー名」の2段になります

KPI カードの設定例

月次目標達成率:

メジャー1: amount(集計: SUM、ラベル: 当月売上)
メジャー2: target(集計: MAX、ラベル: 目標値)

6.4 メジャーの集計関数

関数内容
SUM合計
COUNT値が入っている件数(空欄は数えません)。フィールドを選ばなければ全行数
AVG平均
MIN最小値。値がすべて数値なら数値比較、それ以外は文字列比較(日付も正しく並びます)
MAX最大値(MIN と同じ規則)
COUNTD重複除外件数(ユニーク数)。空欄は数えません
expr(計算式)同一グラフ内の他のメジャー集計値を使った計算

空欄の扱い: COUNT / COUNTD は SQL と同じく空欄を数えません。LEFT JOIN で相手が見つからなかった行は「0件」になります。フィールドを選ばずに COUNT を使った場合は、SQL の COUNT(*) と同じく単純な行数になります。

expr(計算式メジャー)の使い方

「集計関数」に expr を選択すると、UI が切り替わります:

項目内容
出力フィールドコード計算結果を格納するフィールド名を自由に入力します(他のメジャーから参照する際に使う名前)
集計式他の非 expr メジャーの fieldCode を使った計算式を入力します
参照可能 fieldCode(ヒント)式入力欄の下部に、同一グラフ内で参照できる fieldCode 一覧が自動表示されます

設定例: 時間あたり処理数(qty / 労働時間)

メジャー1: フィールド=qty,          集計=sum,  fieldCode=qty_sum,    ラベル=数量合計
メジャー2: フィールド=total_overtime, 集計=sum,  fieldCode=hours_sum,  ラベル=労働時間合計
メジャー3: 集計=expr, 出力fieldCode=qty_per_hr, 式=qty_sum / hours_sum, ラベル=時間あたり処理数

qty_per_hr にはグループごとの SUM(qty) / SUM(total_overtime) が表示されます

注意: expr メジャーで参照する名前は、各メジャーの出力フィールドコード欄に入力した文字列です。ラベルではありません。
式の書き方は行フィルター・計算列と同じエンジン(+ - * / と括弧)を使います。
expression(式)が空のまま保存しようとしてもそのメジャー行はスキップされます。

文字列を返す式(状況ラベル)

expr は数値だけでなく文字列も返せます。集計結果に応じた説明を列として出せます。

出力フィールドコード: PR_Status
式: IF(PR_Count == 0, "未提出", CONCAT(PR_Count, " 件提出済み"))

→ 該当が0件の行は「未提出」、それ以外は「3 件提出済み」のように表示されます。空欄が並ぶだけの行に意味を持たせたい場合に便利です。

文字列を返すメジャーが意味を持つのは**表(フラット)**だけです。グラフや KPI では数値として解釈できず空欄になります。


6.5 セルをリンクにする

表(フラット)の列を、kintone のレコードなどへのクリック可能なリンクとして表示できます。ディメンション・メジャーのどちらにも設定できます。

入力欄内容
リンクURLリンク先の URL。{value} はそのセル自身の値、{フィールドコード} は同じ行の他の列の値に置き換わります
表示文字リンクとして表示するテキスト。空欄ならセルの値をそのまま表示します

設定例: kintone のレコードを開く

リンクURL : https://example.cybozu.com/k/92/show#record={value}
表示文字  : PR #{value}

→ 値が 74 のセルが PR #74 というリンクになり、新しいタブでレコード 92-74 が開きます。

複数リンク: listagg で作った改行区切りの列にリンクを設定すると、各要素が個別のリンクとして縦に並びます。「この親に紐づく子レコードすべてへのリンク」を1セルで表現できます。

リンクにできる URL: http:// https:// と、スキームを持たない相対パス(/k/92/show#record=74 など)だけがリンクになります。それ以外(javascript: など)はリンクにせず文字列のまま表示します。レコードの値がそのまま URL に入る仕組みのため、意図しないスクリプトが動かないようにする制限です。

エクスポート: CSV / Excel には URL ではなく元の値が出力されます。


6.5 グラフプレビュー

グラフ設定画面の下部に、実際のデータを使ったプレビューが表示されます。
ディメンション・メジャーを変更するたびにリアルタイムで更新されます。

  • 棒・折れ線・面・散布図・バブル・ヒートマップ・円・ドーナツ: ECharts でグラフ描画
  • ピボットテーブル: クロス集計テーブルで表示
  • 表(フラット): レコード一覧で表示
  • KPI カード: KPI カードのデザインで表示

7. ダッシュボードの作成・公開

設定画面の「ダッシュボード」タブで操作します。

7.1 ダッシュボードの作成

  1. 「+ ダッシュボードを追加」をクリック
  2. ダッシュボード名・説明を入力
  3. テーマ(ライト / ダーク)を選択
  4. 「保存」をクリック

7.2 ウィジェットの追加

  1. ダッシュボードカードの ✏️ 編集 ボタンをクリックしてダッシュボード編集モーダルを開く
  2. 「+ グラフ」 ボタンをクリックすると「グラフを選択」ピッカーが開く
  3. 追加するグラフを選択し 「追加」 をクリックしてピッカーを閉じる(先にピッカーを閉じることが重要)
  4. ウィジェット行の「↑」「↓」ボタンで表示順を変更
  5. 列(col)・幅(span)・行(row)・高さ(h)で配置をカスタマイズ
  6. すべてのウィジェット設定が完了してから 「保存」 をクリックする

注意: 「グラフを選択」ピッカーが開いたままの状態では、ダッシュボードの「保存」ボタンが隠れてクリックできません。必ずピッカーを「追加」または「キャンセル」で閉じてから「保存」してください。

グリッドの考え方:

12カラム CSS Grid を使用しています。

設定意味
col左から何列目に配置するか(1〜12)
span横に何列分占有するか(1〜12)
row上から何行目に配置するか
h縦に何行分の高さにするか

設定例:

左半分に棒グラフ: col=1, span=6
右半分に円グラフ: col=7, span=6
全幅でピボット:   col=1, span=12

注意 — ウィジェットの重なり: 配置は数値入力のみで、重なりを自動で検出しません。複数のウィジェットに重なる領域を指定すると、画面上で表示が重なって崩れます。

  • 横に並べる: col と span の範囲が重ならないようにし(span の合計を12以下に)、row を揃える
  • 縦に積む: 下のウィジェットの row を、上のウィジェットの row + h 以降にする

ウィジェットを「+」ボタンで追加した場合は既存ウィジェットの下に自動配置されるため重なりません。手動で数値を変えたときだけ注意してください。

7.3 スライサーの追加

スライサーはダッシュボード全体のフィルターです。複数のグラフに同時に適用されます。

  1. 「+ スライサーを追加」をクリック
  2. スライサーの種別を選択:
種別使い方
日付範囲開始日〜終了日を指定してフィルタリング
カテゴリ(単一選択)ドロップダウンで1つの値を選択
カテゴリ(複数選択)チェックボックスで複数の値を選択
数値範囲スライダーまたは入力欄で数値の範囲を指定
  1. フィルター対象のデータソースとフィールドを指定
  2. グリッド上に配置する

7.4 ダッシュボードの公開

新規作成したダッシュボードは 「Draft(非公開)」 状態です。アプリ画面(ビューア)には表示されません。

  1. ダッシュボードカードの 「公開」 ボタンをクリックする
  2. バッジが「公開中」に切り替わり、一般ユーザーがビューアで閲覧できるようになる
  3. 非公開に戻すには 「非公開にする」 をクリックする

ポイント: 「保存」だけでは公開されません。保存後に「公開」ボタンを別途クリックしてください。

7.5 自動更新間隔の設定

「設定」タブ→「自動更新」でキャッシュの更新間隔を設定できます。

設定値内容
OFF手動更新のみ
5分5分ごとに再取得
30分(デフォルト)30分ごとに再取得
1時間 / 6時間 / 24時間それぞれの間隔で再取得

7.6 デフォルトダッシュボードの設定

「設定」タブ→「デフォルトダッシュボード」で、ビューア起動時に自動で開くダッシュボードを指定できます。

設定値動作
なし(デフォルト)公開済みダッシュボードの一覧を表示
特定のダッシュボードを選択起動時にそのダッシュボードを直接オープン

Tip: 公開済みダッシュボードが 1件のみ の場合は、この設定に関わらず自動でそのダッシュボードが開きます。


8. ダッシュボードの閲覧

8.1 ダッシュボード一覧

BIハブアプリを開くと、公開済みのダッシュボード一覧が表示されます。
見たいダッシュボードをクリックしてください。

自動オープン: 公開済みダッシュボードが1件のみの場合、または「設定」タブでデフォルトダッシュボードを指定している場合は、一覧をスキップして直接ダッシュボードが開きます。
別のダッシュボードに切り替えるには「← ダッシュボード一覧」ボタンをクリックしてください。

8.2 スライサーによる絞り込み

ダッシュボード上のスライサーを操作すると、同一ダッシュボード内のすべてのグラフに即時反映されます。
追加のAPI通信は発生しません(キャッシュ済みデータをブラウザ内で再集計します)。

8.3 グラフ個別フィルター

グラフ右上の「▽」アイコンをクリックすると、そのグラフ専用のフィルターパネルが開きます。
条件を追加して「適用」をクリックすると絞り込みが反映されます。
フィルターはページを閉じるとリセットされます。

8.4 フルスクリーン表示

ダッシュボード右上のフルスクリーンボタン(⛶)をクリックすると、ダッシュボードを全画面表示できます。
Esc キーまたは同ボタンで通常表示に戻ります。

8.5 データの手動更新

グラフ右上のメニュー(⋮)→「データを更新」をクリックすると、キャッシュをクリアして最新データを再取得します。

8.6 表の操作(検索・並び替え・列幅)

表(フラット)とピボットテーブル、データソースビューアーでは、閲覧者が次の操作をできます。管理者の設定は不要です。

操作内容
検索表の左上の検索ボックスに入力すると行を絞り込みます。ページ数と CSV / Excel 出力も絞り込み後の行が対象になります
並び替え列見出しをクリックすると 昇順 ▲ → 降順 ▼ → 元の順序 の順に切り替わります
列幅の変更列見出しの右端をドラッグします。幅を変えた列は文字が折り返して表示されます
  • 検索対象は、フラット表では表示中の全列、ピボットテーブルでは行見出しです
  • ピボットテーブルで検索すると、合計も絞り込み後の行で再計算されます
  • ピボットテーブルでは、データ列の見出しをクリックするとその列の数値で行が並び替わり、左上のコーナーをクリックすると行見出しの並び順が反転します
  • 変更した列幅はブラウザに保存され、次回以降も維持されます(閲覧者ごと・グラフごと)。検索と並び替えは表示中のみで、再読み込みすると元に戻ります
  • 検索は書式適用前の元の値が対象です。$4,387.50 と表示されている列は 4387.5 で検索してください

8.7 ブックマーク

特定のダッシュボードのURLは直接ブックマークできます:

https://your-domain.cybozu.com/k/{アプリID}/#dashboard/{ダッシュボードID}

9. エクスポート(PNG / PDF / CSV / Excel)

9.0 表データのエクスポート(CSV / Excel)

表(フラット)とピボットテーブルの右上には 📥 CSV📊 Excel のボタンがあります。クリックするとその表のデータをダウンロードします。

  • 検索で絞り込んでいる場合は、絞り込み後の行が出力されます
  • ピボットテーブルは合計行・合計列を含めた形で出力されます
  • リンクを設定した列は、URL ではなく元の値が出力されます

9.1 グラフ単体のエクスポート

グラフ右上のメニュー(⋮)から:

  • 「PNG で保存」: グラフ画像をダウンロード
  • 「PDF で保存」: グラフを1ページの PDF でダウンロード

9.2 ダッシュボード全体のエクスポート

ダッシュボードツールバーの「エクスポート」ボタンから:

  • 「PNG でエクスポート」: ダッシュボード全体の画像をダウンロード
  • 「PDF でエクスポート」: ダッシュボード全体を PDF でダウンロード

注意: エクスポート中はアニメーションが一時停止します。大きなダッシュボードはエクスポートに数秒かかる場合があります。


10. FAQ・トラブルシューティング

Q. ダッシュボードが表示されない

  • BIハブアプリに「カスタマイズビュー」が設定されているか確認してください
  • カスタマイズビューがデフォルトビューになっているか確認してください
  • カスタマイズビューのHTMLに <div id="bi-viewer-placeholder"></div> が含まれているか確認してください
  • プラグインがBIハブアプリにインストールされているか確認してください

Q. 「BI設定アプリにアクセスできません」と表示される

閲覧するユーザーに、BI設定アプリ(設定を保存しているアプリ)の閲覧権限がありません。メッセージにアプリIDが含まれているので、そのアプリの権限設定で対象ユーザーに閲覧権限を付与してください。

アプリが削除されている、または設定タブのアプリIDが誤っている場合も同じメッセージが出ます。設定画面の「設定」タブでIDを確認してください(読み込みに失敗していても「設定」タブは開けます)。

Q. グラフに「権限エラー」と表示される

  • グラフで使用しているデータソースアプリへのアクセス権限がないユーザーでアクセスしています
  • アプリの権限設定を確認してください

Q. JOIN したのに、関係ないレコード同士が大量に結合される

結合キーに指定したフィールドの値が空になっていないか確認してください。よくある原因は次の2つです。

  1. キーのフィールドがデータソースで未選択: 選択されていないフィールドは kintone から取得されないため、常に空になります。表示に使わなくても選択済みにしてください
  2. キーのフィールドがサブテーブルの中にある: 「サブテーブルを展開」でそのサブテーブルを選択しないと値が取れません

なお、キーが空のレコード同士は結合されません(SQL と同じ挙動)。左外部結合では、キーが空の行は相手が見つからない行として残ります。

Q. データが古い

  • グラフ右上のメニュー(⋮)→「データを更新」をクリックしてください
  • または自動更新間隔を短く設定してください

Q. 大量データで動作が遅い

  • データソースに絞り込み条件(フィルター)を設定して取得件数を減らしてください
  • JOIN を使用する場合、どちらかのテーブルを 20,000 件以下に絞ることを推奨します
  • キャッシュ(TTL: 1時間以上)を活用してAPI呼び出し回数を減らしてください
  • 仮想テーブルの行フィルターで不要なレコードを除外してください

Q. エクスポートした画像が崩れる

  • グラフの描画が完了してからエクスポートしてください(ローディング中はエクスポート不可)
  • ブラウザをGoogle Chrome最新版に更新してください

Q. 仮想テーブルの行フィルターで AND / OR を使いたい

  • AND / OR キーワード(大文字・小文字どちらでも可)を使って複合条件を書けます
  • 例: amount > 10000 AND status == "完了"
  • 例: (type == "A" OR type == "B") AND amount > 0

Q. DISTINCT を使ったが期待通りに重複が除去されない

  • DISTINCT ON をオンにした状態で「重複除去キー」フィールドにチェックが入っているか確認してください
  • キーにチェックを入れない場合は全列一致で除去されます
  • 意図するキーフィールドにチェックを入れ、それ以外は外してください

Q. ピボットテーブルに複数メジャーを設定したい

  • ピボットテーブルはメジャーを複数設定できます
  • 複数設定すると列ヘッダーが2段(列の値 × メジャー名)になります
  • 合計値は各メジャーごとに正しく計算されます(avg の場合も元データから再集計)

Q. グラフにディメンションを追加しようとしたらボタンが押せない

  • グラフ種別によりディメンションの最大数が決まっています
  • 例: 円グラフ・ドーナツグラフはディメンション1つ・メジャー1つのみ
  • 例: 棒・折れ線・面・散布図・バブルはディメンション最大2つ
  • 既存のディメンションを削除してから追加するか、グラフ種別を変更してください