株式会社XenoX
統合開発エディタ

kintone画面内で、 カスタマイズ開発が完結。

kintoneのJS/CSSカスタマイズをブラウザ画面内で直接編集できる統合エディタプラグイン。
コード補完・AI支援・GitHub連携で、面倒なローカル開発環境やファイルアップロード作業を不要にし、
初心者から上級者まで効率的なkintone開発を実現します。

  • kintone画面内でJS/CSSを直接編集・保存
  • コード補完・スニペット・CDNライブラリ簡単追加
  • GitHub連携によるバージョン管理・履歴
  • AI(Claude/OpenAI)でバイブコーディング
対象JS/CSSカスタマイズの統合開発
環境ブラウザ内フル機能エディタ
機能コード補完+Git+AI連携
こんなお悩み、ありませんか?

kintoneカスタマイズの度に、
ローカル編集→アップロード→確認の往復で疲れる。

  • 01

    毎回のファイルアップロードが面倒

    kintone標準のカスタマイズ画面では、JS/CSSをローカルで編集してファイルアップロード、動作確認、修正してまたアップロードの繰り返し。この往復作業が非効率で開発速度が上がらない。

  • 02

    バージョン管理ができず誰が何を変更したか分からない

    ファイルを毎回ダウンロード・アップロードする運用ではバージョン履歴が残らず、「誰がいつ何を変更したか」「前のバージョンに戻したい」といった要望に対応できない。

  • 03

    kintoneイベント・APIを毎回ドキュメントから探す

    kintoneカスタマイズ初心者は、イベント名やAPI記法を毎回ドキュメントから調べてコピペする必要があり、コード補完もないためタイプミスやコピペミスが頻発してしまう。

本プラグインが解決します

kintone画面内で直接コードを編集、
AI・Git・コード補完で開発完結。

プラグイン設定画面内に搭載されたフル機能エディタで、JS/CSSを直接編集・保存・デプロイ。
kintoneイベントのコード補完、AIによるコード生成、GitHub連携によるバージョン管理まで統合し、
ローカル開発環境なしで本格的なkintoneカスタマイズを実現します。

MAIN FEATURES

主要な機能

01

ブラウザ内フル機能エディタ(Ace)

kintoneのプラグイン設定画面内で、JS/CSSコードを直接編集して保存・デプロイ。シンタックスハイライト、コード補完、テーマ切り替え、全画面表示、2ペイン分割表示など、本格的な開発環境をブラウザ内で提供します。

ブラウザ内エディタ画面
02

コード補完&スニペット呼び出し

kintoneカスタマイズで頻出のイベント・API・よく使うコードパターンをワンクリックで挿入。kintone.events.on、REST API呼び出し、フィールド取得・設定など、初心者でも迷わずカスタマイズが可能です。

コード補完・スニペット
03

CDNライブラリ簡単追加

jQuery、Chart.js、DataTables、Vue.js、Lodashなど定番ライブラリをリストから選択するだけで読み込み設定。CDN URLを調べる手間なく、豊富な外部ライブラリを活用したカスタマイズが実現できます。

CDNライブラリ設定
04

AIアシスタント連携(Claude/OpenAI)

自然言語で指示すると、現在のkintoneアプリ・フィールド情報をコンテキストとしてAIがコードを生成・直接エディタに書き込み。初心者でも高度なカスタマイズをAI支援で実現できます。

AIアシスタント
VERSION CONTROL

GitHub連携によるバージョン管理

カスタマイズコードの履歴管理・チーム開発・安全なデプロイ

4段階のバージョン管理フロー

  1. 1
    GitHub連携設定

    アクセストークン・リポジトリを設定するだけで自動連携開始

  2. 2
    コミット・プッシュ

    エディタ内で編集したコードをワンクリックでGitHubへコミット

  3. 3
    履歴閲覧

    過去のコミット履歴を時系列で確認、変更内容をdiff表示

  4. 4
    ロールバック

    問題発生時は過去バージョンをワンクリックで復元・デプロイ

チーム開発での活用例

開発者A
レコード一覧画面のUI改善 → commit & push

担当機能の開発完了後、コメント付きでGitHubへコミット

開発者B
詳細画面の入力チェック機能 → merge確認

並行開発した機能をマージ、競合がないか履歴で確認

管理者
本番環境で不具合発生 → 即座にロールバック

過去の安定バージョンをワンクリックで復元、被害を最小化

WORKFLOW

開発の流れ

  1. エディタでコード編集
    STEP 1

    ブラウザ内エディタでコード編集

    kintoneのプラグイン設定画面でAceエディタを起動。シンタックスハイライト、コード補完、スニペット呼び出し機能を使って、JS/CSSを効率的に編集・作成します。

  2. AI支援によるコード生成
    STEP 2

    AI支援でコード生成・改善

    ターミナルパネルのAIチャット機能で、自然言語指示からコードを自動生成。現在のアプリ情報・フィールド構成をコンテキストとして、的確なカスタマイズコードをAIが提案・直接エディタに挿入します。

  3. GitHub連携とデプロイ
    STEP 3

    保存・デプロイ・バージョン管理

    編集完了後は保存ボタンでkintoneへ即座にデプロイ。同時にGitHubへコミット・プッシュしてバージョン履歴を記録。チーム開発やロールバック対応も安心して運用できます。

USE CASES

活用シーン

情シス・開発担当者

日常的なkintoneカスタマイズ効率化

kintoneの入力チェック、画面レイアウト調整、集計・グラフ表示などの定常カスタマイズ作業で、ローカル開発環境の準備やファイルアップロード往復を完全に排除。ブラウザだけで本格的な開発を実現できます。

カスタマイズ初心者

コード補完・AIでスキルアップ

kintoneイベントやAPI記法が分からない初心者でも、豊富なスニペット呼び出しとAIアシスタントで段階的にスキル向上。「こんな機能を追加したい」という自然言語指示から、実用的なコードを自動生成できます。

チーム開発

GitHub連携で安全なバージョン管理

複数人でkintoneカスタマイズを開発する際、GitHub連携により「誰が・いつ・何を変更したか」を完全に記録。問題発生時の迅速なロールバック、機能追加時のマージ確認など、プロ品質の開発運用を実現できます。

外部ライブラリ活用

CDN連携で高度なUI・機能実装

Chart.js、DataTables、FullCalendar、Vue.jsなど定番ライブラリをリストから選択するだけで導入。CDN URLを調べる手間なく、グラフ表示・テーブル操作・カレンダー・SPA化などの高度な機能をカスタマイズに組み込めます。

モバイル対応

PC・モバイル両対応カスタマイズ

desktop / mobile × JS / CSS の4区分でファイルを管理し、PC画面とモバイル画面で異なるカスタマイズを適用可能。レスポンシブ対応や、モバイル専用の入力支援機能など、デバイス特性に応じた最適なUXを提供できます。

PRICE

料金プラン

1ドメイン / 月額: 6,000円(税抜)

【30日間のトライアルあり】

プラグインのトライアル・契約にはログインが必要です
アカウント作成がまだの方は新規登録をお願いします