0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@rex0220

rex0220 kSQL Dashboard Pro デモ ⓪ 準備編 — デモアプリを 15 分で用意する

0
Last updated at Posted at 2026-08-17

kSQL Dashboard Pro デモ(全 5 回)で使うアプリを用意します。本編 4 本とも同じアプリを使うので、一度作れば全部動きます。

作るのは 3 アプリと約 1,800 件のデータ、それに 5 枚のダッシュボードです。手順は 3 つ、15 分ほどで終わります。

【型別】ダッシュボード の全体

アプリはテンプレートから作り、データはブラウザーの開発ツールで入れます。

kSQL Dashboard Pro デモ(全 5 回)
⓪ 準備編(この記事) / ① KPI カード / ② データ表 / ③ グラフ / ④ マークダウン

4 本の本編は、すべてこの記事で作るアプリを使います。一度作れば全部動きます。

用意するもの

項目
kintone 公式対応ブラウザの最新版(PC)。モバイルは対象外
プラグイン rex0220 kSQL Dashboard Pro
権限 アプリを作成できること。システム管理者である必要はありません

配布ファイルは GitHub に置いてあります。

https://github.com/rex0220/ksql-dashboard-pro-demo

中身 使うところ
templates/rex0220-ksql-demo1.zip 手順 1
scripts/load-demo-data-console.js 手順 2
settings/型別-全一覧-見本.json 手順 3

緑の 「Code」→「Download ZIP」 でまとめて落とせます。
※ git がつかえる方は、git clone でOK。

Windows は展開してから使ってください。 エクスプローラーで zip の中を開いたままだと、テンプレートを kintone に渡せません。右クリック →「すべて展開」です。

どんなアプリを作るのか

3 つのアプリを使います。kintone のアプリ間に外部キーはありません。 下の線は「SQL で突き合わせるときのキー」です。ルックアップも関連レコードも使いません。

アプリ 件数 役割
売上明細 約 1,500 主役。ほぼすべてのペインがここを読む
月次目標 288 担当者 12 名 × 24 か月。達成率で使う
商品分類マスタ 40 3 階層。階層の展開と、マスタ照合で使う

手順 1 — アプリを作る(3 分)

先にプラグインを入れておく

テンプレートは売上明細アプリでプラグインを有効にした状態で作られています。先に kSQL Dashboard Pro をインストールしておいてください。

テンプレートファイルから作る

「アプリを作成」→「テンプレートファイルを読み込んで作成」 で rex0220-ksql-demo1.zip を選びます。

「アプリを作成」の選択肢。テンプレートファイルを読み込んで作成

読み込むと、含まれているアプリの一覧が出ます。テンプレートは 1 本で、3 アプリが一度にできます。

読み込み後の確認画面(3 アプリが並ぶ)

フィールドの型・重複禁止・ドロップダウンの選択肢・ユーザー選択、それに記事で使うカスタマイズ一覧 5 本まで入った状態でできます。一覧を自分で作る必要はありません。

アプリ番号を控える

  • アプリ管理画面の例

アプリ管理画面。一覧にアプリ番号が出ている

  • アプリ画面のURL

アプリ画面の URL。/k/454/ の 454 が番号

このあとの手順で使います。アプリの URL の /k/454/ の部分が番号です。アプリ管理画面の一覧からも読めます。

**番号は環境ごとに違います。**この記事では次の 3 つでしたが、ご自身の番号に読み替えてください。

アプリ この記事の例
売上明細 456
月次目標 455
商品分類マスタ 454

手順 2 — データを入れる(5 分)

テンプレートにレコードは含まれません。 ブラウザーの開発ツールでスクリプトを走らせて入れます。

ログイン中のセッションをそのまま使うので、パスワードも API トークンも入力しません。

CONFIG を書き換える

scripts/load-demo-data-console.js をテキストエディター(メモ帳等)で開き、先頭の CONFIG に控えたアプリ番号を入れます。

const CONFIG = {
  APP: 456,        // 売上明細のアプリ番号(URL の /k/456/ の部分)
  GOAL: 455,       // 月次目標
  MASTER: 454,     // 商品分類マスタ

  APPLY: true,      // false にすると下見(通信しません)
  CLEAN: false,     // 2 回目以降は true(伝票番号が重複禁止のため)

  USERS: [kintone.getLoginUser().code],
  END: "",
};

USERS の既定はログイン中のあなたです。担当者一覧の先頭(佐藤 健一)に割り当たり、① KPI カードの「自分の担当分だけ」が動きます。

Console に貼る

  1. kintone の画面を開きます(どの画面でもかまいません)
  2. F12 で開発ツールを開き、Console タブへ
  3. スクリプトの全文をコピーして貼り、Enter

Console に貼って

Chrome / Edge は初回に貼り付けを拒みます。「危険な可能性のあるコードを貼り付けようとしています」と出たら、指示どおり Console に allow pasting と入力して Enter を押してから貼り直してください。

実行すると、実行ログが表示されます。

実行後のログ(件数の要約と投入の進み具合)

実行後に売上明細アプリをリロードすると、1,500件入っている。

売上明細のレコード一覧(1,500 件入っている)

覚えておくこと

日付は実行日から逆算して作られます。「今月」「先月」のペインが常に動くようにするためです。裏返すと、日をまたいで入れ直すと数字が変わります。記事の画像と同じ数字にしたいわけではないので、普段は気にしなくて大丈夫です。

やり直すときは CLEAN: true。 伝票番号は重複禁止なので、消さずに 2 回入れると途中で止まります。

中身を先に見たいときは APPLY: false。 通信せず、何件どう入るかの要約だけが出ます。

項目 意味
APP / GOAL / MASTER 3 アプリのアプリ番号。0 にするとそのアプリは入れない
APPLY 既定 true で書き込む。false は下見(通信しません)
CLEAN 投入前に既存レコードを全削除する
USERS ユーザー選択 担当者user に入れるログイン名。最大 12 名
END 日付の終端。"" ならば今日

手順 3 — ダッシュボードを取り込む(3 分)

  1. 売上明細アプリの設定 → プラグイン → kSQL Dashboard Pro
  2. ツール → インポート で settings/型別-全一覧-見本.json を選びます

ツール → インポート

  • settings/型別-全一覧-見本.jsonを選択

ファイル選択。settings/型別-全一覧-見本.json を選ぶ

  1. 確認ダイアログの「アプリ番号の変換」に、控えたアプリ番号を入れます

アプリ番号の変換ダイアログ

SQL 中のアプリ番号はここで自動的に置き換わります。JSON を手で書き換える必要はありません。

これ 1 本で 5 一覧・43 ペインが入ります。 記事 4 本ぶんのペインと、4 つの型を組み合わせた見本です。

一覧の割り当ても自動です。テンプレートに 【型別】KPI などの一覧が入っており、取り込みは一覧名で照合します。どの一覧に何が入るかを選ぶ必要はありません。

  1. プラグイン設定を保存します。

プラグイン設定を保存する

できたかどうかの確認

一覧の切り替えに 【型別】 で始まる 5 つが並んでいれば成功です。

一覧の選択(【型別】が 5 つ並ぶ)

一覧 中身 対応する記事
【型別】KPI 8 ペイン ① KPI カード
【型別】表 3 タブ 10 ペイン ② データ表
【型別】グラフ 3 タブ 14 ペイン ③ グラフ
【型別】マークダウン 5 ペイン ④ マークダウン
【型別】ダッシュボード 6 ペイン 4 つの型を組み合わせた見本

【型別】ダッシュボードは、この記事の冒頭に貼った絵と同じものです。

ここまで来たら、あとは好きな記事から読んでください。どれから読んでもかまいません。

うまくいかないとき

テンプレートを読み込めない

zip を展開してから選んでください。Windows でエクスプローラーが zip の中を表示している状態だと、その中のファイルを kintone に渡せません。

Console に貼れない

Chrome / Edge の貼り付け警告です。Console に allow pasting と入力して Enter を押してから貼り直します。

CONFIG.APP に売上明細のアプリ番号を書いてください

CONFIG を書き換えずに実行しています。アプリ番号はアプリの URL の /k/456/ の部分です。

途中で止まって「重複エラー」

一度入れたあとに、消さずにもう一度入れています。CLEAN: true にして貼り直してください。

担当者user へ設定できませんでした

USERS のログイン名が違います。既定の kintone.getLoginUser().code に戻せば確実です。1,500 件を入れる前に 1 件で試して止めているので、途中まで入って壊れることはありません。

ダッシュボードが空のまま

プラグイン設定を保存しましたか。 保存すると運用環境まで反映されます。

設定画面で「保存時に反映」を外している場合だけ、アプリの「変更を運用環境に反映」が別途必要です。

数字が記事の画像と違う

データは実行日から逆算して作られます。 日が違えば数字も変わります。形が同じなら問題ありません。

関連記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?