２．効率的にコードを書いてみる
この章では、サイボウズが提供しているツールやライブラリを利用してより効率的にkintoneカスタマイズを行う方法について紹介していきます。
現在サイボウズでは、kintone向けにJavaScriptカスタマイズのコーディングを効率的に行うために、主に以下の3つのツール及びライブラリを提供しています。
今回はこれらのツールやライブラリを使用すれば、どのように効率的に開発を進められるのかをご紹介していきます。
目次
- kintone extensionを使って効率的にコードを書いてみる
- kintone UI Componentを使って効率的にUIを実装してみる
- kintone JS SDKを使って効率的にコードを書いてみる
２－１．kintone extensionを使って効率的にコードを書いてみる
kintone extensionは、VSCode上でkintoneAPIのコードを書く際に、自動補完を行ってくれる開発ツールです。
kintone extensionを使えば、よりスピーディーにコードを入力することが可能になります。
・kintone extensionを使ってみる
ここからは、どのようにkintone extensionが動作するのかを確認してみましょう。
1: 自動補完機能
extensionを設定することでkintone API固有の構文を認識するようになり、
コードを途中まで入力すれば、VSCode上で自動補完してくれるようになります。
例えば、kintoneのレコード一覧画面のヘッダー部分を取得するコードを書きたい時、
このように「kintone.app」まで入力すれば、自動でapp後の候補を出してくれます。
2: snippet機能
kintone extensionでは、特定のキーワードからコードテンプレートを作成してくれるsnippet機能も提供されています。
例えば、アプリ情報を取得するREST APIのコードを書きたいとき、このように「ka-app-get」と入力し、Enterを押せば、
すぐにREST APIを実装するためのコードテンプレートを用意してくれます！！
・最後に
このように、kintone extensionを使用すれば、VSCode上でコードをより手軽に実装することができます。
snippet機能は、今回紹介した以外にもたくさんあるので、是非とも使ってみてください。
kintone extension snippet一覧
２－２．kintone UI Componentを使って効率的にUIを実装してみる
kintone UI Componentは、kintoneライクなUIをJavaScriptを使って生成することができるライブラリです。
kintone UI Componentを使用すれば、以下のようなメリットがあります。
- メリット１: UIを統一することができる
UI Componentをkintoneカスタマイズの標準とすることで、カスタマイズ時のUIパーツデザインに統一感が生まれ、
UIデザインが開発者の嗜好に依存することを防ぎます。
- メリット２：kintoneライクなUIをJavaScriptのみで簡潔に記載できる
これまでは、kintoneライクなUIパーツを作成する際には、必要なCSSファイルを用意し、
必要なクラスが記載されたDOMを生成することで、作成することができていました。
cybozu developer network 「スタイルシートの利用」
後述しますが、この方法ではコード量が少し多くなってしまいます。
しかし、kintone UI Componentを使用すれば、簡潔にコードを書くことができます。
・比較
では実際に、これまでのkintoneライクなUIパーツを生成する場合と、kintone UI Componentを使用する場合を比較してみます。
今回は「レコード一覧画面のHeader部分にテキストフィールドを設置したいとき」を想定して、検証してみます。
- kintone UI Componentを使用しない場合
まずはkintone UI Componentを使用しなかった場合の実装例を検証してみます。
はじめに、こちらのcybozu developer networkのサイトから、「51-modern-default.css」をダウンロードし、kintone環境上にアップロードします。
cybozu developer network リンク
JavaScriptファイルには以下のように記述して実装していきます。
(function() {
'use strict';
kintone.events.on('app.record.index.show', function(event) {
// kintoneアプリのヘッダーの取得
var kintoneAppHeader = kintone.app.getHeaderMenuSpaceElement();
// Textの親要素の生成
var textDiv = document.createElement('div');
textDiv.setAttribute('class', 'kintoneplugin-input-outer');
// Textの生成
var text = document.createElement('input');
text.textContent = 'テキストを入力する';
text.setAttribute('type', 'text');
text.setAttribute('class', 'kintoneplugin-input-text');
//ヘッダーへの適用
textDiv.appendChild(text);
kintoneAppHeader.appendChild(textDiv);
return event;
});
})();
このようにJavaScriptを用いて、DOMを生成する必要があるため、コード量は少し多くなってしまいます。また、同じようにCheckboxやDropdownなどのフィールドを生成するとなると、さらにコード量は膨大になってしまいます。
- kintone UI Componentを使用する場合
一方、kintone UI Componentを使用すると、以下のようなコードで実装することができます。
(function() {
'use strict';
kintone.events.on('app.record.index.show', function(event) {
// kintoneアプリのヘッダーの取得
var kintoneAppHeader = kintone.app.getHeaderMenuSpaceElement();
// ボタンの生成
var text = new kintoneUIComponent.Text({value: 'テキストを入力する'});
//ヘッダーへの適用
kintoneAppHeader.appendChild(text.render());
return event;
});
})();
これだけのコード量で生成することが可能になります。
・最後に
このように、kintone UI Componentを利用すれば、コードをすべてJavaScriptファイルで生成することができる上に、コードも簡潔に書くことが可能になります。
また、kintone UI Componentは、javaScriptカスタマイズだけでなく、
kintoneプラグイン開発や、最近実装されたkintoneポータルカスタマイズなどでも、汎用的に利用が可能です。
是非ともご活用ください。
kintoneプラグインについてはこちら
kintoneポータルカスタマイズについてはこちら
２－３．kintone-js-SDKを使って効率的にコードを書いてみる
kintone-js-SDKは、kintone REST APIをより簡単に使用することができるようになるツールです。
kintone-js-SDKにも導入することによるメリットは以下のようなものが挙げられます。
- メリット1:独自関数の利用
kintone-js-SDKを使用することで、SDKで独自で実装されている関数を使用することもできるようになります。
その一例が「レコード一括取得」の関数です。
kintone REST APIを用いて実装する場合、開発者自身で実装を行う必要がありますが、
SDKを利用すれば、こちらで用意されている関数を実装すれば、レコードを一括取得出来ます。
(こちらのサンプルコードは「比較」で記載しているので、是非ともそちらでご確認ください)
- メリット2:汎用性がある
kintone-js-SDKは、クライアントサイドのJavaScriptだけでなく、サーバーサイドのNode.jsでも動作させることが可能です。
そのため、AWS Lambdaのようなサーバーレスサービスなどでも利用可能です。
AWS Lambdaについてはこちら
・比較
実際に、JavaScriptでカスタマイズをする場合と、kintone-JS-SDKでカスタマイズする場合を比較して検証してみます。
今回は、「全レコードを一括取得する」場合で比較していきます。
- kintone-js-sdkを使用しない場合
SDKを使用せずに、JavaScriptを用いてレコード一括取得を行う場合、以下のようなコードで実装することができます。
kintone.events.on('app.record.index.show', function(event) {
createCursor().then(function(cursorId) {
return getAllRecords(cursorId);
}).then(function(records) {
//全レコードの取得
console.log(records);
}).catch(function(error) {
console.log(error);
});
return event;
});
//カーソルの作成
function createCursor() {
var appId = kintone.app.getId();
var body = {
'app': appId,
//titleフィールドと、contentフィールドを取得する場合
'fields': ['title', 'content'],
'size': 500
};
return kintone.api(kintone.api.url('/k/v1/records/cursor', true), 'POST', body).then(function(resp) {
return resp.id;
}).catch(function(error) {
console.log(error);
});
}
//カーソルを使用して、レコードを一括取得
function getAllRecords(cursorId, opt_records) {
var records = opt_records || [];
var body = {
'id': cursorId
};
return kintone.api(kintone.api.url('/k/v1/records/cursor', true), 'GET', body).then(function(resp) {
records = records.concat(resp.records);
if(!resp.next) {
return records;
} else {
return getAllRecords(cursorId, records);
}
}).catch(function(error) {
console.log(error);
});
}
今回は2019年7月より追加されたkintoneカーソルAPIを用いて、全レコードを一括取得するコードの一例を記載してみました。
このように、一括取得するだけでもこれだけのコード量が必要になってしまいます。
- kintone-js-sdkを使用した場合
一方で、kintone-js-sdkを用いて、レコードを一括取得すると、以下のようなコードでの実装ができます。
kintone-js-SDKには、「全レコードの一括取得」の機能が独自実装されているので、その機能を用いることができます。
kintone.events.on('app.record.index.show', function(event) {
var kintoneRecord = new kintoneJSSDK.Record();
var appId = kintone.app.getId();
var rcOption = {
app: appId,
//titleフィールドと、contentフィールドを取得する場合
fields: ['title','content']
};
//SDKのレコード一括取得関数
kintoneRecord.getAllRecordsByCursor(rcOption).then(function(rsp) {
//全レコードの取得
console.log(rsp);
}).catch(function(err) {
console.log(err.get());
});
return event;
});
これだけのコード量でシンプルに実装することができるようになります！！
・最後に
このように、kintone-js-sdkを使用すれば、簡潔にコードを記載することが可能です。
前述しましたが、kintone-js-sdkはNode.jsとしても動作するため、是非ともサーバーサイド環境などでもご活用ください。
またサイボウズではJavaScript向け以外にも様々な言語向けのSDKを提供しています。
SDK全般の詳細はcybozu developer networkの記事をご参照下さい。