新規投稿
フォローする

ネットワークグラフを使って、アプリの関係を可視化

kintoneは、関連レコードやルックアップによって手軽にアプリ同士を連携できて、非常に便利です。 しかし、手軽に連携した結果、アプリの関係性が複雑化することも多々あります。 ネットワークグラフにアプリの関係を示すことで、整理しやすくなるかもしれません。

サンプル

カスタマイズビューに、アプリの関係を示したネットワークグラフを表示します。
※本サンプルコードでは、kintone内の全てのアプリが表示されます。
※権限等の関係で情報取得できないアプリは対象外としています。

コード

HTML(カスタマイズビュー)

<div id="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;
}
3

1件のコメント

Avatar
上海レンユアー 松村

うぉ。これすごい面白そう。やってみます。

1
サインインしてコメントを残してください。