kintone

kintoneで本当に便利なkintoneUtility

カスタマイズをするうえで、
他のアプリなどからレコードを取得したり、逆に追加や更新を行うのが最初の難関となる。

選択肢はいくつかあるが、大きく分けて3つ。

①kintone REST API
②XMLHttpRequest
③kintoneUtility

記述方法の違い(ex.複数レコードの取得)

kintone REST API

var body = {
“app”: 1,
“query”: “updated_time > \”2012-02-03T09:00:00+0900\” and updated_time < \”2012-02-03T10:00:00+0900\” order by $id asc limit 10 offset 20″,
“fields”: [“$id”, “created_time”, “dropdown”]
};
kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, body, function(resp) {
// success
console.log(resp);
}, function(error) {
// error
console.log(error);
});

cybozu developer network (kintone REST API レコード取得)

kintone REST API自体は決して使いづらいものではない。
僕もよく使う。
ただ一つだけ難ありなのが一度に取得できるレコードが500件に制限されている点だ。
これは回避方法もあるのだが、ならば最初からkintoneUtilityでいいのでは?と思ってしまう。

XMLHttpRequest

var params = ‘?app=1&query=’ +
encodeURIComponent(‘updated_time > “2012-02-03T09:00:00+0900” and updated_time < “2012-02-03T10:00:00+0900” order by $id asc limit 10 offset 20’) +
‘&fields[0]=’ + encodeURIComponent(‘$id’) +
‘&fields=’ + encodeURIComponent(‘created_time’) +
‘&fields=’ + encodeURIComponent(‘dropdown’);
var url = ‘https://{subdomain}.cybozu.com/k/v1/records.json’ + params;
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, url);
xhr.setRequestHeader(‘X-Requested-With’, ‘XMLHttpRequest’);
xhr.onload = function() {
if (xhr.status === 200) {
// success
console.log(JSON.parse(xhr.responseText));
} else {
// error
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();

cybozu developer network (kintone REST API レコード取得)

こちらも特に問題なく使用できるのだが、状況によっては非推奨とされている。
難しいことを考えたくないときはやっぱり…kintoneUtilityだ。

kintoneUtility

(function() {
“use strict”;
kintoneUtility.rest.getAllRecordsByQuery({
app: 3,
query: ‘ updated_time > \”2012-02-03T09:00:00+0900\” and updated_time < \”2012-02-03T10:00:00+0900\” order by $id asc ‘,
fields: [‘String’, ‘Number’],
isGuest: false
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
})();

たったこれだけだ。
kintoneUtilityの良さはこの使い勝手の良さ。シンプルで行数も少なく済む。
特に複雑な処理を繰り返す場合はこの行数の少なさでコード全体が見やすくなること間違いなし。

kintoneUtilityの使い方

kintoneUtilityを使うには、アプリの設定の「Javascript/CSSでカスタマイズ」から
https://kintone.github.io/kintoneUtility/kintoneUtility.min.js
をURLで指定する必要がある。
それだけで使用する準備は完了だ。

関数の一覧

使用できる関数は多くあり、こちら(外部リンク)で公開されている。

《使用可能な関数例》

  • kintoneUtility.rest.getRecord
  • kintoneUtility.rest.getRecords
  • kintoneUtility.rest.getAllRecordsByQuery
  • kintoneUtility.rest.postRecord
  • kintoneUtility.rest.postRecords
  • kintoneUtility.rest.postAllRecords
  • kintoneUtility.rest.putRecord
  • kintoneUtility.rest.putRecords
  • kintoneUtility.rest.putAllRecords
  • kintoneUtility.rest.deleteRecords
  • kintoneUtility.rest.deleteAllRecords
  • kintoneUtility.rest.deleteAllRecordsByQuery
  • kintoneUtility.rest.upsertRecord
  • kintoneUtility.rest.upsertRecords

さらに何より便利なのは、先ほどのリンクに飛べば
使用例が書かれているため、コピペでスタートができるところだ。

取得してみよう

今回はアプリID:359から『都道府県フィールドが”東京”』になっているレコードを
すべて取得してみる。(すべてのフィールドを取得する)

今回使うのはkintoneUtility.rest.getAllRecordsByQueryという関数だ。
まずはコピペ。

kintoneUtility.rest.getAllRecordsByQuery({
app: 542,
query: ‘Number > 0’,
fields: [‘String’, ‘Number’],
isGuest: false
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});

次に今回の条件に合うようにapp、queryを変更し、
fieldsは指定しないようにする。(全フィールドを取得するため)

kintoneUtility.rest.getAllRecordsByQuery({
app: 395, //appを395に変更
query: ‘都道府県 = “東京”‘, //queryを「都道府県が東京」に変更
//fieldsを削除
isGuest: false
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});

値を利用してみよう

kintoneUtilityで取得した値は、responseに格納される。つまり、

then(function(response) {
console.log(response); //この部分
}

この部分に取得後の処理を書いていくことになる。
今回は取得したレコードの「市区町村フィールドの中身をすべてcityという変数に格納してみよう」

取得したレコードのフィールドは、
response.records[n].フィールドコード.valueで取り出すことができるので
今回のケースではresponse.records[n].市区町村.valueということになる。

市区町村フィールドの中身をcity変数に格納するにはfor文を用いてpushしていく。
今回、市区町村フィールドには「港区、新宿区、台東区…」という値が格納されている。

then(function(response) {
console.log(response); //この部分
var city = []; //配列を作成  
for( var i=0; 0<response.records.length; i++) {
city.push(response.records[i].市区町村.value); //配列に追加していく
}
}

まず、var city = [];でcityという変数に配列を作成する。
その後、for文を用いて、繰り返し処理を行う。
for( var i=0; 0<response.records.length; i++)
iが0でスタートし、取得したレコードの上限に達するまで繰り返す、という文だ。
city.push(response.records[i].市区町村.value);
そしてこの文でcityという配列に市区町村の値を入れていく。

その結果、
city[0]には港区、cityには新宿区…という形で格納されていく。

もちろん、kintone REST APIやXMLHttpRequestを用いても同じことができる。
しかし、コピペでかつ短いコードで始められるkintoneUtilityは、
カスタマイズ初心者には救世主となりうるだろう。
いや、もう僕の救世主になっている。