kintone開発の「あるある課題」に終止符を ─ OSS Toolkit 公開しました!

いつも皆さんの投稿や知見に助けられています。
私自身、kintoneのカスタマイズ開発を続けていく中で、
次のような「あるある課題」に何度も直面してきました。

  • コードのバラつき:担当者によって書き方や構造が違い、保守・引継ぎが大変
  • 環境構築の面倒さ:顧客環境や案件ごとに再設定が必要
  • ドキュメントレス問題:アプリ構成(フィールド・ビューなど)の記録が属人化

この課題を少しでも解決できないかと考え、
自分なりのアプローチをOSSツールとして公開しました。
もし同じような悩みをお持ちの方がいれば、参考になれば嬉しいです。


:wrench: Toolkitの概要

Toolkitは、kintone開発を標準化・効率化することを目的とした
Tampermonkey(ブラウザ拡張)ベースのユーザースクリプトです。

特徴は以下の通りです:

機能 概要
Health / Fields / Views / Graphs タブ アプリ構成を可視化(フィールド・ビュー・グラフ・カスタマイズ)
Templatesタブ 標準化されたカスタマイズテンプレートを呼び出し、すぐ試せる
Monaco Editor搭載 構文チェック付きのブラウザ内コードエディタ
フィールド補完サジェスト kintoneアプリのフィールドコードを自動補完
Markdown / CSV出力 ドキュメント作成を自動化し、Notionなどへ貼り付け可能


:light_bulb: こだわりポイント:「ポータビリティ」

Toolkitは、ブラウザ拡張(Tampermonkey)として動作するため、
環境に依存せず「どのkintoneでも」同じ体験が可能です。

案件が変わっても、あなたの開発標準は常にあなたのブラウザに。
管理者権限が不要なケースでも、検証環境としてすぐ試せます。
※ご利用時は、社内ポリシーに従ってご判断ください。


:compass: 背景と想い

このToolkitは、「kintone開発の体験をもっと自由に、もっと高品質にしたい
という想いから生まれました。

「コードを書く」だけでなく、
「アプリ構成を可視化し、理解する」「再利用しやすいコードを書く」
という開発体験(DX)全体の標準化を目指しています。


:rocket: もし興味を持っていただけたら

Toolkitはオープンソースとして公開しています。
ご自由に試していただき、改善案やご意見をいただけると嬉しいです!

:link: インストール(Tampermonkey用)
https://github.com/youtotto/kintone-app-toolkit/raw/refs/heads/main/kintoneAppToolkit.user.js

:blue_book: ソースコード/詳細


:folded_hands: ご利用・ご意見のお願い

  • OSSとして開発しているため、StarやIssueでのご意見が励みになります!
  • ご利用の際は、社内セキュリティポリシーの範囲でお試しください。

:speaking_head: 最後に

Toolkitは「完成品」ではなく、開発者同士で磨いていく標準化のきっかけです。
ぜひ、皆さんの視点で「もっとこうした方がいい」といったご意見をいただけたら嬉しいです。

「いいね!」 5


名称とフィールドコードが一致していないところをハイライト(強調)表示がよいです。
他のメンバーが作ったアプリなどの把握で便利です。

「フィールドコードと表示名は合わせてありますから、カスタマイズしやすいはずです」と言われて一致していないとか、数字で始まるフィールドコードは、自動で_数字にされる制約があったり。

テンプレート機能でコードを作って、コピーしてその後どうするかは環境によって違いますが、補足説明として候補は示してもよいかもと感じました。
JSEdit for kintoneを標準で開発していると、このスクリプト上からカスタマイズが更新できるのかなと期待しました。

「いいね!」 1

AAAさん、コメントありがとうございます!
おっしゃる通り、ブラウザ上で直接コードを編集・反映できる「JSEdit」的な体験は、今後Toolkitで実現していく予定です。

実は本日のアップデート(v1.6.0)で、
テンプレートを編集Monaco Editor → Upload & Deploy(アップロード&デプロイ)機能を追加しました。

これにより、

  • ブラウザ上でコードを編集
  • ファイル名とアップ先(デスクトップ/モバイル)を指定
  • そのまま kintoneにデプロイ完了!
    という流れがToolkit内で完結するようになりました。

今後はこの仕組みを拡張し、

  • 既存ファイルの上書き編集/差し替え(JSedit相当)
  • ブラウザ内での即実行テスト
  • 変更履歴の比較・復元機能
    など、より実践的な“ブラウザ完結型カスタマイズ環境”を目指します。

Toolkitは 「開発環境を共有せずに、同じ標準で開発できる」 ことをコンセプトにしており、Tampermonkeyだけでどのkintoneでも同じ体験が可能です。

今後も改善を重ねていきますので、
ぜひStarやIssueなどでフィードバックいただけると嬉しいです:raising_hands:

「いいね!」 2

確認しました。すごい勢いですね。

「いいね!」 1

ありがとうございます!

たびたびの告知で恐縮ですが、本日 v1.7.0 を公開し、
JSEdit互換の機能 を実装いたしました :tada:

:white_check_mark: JSEdit互換のUIを統合
:white_check_mark: Snippets(GitHub)との連携
:white_check_mark: Preview保存+Deployをワンボタン化
:cross_mark: 実装時点ではCSS非対応
:cross_mark: ライブラリ追加は非対応

本家JSEdit様には及ばない部分も多いですが、
Toolkitならではの特徴として、

  • Snippets(関数サンプル)を気軽に呼び出せる
  • タブ移動でフィールドコードを確認しながら開発を進められる

といった、開発の流れを止めない工夫も入れています。

よろしければ、またご感想などお聞かせください:blush:

「いいね!」 1

カスタマイズタブの
ダウンロードボタンはファイルとしてダウンロードボタンですが、
サーバー上のカスタマイズファイルをダウンロード(同期)してくるのかと勘違いしました。デプロイボタンの隣にあった。

  • 画面右側の更新ボタン
  • ファイル名をクリックしたときの動作
  • 画面を一覧ページを読み込み直したときの違いの関係が少し混乱しました。

コードを編集してデプロイしないで、ファイル名をクリックすると編集内容が消える?

しかし、すごい勢いですね。

「いいね!」 1

機能切り替えのタブのクリックする位置がタブごとに高さが変わるので

  • 高さをある程度固定するか
  • タブを下に置くか
  • 移動用のショートカットを矢印キーに割り当てるか
    などご検討お願いいたします。

画面上から kintone-app-toolkit自体のバージョン番号を見たいです。
(Tampermonkeyからソースを見れば良いのですが)

「いいね!」 1

aaaさん、いつもありがとうございます!

確かに、上下させる必要もないですし、高さ固定のほうが使いやすいですね。
次期バージョンにて、レイアウトの調整を行いたいと思います。

「いいね!」 1