kintone 上でカスタム JS や CSS を編集できるプラグイン「JSEdit for kintone」を使ってみよう

著者名: 門屋 亮 (External link) (クローバ株式会社)

目次

はじめに

こんにちは。
クローバの門屋です。

kintone のカスタマイズでは作成したファイルを kintone にアップロードする必要があります。
デバッグのときにいちいちこれをやるのは非常に手間がかかるため、完成したファイルを kintone にアップロードするのを忘れてしまったりするケースもあります。
ちょっとしたカスタマイズがしたくなったときなど、ブラウザーで手軽に JavaScript を触れたらなあという声をよく聞いていました。

そこでついに、kintone 上で JavaScript や CSS ファイルの編集、更新ができるようになりました!

以下に使い方を説明します。

JSEdit for kintone のダウンロード

JSEdit for kintone よりダウンロードしてください。

ソースコードは、 GitHub (External link) の「js-edit」内にあります。
不具合や改善要望などは GitHub の Issue (External link) からご連絡ください。

JSEdit for kintone のインストール

kintone のシステム管理から、プラグインの設定画面を開き、「読み込む」をクリックしてプラグインを読み込みます。

読み込みが完了すると、プラグインが利用できます。

一度システム管理で読み込んだプラグインは、どのアプリからも利用できます。

アプリ設定画面を開きます。
「設定」タブを開き、「カスタマイズ/サービス連携」の「プラグイン」をクリックして、プラグイン設定画面を開きます。

「プラグインの追加」をクリックします。
利用できるプラグインの一覧が表示されますので、「JSEdit for kintone」をチェックして、追加ボタンをクリックします。

これで準備は完了です。

JSEdit for kintone の使い方

「設定」の歯車アイコンをクリックします。
次のような画面が表示されます。

ファイルを追加する

まずはじめに編集するファイルを追加します。
既存のカスタム JavaScript や CSS ファイルがある場合は、画面上部のドロップダウンメニューから選択して編集できます。
「新規作成」ボタンをクリックします。

ダイアログが開きますので、新しく作成する JavaScript ファイルのファイル名を入力します。

ファイルを編集する

JavaScript のひな型が作成されますので、自由にコードを編集してください。
kintone のメソッドや API のパスなどのキーワードは自動的に補完されます。

ファイルを保存する

「保存」ボタンをクリックすると、編集したファイルが kintone にアップロードされて保存されます。
「運用環境に反映する」をチェックした場合、プレビュー環境だけでなく運用環境にも反映されますので、すぐに動作を確認できます。

他の画面で設定した内容もすべて運用環境に反映されてしまいますので、注意してください。

ライブラリを読み込む

「ライブラリ」のリストからライブラリを選択して保存ボタンをクリックすると、 Cybozu CDN からライブラリをインポートできます。
ダイアログやガントチャートなど、幅広いライブラリを利用できます。

最後に

いかがだったでしょうか?
「JSEdit for kintone」を使えば、ブラウザーだけで手軽に kintone のカスタマイズを行うことができます。
この機会に、ぜひ kintone のカスタマイズにチャレンジしてみてください。

変更履歴

  • 2019/10/01
    • 記事内のスクリーンショットを JSEdit v4.2 に差し替えました。