フリーダムの日記

GIS(地理情報システム)を中心に技術的なことを書いています。

kintone と地図連携による顧客リストの可視化

はじめに

本エントリーは kintone Advent Calendar 2021 16日目 の記事です。

qiita.com

今回初めて kintone を利用してみました。以前からずっと気になっており、Advent Calendar 2021 をきっかけにして触れることできました。kintone には開発者用のプログラムも豊富に提供されており、初めての方でも比較的に簡単に学ぶことができました。

今回は kintone にダミーの顧客データを登録して、その顧客データを地図上で表示し、全国市区町村界データから人口も表示してみました。

ArcGIS と kintone との連携

youtu.be

全国市区町村界データは ESRIジャパンが公開しているデータを使用しました。統計データなどと使用することで分析の幅が広がります。 www.esrij.com

kintone と連携した地図は、Google Maps ではなく、ArcGIS を利用しました。ArcGIS(アークジーアイエス)については、初めて聞く方もいらっしゃるかと思います。ArcGIS はすぐに利用可能な豊富な地図データや、地理情報を作成、分析、可視化するためのデスクトップ アプリ、モバイル アプリ、Web アプリ、クラウドサービス、サーバー製品等から構成され、システム形態や用途に応じて自由に組み合わせて導入できます。ArcGIS は、クラウドやシステムと連携するにも簡単ですし、何よりも Google Maps よりも地図分析や可視化には優れいるので、今回はこちらを使用しました。

ArcGIS と kintone との連携
kintone と ArcGIS との地図連携

kintone でアプリを作成

kintone でアプリを作成するにあたり、初めにサイボウズの Developer サイトで開発者アカウントを作成し、その後、kintone の開発環境を取得しました。API/SDK の使い方や Tips などの情報も豊富に提供されていましたので、kintone 部分の開発は初めてででしたが、簡単に進めることができました。

https://developer.cybozu.io/hc/jadeveloper.cybozu.io

kintone の開発環境で最初にアプリを作成します。アプリは業務や業種で探すなど、多くのカテゴリのアプリがあり、それらを利用することもできます。今回は、おすすめアプリの顧客リストを参考にして、ダミーの顧客データを登録して顧客リストアプリを作成しました。

ArcGIS と kintone との連携

顧客リストアプリでフォーム、一覧、グラフ、設定からアプリの設定を行うことができ、目的に応じてアプリを設定ベースだけで作成できるようになっています。ノーコードでアプリが作成できるようになっているのでとても優れている仕組みを提供していると思いました。

ArcGIS と kintone との連携

顧客一覧では、全表示に含めて、男性、女性と絞り込んで表示できるようにしました。

ArcGIS と kintone との連携

また、男性、女性の人数を表現するグラフも作成しました。

ArcGIS と kintone との連携

設定では多くのアプリ設定を行うことができるようになっています。

ArcGIS と kintone との連携

kintone の設定ベースだけで以下の顧客リストアプリが作成できました。

ArcGIS と kintone との連携

ArcGIS と kintone との連携

kintone と地図連携による地図アプリの開発

今回 kintone と地図連携で使用した地図部分の JavaScript ライブラリとして ArcGIS API for JavaScript を使用しました。ArcGIS API for JavaScript は、地図アプリ開発用の API で 2D・3D 地図アプリを開発することができます。豊富な地図の可視化機能や CSV や GeoJSON などの地図データの表示を行うことができます。また、ArcGIS というプラットフォームに対応しているため、ArcGIS 上にあるデータを表示することも可能です。それ以外にも OGC などの WMS や WMTS などにも対応しているため、ArcGIS 以外のデータフォーマットにも対応しています。より詳細については、以下のサイトにサンプルや API リファレンスなどもありますのでご覧ください。

developers.arcgis.com

kintone でアプリをカスタマイズするためにカスタマイズ/サービス連携の設定で、JavaScript / CSS カスタマイズ画面が表示されます。ここで、JavaScript / CSSファイルを適用することで、アプリをカスタマイズできます。

ArcGIS と kintone との連携

CDN 経由で利用するために CSS ファイルには https://js.arcgis.com/4.22/esri/themes/light/main.css を設定し、JavaScript には https://js.arcgis.com/4.22/ を設定します。顧客データを取得して地図に表示するロジック部分は arcgis.js で作成し、それを反映しました。

ArcGIS API for JavaScript を使用するケースとして、以下のインストールガイドが参考となります。

developers.arcgis.com

JavaScript による kintone アプリで使用しているイベントやデータの取得などは、スタートアップガイドや Tips なども参考にして開発をしました。

はじめよう kintone API を初めに参考としました。 https://developer.cybozu.io/hc/ja/sections/200332780

今回は一覧画面を開いた時のイベントから顧客データを取得して地図に表示するように実装しました。地図部分を表示する DIV 要素の作成とレコードを取得しているコードは以下になります。

    // 一覧画面を開いた時に実行します
    kintone.events.on('app.record.index.show', function(event) {

         // 一覧の上部部分にあるスペース部分を定義します       
        let elAction = kintone.app.getHeaderSpaceElement();

        // すでに地図要素が存在する場合は、削除します
        // ※ ページ切り替えや一覧のソート順を変更した時などが該当します
        let mapCheck = document.getElementsByName('viewDiv');
        if (mapCheck.length !== 0) {
            elAction.removeChild(mapCheck[0]);
        }

        // 地図を表示する div 要素を作成します
        let viewDiv = document.createElement('div');
        viewDiv.setAttribute('id', 'viewDiv');
        viewDiv.setAttribute('name', 'viewDiv');
        viewDiv.setAttribute('style', 'width: auto; height: 350px; margin-right: 30px; border: solid 2px #c4b097');
        elAction.appendChild(viewDiv);

        // レコード情報を取得します
        let records = event['records'];
        :
        :

次に顧客データを地図に表示していきます。ArcGIS API for JavaScript を使用するために、まず初めに API キーを取得する必要があります。これは、ArcGIS が提供するロケーションサービスを使用するために必要になります。ロケーションサービスは、背景地図や住所検索、ルーティング、到達圏解析などのサービスが利用できます。

developers.arcgis.com

API キーは ArcGIS Developer と呼ばれる開発者向けのサイトで開発者アカウントを作成後、ダッシュボードが表示されますので、API keys のメニューを選択して、New API key から API キーを作成します。すると以下の画面のように API キーが作成されます。

ArcGIS と kintone との連携

API キーを取得したら地図部分を実装します。地図部分として、背景地図ではベクタ タイル レイヤーベースマップとして使用し、顧客データの表示には、グラフィックス レイヤーを使用しました。最後に全国市区町村のデータはフィーチャ レイヤーを使用しています。
以下が地図部分のコードになります。

esriConfig.apiKey = api_key;

const vectorTileLayer = new VectorTileLayer({
    portalItem: {
        id: "97b0ea1cc8ca41028420dd4067873c53" // 地形図 (Japanese)
        //  0f52cd2d17ea4773944a1d0e0fb99ea4
    },
    opacity: .75
});

const imageTileLayer = new TileLayer({
    portalItem: {
        id: "1b243539f4514b6ba35e7d995890db1d" // World Hillshade
    }
});

const basemap = new Basemap({
    baseLayers: [
        imageTileLayer,
        vectorTileLayer
    ]
});

const map = new Map({
    basemap: basemap,
});

const view = new MapView({
    map: map,
    center: [139.69167, 35.68944],
    zoom: 10, // scale: 72223.819286
    container: "viewDiv",
    constraints: {
        snapToZoom: false
    }
});

view.when(() => {
    const layerList = new LayerList({
        view: view
    });
    // Add widget to the top right corner of the view
    view.ui.add(layerList, "top-right");
});

const featureLayer = new FeatureLayer({
    title: "全国市区町村界データ",
    url: "https://services5.arcgis.com/HzGpeRqGvs5TMkVr/arcgis/rest/services/japan_ver83/FeatureServer"
});
map.add(featureLayer);

const legend = new Legend({
    view: view,
    layerInfos: [
        {
            layer: featureLayer
        }
    ]
});
// Add widget to the bottom right corner of the view
view.ui.add(legend, "bottom-left");

let graphicsLayer = new GraphicsLayer({
    title: "顧客一覧"
});

let simpleMarkerSymbol = {
    type: "simple-marker",
    color: [226, 119, 40],  // Orange
    outline: {
        color: [255, 255, 255], // White
        width: 1
    }
};

// 顧客データの取得
for (const record of records) {
    
    let lat = record['緯度']['value'];
    let lon = record['経度']['value'];

    let name = record['氏名']['value'];
    let postcode = record['郵便番号']['value'];
    let address = record['住所']['value'];
    let tel = record['電話番号']['value'];
    let age = record['年齢']['value'];

    let customerAtt = {
        Name: name,
        Address: "〒" + postcode + ":" + address,
        Tel: tel,
        Age: age
    };

    //Create a point
    let point = { 
        type: "point",
        longitude: lon,
        latitude: lat
    };

    let pointGraphic = new Graphic({
        geometry: point,
        symbol: simpleMarkerSymbol,
        attributes: customerAtt,
        popupTemplate : {
            title: "顧客情報",
            content: [
                {
                    type: "fields",
                    fieldInfos: [
                        {
                            fieldName: "Name",
                            label: "名前"
                        },
                        {
                            fieldName: "Address",
                            label: "住所"
                        },
                        {
                            fieldName: "Tel",
                            label: "電話番号"
                        },
                        {
                            fieldName: "Age",
                            label: "年齢"
                        }
                    ]
                }
            ]
        }
    });

    graphicsLayer.graphics.add(pointGraphic);
    //console.log(record['緯度']['value']);
    //console.log(record['経度']['value']);
}

map.add(graphicsLayer);

ArcGIS API for JavaScript の詳細については、以下のチュートリアルなどにも詳しく紹介されていますのでご覧いただければと思います。

developers.arcgis.com

全体のコードについては GitHub にもアップしてします。 github.com

さいごに

kintone は今回初めて触りましたが、日本でも多く使用されているように可能性をすごく感じました。もっと ArcGIS との連携ができたら面白いと思いました。 今回の連携以外にも Outh2.0 によるシステム連携など多くの連携方法があるようなので、次回試してみたいと思います。

https://developer.cybozu.io/hc/ja/articles/360000877166