kintoneは、関連レコードやルックアップによって手軽にアプリ同士を連携できて、非常に便利です。 しかし、手軽に連携した結果、アプリの関係性が複雑化することも多々あります。 ネットワークグラフにアプリの関係を示すことで、整理しやすくなるかもしれません。
サンプル
カスタマイズビューに、アプリの関係を示したネットワークグラフを表示します。
※本サンプルコードでは、kintone内の全てのアプリが表示されます。
※権限等の関係で情報取得できないアプリは対象外としています。
コード
HTML(カスタマイズビュー)
<divid="networkGraph"></div>
JavaScript
サンプルではsigma.jsを利用しています。 「sigma.min.js」を読み込み後、下記「sample.js」を読み込みます。
・sample.js
(function() {
"use strict";
var getApps = function(apps){
var apps = apps || [];
return kintone.api(kintone.api.url('/k/v1/apps', true), 'GET', {
offset: apps.length
}).then(function(response){
apps = apps.concat(response.apps);
return response.apps.length === 100 ? getApps(apps) : apps;
});
};
var getFields = function(appId){
return kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', {
app: appId
}).catch(function(error){
return undefined;
});
};
kintone.events.on([
'app.record.index.show',
], function(event){
if(event.viewName !== 'ネットワークグラフ') return;
getApps().then(function(apps){
apps = apps.filter(function(app){
return app.creator.code === kintone.getLoginUser().code
});
kintone.Promise.all(
apps.map(function(app){
return getFields(app.appId);
})
).then(function(appsFields){
var s = new sigma({
renderer: {
container: document.getElementById('networkGraph'),
type: 'canvas',
settings: {
minArrowSize: 10,
}
}
});
s.graph.read({
nodes: apps.map(function(app){
return {
id: app.appId,
label: app.name,
x: kintone.app.getId() === Number(app.appId) ? 0 : Math.random(),
y: kintone.app.getId() === Number(app.appId) ? 0 : Math.random()*0.95+0.05,
size: 1,
color: '#f00',
}
}),
edges: appsFields.reduce(function(edges, appFields, index){
if(!appFields) return edges;
return Object.keys(appFields.properties).reduce(function(edges, fieldCode){
['referenceTable', 'lookup'].forEach(function(type){
if(appFields.properties[fieldCode][type]){
edges.push({
id: apps[index].appId + '-' + fieldCode,
source: apps[index].appId,
target: appFields.properties[fieldCode][type].relatedApp.app,
type: 'arrow',
color: '#0f0'
});
}
});
return edges;
}, edges);
}, [])
});
s.refresh();
});
});
});
})();
CSS
下記「sample.css」を読み込みます。
・sample.css
#networkGraph{margin:10px;height:500px;
}