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

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

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

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

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

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

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

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

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

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

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

これで準備は完了です。

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

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

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

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

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

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

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

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

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