いつも皆さんの投稿や知見に助けられています。
私自身、kintoneのカスタマイズ開発を続けていく中で、
次のような「あるある課題」に何度も直面してきました。
- コードのバラつき：担当者によって書き方や構造が違い、保守・引継ぎが大変
- 環境構築の面倒さ：顧客環境や案件ごとに再設定が必要
- ドキュメントレス問題：アプリ構成（フィールド・ビューなど）の記録が属人化
この課題を少しでも解決できないかと考え、
自分なりのアプローチをOSSツールとして公開しました。
もし同じような悩みをお持ちの方がいれば、参考になれば嬉しいです。
Toolkitの概要
Toolkitは、kintone開発を標準化・効率化することを目的とした
Tampermonkey（ブラウザ拡張）ベースのユーザースクリプトです。
特徴は以下の通りです：
| 機能 |
概要 |
| Health / Fields / Views / Graphs タブ |
アプリ構成を可視化（フィールド・ビュー・グラフ・カスタマイズ） |
| Templatesタブ |
標準化されたカスタマイズテンプレートを呼び出し、すぐ試せる |
| Monaco Editor搭載 |
構文チェック付きのブラウザ内コードエディタ |
| フィールド補完サジェスト |
kintoneアプリのフィールドコードを自動補完 |
| Markdown / CSV出力 |
ドキュメント作成を自動化し、Notionなどへ貼り付け可能 |
こだわりポイント：「ポータビリティ」
Toolkitは、ブラウザ拡張（Tampermonkey）として動作するため、
環境に依存せず「どのkintoneでも」同じ体験が可能です。
案件が変わっても、あなたの開発標準は常にあなたのブラウザに。
管理者権限が不要なケースでも、検証環境としてすぐ試せます。
※ご利用時は、社内ポリシーに従ってご判断ください。
背景と想い
このToolkitは、「kintone開発の体験をもっと自由に、もっと高品質にしたい」
という想いから生まれました。
「コードを書く」だけでなく、
「アプリ構成を可視化し、理解する」「再利用しやすいコードを書く」
という開発体験（DX）全体の標準化を目指しています。
もし興味を持っていただけたら
Toolkitはオープンソースとして公開しています。
ご自由に試していただき、改善案やご意見をいただけると嬉しいです！
インストール（Tampermonkey用）
https://github.com/youtotto/kintone-app-toolkit/raw/refs/heads/main/kintoneAppToolkit.user.js
ソースコード／詳細
ご利用・ご意見のお願い
- OSSとして開発しているため、StarやIssueでのご意見が励みになります！
- ご利用の際は、社内セキュリティポリシーの範囲でお試しください。
最後に
Toolkitは「完成品」ではなく、開発者同士で磨いていく標準化のきっかけです。
ぜひ、皆さんの視点で「もっとこうした方がいい」といったご意見をいただけたら嬉しいです。
7 Likes
aaa
2
名称とフィールドコードが一致していないところをハイライト(強調)表示がよいです。
他のメンバーが作ったアプリなどの把握で便利です。
「フィールドコードと表示名は合わせてありますから、カスタマイズしやすいはずです」と言われて一致していないとか、数字で始まるフィールドコードは、自動で_数字にされる制約があったり。
テンプレート機能でコードを作って、コピーしてその後どうするかは環境によって違いますが、補足説明として候補は示してもよいかもと感じました。
JSEdit for kintoneを標準で開発していると、このスクリプト上からカスタマイズが更新できるのかなと期待しました。
2 Likes
AAAさん、コメントありがとうございます！
おっしゃる通り、ブラウザ上で直接コードを編集・反映できる「JSEdit」的な体験は、今後Toolkitで実現していく予定です。
実は本日のアップデート（v1.6.0）で、
テンプレートを編集→Monaco Editor → Upload & Deploy（アップロード＆デプロイ）機能を追加しました。
これにより、
- ブラウザ上でコードを編集
- ファイル名とアップ先（デスクトップ／モバイル）を指定
- そのまま kintoneにデプロイ完了！
という流れがToolkit内で完結するようになりました。
今後はこの仕組みを拡張し、
- 既存ファイルの上書き編集／差し替え（JSedit相当）
- ブラウザ内での即実行テスト
- 変更履歴の比較・復元機能
など、より実践的な“ブラウザ完結型カスタマイズ環境”を目指します。
Toolkitは 「開発環境を共有せずに、同じ標準で開発できる」 ことをコンセプトにしており、Tampermonkeyだけでどのkintoneでも同じ体験が可能です。
今後も改善を重ねていきますので、
ぜひStarやIssueなどでフィードバックいただけると嬉しいです
3 Likes
ありがとうございます！
たびたびの告知で恐縮ですが、本日 v1.7.0 を公開し、
JSEdit互換の機能 を実装いたしました 
JSEdit互換のUIを統合
Snippets(GitHub)との連携
Preview保存＋Deployをワンボタン化
実装時点ではCSS非対応
ライブラリ追加は非対応
本家JSEdit様には及ばない部分も多いですが、
Toolkitならではの特徴として、
- Snippets（関数サンプル）を気軽に呼び出せる
- タブ移動でフィールドコードを確認しながら開発を進められる
といった、開発の流れを止めない工夫も入れています。
よろしければ、またご感想などお聞かせください
2 Likes
aaa
6
カスタマイズタブの
ダウンロードボタンはファイルとしてダウンロードボタンですが、
サーバー上のカスタマイズファイルをダウンロード(同期)してくるのかと勘違いしました。デプロイボタンの隣にあった。
- 画面右側の更新ボタン
- ファイル名をクリックしたときの動作
- 画面を一覧ページを読み込み直したときの違いの関係が少し混乱しました。
コードを編集してデプロイしないで、ファイル名をクリックすると編集内容が消える？
しかし、すごい勢いですね。
2 Likes
aaa
7
機能切り替えのタブのクリックする位置がタブごとに高さが変わるので
- 高さをある程度固定するか
- タブを下に置くか
- 移動用のショートカットを矢印キーに割り当てるか
などご検討お願いいたします。
画面上から kintone-app-toolkit自体のバージョン番号を見たいです。
（Tampermonkeyからソースを見れば良いのですが）
2 Likes
aaaさん、いつもありがとうございます！
確かに、上下させる必要もないですし、高さ固定のほうが使いやすいですね。
次期バージョンにて、レイアウトの調整を行いたいと思います。
2 Likes
aaaさん
お待たせいたしました！
Ver 1.8.1で以下のように対応しました
- Customize：新規ファイルのアップロードに対応
- Templates：GitHub 説明ページへのリンク追加
- UI：高さ統一＆バージョン表示
高さを統一したのでタブ切り替え時のがたつきはかなり軽減されたと思います。
また、バージョン表示の他、いくつかの修正をしています。
お手数ですがバージョンアップをお願いいたします！
1 Like
aaa
11
el.querySelector('#fi-dl-csv').addEventListener('click', async () => {
KTExport.downloadText(
`kintone_fields_${appId}.csv`,
KTExport.toCSVString(rows, FD_COLUMNS),
'text/csv;charset=utf-8'
);
}, { passive: true });
を
el.querySelector('#fi-dl-csv').addEventListener('click', async () => {
KTExport.downloadCSV(
`kintone_fields_${appId}.csv`,
rows,
FD_COLUMNS,
{ withBom: true }
);
}, { passive: true });
あと
el.querySelector('#kg-dl-csv').addEventListener('click', () => {
の中身も変更してみたら
手元の環境では、BOMがついた状態でダウンロードできるようになりました。
2 Likes
aaa
12
バージョンをVer.1.8.3にしました。
CSVファイルもBOMがついており、Excelでそのまま開けるようになりました。
ありがとうございます。
Qiitaのこの記事もよかったです。
探さない・見に行かない・覚えない業務改善 ─ Tampermonkeyで作るマイクロSaaSの設計事例 #userscript - Qiita
- 既存のシステムから顧客ID情報をつかってkintoneの特定アプリを指定して検索するリンクを作るとか
- 検索用のinput要素へのクリップボードから貼り付けのイベントを監視して貼り付け時に自動検索する
という簡易的な修正とか修正をすぐしたいときに使っていましたが、使い方によっては業務効率に使えるのですね。Tampermonkeyへの認識が変わりました。
1 Like
aaaさん
お知らせするのを忘れておりました！すみません！ｗ
BOM付きCSVも役立ったようで何よりです！
確かにＥｘｃｅｌそのまま開く用途のほうが多そうだなと思い、採用させていただきました。
ご提案いただきましてありがとうございました！
Qiita 記事も読んでいただきありがとうございます！
既存システムのIDを使って、kintoneアプリへの検索リンクを生成
input の paste イベントを拾って自動検索
aaaさんの使い方もまさに “現場のつらみを 1 行の工夫で溶かす” 発想だと思います。
僕がやっていることも基本は同じで、その発想を「構造化して誰でも使える形にした」のが
Toolkit や Qiita 記事の部分かな、と思っています。
Tampermonkey はちょっとした工夫でも
業務が一気に軽くなるので、本当に面白い領域ですよね！
1 Like
aaa
14
同じTamperMonkeyという仕組みを見ながら、技術があるのと、ないのではこんな違いががあることを認識しました。
社内の過去のやりとりをみたら2019年にはGreaseMoneky/TamperMonkeyを使い始めていたのですが、たいして進歩せずでした。
マニュアルと実行環境とログ・統計閲覧が一体になって、APIとローカルのファイルを操作できるといいなと考えていたのですがTamperMonkeyをつかったらある程度なんとかなりそうに思えてきました。
以前、投稿されていた画面キャプチャーに
アプリ切り替えのようなものが写っていました。
これはどのようなものなんですか？業務一覧やKPI/生産性とい項目だけも気になります。
1 Like
以前の会社では、全社横断のチケットシステムを使っていて、
部署ごとに足りない部分を Tampermonkey で補う、いわゆる“ちょい足し”運用をしていました。
前例が多かったおかげで、僕自身もかなり活用できています。
やっぱり「見たいときにすぐ見られる」ってだけでも、現場のストレスって大きく減りますよね。
Tampermonkey なら UI を後付けできるので、
- 手順（マニュアル）を画面横に表示
- ボタンから社内APIを叩いて処理実行
- 実行ログだけ別DBに保存して統計化
みたいな構成にすると、
「マニュアル＋実行＋ログ」の一体型ツールにかなり近づけるんじゃないかと思います！
ちなみに、画像のボタン群は Toolkit > Template で使える
「index-quick-switch-buttons.js」 というテンプレートです。
一覧画面に、別一覧や外部リンクへ移動するボタンを追加する JS カスタマイズで、
よく使う一覧へ素早く移動できるので、ちょっとした導線改善に使えます。
ボタン名は仮で付けたものですが、よかったらこちらもぜひ 
1 Like
aaa
16
ありがとうございます。
TamperMonkeyを使って野望に近づきたいと思います。
前に作ったTamperMonkeyの例はないかなとおもって見つかった範囲では
絶対に印刷を想定されていない顧客情報ページをきれいに印刷したいという要望で印刷用にテキストボックス、チェックボックス、セレクトボックスを文字に変換、表示がずれないようにパーツを固定したり、ボタンを消したりなどしていました。
index-quick-switch-buttons.jsを使ってみました
Toolkit > Template から
index-quick-switch-buttons.js
を選択して「アプリに反映」を押すだけでアップロードされてサンプルが動いて便利です。
いままでは、大きなカスタマイズがないので、JSEdit for kintone を使っていましたがコードをコピーアンドペーストが必要でした。テンプレートがあるとストレスがないです。ちょい足しなのにテンプレート共有できるなんて。
このボタンは、もともとはビューの切り替え用のものだったですね。プラスしてリンクがある。
そう考えると、kintoneデフォルトの設定画面よりも kintone-app-toolkit の一覧ページから画面遷移なしで設定に入っていけるほうが便利です。
この動線も、マウス移動があったりで…
重ね重ねありがとうございました。
1 Like
