🔧

第2回 JSEdit for kintoneでJavaScriptを導入する

2025/07/12に公開

 JSEdit for kintoneでJavaScriptを導入する〜プラグインの設定とカスタマイズ準備〜

 はじめに前回の記事では、kintoneの「アプリの説明」を画面ごとに制御したいというニーズと、標準機能では対応できない理由について紹介しました。
今回は、JavaScriptによるカスタマイズを実現するために、「JSEdit for kintone」プラグインの導入と設定方法を解説します。

このプラグインを使えば、コードを書いてすぐにアプリに反映できるので、カスタマイズの第一歩として非常におすすめです。

 JSEdit for kintoneとは？JSEdit for kintoneは、kintoneアプリにJavaScriptやCSSを簡単に追加できるプラグインです。

以下のような特徴があります：
管理画面から直接コードを登録できる
複数のファイルをまとめて読み込める
プレビューやログ出力がしやすい
非エンジニアでも扱いやすいUI

 インストール手順（管理者向け）
 ① プラグインファイル（ZIP）を入手以下のページより、JSEditのZIPファイル（SAMPLE_jsEdit_plugin_v4.5.3.zip）をダウンロードします。

JSEdit for kintone

　ダウンロードしたZipファイルは解凍せずに使います

 ② kintoneの「プラグイン管理」画面にアクセス管理者権限でログインし、以下の手順でプラグインを追加します：
「kintoneトップページ」→「歯車】→「kintoneシステム管理」→「その他」→「プラグイン」→「読み込む」
先ほどダウンロードしたZIPファイルをアップロードして登録

　Zipファイルのままアップロードします
プラグイン一覧に以下のアイコンが表示されたらOK

 アプリへの適用方法
 ① 対象アプリを開くアプリ画面から歯車マークをクリック。

設定をクリック。

カスタマイズ/サービス連携の項目から「プラグイン」をクリックします。

 ② プラグインを追加追加するを押します。

「JSEdit for kintone」を選択して追加します。
JSEdit for kintoneにチェックを入れて、追加ボタンをクリックします。

 ③ プラグインの設定画面を開く追加後、JSEditの設定画面を開くと、JavaScriptやCSSの登録ができます。

 JavaScriptコードの登録方法設定画面では、以下のようにコードを登録できます：

複数ファイルの読み込み順：上から順に読み込まれるので注意
新規作成をクリック

任意の名前をつけてOKをクリックします。

これでコードを書く準備ができました。

 💡おすすめの設定：
console.log を使って動作確認
コメントを入れて可読性を高める
ファイル名にバージョンや用途を明記すると管理しやすい

 注意点複数のプラグインが干渉する可能性があるので、テスト環境で確認を

 次回予告🔜 第3回：「JavaScriptでアプリの説明を非表示にする」

〜詳細画面・編集画面対応の実装ステップ〜
いよいよ、実際のコードを書いて「アプリの説明」を画面ごとに制御していきます！

 おわりにJSEdit for kintoneは、JavaScriptカスタマイズの入り口として非常に便利なツールです。

次回はこのプラグインを使って、実際に「アプリの説明」を非表示にするコードを実装していきます。お楽しみに！