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 アプリが一度にできます。

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

アプリ番号を控える

アプリ管理画面の例

アプリ画面のURL

このあとの手順で使います。アプリの 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 に貼る

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

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

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

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

覚えておくこと

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

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

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

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

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

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

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

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

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

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

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

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

できたかどうかの確認

一覧の切り替えに 【型別】 で始まる 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 件で試して止めているので、途中まで入って壊れることはありません。

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

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

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

数字が記事の画像と違う

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

関連記事

① KPI カード — 数字 1 つを、意味のある 1 つに
② データ表 — 明細も集計もこれ 1 つ
③ グラフ — 9 種あるが、SQL の形は 4 通り
④ マークダウン — 数字を、文章に埋める
kSQL Dashboard Pro 製品紹介 — 表示タイプ・設定画面・テーマなど機能全般
rex0220 kSQL 言語リファレンス — SQL の文法。プラグインで使えるのは読み取り系だけです