カテゴリー内の他の記事

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

フォローする

(著者:クローバ株式会社 門屋 亮

こんにちは。クローバの門屋です。以前こんな記事を書かせていただきました。

JavaScriptカスタマイズのデバッグをかんたんにするウラワザ

 kintone のカスタマイズでは作成したファイルをkintone や公開サーバにアップロードする必要があります。デバッグのときにいちいちこれをやるのは非常に手間がかかるため、dropboxを使って楽をしよう!という記事なのですが、会社のパソコンにdropboxをインストールするのはどうも、、という方がいらっしゃったり、完成したファイルをkintoneにアップロードするのを忘れてしまったりするケースもあります。ちょっとしたカスタマイズがしたくなったときなど、ブラウザで手軽にJSを触れたらなあという声をよく聞いていました。

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

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

JSEdit for kintone のダウンロード

こちらのページよりダウンロードしてください。

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

JSEdit for kintone のインストール

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

 

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

一度システム管理で読み込んだプラグインは、どのアプリからも利用することができます。
ここでは日報アプリからプラグインを使ってみることにします。

日報アプリのアプリ設定画面を開いて、「詳細設定」>「プラグイン」からプラグイン設定画面を開きます。

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

これで準備は完了です。

JSEdit for kintone の使い方

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

ファイルを追加する

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

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

ファイルを編集する

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

ファイルを保存する

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

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

ライブラリを読み込む

「ライブラリ」のリストからライブラリを選択して保存ボタンをクリックすると、Cybozu CDNからライブラリをインポートすることができます。ダイアログやガントチャートなど、幅広いライブラリを利用することができます。
Cybozu CDNについてはこちらも合わせてごらんください。

https://cybozudev.zendesk.com/hc/ja/articles/202960194


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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
Koji Sato

す、素晴らしいのひとことです。。。

Avatar
mharum

保存時にライブラリーの読み込み順序を変更する方法はありませんか?
jqureyを利用する際に読み込み順の関係でエラーになってしまいます。
「JS/CSSでカスタマイズ」の画面で読み込み順を修正していますが、毎回しなくてはならず少々不便です。

Avatar
Emma
Emmaにより編集されました
Avatar
kan komatsu

重宝しています。

ただmharumさんの書き込みにもありますように、

一回保存するとjQueryの読み込み順が逆転してしまうので、いちいち直さなければならないのが残念です。

Avatar
cybozu Development team

kan komatsu様

検討いたします。

想定の挙動と現状の挙動をご教示いただけますか?

Avatar
kan komatsu

ありがとうございます。

現状につきまして、

アプリでは、JavaScript / CSSでカスタマイズ>PC用のJavaScriptファイルで

url指定、アップロード含めて複数のjavaScriptファイルを指定しています。

JSEdit for kintoneのプラグインのconfig画面でjsの変更をし、保存ボタンを押して、

PC用のJavaScriptファイルを確認すると、

一番目に指定していた、urlで指定したjQueryファイルと

二番目に指定していた、urlで指定したjsファイルの順序が逆転しています。

そのまま表示画面に戻るとエラーが起きてしまうようです。

よろしくお願い致します。

 

Avatar
山崎 遼平

kan komatsuさん

横から失礼します。

確認ですが、ver.3から、CDNライブラリでjQueryが先頭に来るように対応いただいていると思うのですが、

それ以降のバージョンでも同様の現象が発生するものでしょうか。

・(参考)バージョン3での変更差分(cdnLibsのあたり)

https://github.com/kintone/plugin-sdk/commit/9d5a74a293a9542fdb1301d1fad8d6cb695abf41

 

自分も以前同様の現象で困っており、Ver.3以降で解消されたと思っていたので、

発生条件があるなら教えて欲しいと思いまして。

Avatar
kan komatsu

ご指摘をいただきまして、バージョン確認を致しました所、

古いバージョンを使用しておりました。

最新バージョンで挙動が正常であることを確認いたしました。

お手数おかけいたしました。

よろしくお願いいたします。

 

ログインしてコメントを残してください。
Powered by Zendesk