フリーダムの日記

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

kintone による 3D 地図アプリの作成

ArcGIS kintone

はじめに

この記事は kintone Advent Calendar 2025 の10日目の記事です。

qiita.com

今回は、kintone で 3D 地図アプリを作成して、不動産物件情報を表示してみました。

3D 地図アプリの作成には、ArcGIS Maps SDK for JavaScript を使用しました。

www.esrij.com

ArcGIS Maps SDK for JavaScript は、マッピング アプリケーション開発用 Web API で、Web ブラウザー向けのアプリケーションや Web サイトに GIS（地図）機能を組み込むための API を提供します。ArcGIS Location Platform に開発者アカウントを作成することで、ArcGIS Location Platform (PaaS) のロケーションサービスを毎月一定枠まで無償でご利用することができ、すぐに開発をはじめることができます。

3D の建物表示には、東京都23区・八王子市南大沢 3D都市モデル（Project PLATEAU）を使用し、用途地域（都市計画決定GIS） として、都市計画決定 GIS データ 全国データダウンロードページ （令和 7 年 8 月 5 日公開）にて公開された都市計画決定 GIS データの用途地域を全国分統合したデータを使用しました。こちらのサービスも無償で利用することができます。

kintone - 3D 地図アプリ

kintone - 3D 地図アプリ

kintone - 3D 地図アプリ


www.youtube.com

ArcGIS Maps SDK for JavaScript を利用した 3D 地図アプリの開発について紹介していきます。具体的な kintone との連携方法等は、過去の記事や cybozu が開発者向けなどに提供している 「cybozu developer network」などを参考にしていただけたらと思います。

また、過去2回に渡って kintone との地図連携について紹介しました。
以下の記事も合わせてご覧いただけたらと思います。

freedom-tech.hatenablog.com freedom-tech.hatenablog.com

kintone 側の設定（ 3D 地図アプリ）

kintone の環境は、開発者ライセンスを利用しています。アプリは、不動産物件マスタを利用しました。不動産物件マスタのフォームから物件の基本情報を作成し、ダミーの不動産物件情報を登録して、アプリを作成します。

kintone - 3D GIS

その後、アプリの設定の JavaScript/CSS カスタマイズにて、ArcGIS Maps SDK for JavaScript で使用する各ライブラリの 参照先として、CDN の登録や JavaScript のファイルを登録していきます。kintone 上の不動産物件情報の表示や 3D 地図表示などの機能は、index.js というファイルを作成して、そこで実装しました。エラーが発生するとアプリがうまく動作しないため、デバック等を行いながらアプリを実装していきます。
サイボウズ社から kintone のカスタマイズについては、ドキュメントが豊富に提供されています。私も幾つかのドキュメントを参考にしながら開発を行いました。

kintone - 3D 地図アプリ

cybozu.dev

cybozu.dev

3D 地図アプリの開発

ArcGIS Maps SDK for JavaScript を使用して、3D 地図アプリを開発にするあたりに Web GIS を利用できるアカウント (ArcGIS Online/ArcGIS Enterprise/ArcGIS Location Platform) が必要となります。アカウントをお持ちであれば、無償でご利用いただけます。
ここでは、ArcGIS Location Platform を利用しました。ArcGIS Location Platform は、高品質なマップとロケーションサービスを提供しています。ArcGIS Location Platform は、開発者アカウントを作成することで、無償から利用できます。開発者アカウントの作成や ArcGIS Location Platform の使い方などについては、ESRIジャパンが運用している ArcGIS 開発リソース集の開発者アカウントの作成が参考になります。

ArcGIS のサービスを利用するためには API キーなどのアクセス トークンが必要となります。API キーの作成は、ArcGIS 開発リソース集の API キーの取得が参考になります。

ArcGIS Maps SDK for JavaScript の詳細な情報は、以下のガイドをご確認ください。開発をはじめるための具体的なステップや様々なサンプルがあるなど、初心者で分かりやすいように丁寧に解説しています。

developers.arcgis.com

ここでは、3D 地図アプリの開発にフォーカスして、背景地図、東京都23区・八王子市南大沢 3D都市モデル（Project PLATEAU）、用途地域（都市計画決定GIS）の表示、kintone に登録している不動産物件情報の表示の方法について簡単に紹介します。

以下のコードは、3D 地図と背景地図の表示です。 Map クラスのプロパティで、basemap、ground を指定します。そして、SceneView クラスで、Map クラスで作成した map インスタンスを指定して、camera プロパティで初期表示される位置などを指定します。

// Map の作成
const map = new Map({
    basemap: "satellite",
    ground: "world-elevation",
});

// SceneView の作成
const view = new SceneView({
    container: "viewDiv",
    map: map,
    camera: {
        position: [139.701636, 35.658034, 1620],
        tilt: 57,
        heading: 57,
    },
});

以下のコードは、SceneLayer、GraphicsLayer、FeatureLayer といったレイヤークラスを使用しています。ArcGIS では多くのデータタイプがあり、それぞれの用途に応じてレイヤークラスが用意されています。

// SceneLayer の作成
const sceneLayer = new SceneLayer({
    title: "東京都23区・八王子市南大沢 3D都市モデル",
    url:"https://tiles.arcgis.com/tiles/wlVTGRSYTzAbjjiC/arcgis/rest/services/13100_13201_Tokyo-23ku_Minamiosawa_Building/SceneServer"
});

// GraphicsLayer の作成
const graphicsLayer = new GraphicsLayer({
    title: "不動産物件マスタ"
});

// FeatureLayer の作成
const featureLayer = new FeatureLayer({
    title: "用途地域 ",
    url:"https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/CityPlaningGIS_YOUTOView/FeatureServer/0"
});
map.addMany([sceneLayer, graphicsLayer, featureLayer]);

以下のコードは、上記で作成したレイヤーリストを表示する LayerList ウィジェット、凡例を表示する Legend ウィジェットを使用しています。この各ウィジェットは、標準で用意されているため、一から画面を作成しなくとも UI と機能を Web アプリに組み込むことができます。

// レイヤーリスト ウィジェット
const layerList = new LayerList({
    view: view
});
// ビューの右上にウィジェットを追加
view.ui.add(layerList, "top-right");

// 凡例ウィジェット
const legend = new Legend({
    view: view,
    layerInfos: [
        {
            layer: featureLayer
        }
    ]
});
// ビューの右上にウィジェットを追加
view.ui.add(legend, "top-right");

最後のコードでは、kintone に登録している不動産物件情報を取得して、地図上に表示しています。不動産物件情報は、Graphic クラスを使用し、位置とシンボル、属性情報等を指定しています。作成した Graphic を GraphicsLayer に追加することで Graphic として地図上に表現することができます。また、不動産物件情報を地図上でのポイントの表示の表現として様々なパターンがあります。今回は、シンボル作成では PointSymbol3D クラスを使用しました。3D ならではの表現が可能です。

3D シンボルの表現としては、Esri 社の以下のブログが非常に参考になります。ぜひ、こちらも合わせてご覧いただけたらと思います。

www.esri.com

www.esri.com

www.esri.com

// レコード情報を取得します
let records = event['records'];
//console.log(records);

// ポイント描画のためのシンボル作成
const point3dSymbol = {
type: "point-3d",  // autocasts as new PointSymbol3D()
    symbolLayers: [{
        type: "object",  // autocasts as new ObjectSymbol3DLayer()
        width: 50,    // diameter of the object from east to west in meters
        height: 100,  // height of object in meters
        resource: { primitive: "cylinder" },
        material: { color: "red" }
    }]
};

for (const record of records) {
        
    let lat = record['緯度']['value'];
    let lon = record['経度']['value'];
    
    let name = record['物件名']['value'];
    let address = record['物件所在地']['value'];
    let company = record['オーナー企業名_氏名']['value'];
    let tel = record['オーナー電話番号']['value'];

    // 属性情報の作成 
    let propertyAtt = {
        Name: name,
        Address: address,
        Company: company,
        Tel: tel
    };

    // point の作成
    let point = { 
        type: "point",
        longitude: lon,
        latitude: lat
    };
    
    // Graphic オブジェクトの作成
    let pointGraphic = new Graphic({
        geometry: point,
        symbol: point3dSymbol,
        attributes: propertyAtt,
        popupTemplate : {
            title: "不動産物件マスタ",
            content: [
                {
                    type: "fields",
                    fieldInfos: [
                        {
                            fieldName: "Name",
                            label: "物件名"
                        },
                        {
                            fieldName: "Address",
                            label: "住所"
                        },
                        {
                            fieldName: "Company",
                            label: "オーナー企業名/氏名"
                        },
                        {
                            fieldName: "Tel",
                            label: "オーナー電話番号"
                        }
                    ]
                }
            ]
        }
    });

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

全体のコードは、以下となります。今回は、一覧表示のみの実装となっています。

(function () {
    "use strict";
    // ArcGIS Location Platform 
    var esriConfig = {
        apiKey: "<accessToken>",
    };

    // 一覧画面を開いた時に実行します
    kintone.events.on('app.record.index.show', async 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: 450px; margin-right: 30px; border: solid 2px #c4b097');
        elAction.appendChild(viewDiv);

        const [Map, SceneView, SceneLayer, GraphicsLayer, FeatureLayer, Graphic, Legend, LayerList] = await $arcgis.import([
            "@arcgis/core/Map.js",
            "@arcgis/core/views/SceneView.js",
            "@arcgis/core/layers/SceneLayer.js",
            "@arcgis/core/layers/GraphicsLayer.js",
            "@arcgis/core/layers/FeatureLayer.js",
            "@arcgis/core/Graphic.js",
            "@arcgis/core/widgets/Legend.js",
            "@arcgis/core/widgets/LayerList.js"
        ]);

        // Create Map
        const map = new Map({
            basemap: "satellite",
            ground: "world-elevation",
        });

        // Create the SceneView
        const view = new SceneView({
            container: "viewDiv",
            map: map,
            camera: {
                position: [139.701636, 35.658034, 1620],
                tilt: 57,
                heading: 57,
            },
        });

        // SceneLayer の作成
        const sceneLayer = new SceneLayer({
            title: "東京都23区・八王子市南大沢 3D都市モデル",
            url:"https://tiles.arcgis.com/tiles/wlVTGRSYTzAbjjiC/arcgis/rest/services/13100_13201_Tokyo-23ku_Minamiosawa_Building/SceneServer"
        });

        // GraphicsLayer の作成
        const graphicsLayer = new GraphicsLayer({
            title: "不動産物件マスタ"
        });

        // FeatureLayer の作成
        const featureLayer = new FeatureLayer({
            title: "用途地域 ",
            url:"https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/CityPlaningGIS_YOUTOView/FeatureServer/0"
        });

        map.addMany([sceneLayer, graphicsLayer, featureLayer]);

        // レイヤーリスト ウィジェット
        const layerList = new LayerList({
            view: view
        });
        // ビューの右上にウィジェットを追加
        view.ui.add(layerList, "top-right");

        // 凡例ウィジェット
        const legend = new Legend({
            view: view,
            layerInfos: [
                {
                    layer: featureLayer
                }
            ]
        });
        // ビューの右上にウィジェットを追加
        view.ui.add(legend, "top-right");

        // レコード情報を取得します
        let records = event['records'];
        //console.log(records);

        // ポイント描画のためのシンボル作成
        const point3dSymbol = {
        type: "point-3d",  // autocasts as new PointSymbol3D()
            symbolLayers: [{
                type: "object",  // autocasts as new ObjectSymbol3DLayer()
                width: 50,    // diameter of the object from east to west in meters
                height: 100,  // height of object in meters
                resource: { primitive: "cylinder" },
                material: { color: "red" }
            }]
        };

        for (const record of records) {
                
            let lat = record['緯度']['value'];
            let lon = record['経度']['value'];
            
            let name = record['物件名']['value'];
            let address = record['物件所在地']['value'];
            let company = record['オーナー企業名_氏名']['value'];
            let tel = record['オーナー電話番号']['value'];

            // 属性情報の作成 
            let propertyAtt = {
                Name: name,
                Address: address,
                Company: company,
                Tel: tel
            };

            // point の作成
            let point = { 
                type: "point",
                longitude: lon,
                latitude: lat
            };
            
            // Graphic オブジェクトの作成
            let pointGraphic = new Graphic({
                geometry: point,
                symbol: point3dSymbol,
                attributes: propertyAtt,
                popupTemplate : {
                    title: "不動産物件マスタ",
                    content: [
                        {
                            type: "fields",
                            fieldInfos: [
                                {
                                    fieldName: "Name",
                                    label: "物件名"
                                },
                                {
                                    fieldName: "Address",
                                    label: "住所"
                                },
                                {
                                    fieldName: "Company",
                                    label: "オーナー企業名/氏名"
                                },
                                {
                                    fieldName: "Tel",
                                    label: "オーナー電話番号"
                                }
                            ]
                        }
                    ]
                }
            });

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

    });
})();

まとめ

今回は、3D 地図アプリと kintone との連携を試してみました。3D 地図アプリの開発には、ArcGIS Maps SDK for JavaScript を使用しました。ArcGIS Location Platform で開発者アカウントを作成することで、すぐに開発をはじめることができます。また、ArcGIS プラットフォームでは、様々なデータを無償で配信していますので、kintone 上で管理しているデータと組み合わせることで課題解決に繋がるなど業務用途に応じたアプリを作成することが可能かと思われます。ぜひ、お試しいただけたらうれしいです。