kintone App Toolkitは、kintone開発を “ブラウザだけで完結” させる。
Tampermonkeyベースのユーザースクリプトとして、
開発・調査・保守をひとまとめにした「開発者のSwiss Army Knife」です。
はじめに
いつもコミュニティの投稿や知見に助けられています。
僕自身、kintoneのカスタマイズ開発を続けていく中で、
次のような「あるある課題」に何度も直面してきました。
🧩 コードのバラつき：担当者によって構造が異なり、保守・引継ぎが大変
⚙️ 環境構築の面倒さ：顧客や案件ごとに再設定が必要
📄 ドキュメントレス問題：アプリ構成（フィールド・ビュー等）の記録が属人化
この課題を少しでも解決できないかと考え、
自分なりのアプローチを OSSツール として公開しました。
同じような悩みをお持ちの方の参考になれば嬉しいです。
🔧 kintone App Toolkitとは？
Toolkitは、kintone開発を標準化・効率化 するための
Tampermonkey（ブラウザ拡張）ベース のユーザースクリプトです。
kintoneのアプリ画面に「黒いパネル」が追加され、
アプリ構成をワンクリックで解析・出力できます。
💡 主な特徴
| タブ | 機能概要 |
|---|---|
| 🩺 Health | アプリの構造をヘルスチェック。フィールド数・ステータス・JS構成を可視化 |
| 🧱 Fields | フィールド定義を Markdown / CSV / JSON で出力。レイアウト順も正確に反映 |
| 👁️ Views | 一覧ビュー定義を一括表示し、filterCondやsortを可読化 |
| 📊 Graphs | グラフ設定を出力し、分類・集計条件を一覧化 |
| 🔗 Relations（New!） | ルックアップ・関連レコード・アクションの参照関係を一括可視化 |
| 🧩 Templates（New!） | JSテンプレートをGitHubから取得し、構文チェック付きで編集／デプロイ可能 |
| 🔄 Customize | JSEdit互換のUIを統合。GitHubスニペット連携＋安全なプレビュー＆デプロイをサポート |
🔗 Health / Fieldsタブ
🔗 Relationsタブ（新機能）
アプリ間のつながりを「見える化」する新機能です。
ルックアップ・関連レコード・アクションを一覧化し、構造理解や影響範囲の把握を支援します。
| セクション | 内容 |
|---|---|
| Lookups | 参照元アプリ、コピー項目、条件式を一覧化 |
| Related Records | 表示フィールドや連携条件（filterCond）を可読化 |
| Actions | 作成先アプリ、マッピング設定を開閉式UIで見やすく表示 |
🧩 Templatesタブ / Customizeタブ（新しい開発体験）
ブラウザだけで kintone カスタマイズを完結できる、新しい開発体験を提供します。
JSEditの操作感を残しつつ、Toolkitとして「構造化」「GitHub連携」「安全なデプロイ」を統合しました。
🔧 共通機能（Templates / Customize）
| 区分 | 機能名 | 概要・特徴 |
|---|---|---|
| 🎨 エディタ | MonacoベースのJSエディタ | 構文ハイライト・自動整形対応。JSEdit互換の直感的な編集体験を提供。 |
| 🗂️ GitHub連携 | JS / Snippets / Template 機能 | youtotto/kintoneCustomizeJS` からテンプレート集を自動取得 |
| 🧱 Snippets連携 | GitHub連携・ワンクリック挿入 | GitHubの snippets/ ディレクトリを取得。既存コードにワンクリックで挿入。 |
| ➕ 挿入機能 | Snippetコードをエディタへ挿入 | プレビュー中のSnippetをカーソル位置または末尾に自動挿入。 |
| 💾 保存＋デプロイ | ワンボタン操作 | Preview保存（PUT）とDeploy（POST）を統合。1クリックで反映完了。 |
| 🔄 リスト更新 | ファイルリストの再取得 | Customize/Preview構成をAPIから再取得し、最新状態を一覧に反映。 |
| 🚀 デプロイ監視 | 成功検知／404回避 |
preview/app/deploy.jsonをポーリング監視。404エラーを回避し安定動作。 |
🧠 Customizeタブ（v1.7.0〜）
Toolkit Customizeタブは、JSEditの利便性 × Toolkitの構造化思想 を融合した進化系エディタです。
Snippetsでアイデアを取り込み、ボタン1つで安全にデプロイ。
編集・可視化・保存・デプロイを同一画面で完結させます。
🔍 Field Scannerタブ（v1.8.0〜）
カスタマイズ JS/CSS 内で フィールドコードがどこで使われているか を可視化します。
- 操作
- Target（desktop / mobile）と Kinds（JS / CSS）を選択
- Scan をクリック
- 結果表から MD Copy / MD DL / CSV DL / JSON DL で出力
🌐 ポータビリティへのこだわり
Toolkitはブラウザ拡張として動作するため、
どのkintoneでも同じ体験 を再現できます。
案件が変わっても、あなたの開発標準はブラウザに残る
管理者権限がなくても検証が可能（※社内ポリシーに従ってご利用ください）
🛠️ 導入手順
前提
- Chrome / Edge / Firefox などのブラウザ
- Tampermonkeyがインストール済み
インストール
▶ GitHub RAW版を開く → クリックでインストール完了。
使い方
- kintoneアプリ一覧を開くと右下にパネルが表示
- 各タブをクリックしてアプリ構成を確認
🧰 開発者向け情報
Toolkitが利用している主なAPI：
| API | 用途 |
|---|---|
kintone.app.getFormFields |
フィールド定義取得 |
kintone.app.getFormLayout |
レイアウト構成 |
/k/v1/app/views |
一覧ビュー定義取得 |
/k/v1/app/reports |
グラフ設定取得 |
/k/v1/app/actions |
レコード作成アクション取得 |
/k/v1/file.json |
JSアップロード |
/k/v1/preview/app/deploy.json |
デプロイ処理 |
🛡️ 安全性
- 取得系（GET）APIのみ利用
- 閲覧権限に応じた情報のみ取得
- 設定はすべて LocalStorage に保存（外部送信なし）
🪄 更新履歴（抜粋）
| Version | Date | 内容 |
|---|---|---|
| 1.4.0 | 2025-11-03 | Templatesタブ追加（Monaco Editor対応） |
| 1.5.0 | 2025-11-05 | Relationsタブ追加（Lookup/関連レコード/アクション） |
| 1.6.0 | 2025-11-06 | Upload & Deploy機能追加 |
| 1.7.0 | 2025-11-07 | Customizeタブ追加 |
| 1.7.3 | 2025-11-08 | fieldsとlayoutをJS APIに対応 |
| 1.8.0 | 2025-11-10 | Field Scanner 追加 |
🤝 開発の背景と想い
このToolkitは「kintone開発の体験をもっと自由に、もっと高品質にしたい」
という想いから生まれました。
「コードを書く」だけでなく、
「構造を理解し、再利用できる形で残す」こと。
それが、私が考える 開発の標準化＝文化化 です。
Toolkitは完成品ではなく、
開発者同士で磨いていくための “共通の道具箱” です。
ぜひ、皆さんの視点で「もっとこうした方がいい」といったご意見をいただけたら嬉しいです。
🔗 リンク集
- 💾 インストール用スクリプト（Tampermonkey）
- 💻 GitHubリポジトリ
- 🌟 Star・Issue 大歓迎です！