Latest Contributions by TakahiroKAMIYA

‎12-07-2022

はじめにこれまで Calcite Design System の使用方法として、Calcite Design System のチュートリアルを3回連載しました。本記事では第4回目として、チュートリアルの Filter recent earthquakes を紹介します。第１回：地図アプリの作成第２回：ダークモードスイッチの作成第３回：コアコンセプトの適用第４回：近発生した地震のフィルタリング ← 本記事 Calcite Design System を使用してユーザーインターフェイス (UI) を構築します。このチュートリアルでは、複雑な問題を解決するために複製や拡張が可能な Calcite Components の概要を説明します。ここでは、以下のことを行います。・フィーチャサービスから属性にアクセスするためのクエリの実行方法・クエリで見つかったレコードの数を動的に入力するための calcite-notice を追加・クエリから個々のレコードを表示するために calcite-card を動的に追加・Map Viewer のレコードの位置にリンクする calcite-button の作成このチュートリアルでは vanilla JavaScript を使用していますが、これらの概念と対話の方法はフレームワークに関係なく適用できます。地図を含むチュートリアルは「地図アプリを作成する」をご覧ください。地震の検索結果作成にあたって必要なもの ArcGIS 開発者アカウントこのチュートリアルで使用するサービスにアクセスするには、無料の ArcGIS 開発者アカウントまたは ArcGIS Online 組織に関連付けられたアカウントが必要です。ステップ新しいペンの作成 1．CodePen にアクセスし、アプリケーション用の新しいペンを作成します。 HTML の追加 1．CodePen > HTML で、HTMLを追加して <body> タグのあるページを作成します。また、<main> セクションを追加します。CodePenでは、<!DOCTYPE html> タグは必要ありません。別のエディターを使用している場合や、ローカルサーバーでページを実行している場合は、必ずこのタグを HTML ページの先頭に追加してください。 <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Calcite Components: Filter recent earthquakes</title> </head> <style> </style> <body> <main> </main> </body> <script> </script> </html> 2．Calcite Design System Web コンポーネントにアクセスするには、<head> 要素に Calcite Components への参照を追加します。 <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Calcite Components: Filter recent earthquakes</title> <script src="https://js.arcgis.com/calcite-components/1.0.7/calcite.esm.js" type="module"></script> <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.7/calcite.css" /> </head> 3．次に、アプリケーションの中身を整理します。main セクションに、地震の結果を格納するために、heading と heading-level の属性を持つ calcite-shell と calcite-panel を追加します。 headingとheading-level 属性は、より多くのユーザーをサポートするために、アプリケーション全体のページ階層 (page hierarchy) を配置します。これはページの最初のヘッダーなので、heading-level 値を "1 " に設定します。 <calcite-shell>  <calcite-panel heading="Earthquake results" heading-level="1" description="Search by location to display results"> </calcite-panel> </calcite-shell> レコードの表示ユーザーが調整できるように、HTMLコンテンツの構築を続けます。コンテンツは、ユーザーがアプリケーションの操作ることで変化します。 1．calcite-panel に calcite-filter を追加します。この calcite-filter は地震のフィーチャサービスへのクエリに使用される予定です。  <calcite-filter placeholder="Try searching Alaska"></calcite-filter> 2．次に id 属性を持つ calcite-notice を追加し、ユーザーにオンデマンドでフィードバックを提供します。  <calcite-notice id="note"> </calcite-notice> 3．calcite-notice では、divを追加して title スロットに配置し、後で id 属性を使って地震発生件数を入力するのに使用します。  <calcite-notice id="note"> <div id="number-records" slot="title">  </div> </calcite-notice> 4．地震の結果を格納するために、class 属性を持つ div を追加します。また、パネルの footer スロットに calcite-pagination を配置し、page-size 属性を追加して1ページに表示する件数を指定します。  <div class="card-container">  </div>  <calcite-pagination slot="footer" page-size="12" style="visibility:hidden" > </calcite-pagination> データのクエリユーザーが入力した検索キーワードで地震のフィーチャサービスを取得する JavaScript 機能を追加します。 1．まず、後で要素を参照するために calcite-filter、calcite-pagination、calcite-notice、card-container の CSS クラスを参照する定数と変数を作成します。 const filterElement = document.querySelector("calcite-filter"); const paginationElement = document.querySelector("calcite-pagination"); const noticeElement = document.querySelector("calcite-notice"); const cardContainer = document.querySelector(".card-container"); 2．次に、Fetch API を使用して earthquakes サービスに問い合わせます。成功したら、Response.json() でレスポンスを解析し、map() メソッドでフィーチャを取得します。 /* Fetch the earthquakes feature service */ fetch("https://services9.arcgis.com/RHVPKKiFTONKtxq3/ArcGIS/rest/services/USGS_Seismic_Data_v1/FeatureServer/0/query?where=1%3D1&outFields=*&f=json") .then((response) => response.json()) .then(({features}) => features.map(({attributes}) => attributes)) 結果のフィルタリング次に、解析されたレスポンスを使用して、ユーザー定義の結果をフィルタリングして表示します。 1．initFilter という named function expression を使用して、結果をフィルタリングします。上記のステップで定義した定数と変数を使用して calcite-filter コンポーネントの items プロパティを設定します。 /* Fetch the earthquakes feature service */ fetch("https://services9.arcgis.com/RHVPKKiFTONKtxq3/ArcGIS/rest/services/USGS_Seismic_Data_v1/FeatureServer/0/query?where=1%3D1&outFields=*&f=json") .then((response) => response.json()) .then(({features}) => features.map(({attributes}) => attributes)) .then((attributes) => initFilter(attributes)); /* Filter the results to display */ const initFilter = (items) => { filterElement.items = items; }; 2．initFilterで、calciteFilterChange イベントのリスナーを追加して、フィルタの value の変化を監視します。次にpaginationの startItem と totalItems のプロパティを変更して、最初のページに戻ります。最後に、フィルタの value が falsey でないときにカードを追加する条件を作成します。フィルタの [`filteredItems`](xref://site.self/filter/#component-api-properties-filteredItems) プロパティには、[`value`](xref://site.self/filter/#component-api-properties-value)がない場合にすべての項目が格納されます。検索機能を作るには、ユーザーがクエリ用語を入力したときだけ、カードを追加する必要があります。 /* Filter the results to display */ const initFilter = (items) => { filterElement.items = items; document.addEventListener("calciteFilterChange", () => { paginationElement.startItem = 1; paginationElement.totalItems = 0; // When a Filter value is present // Create Cards, update Pagination, and number of responses if (filterElement.value) { } }); }; 3．次にcalciteFilterChange 内で、フィルタリングされた地震の totalItems が指定した pageSize 値よりも大きい場合に calcite-pagination コンポーネントを表示します。 calcite-pagination コンポーネントの CSS プロパティの visibility を "hidden" に設定します。結果が 1 ページ以上ある場合は、CSS プロパティの値を ”visible” に変更します。 /* Filter the results to display */ const initFilter = (items) => { filterElement.items = items; document.addEventListener("calciteFilterChange", () => { paginationElement.startItem = 1; paginationElement.totalItems = 0; paginationElement.style.visibility = "hidden"; // When a Filter value is present // Create Cards, update Pagination, and number of responses if (filterElement.value) { // If additional pages are populated, display Pagination if (paginationElement.total > paginationElement.pageSize) { paginationElement.style.visibility = "visible"; } } }); }; 地震を表示地震を表示するために、各結果の属性を calcite-card に格納します。また、calcite-button を追加し、アクセスすると、地震の位置が Map Viewer で表示されるようにします。 1．フィルタリングされた地震を、card-container クラスに属する calcite-card コンポーネントに、createCard という名前の関数式で配置します。 /* Create Cards and their content */ const createCard = (item) => { const titleName = item.place.replace(/[;']/g,""); // Populate Card content if (cardContainer.childElementCount < paginationElement.pageSize) { const cardString = `<calcite-card id="card-${item.OBJECTID}"> <span slot="title"> <b>${item.place}</b> </span> <span slot="subtitle"> Occurred on: ${new Date(item.eventTime)} </span> <calcite-chip appearance="outline-fill" scale="s" kind="inverse" icon="graph-time-series" > Magnitude: ${item.mag} </calcite-chip> <calcite-button label="Open ${titleName} in map" icon-end="launch" slot="footer-end" target="_blank" width="full" href="https://www.arcgis.com/apps/mapviewer/index.html?` + `marker=${item.longitude};${item.latitude};` + // Marker (lng, lat) `4326;` + // Coordinate system titleName + `;` + `https://clipart.world/wp-content/uploads/2021/07/Target-clipart-transparent.png;` + // Marker image `Magnitude: ${item.mag}&` + `level=6" > Open in map </calcite-button> </calcite-card>`; const cardElement = document .createRange() .createContextualFragment(cardString); cardContainer.appendChild(cardElement); } }; 2．カードを作成するには、フィルタ value に一致する各フィーチャの calciteFilterChange イベントリスナーで createCard を呼び出します。結果を含む cardContainer の内容をクリアします。 /* Filter the results to display */ const initFilter = (items) => { filterElement.items = items; document.addEventListener("calciteFilterChange", () => { paginationElement.startItem = 1; paginationElement.totalItems = 0; paginationElement.style.visibility = "hidden"; cardContainer.innerHTML = ""; // When a Filter value is present // Create Cards, update Pagination, and number of responses if (filterElement.value) { filterElement.filteredItems.forEach((item) => createCard(item)); paginationElement.totalItems = filterElement.filteredItems.length; // If additional pages are populated, display Pagination if (paginationElement.totalItems > paginationElement.pageSize) { paginationElement.style.visibility = "visible"; } } }); }; 3．次に、ユーザーに対して地震の結果件数を表示します。関数 showNumberOfResponses を作成し、calcite-notice のタイトルにレスポンス件数を転記します。ユーザーがコンテンツにアクセスできるように、Notice の open 属性を "true" に設定します。レスポンス数に応じて innerHTML、kind、icon 属性が変更されます。 /* Display the number of responses in a Notice */ function showNumberOfResponses(responseNumber) { const note = document.getElementById("note"); const numberRecordsNote = document.getElementById("number-records"); // If 0 responses, add "Sorry" to the Notice text // Add the Notice color and icon if (responseNumber === 0) { responseNumber = `Sorry, ${responseNumber}` note.kind = "danger"; note.icon = "exclamation-mark-triangle"; } else { note.kind = "brand"; note.icon = "information"; } // Notice text numberRecordsNote.innerHTML = `${responseNumber} records found.`; noticeElement.open = true; } 4．カードの作成と同様に、calciteFilterChange イベントリスナーのコールバック関数にshowNumberOfResponses 関数の呼び出しを追加します。フィルタリングされた値が存在しない場合、通知の open 属性を「false」に、calcite-pagination の visibility を「hidden」に設定します。 /* Filter the results to display */ const initFilter = (items) => { filterElement.items = items; document.addEventListener("calciteFilterChange", () => { paginationElement.startItem = 1; paginationElement.totalItems = 0; // Prevent display of elements if no Filter value is present noticeElement.open = false; paginationElement.style.visibility = "hidden"; cardContainer.innerHTML = ""; // When a Filter value is present // Create Cards, update Pagination, and number of responses if (filterElement.value) { filterElement.filteredItems.forEach((item) => createCard(item)); paginationElement.totalItems = filterElement.filteredItems.length; showNumberOfResponses(filterElement.filteredItems.length); // If additional pages are populated, display Pagination if (paginationElement.totalItems > paginationElement.pageSize) { paginationElement.style.visibility = "visible"; } } }); }; 5．pagination の calcitePaginationChange イベントにリスナーを追加し、ユーザーがページを変更するときに後続のフィルタリングアイテムを表示できるようにします。filteredItems のサブセットを pagination の startItemプロパティから始まり、startItem プロパティと pageSize プロパティの合計で終わるように表示します。 /* Update Cards when interacting with Pagination */ document.addEventListener("calcitePaginationChange", ({ target }) => { const displayItems = filterElement.filteredItems.slice( target.startItem - 1, target.startItem - 1 + target.pageSize ); }); 6．最後に、calcite-pagination を操作する際に、カードを更新します。cardContainer の内容を以前のフィルタリング結果でクリアし、calcitePaginationChange イベントリスナーで createCard を呼び出します。 /* Update Cards when interacting with Pagination */ document.addEventListener("calcitePaginationChange", ({ target }) => { cardContainer.innerHTML = ""; const displayItems = filterElement.filteredItems.slice( target.startItem - 1, target.startItem - 1 + target.pageSize ); displayItems.forEach((item) => createCard(item)); }); スタイリングの追加これでアプリケーションの機能は完成です。CSS のスタイリングを使って、インターフェイスのデザインを最終調整します。 1．card-container クラスに、CSS grid layout、calcite-chip の震度表示色、calcite-notice の位置指定を用いたスタイルを追加します。 <style> .card-container { margin: 0.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 1rem; justify-content: space-evenly; } calcite-chip { color: var(--calcite-ui-danger); } calcite-notice { position: relative; margin: 0.75rem; } </style> アプリを実行する CodePenで、コードを実行すると、アプリケーションが表示されます。まとめ今回は、Calcite Design System を使用したチュートリアルの Filter recent earthquakes のサンプルを翻訳して紹介しました。ArcGIS 開発リソース集にも Calcite Design System の開発に役立つガイド集を公開していますので、ご活用ください。関連リンク Calcite Design System チュートリアル集・Tutorials | Calcite Design System | ArcGIS Developers ArcGIS Developers ・ArcGIS Developers ArcGIS 開発リソース集・ArcGIS Developers 開発リソース集 (esrijapan.github.io)

‎09-01-2022

はじめに以前にサイボウズ株式会社が提供している kintone と ArcGIS を連携した記事を紹介しました。今回は前回紹介した記事からさらに不動産物件マスタのアプリを拡張したので、拡張した内容にフォーカスして紹介したいと思います。前回のおさらい前回の記事では、kintone が提供している業務アプリの一つとして不動産物件マスタがあり、不動産物件マスタのデータを ArcGIS と連携して地図表示を行いました。具体的には、kintone JavaScript API を使用して、kintone 上で不動産物件マスタのデータを ArcGIS API for JavaScript を使用して地図上に表示をしました。さらに ArcGIS では多くのオンラインコンテンツを配信しているので、ArcGIS Living Atlas of the World に登録されている災害情報として、洪水浸水想定区域（国土数値情報令和 2 年）を使用しました。 ArcGIS Living Atlas of the World には他にも災害情報が登録されています。その他の災害情報の活用方法として、ArcGIS ブログ（梅雨・台風の大雨の季節に備えた災害情報レイヤーの活用法～ハザードマップを作成してみよう～）でも紹介しています。不動産物件マスタのアプリ拡張：詳細・編集・追加前回は kintone JavaScript API のイベントのレコード一覧イベントを使用して物件マスタのデータを地図上に表示しました。今回は、レコードの詳細表示や追加、編集のイベントにも対応しました。これにより、物件マスタの詳細情報の確認やデータの編集、新規物件データの追加を行うことができるようになります。 kintone JavaScript APIによるレコード詳細イベント、追加イベント、編集イベントを使用することで kintone 上でデータの編集や追加などに関してカスタマイズをすることができます。カスタマイズなどの詳細は cybozu developer network で確認することができます。以下に不動産物件マスタの詳細表示、編集や追加に関して実装した部分について紹介していきます。不動産物件マスタ：詳細表示不動産物件マスタの一覧から詳細画面に遷移した画面が以下です。kintone では標準でこの機能を提供しており、詳細画面に地図の機能を組み込みました。レコードの詳細イベントは “app.record.detail.show” で呼び出すことができます。イベントタイプやイベントが呼び出されるタイミングなど具体的な内容は kintone JavaScript API のレコードの詳細イベントで確認できます。レコード詳細イベントでは event オブジェクトが取得できますので、event オブジェクトから record オブジェクトを取得し、record オブジェクト内の緯度・経度を取得し、地図上に物件の位置を表示しています。全体のソースは以下の通りです。 (function () { "use strict"; // API キー const api_key = '<API キー>'; // 一覧画面を開いた時に実行します 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']; //console.log(records); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Legend", "esri/widgets/LayerList", ], function (esriConfig, Map, MapView, MapImageLayer, Graphic, GraphicsLayer, Legend, LayerList) { // API キーの作成 esriConfig.apiKey = api_key; const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); 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 }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, "top-right"); }); // MapImageLayer の作成 const mapImageLayer = new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/sinsuisoutei/MapServer" }); map.add(mapImageLayer); // 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImageLayer } ] }); // ビューの右下にウィジェットを追加 view.ui.add(legend, "bottom-left"); // GraphicsLayer の作成 const graphicsLayer = new GraphicsLayer({ title: "不動産物件マスタ" }); const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // 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 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: simpleMarkerSymbol, 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']); } map.add(graphicsLayer); }); }); })(); (function () { "use strict"; // API キー const api_key = '<APIキー>'; // レコード詳細画面の表示 kintone.events.on('app.record.detail.show', function(event) { // レコード情報を取得します let record = event.record; // 地図のスペースフィールドの要素を取得します let elAction = kintone.app.record.getSpaceElement('Map'); // 地図を表示する div 要素を作成します let viewDiv = document.createElement('div'); viewDiv.setAttribute('id', 'viewDiv'); viewDiv.setAttribute('name', 'viewDiv'); viewDiv.setAttribute('style', 'width: 800px; height: 450px; margin-right: 30px; border: solid 2px #c4b097'); elAction.appendChild(viewDiv); //console.log(records); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Legend", "esri/widgets/LayerList", ], function (esriConfig, Map, MapView, MapImageLayer, Graphic, GraphicsLayer, Legend, LayerList) { // API キーの作成 esriConfig.apiKey = api_key; const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); let lat = record['緯度']['value']; let lon = record['経度']['value']; const view = new MapView({ map: map, center: [lon, lat], zoom: 17, // scale: 72223.819286 container: "viewDiv", constraints: { snapToZoom: false } }); view.when(() => { // レイヤーリストウィジェット const layerList = new LayerList({ view: view }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, "top-right"); }); // MapImageLayer の作成 const mapImageLayer = new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/shinsuisoutei2020/MapServer", visible: false }); map.add(mapImageLayer); // 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImageLayer } ] }); // ビューの右下にウィジェットを追加 view.ui.add(legend, "bottom-left"); // GraphicsLayer の作成 const graphicsLayer = new GraphicsLayer({ title: "不動産物件マスタ" }); map.add(graphicsLayer); const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // blue outline: { color: [255, 255, 255], // White width: 1 } }; 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: simpleMarkerSymbol, attributes: propertyAtt, popupTemplate : { title: "不動産物件マスタ", content: [ { type: "fields", fieldInfos: [ { fieldName: "Name", label: "物件名" }, { fieldName: "Address", label: "住所" }, { fieldName: "Company", label: "オーナー企業名/氏名" }, { fieldName: "Tel", label: "オーナー電話番号" } ] } ] } }); graphicsLayer.graphics.add(pointGraphic); }); }); })(); 地図部分の実装に関しては前回紹介した内容と基本的には同じですので、前回の記事を参照してください。不動産物件マスタ：編集機能次は物件データの編集です。詳細画面からレコードの編集ボタンをクリックすることで、各項目が編集できるようになります。kintone では標準でこの機能を提供しており、編集画面に地図の機能を組み込むことで、地図上からユーザーが任意に場所を選択できるようにしました。また、任意の位置をクリックし、そのクリックした位置の住所を確定して物件の所在地として表示しました。これはリバースジオコーディングという機能で、緯度・経度から住所を検索する機能です。レコードの編集イベントは “app.record.edit.show” で呼び出すことができます。イベントタイプやイベントが呼び出されるタイミングなど具体的な内容は kintone JavaScript API のレコードの編集イベントで確認できます。全体のソースは以下の通りです。 (function () { "use strict"; // API キー const api_key = '<API キー>'; //レコード追加画面の表示 kintone.events.on(['app.record.edit.show'], function (event) { // レコード情報を取得します let record = event.record; // 地図のスペースフィールドの要素を取得します let elAction = kintone.app.record.getSpaceElement('Map'); // 地図を表示する div 要素を作成します let viewDiv = document.createElement('div'); viewDiv.setAttribute('id', 'viewDiv'); viewDiv.setAttribute('name', 'viewDiv'); viewDiv.setAttribute('style', 'width: 800px; height: 450px; margin-right: 30px; border: solid 2px #c4b097'); elAction.appendChild(viewDiv); //console.log(records); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/Graphic", "esri/widgets/Legend", "esri/widgets/LayerList", "esri/rest/locator" ], function (esriConfig, Map, MapView, MapImageLayer, Graphic, Legend, LayerList, Locator) { // API キーの作成 esriConfig.apiKey = api_key; const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); let lat = record['緯度']['value']; let lon = record['経度']['value']; const view = new MapView({ map: map, center: [lon, lat], zoom: 17, // scale: 72223.819286 container: "viewDiv", constraints: { snapToZoom: false } }); view.when(() => { // レイヤーリストウィジェット const layerList = new LayerList({ view: view }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, "top-right"); }); // MapImageLayer の作成 const mapImageLayer = new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/shinsuisoutei2020/MapServer", visible: false }); map.add(mapImageLayer); // 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImageLayer } ] }); // ビューの右下に凡例ウィジェットを追加 view.ui.add(legend, "bottom-left"); const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // blue outline: { color: [255, 255, 255], // White width: 1 } }; // point の作成 let point = { type: "point", longitude: lon, latitude: lat }; // Graphic オブジェクト let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); // 地図クリック時 view.on("click", (event) => { view.graphics.removeAll(); if (event.mapPoint) { // クリック時の緯度経度を kintone のレコードに設定 const record = kintone.app.record.get(); record.record['緯度'].value = event.mapPoint.latitude; record.record['経度'].value = event.mapPoint.longitude; kintone.app.record.set(record); // クリック時の緯度経度をマップにマップに表示 let point = { type: "point", longitude: event.mapPoint.longitude, latitude: event.mapPoint.latitude }; let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); // サービス URL let serviceUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; // リバースジオコーディング // 物件の所在地を取得 Locator.locationToAddress(serviceUrl , { location: point }).then((result) => { if (result.address) { record.record['物件所在地'].value = result.address; } else { record.record['物件所在地'].value = ""; } kintone.app.record.set(record); }); } }); }); }); })(); リバースジオコーディングですが、ArcGIS Platform が提供しているロケーションサービスのリバースジオコーディングを使用しています。 ArcGIS API for JavaScript の locater モジュールの locationToAddress() メソッドを使用しています。引数にサービス URL と location プロパティに地図上でクリックした緯度・経度を指定します。ステップごとに確認したい方は、ArcGIS API for JavaScript のチュートリアル（Reverse geocode）をご参照ください。 // クリック時の緯度経度をマップにマップに表示 let point = { type: "point", longitude: event.mapPoint.longitude, latitude: event.mapPoint.latitude }; // サービス URL let serviceUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; // リバースジオコーディング // 物件の所在地を取得 Locator.locationToAddress(serviceUrl , { location: point }).then((result) => { if (result.address) { record.record['物件所在地'].value = result.address; } else { record.record['物件所在地'].value = ""; } kintone.app.record.set(record); }); 不動産物件マスタ：追加機能最後に物件データの追加です。詳細画面からレコードを追加するボタンをクリックすることで、各項目が追加できます。kintone では標準でこの機能を提供しており、編集機能と同様に地図の機能を組み込みました。リバースジオコーディングの機能と Search ウィジェット呼ばれるマップ内の目標物や場所を検索するためのウィジェットを追加しました。ArcGIS API for JavaScript では多くの便利なウィジェットを提供しており、簡単に組み込むことができます。詳細については、以前にこちらのブログ「続編はじめてのWeb マッピングアプリケーション開発 : ウィジェット編」でも紹介しているのでご参照ください。レコードの追加イベントは “app.record.create.show” で呼び出すことができます。イベントタイプやイベントが呼び出されるタイミングなど具体的な内容は kintone JavaScript API のレコードの追加イベントで確認できます。全体のソースは以下の通りです。 (function () { "use strict"; // API キー const api_key = '<API キー>'; //レコード追加画面の表示 kintone.events.on('app.record.create.show', function (event) { // レコード情報を取得します let record = event.record; // 地図のスペースフィールドの要素を取得します let elAction = kintone.app.record.getSpaceElement('Map'); // 地図を表示する div 要素を作成します let viewDiv = document.createElement('div'); viewDiv.setAttribute('id', 'viewDiv'); viewDiv.setAttribute('name', 'viewDiv'); viewDiv.setAttribute('style', 'width: 800px; height: 450px; margin-right: 30px; border: solid 2px #c4b097'); elAction.appendChild(viewDiv); //console.log(records); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Legend", "esri/widgets/LayerList", "esri/rest/locator", "esri/widgets/Search" ], function (esriConfig, Map, MapView, MapImageLayer, Graphic, GraphicsLayer, Legend, LayerList, Locator, Search) { // API キーの作成 esriConfig.apiKey = api_key; const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); // デフォルトの値を設定 let lat = "35.68944"; let lon = "139.69167"; if (record['緯度']['value'] && record['経度']['value']) { lat = record['緯度']['value']; lon = record['経度']['value']; } const view = new MapView({ map: map, center: [lon, lat], zoom: 17, // scale: 72223.819286 container: "viewDiv", constraints: { snapToZoom: false } }); view.when(() => { // レイヤーリストウィジェット const layerList = new LayerList({ view: view }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, { position: "top-right" }); }); // MapImageLayer の作成 const mapImageLayer = new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/shinsuisoutei2020/MapServer", visible: false }); map.add(mapImageLayer); // 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImageLayer } ] }); // ビューの右下にウィジェットを追加 view.ui.add(legend, "bottom-left"); // Search ウィジェット const search = new Search({ view: view, popupEnabled: false }); view.ui.add(search, { position: "top-right" }); const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // blue outline: { color: [255, 255, 255], // White width: 1 } }; // point の作成 let point = { type: "point", longitude: record['経度']['value'], latitude: record['緯度']['value'] }; // Graphic オブジェクト let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); // マップクリック時 view.on("click", (event) => { view.graphics.removeAll(); if (event.mapPoint) { // クリック時の緯度経度を kintone のレコードに設定 const record = kintone.app.record.get(); record.record['緯度'].value = event.mapPoint.latitude; record.record['経度'].value = event.mapPoint.longitude; kintone.app.record.set(record); // クリック時の緯度経度をマップにマップに表示 let point = { type: "point", longitude: event.mapPoint.longitude, latitude: event.mapPoint.latitude }; let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); // サービス URL let serviceUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; // リバースジオコーディング // 物件の所在地を取得 Locator.locationToAddress(serviceUrl , { location: point }).then((result) => { if (result.address) { record.record['物件所在地'].value = result.address; } else { record.record['物件所在地'].value = ""; } kintone.app.record.set(record); }); } }); // 検索が確定した場合 search.on("select-result", (event) => { view.graphics.removeAll(); if (event.result) { 　// 検索結果をkintone のレコードに設定 const record = kintone.app.record.get(); record.record['緯度'].value = event.result.feature.geometry.latitude; record.record['経度'].value = event.result.feature.geometry.longitude; record.record['物件所在地'].value = event.result.name; kintone.app.record.set(record); // 検索結果の緯度経度をマップに表示 let point = { type: "point", longitude: event.result.feature.geometry.longitude, latitude: event.result.feature.geometry.latitude }; let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); } }); }); }); })(); Search ウィジェットですが、イベントに応じてその後の処理を実装することができます。今回は select-result で検索が確定した場合に確定した情報の緯度・経度、物件の所在地を kintone 側に設定するようにしました。同時にその場所も地図上に表示しています。 // 検索が確定した場合 search.on("select-result", (event) => { view.graphics.removeAll(); if (event.result) { 　// 検索結果をkintone のレコードに設定 const record = kintone.app.record.get(); record.record['緯度'].value = event.result.feature.geometry.latitude; record.record['経度'].value = event.result.feature.geometry.longitude; record.record['物件所在地'].value = event.result.name; kintone.app.record.set(record); // 検索結果の緯度経度をマップに表示 let point = { type: "point", longitude: event.result.feature.geometry.longitude, latitude: event.result.feature.geometry.latitude }; let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); } }); アプリのデプロイアプリのデプロイは、前回も紹介しましたが、不動産物件マスタ > アプリの設定 > JavaScript/CSS でカスタマイズの画面で JavaScript や CSS ファイルを適用することで反映することができます。今回は、機能ごとにソースファイル（index.js、detail.js、edit.js、create.js）を作成して適用しました。ソースファイルも分割して適用することができるので保守も楽になるかと思います。詳しくは、kintone ヘルプの「JavaScript やCSS でアプリをカスタマイズする」をご確認ください。まとめ今回は前回紹介した不動産物件マスタのアプリを拡張した部分を紹介しました。ArcGIS API for JavaScript の Search ウィジェットやリバースジオコーディングの機能も紹介しました。今回紹介した以外にも ArcGIS API for JavaScript には多くの機能が提供されています。サンプルコードや API リファレンスも充実していますので、ぜひ参照してください。また、今回連携した方法以外にも ArcGIS には便利な機能やサービスがあるので、kintone とさまざまな連携サービスが実現できるのではないかと思います。ぜひ、これを機会に kintone と ArcGIS の連携をお試しいただければと思います。 ■関連リンク ArcGIS Developer 開発リソース集 Esri 社（米国）Web サイト ArcGIS Developer ArcGIS API for JavaScript Esri Community kintone と ArcGIS の連携を試してみました。

‎03-31-2022

はじめに今回サイボウズ株式会社が提供している kintone と ArcGIS との連携を試してみましたので、連携方法について紹介したいと思います。 kintone とは kintone（キントーン）は、開発の知識がなくても自社の業務に合わせたシステムを簡単に作成できる、サイボウズのクラウドサービスです。業務アプリを直感的に作成でき、チーム内で占有して使えるなど、国内でも導入している組織は多いと思います。最近は ArcGIS との連携についての相談も増えています。さて、今回は kintone が提供している業務アプリの一つとして不動産物件マスタがあり、その不動産物件マスタのデータを ArcGIS と連携して地図表示をしてみました。kintone の標準機能では、地図サービスは提供していませんので、地図を使用する場合の選択肢として ArcGIS はとても便利です。 ArcGIS はすぐに利用可能な豊富な地図データや、地理情報を作成、分析、可視化するためのデスクトップアプリ、モバイルアプリ、Web アプリ、クラウドサービス、サーバー製品等から構成され、システム形態や用途に応じて自由に組み合わせて導入できます。 kinetone では、連携方法として、kintone JavaScript API や kintone REST API、kintone Plug-in API などの kintone API を提供しており、多くのパターンで ArcGIS との連携が可能です。今回の連携では、kintone JavaScript API を使用しました。kintone JavaScript API は、kintone の画面上の動作や見た目を変える APIで、JavaScript ファイルをアプリにアップロードして適用することで、kintone の画面上で動作させることができます。また、kintone にはさまざまな JavaScript イベントがあり、動作を操作することもできます。具体的には、JavaScript API と連携するために、ArcGIS API for JavaScript を使用して、kintone 上で不動産物件マスタのデータを ArcGIS API for JavaScript を使用して地図上に表示しました。さらに ArcGIS では多くのオンラインコンテンツを配信していますので、浸水想定区域/Anticipated Inundation Area も重ねて表示してみました。これにより浸水リスクのある不動産物件を把握することもできるようになります。 kintoneで不動産物件マスタのアプリを作成 kintone を利用するために、はじめに cybozu の developer network で kintone の開発者ライセンスを作成します。kintone 開発者ライセンスは、kintone API を使った開発を目的として、利用できる環境です。利用規約など細かい詳細については、kintone 開発者ライセンス（開発環境）をご確認ください。 kintone 環境が整ったら不動産物件マスタのアプリを作成します。 kintone の使い方やアプリの作成方法について kintone ヘルプを参考にしていただければと思います。不動産物件マスタのアプリで地図機能を追加地図機能の追加では、JavaScript API と連携するために ArcGIS API for JavaScript を使用しました。ArcGIS API for JavaScript は、地図アプリ開発用の API で 2D・3D の地図アプリを開発することができます。地図の可視化機能や CSV や GeoJSON などのデータを表示できたりと多くのGIS機能を備えています。また、ArcGIS にも対応しているため、ArcGIS 上にあるデータを表示することも可能です。詳細については、ArcGIS API for JavaScript のサイトを確認してください。現在のバージョンは、4.23です。Sample Code や API リファレンスも充実しています。 kintone で作成した不動産物件マスタのアプリの動作や画面をカスタマイズする場合に、不動産物件マスタ > アプリの設定 > JavaScript/CSS でカスタマイズの画面で JavaScript や CSS ファイルを適用することでカスタマイズができます。詳しくは、kintone ヘルプの「JavaScript やCSS でアプリをカスタマイズする」をご確認ください。上記の JavaScript/CSS でカスタマイズの画面で、ArcGIS API for JavaScript で開発した地図機能を適用していきます。はじめに ArcGIS API for JavaScript を CDN 経由で使用するために PC 用の JavaScript ファイルには「https://js.arcgis.com/4.23/」を設定し、PC 用の CSS ファイルには「https://js.arcgis.com/4.23/esri/themes/light/main.css」を設定します。不動産の物件情報を取得して地図に表示する部分は arcgis.js ファイルとして作成して設定しました。 kintone アプリで使用する JavaScript API によるイベントやデータの取得などは、スタートアップガイドや Tips なども多くのガイドが提供されています。とくに、はじめよう kintone API が参考になりました。次に不動産の物件情報を取得して地図に表示する部分の arcgis.js について説明していきます。今回は一覧画面を開いた時のイベントから不動産の物件情報を取得して地図に表示するように実装しました。以下は、地図画面を表示する 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 による実装部分です。 ArcGIS API for JavaScript を使用して背景地図などの地図サービスを利用するために ArcGIS Platform を使用しました。ArcGIS Platform はベースマップやジオコーディング、ルーティングなどのロケーションサービスを提供する PaaS のサービスです。ArcGIS Platform のロケーションサービスを使用するために API キーを取得する必要があります。API キーは ArcGIS Developer で開発者アカウントを作成することで無償から利用することができます。 ArcGIS Developer による開発者アカウントの作成や API キーの取得は、ArcGIS 開発リソース集をご確認ください。 ArcGIS API for JavaScript の地図表示部分として、はじめに Map オブジェクトの basemap プロパティに使用する背景地図を指定します。今回は "osm-streets-relief" を指定しました。その他、API キーで使用できる背景地図として多くの種類があります。そして、MapView オブジェクトに Map オブジェクトを指定することで、地図を描画します。オンラインコンテンツの浸水想定区域/Anticipated Inundation Area の表示には MapImageLayer (マップイメージレイヤー)を使用しました。不動産の物件情報の表示には GraphicsLayer (グラフィックスレイヤー) を使用しました。GraphicsLayer は、フィーチャにジオメトリと属性を持たせることができ、Graphic オブジェクトを作成することで地図に物件情報を描画することができます。 ArcGIS API for JavaScript の詳しい使用方法については、「はじめての Web マッピングアプリケーション開発シリーズ」でも紹介しています。以下は、ArcGIS API for JavaScript によるコードです。 // API キーの設定 esriConfig.apiKey = api_key; // Map オブジェクト const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); 　　// MapView オブジェクト 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 }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, "top-right"); }); 　　　　// マップイメージレイヤー const mapImageLayer= new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/sinsuisoutei/MapServer" }); map.add(mapImageLayer); 　　　　// 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImageLayer } ] }); // ビューの右下にウィジェットを追加 view.ui.add(legend, "bottom-left"); 　　　　// グラフィックスレイヤー const graphicsLayer = new GraphicsLayer({ title: "不動産物件マスタ" }); 　　 // シンボルの設定 const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // 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 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: simpleMarkerSymbol, attributes: propertyAtt, popupTemplate : { title: "不動産物件マスタ", content: [ { type: "fields", fieldInfos: [ { fieldName: "Name", label: "物件名" }, { fieldName: "Address", label: "住所" }, { fieldName: "Company", label: "オーナー企業名/氏名" }, { fieldName: "Tel", label: "オーナー電話番号" } ] } ] } }); graphicsLayer.graphics.add(pointGraphic); } map.add(graphicsLayer); arcgis.js 全体のコードは以下となります。 (function () { "use strict"; // API キー const api_key = '<API キー>'; // 一覧画面を開いた時に実行 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']; //console.log(records); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Basemap", "esri/layers/MapImageLayer", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Legend", "esri/widgets/LayerList", ], function (esriConfig, Map, MapView, Basemap, MapImageLayer, Graphic, GraphicsLayer, Legend, LayerList) { // API キーの設定 esriConfig.apiKey = api_key; // Map オブジェクト const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); 　　 // MapView オブジェクト 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 }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, "top-right"); }); 　　　　　　　　　　　　// MapImageLayer (マップイメージレイヤー) const mapImagelayer = new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/sinsuisoutei/MapServer" }); map.add(mapImagelayer); 　　　　　　　　　　　　 // 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImagelayer } ] }); // ビューの右下にウィジェットを追加 view.ui.add(legend, "bottom-left"); 　　　　　　　　　　　　 // GraphicsLayer (グラフィックスレイヤー) const graphicsLayer = new GraphicsLayer({ title: "不動産物件マスタ" }); // シンボルの設定 const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // 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 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: simpleMarkerSymbol, attributes: propertyAtt, popupTemplate : { title: "不動産物件マスタ", content: [ { type: "fields", fieldInfos: [ { fieldName: "Name", label: "物件名" }, { fieldName: "Address", label: "住所" }, { fieldName: "Company", label: "オーナー企業名/氏名" }, { fieldName: "Tel", label: "オーナー電話番号" } ] } ] } }); graphicsLayer.graphics.add(pointGraphic); } map.add(graphicsLayer); }); }); kintone.events.on('app.record.detail.show', function(event) { window.alert('レコード表示イベント'); }); })(); まとめ今回紹介した機能以外にも ArcGIS API for JavaScript には多くの機能が提供されております。サンプルコードや API リファレンスも充実していますので、参照してください。今回連携した方法以外に ArcGIS でも REST API のサービスが充実していますので、kintone とさまざまな連携が実現できるのではないかと思います。ぜひ、これを機会に kintone と ArcGIS の連携をお試しいただければと思います。 ■関連リンク ArcGIS Developer 開発リソース集 Esri 社（米国）Web サイト ArcGIS Developer ArcGIS API for JavaScript ArcGIS Blog：米国 Esri 社 What's new in ArcGIS API for JavaScript (4.23)

‎03-17-2022

@Mandy_Li Thank you for your comment. In the new App Studio 5.3, the Quick Capture 1.11 template is not present, do you know why? App Studio 5.2 had it.

‎02-20-2022

Leaflet、Esri Leaflet、OpenLayers、Mapbox などのオープンソースのクライアント API を使用して、従来の ArcGIS Online タイルサービスを使用するマッピングアプリケーションを構築している場合は、新しい ArcGIS ベースマップレイヤーサービスに更新する必要があります。従来の ArcGIS Online タイルサービスは、更新が終了しています。そのため、Esri の利用規約に準拠して継続的なアクセスを確保するため 2022年 4月30日までにアプリケーションを更新する必要があります。更新は簡単で、ベースマップサービスには無料でアクセスできます。従来の ArcGIS Online タイルサービスについては、ArcGIS ブログ「ArcGIS Online ラスターベースマップの更新停止に伴うベースマップギャラリー更新のお知らせ」にも公開していますので併せてご参照ください。本記事は ArcGIS Blog で紹介されている「Open source developers: Time to upgrade to the new ArcGIS basemap layer service!」の記事を翻訳して紹介したいと思います。新しい ArcGIS ベースマップレイヤーサービス新しい ArcGIS ベースマップレイヤーサービスは、従来の ArcGIS Online タイルサービスに代わるものです。新しいサービスでは、世界各国からアクセスされるアプリケーションのパフォーマンスが大幅に向上し、新しい地域の衛星画像もより高解像度で提供されます。また、新しいベクタータイルベースマップサービスもぜひご利用ください。このサービスは Mapbox Vector Tile Specification をサポートしており、オープンソースの API と簡単に統合することができます。ベクタータイルは全体的に最高のパフォーマンスを提供し、アプリケーションに合わせて25以上のベクタータイルスタイルから選択することができます。ベクタータイルサービスは、Vector Tile Style Editor（ベクタータイルスタイルエディター）による独自のベースマップスタイルの作成に対応しており、custom colors、fonts、glyphs を用いたアプリケーションのブランディングが可能です。カスタムスタイルの作成方法については、カスタムスタイルを作成するチュートリアルをご覧ください。アプリケーションをアップデートする手順以下の手順で、従来のサービスを新しいベースマップサービスに置き換えます。 1．従来のベースマップサービスを特定するアプリケーションが以下の URL エンドポイントを使用している場合、アプリケーションを更新する必要があります。 World Street Map https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer World Topo Map https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer World Light and Dark Gray Canvas https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Reference/MapServer https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Light_Gray_Base/MapServer https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Light_Gray_Reference/MapServer World Boundaries and Places https://services.arcgisonline.com/arcgis/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer https://services.arcgisonline.com/arcgis/rest/services/Reference/World_Boundaries_and_Places/MapServer https://services.arcgisonline.com/arcgis/rest/services/Reference/World_Reference_Overlay/MapServer World Transportation https://services.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer World National Geographic https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer 2．ArcGIS アカウントの取得新しいベースマップレイヤーサービスを利用するには、ArcGIS Developer（個人開発者向け）または ArcGIS Online アカウント（組織向け）が必要です。お持ちでない場合は、無料でサインアップすることができます。 NOTE：開発者アカウントでは、200万のベースマップタイルを毎月無料で利用できます。 NOTE：開発者アカウントの作成から API キーの取得、マップとベースマップレイヤーを表示するシンプルな地図アプリの作成方法まで、ArcGIS Developer 開発リソース集にも公開していますので、併せてご参照ください。 3．APIキーの取得開発者用ダッシュボードにログインし、API キー (アクセストークン) を取得します。 4．新サービスを参照する新しいベースマップレイヤーサービスにアクセスするには API キーを使用します。以下の URL エンドポイントを使うか、Leaflet、Mapbox、OpenLayers の具体的なコード例を参照してください。イメージタイル衛星画像、海洋、陰影起伏の新しいイメージタイルに直接アクセスするには、以下の URL に {z}、{y}、{x} の値と token を指定してください。 https://ibasemaps-api.arcgis.com/arcgis/rest/services/{ImageryType}/MapServer/tile/{z}/{y}/{x}?token={ACCESS_TOKEN} サンプル https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token={ACCESS_TOKEN} https://ibasemaps-api.arcgis.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}?token={ACCESS_TOKEN} https://ibasemaps-api.arcgis.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}?token={ACCESS_TOKEN} ベクタータイル新しいベクタータイルスタイルにアクセスするには、以下のURLに basemapStyle、type、トークン (API キーまたは OAuth 2.0 トークン) を指定します。type は style に設定する必要があります。 https://basemaps-api.arcgis.com/arcgis/rest/services/styles/{basemapStyle}?type={type}&token={ACCESS_TOKEN} サンプル https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Navigation?type={type}&token={ACCESS_TOKEN} https://basemaps-api.arcgis.com/arcgis/rest/services/styles/OSM:Standard?type={type}&token={ACCESS_TOKEN} https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Streets?type={type}&token={ACCESS_TOKEN} https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery?type={type}&token={ACCESS_TOKEN} Leaflet と Esri Leaflet のアプリをアップデートする方法 Leaflet アプリケーションを更新する最も簡単な方法は、Esri Leaflet プラグインを使用することです。Esri Leaflet CDN または npm パッケージと、Esri Leaflet Vector Plugin をロードする必要があります。 NOTE：L.Esri.BasemapLayer クラスで既に Esri Leaflet を使用している場合、L.Esri.BasemapLayer クラスは非推奨のため、 L.esri.Vector.vectorBasemapLayer プラグインを使用する必要があります。ライブラリがロードされた後、API キーを使用して、利用可能なすべてのベースマップレイヤースタイルにアクセスすることができます。詳細は、「Esri Leaflet とロケーションサービス開発者向けガイド」を参照してください。サンプル <script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"integrity="sha512-kuYkbOFCV/SsxrpmaCRMEFmqU08n6vc+TfAVlIKjR1BPVgt75pmtU9nbQll+4M9PN2tmZSAgD1kGUCKL88CscA=="crossorigin=""></script> <script src="https://unpkg.com/[email protected]/dist/esri-leaflet-vector.js"integrity="sha512-7rLAors9em7cR3/583gZSvu1mxwPBUjWjdFJ000pc4Wpu+fq84lXF1l4dbG4ShiPQ4pSBUTb4e9xaO6xtMZIlA=="crossorigin=""></script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Navigation"; const map = L.map('map', { minZoom: 2 }).setView([25,-10], 2); //Latitude, longitude L.esri.Vector.vectorBasemapLayer(basemapEnum, { apiKey: apiKey }).addTo(map); Mapbox GL JS アプリをアップデートする方法 Mapbox GL JS の以前のバージョン（バージョン 1.x）を使用している場合、新しい ArcGIS ベースマップレイヤーサービスに直接アクセスできます。古い URL エンドポイントを新しいベクタータイルレイヤーのエンドポイントに置き換え、API キーを含めます。詳細は「Mapbox GL JS と ArcGIS ロケーションサービスガイド」を参照してください。サンプル <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet"/> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Nova"; // Basemap layer style const map = new mapboxgl.Map({ container: "map", style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 1, center: [-5, 30] // [longitude, latitude] }); OpenLayers アプリをアップデートする方法 TileLayer クラスまたは OL-Mapbox-Style ライブラリなどの他のプラグインで、TileLayer 新しい URL エンドポイントに更新して API キーを使用します。詳細は「OpenLayers と ArcGIS ロケーションサービスガイド」を参照してください。サンプル <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/olms.js"></script> const apiKey = "YOUR_API_KEY"; const basemapId = "ArcGIS:Topographic"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL); //OpenLayers Mapbox style まとめ従来の ArcGIS Online のタイルサービスは、しばらく前から、更新が終了しており、また Esri の利用規約に準拠するため、2022 年 4 月 30 日までに新しい ArcGIS ベースマップレイヤーサービスに更新する必要があります。また、ジオコーディングやルーティングなど他の ArcGIS ロケーションサービスをオープンソースの API で使用することに興味がある場合は、マッピング API とロケーションサービスのガイドを参照してください。 ■関連リンク ArcGIS Developer 開発リソース集 Esri 社（米国）Web サイト ArcGIS Developer

‎01-14-2022

Thank you for the infomartion. It was very helpful. I have an additional question. I think the AppStudio template is always version 1.0.1 of the template app, will the template app be upgraded in the future?

‎12-23-2021

ArcGIS QuickCapture 1.11 (template), but Online has been updated and the current latest version is 1.12.104. So when you use it, it will ask you to update the app and send you to the Apple Store. https://apps.apple.com/jp/app/arcgis-quickcapture/id1451433781 I don't think ArcGIS QuickCapture 1.11 (template) will be upgraded until AppStudio is updated. How are you updating ArcGIS QuickCapture 1.11 (template)? https://doc.arcgis.com/ja/quickcapture/faq/whatsnew.htm

‎06-27-2021

ES modules はすでにご存知の方も多いかと思います。ES modules は、主要なブラウザで採用されている、モダンな JS を扱うための公式の標準化されたモジュールシステムです。ArcGIS API for JavaScript の ES modules は、@arcgis/core を通じて npm からインストールして利用することができます。 ArcGIS API for JavaScript バージョン 4.18 では、、APIとフレームワークやビルドツールとの統合を大幅に容易にすることを目的としています。4.19では、これらのモジュールが本番環境で使用可能になりました。ES modules のインストールに関する簡単な概要は、APIドキュメントの Build with ES modules ガイドのトピックをご覧ください。本記事では、ES modules について ArcGIS Blog でも紹介されている「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier」と「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier - Part 2」の記事を翻訳して紹介したいと思います。まず、「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier」では、以下のように ES modules の使い方を中心に紹介しています。どのようにして始めるのか？ NPM を使って、新しい ES modules パッケージ (@arcgis/core) をインストールします。 npm install @arcgis/core その後、import ステートメントを使用して、個々のモジュールをアプリケーションにロードします。ES modules のパッケージの命名規則では、/core が使用され、AMD CDN modules で使用される /esri とは異なります。 import WebMap from '@arcgis/core/WebMap'; import MapView from '@arcgis/core/views/MapView'; const webmap = new WebMap({ portalItem: { id: '05e015c5f0314db9a487a9b46cb37eca', }, }); const view = new MapView({ container, map: webmap }); 2番目のステップは、API のアセット（スタイル、イメージ、フォント、ローカリゼーションファイルを含む）を @arcgis/core/assets フォルダからビルドフォルダにコピーすることです。ビルドツールによって様々な方法がありますが、簡単な方法は、ビルドプロセス中に実行される NPM スクリプトを設定することです。例えば、npm install ncp を実行し、package.json にフォルダをコピーするスクリプトを設定します。これは React の例です。 { "script": { "start": "npm run copy && react-scripts start", "build": "npm run copy && react-scripts build", "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets" } } 最後のステップは、CSS の設定です。テーマを選び、@arcgis/core/assets/esri/themes/ からテーマファイルをプロジェクトにコピーするようにコードを設定します。ここでは React の例を紹介します。 // React - index.js import '@arcgis/core/assets/esri/themes/dark/main.css'; 以上で、API を自分のアプリケーションに取り込むことができました。あとは、ビルドを実行すれば、API の ES modules が他のすべてのインポートと一緒にバンドルされます次に「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier - Part 2」では、以下のように ES modules のメリットや ES modules の移行に関するトピック、フレームワークを使用する場合の検討事項などを紹介しています。なぜ ES modules なのか？ほとんどのローカルビルドでは、ES modules が動作します。ローカルビルドとは、アプリケーションコードと一緒に API モジュールをインストールし、消費し、コンパイルすることです。これが何を意味するのか、詳しくは以下をご覧ください。ここでは、そのメリットをまとめてご紹介します。コードの簡素化最新ブラウザでのネイティブサポート最小限の設定最新のフレームワークやビルドツールとのシームレスな統合 ES modules は、API コードを require() 文で囲む必要がないため、AMD modules よりも簡単に使用することができます。ES modules は、ネイティブの import 文によってアプリケーション内で参照されます。これは、ECMA 2015（ES6）仕様がすべての主要なブラウザベンダーによって採用されたために実現しました。また、ES modules は、ほとんどの最新のフレームワークではデフォルトでサポートされています。以下は、ES modules と AMD modules を並べた 2 つのコードスニペットです。それに比べ、AMD は ECMA 規格ではなく、API 仕様に基づいています。ブラウザでネイティブにサポートされていないため、AMD は Dojo や RequireJS などの別のモジュールローダーを必要とします。このため、フレームワークを使用する際には、特別な設定やヘルパーライブラリ、esri-loader や arcgis-webpack-plugin などの追加プラグインが必要になります。 4.19 の新機能は？ 4.19では、いくつかの機能改善に加えて、インストールとセットアップを簡素化しました。@arcgis/core の NPM インストールでは、API で使用されるアセットを実行時に取得するデフォルトの方法として CDN を使用するようになりました。API のアセットを node_modules からプロジェクトにコピーする必要はもうありません。アセットには、スタイル、画像、ウェブワーカー、ウェブアセンブリー、ローカライゼーションファイルが含まれます。プライベートネットワーク上でアプリを実行している場合など、ローカルでアセットを扱う必要がある場合は、config.assetsPath でデフォルトを上書きすることができます。サンプルはどこにありますか？ https://github.com/Esri/jsapi-resources/tree/master/esm-samples では、様々な基本的な入門サンプルを用意しています。API の ES modulesをReact、Angular、webpack、rollup.js などと組み合わせて使用する例があります。サンプルの使用に関する質問や、ES modules に関するその他の質問があれば、リポジトリの issue ページに投稿することができます。 AMD modules を使用していますが、切り替える必要がありますか？ JavaScriptフレームワークを使用せずに AMD モジュールを使用している場合や、ローカルビルドを作成していない場合は、移行する必要はありません。フレームワークを使用している場合や、すでに esri-loader や arcgis-webpack-plugin を使用している場合は、ES modules への移行をお勧めします。この2つのモジュールタイプの違いについて、多くの質問を受けます。ここで重要なのは、AMD modules と ES modules の間で、基本的な API の機能は全く同じであるということです。大きく異なるのは、ブラウザ、フレームワーク、ビルドツールがモジュールとどのように連携するかという点です。フレームワークの使用やローカルビルドを検討すべきでしょうか？ JavaScript アプリケーションの規模が大きくなってくると、新しい機能を追加することが難しくなってきます。フレームワークを使用することは、バニラ HTML/JavaScript で作られたアプリと比較して、フロントエンドアプリのスケーラビリティ、生産性、パフォーマンスを向上します。フレームワークは、スケーラブルなアプリケーションの構築に必要な足場を提供します。Angular、React、VueJS などの主要なフレームワークは、大規模で高性能なアプリケーションを構築する企業によって実世界でテストされてきました。これらのフレームワークには、定型的なコードやコンポーネント、内蔵されたユニットテスト、状態管理、頻繁に使用されるワークフローのためのデザインシステム、そしてこれらすべてをサポートする世界規模のコミュニティが用意されています。フレームワークの基盤構築やメンテナンスにどれだけの時間が費やされたかを考えれば、同じものを作り直すために費やす時間はありません。フレームワークには、webpack や rollup.js などのモジュールバンドラーが付属しています。これらのバンドラーは、フレームワークを使わずに単体で使用することもできます。バンドラーの役割は、アプリケーションのコードと依存関係をコンパイルし、最適化されたチャンク（バンドル）に分割して、本番環境に投入することです。この最適化ステップの目的は、可能な限り最速のロードパフォーマンスを提供することです。下図はバンドルがディスク上でどのように見えるかを示すスクリーンショットです。 HTML アプリで ES modules を使用することはできますか？ ES modules は、テストとプロトタイピングのためにのみ、CDN 経由で提供されています。これはパフォーマンス上の理由によるもので、ES modules の CDN ビルドは高速ロードには最適化されていません。本番環境では、ローカルビルドのみを使用することをお勧めします。なぜなら、最適化をより細かくコントロールできるからです。Esri のサンプルリポジトリには、ES modules CDN のサンプルがあります。まとめ私たちは、新しい ES modules に興奮していますし、皆さんもそうであることを願っています。ぜひ、お試しください。基本的なスタートガイド：ArcGIS API for JavaScript SDK Guide Topic - Build with ES modules とサンプルアプリをご覧ください。 ■関連リンク ESRIジャパン Web サイト ArcGIS API for JavaScript Esri 社（米国）Web サイト ArcGIS API for JavaScript

‎06-02-2021

This is a case where an application developed with Runtime in a VDI environment is used with remote desktop. https://developers.arcgis.com/net/reference/system-requirements/#on-premises-virtualization

‎03-07-2021

Thank you for the information. I was able to confirm it here. Ideally, it should be displayed in Japanese by default, like mapbox, without setting it in code. https://blog.mapbox.com/cartographic-features-for-japanese-maps-eeecc461e7b6

‎02-25-2021

When I display a map of Japan with mapbox gl js, I see a mixture of Japanese and English notation. It is displayed in Japanese location. Is this currently supported? <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <title>Mapbox GL JS 背景地図表示と GeoJSON 表示</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> </head> <body> <div id="map"></div> </body> <script> const apiKey = "AAPKe9fefdc8839248fe8916671a8d6722dd8yIiVGa4rmTt7LKcvznc-up0JQLLS5vW9FQ7RM1TfmZ8uOs5y6TGbZ3Q6QLmlFsB"; const basemapEnum = "ArcGIS:Streets"; const map = new mapboxgl.Map({ container: "map", // the id of the div element style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`, zoom: 12, // starting zoom center: [139.72514, 35.60847], // starting location [longitude, latitude] pitch: 45, hash: true }); map.addControl(new mapboxgl.NavigationControl()); let scale = new mapboxgl.ScaleControl({ maxWidth: 200, unit: 'metric' }); map.addControl(scale); map.once("load", () => { // This code runs once the base style has finished loading. map.addSource("kankojohoShinagawa100kei", { type: "geojson", data: "https://services5.arcgis.com/HzGpeRqGvs5TMkVr/arcgis/rest/services/kankojohoShinagawa100kei/FeatureServer/0/query?f=pgeojson&where=1=1&outFields=*", cluster: true, clusterRadius: 20, // cluster two kankojohoShinagawa100kei if less than 20 pixels apart clusterMaxZoom: 14 // display all kankojohoShinagawa100kei individually from zoom 14 up 　}); 　map.addLayer({ id: "kankojohoShinagawa100kei-circle", type: "circle", source: "kankojohoShinagawa100kei", paint: { "circle-color": "hsla(0,0%,0%,0.75)", "circle-stroke-width": 1.5, "circle-stroke-color": "white", "circle-radius": ["case", ["get", "cluster"], 10, 5] // 10 pixels for clusters, 5 pixels otherwise } 　}); 　map.addLayer({ id: "kankojohoShinagawa100kei-cluster-count", type: "symbol", source: "kankojohoShinagawa100kei", layout: { "text-font": ["Arial Bold"], "text-field": ["get", "point_count"], "text-offset": [0, 0.1] // move the label vertically downwards slightly to improve centering }, paint: { "text-color": "white" } 　}); map.on("click", "kankojohoShinagawa100kei-circle", (e) => { const trailhead = e.features[0]; new mapboxgl.Popup() .setHTML(`<b>名前：${trailhead.properties.name}</b> <br/><b>カテゴリ1：</b>${trailhead.properties.category} <br/><b>カテゴリ2：</b>${trailhead.properties.category_supplement} <br/><b>詳細：</b>${trailhead.properties.description_ja} <br/><b>場所：</b>${trailhead.properties.location}` ) .setLngLat(trailhead.geometry.coordinates) .addTo(map); }); map.on("mouseenter", "kankojohoShinagawa100kei-circle", () => { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "kankojohoShinagawa100kei-circle", () => { map.getCanvas().style.cursor = ""; }); }); </script> </html> https://valuecreation.github.io/mapbox-gl-js-samples/20210131/#12/35.60847/139.72514/0/45

‎02-11-2021

Thank you very much. No, I want to get the data from the following vector tile. const tileLayer = new VectorTileLayer({ title: "National City Boundary Data (Vector Tile)", url: ". /style.json", opacity: 0.5 }); I understand how to get attribute data from GeoJSON.

‎02-10-2021

Hi, As for the attribute data of MVT data, in Mapbox GL JS, I can get it as follows, but can't I get it in ArcGIS API for JavaScript? map.on("click", "japan_ver821_layer", (e) => { const value = e.features[0]; console.log(value) new mapboxgl.Popup() .setHTML(`<b>${value.properties.KEN}</b>${value.properties.SIKUCHOSON}`) .setLngLat(e.lngLat) .addTo(map); }); The code we used is shown below. https://github.com/tkamiya0625/Arc-MVT ArcGIS API for JavaScript https://tkamiya0625.github.io/Arc-MVT/20210210/arcgis.html Mapbox GL JS https://tkamiya0625.github.io/Arc-MVT/20210210/mapbox.html

‎12-06-2020

Add an item title with a different name シェープの追加 In that case the app will launch normally. Would it be a matter of custom widget settings, etc.?

‎12-03-2020

Thank you for the information. It is an error, but you are experiencing the above error.

Online Status	Offline
Date Last Visited	‎05-18-2026 09:12 PM

My Ideas

Latest Contributions by TakahiroKAMIYA

Calcite Design Systemを使用した最近発生した地震のフィルタリング

kintone と ArcGIS の連携を試してみました～第2弾不動産物件マスタのアプリ拡張～

kintone と ArcGIS の連携を試してみました。

Re: About ArcGIS QuickCapture 1.11 (template) version upgrade

オープンソースの開発者 : 新しい ArcGIS のベースマップレイヤーサービスへの更新

Re: About ArcGIS QuickCapture 1.11 (template) version upgrade

About ArcGIS QuickCapture 1.11 (template) version upgrade

ArcGIS API for JavaScript - フレームワークやビルドツールとの連携を容易にする ES modules について -

Re: About licensing with virtualized environments

Re: About Basemap Localization

About Basemap Localization

Re: Acquisition of attribute data for MVT data

Acquisition of attribute data for MVT data

Re: Custom Widget Deployment with Enterprise

Re: Custom Widget Deployment with Enterprise

IoT データをリアルタイムに地図上に可視化してみた!

IoT データを「ノンコーディング」で地図上に可視化しよう!

ArcGIS API for Python を使ってみよう④ : ArcGIS Online のアイ...

Xamarin で「駅すぱあとWebサービス」を利用してみた!

ベクタータイルを Xamarin.Forms で表示!