JSEdit for kintoneの使い方を解説！メリット・デメリットについても紹介！

皆様はkintoneのカスタマイズをどのようにされているでしょうか？
インストールするだけのプラグインで実装できるならそれに越したことはありませんが、プラグインだけでは対応できない場合、プログラミングでカスタマイズする方法があります。

Sublime TxetやVisual Studio Codeといった一般的なエディタでコーディングをしてからkintoneにアップロードして行う方法が一般的ですが、今回紹介するJSEdit for kintoneは、より簡単にkintoneカスタマイズを行うことができるプラグインとなっています。

本記事では、JSEdit for kintoneプラグインの使い方を一からご紹介していきます！

この記事でわかること

• JSEdit for kintoneの利用方法
• JSEdit for kintoneのメリット・デメリット

こんな人に向いている記事です

• JSEdit for kintoneを利用してkintoneカスタマイズをしたい方

プラグインでは対応できない！JavaScriptでアプリをカスタマイズ

kintone(キントーン)の標準機能ではちょっと手が届かない、そんな時に大活躍するのがプラグインです。
インストールするだけで利便性が向上するものから、少し設定は必要なものの、マウス操作だけで「こうだったらいいのに」を叶えてくれるものまで、数多くのプラグインが公開されています。

コムデックおすすめのすぐにつかえる無料プラグインはこちらでご紹介しています！
▼無料で使えるkintoneプラグイン！効率化を実現するおすすめ10選

しかし、プラグインはあくまで「こういうことができる」と機能が決まっているもの。
使い方によってはかなり複雑なこともできますが、プラグインを複数使っていると競合して動作が不安定になったり、自社が実現したいことにはあと一歩届かなかったりと、完全に自社にフィットしたプラグインというのはなかなかありません。

そんな時、JavaScriptでカスタマイズするという方法を取ることができるのもkintoneの強みの一つです。

cybozu developer networkでは、kintoneのユーザーがカスタマイズのアイディアを持ち寄り、JavaScriptのサンプルコードも多数公開されています。
サンプルコードをそのまま使うもよし、プログラミングの知識があれば自社用に改変して使うもよし、そのカスタマイズを行う際にあると便利なのが、今回ご紹介するJSEdit for kintoneプラグインです。

実際にサンプルコードを使ってアプリを予実管理アプリを作成した事例はこちら！
▼予実管理をkintoneで行う方法は？標準機能・無料プラグイン・有料プラグインそれぞれで紹介！

JSEdit for kintoneとは？kintone上でJavaScript・CSSを編集することができるプラグイン

通常、kintoneのカスタマイズをJavaScriptで行う場合、オフラインのエディタでコーディングを行い、ファイルをkintoneにアップロードをする必要があります。

修正作業もkintone上では行えないため、動作確認をして問題があれば、再度オフラインのエディタで修正したものをアップロードしなければなりません。
小さな修正でも上記の工程を踏まないとカスタマイズが行えないのは意外と手間になりますよね。

今回紹介する「JSEdit for kintone」はkintone上でJavaScriptやCSSのカスタマイズを行うことができるため、ちょっとした編集や修正を手軽に実施出来るプラグインです。

JSEdit for kintoneの使い方を解説！

JSEdit for kintoneの利便性がわかったところで、実際にどのように使用していくのか解説していきます。
ダウンロードから解説するので、導入の際はこちらの項目を参考にしてください。

1．JSEdit for kintoneをダウンロード

cybozu developer networkにあるJSEdit for kintoneのページよりダウンロードをしてください。

https://developer.cybozu.io/hc/ja/articles/205452653

ZIPファイルがダウンロードされたら、解凍はせずそのまま次のステップに進みます。

2．JSEdit for kintoneをインストール

JSEdit for kintoneのダウンロードが完了したら、kintoneを開きます。
ポータル画面右上の歯車マークから「kintoneシステム管理」をクリックし、「プラグイン」を開きます。

左上に「読み込む」ボタンが表示されるので、こちらをクリックします。

先ほどダウンロードしたZIPファイルを選択し、「読み込む」をクリックします。

これでインストールは完了です。

以後、JSEdit for kintoneをどのアプリでも利用することが可能です。

3．JSEdit for kintoneを使って実際に編集してみる

まず、kintoneカスタマイズを行いたいアプリにJSEdit for kintoneを設定します。
アプリの右端にある歯車マークから、設定画面を開きます。

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

開いた画面で「プラグインの追加」をクリックし、JSEdit for kintoneにチェックを入れて左上の「追加」をクリックします。

これでアプリへのプラグイン設定は完了です。

ここから、編集画面を開き、どのように編集できるか説明します。
プラグイン画面にあるJSEdit for kintoneの歯車マークをクリックすると下記のような編集画面が開きます。

JSEdit for kintoneのカスタマイズ方法は、以下の2パターンあります。

1. 既存ファイルの編集をする場合
2. 新規作成する場合

各パターンの編集方法をご案内していきます！

①既存ファイルの編集をする場合

アプリの設定画面を開き、「設定」タブ内の「JavaScript/CSSでカスタマイズ」をクリックします。

カスタマイズしたいJavaScript・CSSファイルを選択し、該当する場所へアップロードをします。

プラグイン画面にいき、JSEdit for kintoneの編集画面を開きます。

複数ファイルを読み込んでいる場合は、「新規作成」ボタンの横に2つドロップダウンリストがあるうちの右側から編集したいファイルを選択します。

選択すると、下の部分にコードが表示されますので、こちらを編集することができます。

②新規作成する場合

プラグイン画面にいき、JSEdit for kintoneの編集画面を開きます。
「新規作成」の横にある2つのドロップダウンリストのうち、左側から「PC用のJavaScriptファイル」「スマートフォン用のJavaScriptファイル」「PC用のCSSファイル」のなかの該当するものを選択します。

その後、「新規作成」をクリックし、ファイル名を入力します。

これで、新しいファイルを作成して編集ができる状態が整いました。

編集を終えたら、「保存」ボタンをクリックしてカスタマイズは完了です。

「運用環境に反映する」にチェックを打っておくと、運用環境にも自動で反映されるため、再度設定をする手間を省くことができます。

JSEdit for kintoneで新規作成したファイルは、JavaScript/CSSでカスタマイズのページから確認することができます。

JSEdit for kintoneのメリットは？

ここまでJSEdit for kintoneの概要や、利用方法について説明しました。

ここからは、JSEdit for kintoneのメリット面について紹介していきます。
JSEdit for kintoneを利用するかどうか検討する際に、参考にしてみてください。

kintone上でJavaScript・CSSの編集が可能なため、面倒なjsファイルのアップロードが不要

kintoneカスタマイズの面倒な点としてよく挙げられるのが、kintoneへのjsファイルのアップロードです。
1回きりであれば、そこまで面倒ではないのですが、コード修正のたびにjsファイル保存→アップロードを行わなければならないので、動作確認が億劫になってしまいますよね。

JSEdit for kintoneはkinton上でJavaScript・CSSファイルの編集や更新ができるため、このようなjsファイルのアップロードの手間を完全に省くことができます。

便利なライブラリを簡単に追加できる

JSEdit for kintoneの編集画面下部では様々なライブラリを選択することができます。

こちらから利用したいライブラリを選択し、「保存」をクリックすることでCybozu CDNからインポートすることができます。
このようにライブラリを利用することで、ダイアログやガントチャートといった機能を簡単に搭載することが可能です。

※Cybozu CDNとは？
cybozu.com利用者がカスタマイズに利用できるJavaScriptプログラムやCSSなどのコンテンツを提供しているサービスです。

JSEdit for kintoneのデメリットは？

前項ではJSEdit for kintoneのメリットについて説明しました。

こちらではデメリットについて紹介します。
メリットとデメリットを比較した上で、問題ないと思う方はJSEdit for kintoneを利用してみてください。

エディタエリアが小さいので、複雑な開発には不向き

JSEdit for kintoneは、Sublime Textといった通常のオフライン環境下のエディタに比べて、エディタ画面が小さいため、新規作成で複雑なコーディングをするには向いておりません。
そのため、「エディタ画面が小さいと開発がやりにくい！」と感じる方は、オフライン環境下のエディタでコーディングすることをおすすめします。

左：エディタ　右：JSEdit for kintone

日本語変換の挙動がおかしい場合がある

ひらがなから漢字へ変換する際の挙動がおかしくなる場合があります。

例えば、「開発する」を言葉を変換した場合、「かいはつする開発する」のように、変換前のひらがなが残った状態で変換されてしまうことがあります。

間違った保存をした場合、元のソースに戻すことができない

JSEdit for kintoneでのカスタマイズの保存は、エディタ下部の「保存」ボタンを押すだけで簡単に更新することができます。

しかし、編集したコードを更新してしまうと元のソースに戻すことができません。
そのため、JSEdit for kintoneでカスタマイズを行う際は、編集前にコードのバックアップをとっておき、コードの修正に誤りがあった場合でも元に戻せるようにしておきましょう。

JSEdit for kintoneは効率的なkintoneカスタマイズを可能に

今回はJSEdit for kintoneの概要や利用方法、メリット・デメリットについて解説しました。
通常のカスタマイズと違い、kintone上でカスタマイズできるため、手間となっていたjsファイルのアップロードが不要となるため、効率的な開発を行うことができます。

本記事で紹介しているメリット・デメリットを踏まえて、会社さまのご状況に合うようでしたら、JSEdit for kintoneを利用してみてはいかがでしょうか。