Kintone上のカスタマイズなら「JSEdit for kintone」

最終更新日：2026年8月7日

はじめに

kintoneカスタマイズ手法 比較

手法	難易度	費用	特徴
JSEdit for kintone（プラグイン）	中	無料	ブラウザ上でJS/CSSを直接編集・即時反映
ローカルエディタ（VS Code等）＋ファイルアップロード	中	無料	バージョン管理ができる・大規模開発向き
kintone UI Component	高	無料	Reactベース・高品質UIコンポーネント
外部開発会社へ依頼	低（依頼側）	有料	複雑な要件・工数削減

Kintoneを使っているほとんどの方は、Kintoneに備わっている標準機能を使って利用をしているでしょう。確かにこの標準機能だけでもさまざまなことが出来るので、何も問題はないと思う方も多いと思います。ですが、中にはこんな機能が備わった物が作りたいと思っても、標準機能についていなく実現できないという事態が起こることもあります。そんな時に、KintoneのJavaScriptカスタマイズをすることで多彩な機能を実現できるようになります。
Kintoneのカスタマイズをする場合は、基本はオフラインの環境でコードを書くためにエディターを用意し、コードを書いてjsファイルとして保存する。最後にKintoneにアップロードして自分の書いたコードの機能が実現できるようになります。しかし、この方法だと、少し修正するだけでもオフラインでの環境でコードを手直しして、アップロードして動作確認してとなります。正直めんどくさいです。
そこで、JSEdit for kintoneです。JSEdit for kintoneはKintoneのプラグインで、Kintone上でJavaScriptやCSSファイルの編集と更新が出来るようになります。Kintone上で出来るのでアップロードするという手間が省け時間短縮し作業の効率化にもなります。
そんなJSEdit for kintoneについて紹介します。

1.JSEdit for kintoneの準備

JSEdit for kintoneを使うためには少し準備が必要になります。最初の作業として、ダウンロードが必要で、その後インストールが必要になります。何も知らないと、Kintoneのプラグインから「プラグイン追加」でいれればいいじゃないと思う人も多いはず。ですがKintoneのプラグインを見てみると何もなく追加できない状態です。これはKintoneにプラグインがもとからなく、プラグインを追加するときはZIPファイルにて提供されたプラグインに必要なデータをダウンロードして、Kintoneシステム管理から読み込みとインストールを行い、Kintoneにプラグインを入れる作業が必要だからです。この作業をしないとプラグインがKintoneにない状態なので何もできません。

2.JSEdit for kintoneのダウンロード

JSEdit for kintoneをKintoneのプラグインとして使うためのダウンロードは、
URL：https://developer.cybozu.io/hc/ja/articles/205452653
のページに遷移した後、ダウンロードと書いてある項目の下の「SAMPLE_jsEdit_plugin_v4.6.0.zip」からダウンロードします。

ZIPファイルがPCにダウンロードされてれば完了です。

3.JSEdit for kintoneのインストール

Kintoneのポータル画面で、右上の歯車のマークをクリックしKintoneシステム管理を選びます。

Kintoneのシステム管理の画面で、その他の項目の「プラグイン」を選びます。

読み込むをクリックするとプラグインのファイルを読み込める画面が出てくるので、参照から「SAMPLE_jsEdit_plugin_v4.6.0.zip」を選択し読み込むをクリックします。

読み込みが完了すると、プラグインが利用できるようになります。Kintoneシステム管理で読み込んだプラグインは、すべてのアプリから利用することができます。

4.JSEdit for kintoneの追加

ポータル画面からJSEdit for kintoneをいれたいアプリをクリックします。

アプリの画面で右端の歯車をクリックしアプリ設定画面を開きます。アプリ設定画面で設定のタブを選択し、カスタマイズ／サービス連携の項目の「プラグイン」をクリックします。

プラグインの画面で「プラグインの追加」をクリックし、JSEdit for kintoneにチェックを入れて選択して「追加」をクリックします。ここまでの作業でプラグインの設定は完了です。

5.JSEdit for kintoneの使い方

プラグインを設定したら後は使うだけです。プラグインの画面でJSEdit for kintoneのプログラムの設定（歯車のマーク）をクリックします。

表示された画面がJSEdit for kintoneのプラグインの基本画面になります。まずはじめは編集するためのファイルを追加するのですが、JSEdit for kintoneはJavaScriptとCSSを編集できるので、「PC用のJavaScriptファイル」なのか、「スマートフォン版のJavaScriptファイル」なのか、「CSS」ファイルなのかを新規作成の隣のドロップダウンから選択します。今回はPC用のJavaScriptファイルを選択します。

選択し終えたら、「新規作成」をクリックしJavaScriptファイルのファイル名を入力し「OK」をクリックします。

編集と保存

ファイルを作るとJavaScriptの雛形が表示され、いつでも編集できる状態になります。
編集後に「保存」ボタンをクリックすると、編集した内容がKintoneにアップロードされて保存されます。ここで「運用環境に反映する」をチェックしておくと、プレビュー環境だけでなく運用環境に反映されるので、いちいちアプリの更新をしなくてよくなります。

よくある質問

JSEdit for kintoneとは何ですか？

kintoneのカスタマイズに使うJavaScript・CSSをブラウザ上で直接編集・適用できるプラグインです。別途エディタを用意することなく、kintone管理画面上でコードを書いて即座に動作確認できます。

JSEdit for kintoneは無料で使えますか？

はい、無料で利用できます。kintoneの管理者アカウントでプラグイン管理画面からインストールするだけで使い始められます。

kintoneのJavaScriptカスタマイズはどのような知識が必要ですか？

JavaScript（特にkintone APIの書き方）の基礎知識が必要です。Webフロントエンドの基礎（DOM操作・イベント処理）を理解していれば対応できます。kintone公式のサンプルコードも豊富に公開されています。

まとめ

今回はKintoneをカスタムする場合は「JSEdit for kintone」のプラグインがとても便利で使いやすいということを紹介しました。これを使えばちょっとした編集での毎回のアップロードの時間が短縮できるので、業務の効率化になること間違いなしです。