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に差し替えました。