（著者：クローバ株式会社 門屋 亮）
こんにちは。クローバの門屋です。
kintone のカスタマイズでは作成したファイルを kintone にアップロードする必要があります。
デバッグのときにいちいちこれをやるのは非常に手間がかかるため、完成したファイルを kintone にアップロードするのを忘れてしまったりするケースもあります。
ちょっとしたカスタマイズがしたくなったときなど、ブラウザで手軽に JavaScript を触れたらなあという声をよく聞いていました。
そこでついに、kintone 上で JavaScript や CSS ファイルの編集、更新ができるようになりました！
以下に使い方を説明します。
JSEdit for kintone のダウンロード
こちらのページよりダウンロードしてください。
※ソースコードは、GitHubの「js-edit」内にあります。
※不具合や改善要望などは GitHub のIssue またはコメントからご連絡ください。
JSEdit for kintone のインストール
kintone のシステム管理から、プラグインの設定画面を開き、「読み込む」をクリックしてプラグインを読み込みます。
読み込みが完了すると、プラグインが利用できるようになります。
一度システム管理で読み込んだプラグインは、どのアプリからも利用することができます。
アプリ設定画面を開きます。
「設定」タブを開き、「カスタマイズ／サービス連携」の「プラグイン」をクリックして、プラグイン設定画面を開きます。
「プラグインの追加」をクリックします。
利用できるプラグインの一覧が表示されますので、「JSEdit for kintone」をチェックして、追加ボタンをクリックします。
これで準備は完了です。
JSEdit for kintone の使い方
「設定」の歯車アイコンをクリックします。以下のような画面が表示されます。
ファイルを追加する
まずはじめに編集するファイルを追加します。既存のカスタム JavaScript や CSS ファイルがある場合は、画面上部のドロップダウンメニューから選択して編集することもできます。
「新規作成」ボタンをクリックします。
ダイアログが開きますので、新しく作成する JavaScript ファイルのファイル名を入力します。
ファイルを編集する
JavaScript の雛形が作成されますので、自由にコードを編集してください。kintone のメソッドや API のパスなどのキーワードは自動的に補完されます。
ファイルを保存する
「保存」ボタンをクリックすると、編集したファイルが kintone にアップロードされて保存されます。
「運用環境に反映する」にチェックを入れると、プレビュー環境だけでなく運用環境にも反映されますので、すぐに動作を確認することができます。
※他の画面で設定した内容もすべて運用環境に反映されてしまいますので、注意してください。
ライブラリを読み込む
「ライブラリ」のリストからライブラリを選択して保存ボタンをクリックすると、Cybozu CDN からライブラリをインポートすることができます。ダイアログやガントチャートなど、幅広いライブラリを利用することができます。
Cybozu CDN についてはこちらも合わせてごらんください。
https://cybozudev.zendesk.com/hc/ja/articles/202960194
いかがだったでしょうか？「JSEdit for kintone」を使えば、ブラウザだけで手軽に kintone のカスタマイズを行うことができます。
この機会にぜひ kintone のカスタマイズにチャレンジしてみてください。
変更履歴
2019/10/01
- 記事内のスクリーンショットを jsEdit v4.2 に差し替えました。
す、素晴らしいのひとことです。。。
保存時にライブラリーの読み込み順序を変更する方法はありませんか？
jqureyを利用する際に読み込み順の関係でエラーになってしまいます。
「JS/CSSでカスタマイズ」の画面で読み込み順を修正していますが、毎回しなくてはならず少々不便です。
重宝しています。
ただmharumさんの書き込みにもありますように、
一回保存するとjQueryの読み込み順が逆転してしまうので、いちいち直さなければならないのが残念です。
kan komatsu様
検討いたします。
想定の挙動と現状の挙動をご教示いただけますか？
ありがとうございます。
現状につきまして、
アプリでは、JavaScript / CSSでカスタマイズ＞PC用のJavaScriptファイルで
url指定、アップロード含めて複数のjavaScriptファイルを指定しています。
JSEdit for kintoneのプラグインのconfig画面でjsの変更をし、保存ボタンを押して、
PC用のJavaScriptファイルを確認すると、
一番目に指定していた、urlで指定したjQueryファイルと
二番目に指定していた、urlで指定したjsファイルの順序が逆転しています。
そのまま表示画面に戻るとエラーが起きてしまうようです。
よろしくお願い致します。
kan komatsuさん
横から失礼します。
確認ですが、ver.3から、CDNライブラリでjQueryが先頭に来るように対応いただいていると思うのですが、
それ以降のバージョンでも同様の現象が発生するものでしょうか。
・(参考)バージョン３での変更差分(cdnLibsのあたり)
https://github.com/kintone/plugin-sdk/commit/9d5a74a293a9542fdb1301d1fad8d6cb695abf41
自分も以前同様の現象で困っており、Ver.3以降で解消されたと思っていたので、
発生条件があるなら教えて欲しいと思いまして。
ご指摘をいただきまして、バージョン確認を致しました所、
古いバージョンを使用しておりました。
最新バージョンで挙動が正常であることを確認いたしました。
お手数おかけいたしました。
よろしくお願いいたします。
お世話になっております。
今自分が使っているJSEdit for kintoneのパージョンをどこで確認できますか？
確かにjsEdit_plugin.zipをダウンロードしましたが、jsEdit_plugin_v4.1はそれよりも新しいバージョンでしょうか？
初心者で大変申し訳ございませんが、以下も確認させていただきたいので、よろしくお願い致します。
①もしバージョンアップしたJSEdit for kintoneをダウンロードした場合、今すでに利用して来たJSEdit for kintone（古いバージョン）の上書きになるようですが、それですでに作成しているコードには影響あるでしょうか？
②JSEdit for kintoneはJavaScriptを編集することはしておりますが、CSSの作成や編集も可能でしょうか？試しにやってみましたができなくて、CSSのアップロードはどんなふうにすればよろしいでしょうか？CSSをどんなソフトで書いたほうかよろしいでしょうか？
goro様
お世話になっております。
cybozu developer network 運営事務局です。
プラグインのバージョンについてはプラグインの設定画面にて確認することができます。
JSEdit for kintoneの場合、実際にコードを記述する画面 (記事内の『JSEdit for kintone の使い方』の画像) の
左側に「詳細」「バージョン」が記載しております。こちらが4となっていれば、jsEdit_plugin_v4.1が適用されています。
> ①既存コードへの影響について
影響しません
> ② CSSの適用について
CSSの場合、コードを記述する画面の上部にある『PC用のJavaScriptファイル』を『PC用のCSSファイル』に変更すればできます。
以上となります。
よろしくお願いいたします。
お世話になっております、いつも重宝させてもらっています。
現在2つKintoneの契約を行っているのですが、最近になって急に片方のKintone上でJSEditからJavaScriptやCSSを編集して更新をかけると「更新に失敗しました」と表示されるようになりました。
また、あるJavaScriptファイルに至っては「ファイルが取得できませんでした」と表示されます。
ちなみに全アプリで同様の挙動です。
もう片方のKintoneでは今まで通り使えています。
日々利用させて頂いていますので、
原因や修正方法が分かれば、ご教授頂けますと幸いです。
Naeko様
片方の環境でのみ起こるということですので、環境特有の問題と思われますが、原因にはもう少し情報が必要です。
まず、以下の記事を参考に、他のエラーメッセージを確認ください。
https://developer.cybozu.io/hc/ja/articles/207613916
また、最近になって急にということですので、具体的な時期と、何か設定変更をおこなっていないかご確認ください。
他のPCや、他のユーザーでも起こるかも確認いただけると良いかと存じます。
お手数ですが、その結果まだ原因が不明な場合はご連絡をお願いいたします。
ありがたく使わせていただいています。
コメント等で日本語入力がうまくできないのですが（変換前の文字が残る？）これはどうしようもないものなのでしょうか。ATOKとMS IME（Windows10付属）を使用しています。
picol様
ご連絡をありがとうございます。
当プラグインについては、Windows OSを利用の一部のユーザーから類似の事象が報告されています。
こちらのプラグイン、大変お世話になっております。
画面サイズまで拡大できると、さらに助かります。
K-OKZ 様
お世話になっております。
cybozu developer network 運営事務局です。
ご意見いただきありがとうございます。
こちらはサンプルプラグインとしてソースコードはGitHubに公開しておりますので、
ソースコードをダウンロードし、ご自身でもJavaScriptの修正をしていただけます。
よろしくお願いいたします。
お世話になっております。
スマートフォン用CSSを編集できるプラグインを探したいですが。ありますでしょうか。
chu thi hue 様
お世話になっております。
cybozu developer network 運営事務局です。
現時点でスマートフォン用 CSS を編集するためのプラグインはサンプルとして配布しておりません。
機能についてご要望があった旨、開発チームにフィードバックいたします。
また、本プラグインを用いてスマートフォン用 CSS を編集できるようにするためには、プログラムの改修が必要となります。
なお、「記事を参考にした技術的な質問」は、 お手数ですがcybozu developer コミュニティのご利用をお願いします。
ご確認のほど、よろしくお願いいたします。
本ページの「kintone のシステム管理から、プラグインの設定画面を開き、「読み込む」をクリックしてプラグインを読み込みます。」のkintone～は、試用期間でのログイン画面なんですが、JavaScript練習進められますか？デベロッパーメンバーは別のメルアド（試用期間のメルアドはNGらしいので）ですが･･･
コンソールに、1度は、ちゃんと、チュートリアルの「これはサンプルコードです」と出たのですが、その後は、
Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platformと出ています。
角田 英一 様
お世話になっております。
cybozu developer network 運営事務局です。
試用期間の間にJavaScriptの学習をしていただくことは可能ですが、
その場合は開発者ライセンスをおすすめします。
また、コンソールの出力の件ですが、提示いただいているメッセージはChrome自体のメッセージかと思われます。チュートリアルとは無関係の出力となります。
このコメント欄は記事に対するフィードバックが目的となっておりますので、
試してみて、もしも記事から派生した技術的なご質問がありましたらcybozu developer コミュニティをご活用ください。
よろしくお願い致します。