Kintone上のカスタマイズなら「JSEdit for kintone」

はじめに

Kintoneを使っているほとんどの方は、Kintoneに備わっている標準機能使って利用をしているでしょう。確かにこの標準機能だけでもさまざまなことが出来るので、何も問題はないと思う方も多いと思います。ですが、中にはこんな機能が備わった物が作りたいと思っても、標準機能についていなく実現できないという事態が起こることもあります。そんな時に、KintoneのJavaScriptカスタマイズをすることで多彩な機能を実現できるようになります。
Kintoneのカスタマイズをする場合は、基本はオフラインの環境でコードを書くためにエディターを用意し、コードを書いてjsファイルとして保存する。最後にKintoneアップロードして自分の書いたコードの機能が実現できるようになります。しかし、この方法だと、少し修正するだけでもオフラインでの環境でコードを手直しして、アップロードして動作確認してとなります。正直めんどくさいです。
そこで、JSEdit for kintoneです。JSEdit for kintoneはKintoneのプラグインで、Kintone上でJavaScriptやCSSファイルの編集と更新が出来るようになります。Kintone上で出来るのでアップロードするという手間が省け時間短縮し作業の効率化にもなります。
そんなJSEdit for kintoneについて紹介します。

1.JSEdit for kintoneの準備

JSEdit for kintoneを使うためには少し準備が必要になります。最初の作業として、ダウンロードが必要で、その後インストールが必要になります。何も知らないと、Kintoneのプラグインから「プラグイン追加」でいれればいいじゃないと思う人も多いはず。ですがKintoneのプラグインを見てみると何もなく追加できない状態です。これはKintoneにプラグインがもとからなく、プラグインを追加するときはZIPファイルにて提供されたプラグインに必要なデータをダウンロードして、Kintoneシステム管理から読み込みとインストールを行い、Kintoneにプラグインを入れる作業が必要だからです。この作業をしないとプラグインがKintoneにない状態なので何もできません。

2.JSEdit for kintoneのダウンロード

JSEdit for kintoneをKintoneのプラグインとして使うためのダウンロードは、
URL：https://developer.cybozu.io/hc/ja/articles/205452653
のページに遷移した後、ダウンロードと書いてある項目の下の「SAMPLE_jsEdit_plugin_v4.3.zip」からダウンロードします。

ZIPファイルがPCにダウンロードされてれば完了です。

3.JSEdit for kintoneのインストール

Kintoneのポータル画面で、右上の歯車のマークをクリックしKintoneシステム管理を選びます。

Kintoneのシステム管理の画面で、その他の項目の「プラグイン」を選びます。

読み込むをクリックするとプラグインのファイルを読み込める画面が出てくるので、参照から「SAMPLE_jsEdit_plugin_v4.3.zip」を選択し読み込むをクリックします。

読み込みが完了すると、プラグインが利用できるようになります。Kintoneシステム管理で読み込んだプラグインは、すべてのアプリから利用することができます。

4.JSEdit for kintoneの追加

ポータル画面からJSEdit for kintoneをいれたいアプリクリックします。

アプリの画面にで右端の歯車をクリックしアプリ設定画面を開きます。アプリ設定画面で設定のタブを選択し、カスタマイズ／サービス連携の項目の「プラグイン」をクリックします。

プラグインの画面で「プラグインの追加」をクリックし、JSEdit for kintoneをチェックを入れて選択して「追加」をクリックします。ここまでの作業でプラグインの設定は完了です。

5.JSEdit for kintoneの使い方

プラグインを設定したら後は使うだけです。プラグインの画面でJSEdit for kintoneのプログラムの設定（歯車のマーク）をクリックします。

表示された画面がJSEdit for kintoneのプラグインの基本画面になります。まずはじめは編集するためのファイルを追加するのですが、JSEdit for kintoneはJavaScriptとCSSを編集できるので、「PC用のJavaScriptファイル」なのか、「スマートフォン版のJavaScriptファイル」なのか、「CSS」ファイルなのかを新規作成の隣のドロップダウンから選択します。今回はPC用のJavaScriptファイルを選択します。

選択し終えたら、「新規作成」をクリックしJavaScriptファイルのファイル名を入力し「OK」をクリックします。

編集と保存

ファイルを作るとJavaScriptの雛形が表示されいつでも編集できる状態になります。
編集後に「保存」ボタンをクリックすると、編集した内容がKintoneにアップロードされて保存されます。ここで「運用環境に反映する」をチェックしておくと、プレビュー環境だけでなく運用環境に反映されるので、いちいちアプリの更新をしなくてよくなります。

まとめ

今回はKintoneをカスタムする場合は「JSEdit for kintone」のプラグインがとても便利で使いやすいという紹介しました。これを使えばちょっとした編集での毎回のアップロードの時間が短縮できるので、業務の効率化になること間違いなしです。