Home›Claude / Claude Code›rex0220 kSQL Dashboard Pro - AI(Claude Code)にダッシュボードを作らせる
rex0220 kSQL Dashboard Pro - AI(Claude Code)にダッシュボードを作らせる

rex0220 kSQL Dashboard Pro - AI(Claude Code)にダッシュボードを作らせるkSQL Dashboard Pro lets developers describe kintone dashboard requirements in…

元記事を読むRead original articleqiita.com(新しいタブで開きます)(opens in a new tab)
AI2 点サマリSummary highlight
  • kintoneのダッシュボードを日本語の要件を伝えるだけでClaude CodeなどのAIに自動生成させる環境「kSQL Dashboard Pro」が公開された。
  • 期間切り替えなど複雑な要件も自然言語で指示できる点が特徴。

kSQL Dashboard Pro lets developers describe kintone dashboard requirements in plain Japanese and have Claude Code generate the implementation automatically, including dynamic period filters and complex layouts.

本ページの本文と要約は AI による自動生成です。日本語版と英語版は言語ごとに独立して生成されるため、表現や詳しさが異なる場合があります。正確性は元記事 (qiita.com) をご確認ください。The body and summaries are AI-generated independently for each language, so wording and detail may differ. Verify accuracy at the original source (qiita.com).

要約と収集メタデータに基づく AI 解説。元記事全文の転載・翻訳ではありません。AI explainer based on the summaries and collected metadata, not a copy or translation of the full source article.

日本語の要件

kSQL Dashboard Proは、kintoneのダッシュボードについて日本語で要件を伝え、Claude CodeなどのAIに設定を生成させる環境だ。AIがプラグインへそのまま取り込める設定JSONを書き、利用者はインポートして保存するだけとされている。

期間とペイン

例では、期間を扱う変数コントロールに「今月」「前月」「今年」「去年」「期間指定」という選択肢を用意し、既定値を「今月」としている。ダッシュボードのペインは、受注金額のKPI、フェーズ別売上の棒グラフ、受注予定の明細表という3枚で構成される。設定は「settings/案件管理-期間ダッシュボード.json」に保存する。

列名と件数

生成時の要点は、AIが思い込みだけでSQLを書くのではなく、返される列名と件数を確認してから設定JSONを作成することにある。生成された設定はsettings/内のファイルとして残るため、gitによる履歴管理が可能になる。「先週の版に戻す」「変更内容をdiffで見る」といった操作を、ダッシュボード設定にも適用できる。

読み取り専用

構成には有償で別途入手するkSQL Dashboard Pro Ver.1と、npmから自動で入るkintone-sql-tools 3.66系を使用する。認証には2要素認証なしのログインユーザーを使い、閲覧専用アカウントがあれば最適とされる。AIはkintoneへ書き込まず、AIへの常設指示、ツールの拒否設定、エンジンの承認ゲートという3層で読み取り専用を守る。

テンプレートは自分のアカウントにprivateで作成してcloneする。作成画面のvisibilityは初期値がPublicであるため、必ずPrivateへ切り替える必要がある。設定JSONにはアプリ番号、フィールド名、業務用語が含まれる。

kintone Dashboard Requirements

kSQL Dashboard Pro provides an environment in which developers describe kintone dashboard requirements in plain Japanese and have Claude Code or another AI generate the implementation. This reduces the task to communicating the required filters and layout, then importing the resulting configuration.

The example requirement defines a period variable control with five choices: this month, last month, this year, last year, and a custom period. This month is the default selection.

Dynamic Period Filters

The dashboard contains three panes: an order-value KPI, a bar chart showing sales by phase, and a detail table for expected orders. These requirements can be passed together rather than configured individually.

The AI writes configuration JSON that can be imported directly into the plugin. The requested file is saved as settings/案件管理-期間ダッシュボード.json. After generation, the remaining steps are to import the file and save it.

Settings JSON

Before writing the configuration JSON, the AI checks the column names and number of rows returned by the SQL rather than creating SQL based on assumptions. The generated configuration remains as a file under settings/, allowing its history to be managed with git.

This makes it possible to return to the previous week’s version or inspect a diff showing what changed. A public template repository is available at https://github.com/rex0220/ksql-dashboard-pro-authoring, while SQL and pane configuration examples are provided in the SFA pack practical article.

The environment uses the paid kSQL Dashboard Pro Ver.1, obtained separately. kintone-sql-tools 3.66 series is installed automatically from npm.

Read-Only Account

Login-user authentication is used with an account that does not have two-factor authentication. A view-only account is recommended when available. The AI does not write to kintone, and the template protects read-only operation through three layers: permanent AI instructions, tool refusal settings, and an engine approval gate.

The template should be created privately under the user’s account and then cloned. Because Public is the default visibility on the creation screen, it must be changed to Private. This is important because the settings JSON contains application numbers, field names, and business terminology.

ポコとTECHガイドPoko & TECH Guide

ポコと当サイトのTECHガイドが、記事の要約と収集した情報から読みどころを語るAI生成の対話です。Poko and TECH Dashboard's own TECH Guide discuss the article's highlights in an AI-generated conversation based on its summary and collected source details.

  1. ポコPoko期間の選択肢が5つで、表示も3枚まとめてAIが作るんだ。これって大きいこと?Whoa, the AI handles five period options and three dashboard panes together. Is that a big deal?
  2. TECHガイドTECH Guideこの記事では、日本語の要件から、その構成を取り込める設定JSONにする点が特徴じゃ。複雑な期間切り替えまで指示できるのは大きいのう。The article highlights turning Japanese requirements into an import-ready settings JSON. Being able to specify complex period switching is a notable step.
  3. ポコPoko「返ってくる列名と件数を確認してから設定JSONを書く」って、つまりどういうこと?It checks the returned column names and row count before writing the settings JSON—what does that mean?
  4. TECHガイドTECH Guide説明されているのは、AIがSQLを思い込みで書かず、結果を見てから設定する流れじゃ。SQLはデータを取り出す指示、JSONは設定を整理して書く形式じゃよ。What’s described is a check-first workflow: the AI inspects the results instead of guessing the SQL. SQL requests data; JSON is a structured format for settings.
  5. ポコPoko自分なら、今月と前月を切り替える受注ダッシュボードを作って、変更もgitで見比べたいな!I’d build an orders dashboard that switches between this month and last month, then compare changes in git!
  6. TECHガイドTECH Guide実際の条件では、Ver.1は有償で、2要素認証なしのアカウントを使い、リポジトリは必ずPrivateじゃ。AIはkintoneに書き込まないが、設定JSONに業務情報が入る点も注意じゃよ。The stated constraints include paid Ver.1, an account without two-factor authentication, and a Private repository. The AI cannot write to kintone, but the settings JSON contains business information, so handle it carefully.
記事情報・収集記録Article details & collection record
出典Source
Qiita VSCodeコミュニティCommunity
公開日時 (JST)Published (JST)
収集日時 (JST)Collected (JST)
配信形式Format
ブログBlog
原文言語Source language
JA
重要度の位置づけImportance in this lane
MediumMedium priority(Claude / Claude Code 174件中、同等以上 138件)(138 of 174 Claude / Claude Code entries are equal or higher)
出典の平均重要度(掲載直近 30 件・最大 30 件)Source average (last 30 listed, up to 30)
1.7 / 31=情報 · 2=中 · 3=高1=Info · 2=Medium · 3=High
情報の寿命Half-life
中期 (チュートリアル)Medium-term (tutorial)

🧡Claude / Claude Code の他の記事More from Claude / Claude Codeもっと見る →View more →

ページ上部へScroll to top