Latest Contributions by TakahiroKAMIYA

はじめに 2025 年 7 月 2 日 (水) に多種多様な地図位置情報関連の企業、大学、学会などの団体が一堂に会する共同展示会である「ジオ展 2025」が大手町三井ホールで開催されました。2016 年から続くこのイベントは、今年は、過去最大となる 1713 の参加者があり大盛況でした。展示ブースは、営利団体 39 団体、非営利団体 26 団体の出展があり、プレゼンステージでは、24 の企業・団体が最新ソリューションやサービスの紹介を行い、この業界の盛り上がりの一端を感じることができました。本記事では、そんな大盛況だったジオ展を弊社のブース及びプレゼン発表を通して振り返りたいと思います。   ブース展示 では ArcGIS の開発者製品を含んだ各種アプリケーションによる多彩なデモを展示しました。多くの方にお立ち寄りいただき、製品や事例のご紹介を行うとともに、地理情報の活用方法などをお話することができました。     また、展示したデモアプリでは ArcGIS Survey123 と ArcGIS Dashboards を用いてリアルタイムでデータの更新を体験してもらいました。円形の型に生地とあんこを入れて焼いた和菓子がどの地域でどのように呼ばれているかのアンケートに答えていただき以下のダッシュボードに結果を表示させる試みも行いました。   結果として、非常に多くの方にご回答をいただき、地域による興味深い特色を可視化することができました。   プレゼンテーション ブースでの展示と合わせて、会場内ステージでのにも参加をさせていただきました。ArcGIS プラットフォームについて知っていただくための参加型のプレゼンテーションとして、ArcGIS Survey123 を用いた写真による場所当てクイズのデモンストレーションを行いました。   以下が出題した問題です。皆さんはこの写真がどこから撮影されたものかお分かりになりますでしょうか。（以下に回答を記載してあります。）   デモンストレーションでは会場の皆様から、回答を位置情報として収集し、MapViewer でポイントのシンボルを変更、ArcGIS Experience Builder の近隣検索ウィジェットを用いて、正解の位置から近い順に回答を表示させるといった流れで行いました。 結果として、70 名以上の方にその場でご回答していただきました。ご参加いただいた方には感謝申し上げます。正解の場所（Scene Viewer で確認できます）を回答いただいた方は 3 名、近かった方を含めると 16 名の方がいらっしゃいました。   ジョブボード ジオ展では、ジョブボードで各社採用情報を掲載しており、多くの方が興味を持ってチェックしていました。ESRIジャパンからも中途採用、新卒採用と多くの職種で掲載させていただきました。 こちらは引き続き、絶賛募集中ですので、ご興味を持たれた方は検討していただけたらと思います。    ジオ展：採用情報 おわりに ジオ展 2025 は、企業だけでなく、大学や有志団体などの参加も目立ち、地理情報技術の情報交流の場として、非常に盛況で有意義なイベントでした。ESRIジャパンのブースやプレゼンテーションへも多くの方に足を運んでいただけました。お越しくださった皆様、ありがとうございました。 今後も、私達は継続してイベントなどで情報発信をしてまいります。その際にはこちらでお知らせを行いますので是非各種イベントへご参加ください。 ... View more

はじめに 以前に ArcGIS とSalesforce の連携例として、「Salesforce で SSO を実現！ - OpenID Connect で ArcGIS 連携」という ArcGIS と Salesforce との SSO 連携の記事を紹介しました。今回は Salesforce でデータが更新・追加された際に、ArcGIS Online のフィーチャ レイヤーも自動で更新・追加される仕組みを構築しました。連携の構築には、Microsoft 社の Power Automate を使用しましたので、その方法について紹介します。   Power Automate とは Microsoft 社が提供するサービスで、日々の業務で行っている単純な繰り返し作業を自動化できるツールです。直感的なインタフェースと多くのコネクターにより、コーディングの知識がなくてもワークフローを作成できます。 コネクターには、ArcGIS と連携できる ArcGIS Connectors for Power Automate が提供されています。住所情報のジオ―ディングやフィーチャ レイヤーの更新などのコネクターが提供されています。今回のワークフローの作成で幾つか使用しました。 ArcGIS Connectors for Power Automate は、国内未サポート製品です。 ArcGIS Connectors for Power Automate を利用するには、Microsoft Power Automate Premium ライセンスが必要です。   連携シナリオ ① デモデータと事前準備 デモデータには、東京都 都市整備局が公開しているオープン データの東京都総合設計制度許可実績一覧表のデータを使用して、Salesforce 上に東京都総合設計制度許可実績一覧表のカスタム オブジェクトを作成しました。また、ArcGIS Online 側にも同様なデータ構成で、フィーチャ レイヤーを作成します。   Salesforce : 東京都総合設計制度許可実績一覧表    ArcGIS Online : 東京都総合設計制度許可実績一覧表   ② シナリオの例 Salesforce 上で東京都総合設計制度許可実績から建物（例：土屋ビル）の属性情報（例：用途地域）を変更すると、ArcGIS Online 上のフィーチャ レイヤーの属性情報（例：用途地域）も自動で更新されます。また、Salesforce 上で東京都総合設計制度許可実績のデータが登録されると、ArcGIS Online 上のフィーチャ レイヤーに自動でデータが追加され、地図上に表示されます。    Salesforce – ArcGIS Online 連携構成   Power Automate フローの構築手順 Power Automate の使用条件や詳しい使用方法については、Microsoft 社の Power Automate のドキュメントをご確認下さい。  ここでは、ポイントを絞って簡潔に紹介します。 今回は、Salesforce上の「レコードが変更されたとき」、「レコードが作成されたとき」の2つのクラウド フローを作成します。 Power Automate の画面から新しいフローの自動化したクラウド フローを選択します。   フロー名は、任意の名前を入力します。フローのトリガーは、Salesforce 上のデータが更新・追加された場合のトリガーになるため、Salesforce 上の「レコードが変更されたとき」、もしくは、「レコードが作成されたとき」を選択します。2つのパターンで、自動化したクラウド フローを作成する必要があります。   Salesforce のレコードが変更されたとき Salesforceの「レコードが変更されたとき」と ArcGISの「機能レイヤーのレコードを更新する」コネクターを使用して、クラウド フローを作成します。 Power Automate で機能レイヤーとなっているものは ArcGIS ではフィーチャ レイヤーを指します。   はじめに Salesforce への接続を作成します。認証の種類やログイン URI (環境) 等を選択し、サインインして Salesforce への接続を作成します。   Salesforce との接続ができたら、パラメーターの Salesforce オブジェクトの種類から東京都総合設計制度許可実績一覧表を選択します。ここでは、詳細パラメーターは設定していません。   次に「機能レイヤー のレコードを更新する」コネクターで、はじめに ArcGIS Online への接続を作成します。サイン インして ArcGIS Online への接続を作成します。   ArcGIS Online との接続ができたら、機能レイヤーは、東京都総合設計制度許可実績一覧表/ cpproject_intro_list_sogo を選択します。一意の ID フィールドは、ArcGIS Online 上の通番号、通番号は、Salesforce 上の通番号を指定します。更新対象となる各フィールド（年度、番号、名称等）は、Salesforce 上の該当するフィールドを指定します。   ArcGIS Online 上のポップアップなどの画面からリンクをクリックした際に Salesforce 上の東京都総合設計制度許可実績の詳細画面を表示するため、以下のように、文字列関数を使用して、Salesforce の URL にオブジェクト ID を含めるように指定します。   設定は完了です。設定を保存して、テストで動作しているかを確認します。Salesforce 上で東京都総合設計制度許可実績一覧の該当のレコードを更新して、ArcGIS Online 上のフィーチャ レイヤーの該当データが更新されているかを確認します。更新されていれば成功です。もし、失敗している場合は、Power Automate でエラー メッセージなどが出力されるので、確認して対応します。   Salesforce のレコードが作成されたとき Salesforceの「レコードが作成されたとき」コネクターを使用します。ArcGIS では、追加したレコードの住所からジオコーディングを行い、緯度経度を取得するため、「住所の候補を検索する」コネクターを使用します。最後にフィーチャ レイヤーにデータを追加するため、「機能レイヤーにレコードを作成する」コネクターを使用して、クラウド フローを作成します。   Salesforce のレコードが更新されたときと同様に、Salesforce と ArcGIS Online への接続を作成します。「レコードが作成されたとき」のコネクターでも、パラメーターの Salesforce オブジェクトの種類は、東京都総合設計制度許可実績一覧表を選択します。 「住所の候補を検索する」コネクターのパラメーターの、結果を保存しますか？では、はいを選択します。住所には、Salesforce 上の住所フィールドを指定します。他の項目は使用しないため、今回は設定していません。   次に「機能レイヤーにレコードを作成する」コネクターで、機能レイヤーには、東京都総合設計制度許可実績一覧表/ cpproject_intro_list_sogo を選択します。 Geometry には、Geometry objects を設定する必要があり、「住所の候補を検索する」コネクターで取得した x、y の値を指定し、以下のように Point を設定します。  { "x":@{outputs('住所の候補を検索する')?['body/Geometry/x']} , "y":@{outputs('住所の候補を検索する')?['body/Geometry/y']} , "spatialReference": { "wkid": 4326 } } そして、レコードの作成対象となる各フィールド（年度、番号、名称等）は、Salesforce 上の該当するフィールドを指定します。東京都総合設計制度許可実績（カスタム オブジェクト ID）には、文字列関数を使用して、Salesforce の URL にオブジェクト ID を含めるように指定します。 設定は完了です。設定を保存して、テストで動作しているかを確認します。Salesforce 上で東京都総合設計制度許可実績のレコードを作成して、ArcGIS Online 上でフィーチャ レイヤーに追加されているかを確認します。   まとめ Power Automate を使用することで、開発することなく、ArcGIS Online と Salesforce の連携を実現することができました。コネクターの各設定も直感的なインタフェースのため、簡単にフローを構築することができました。 ただ、実運用の場合は、エラー処理や大量のデータ更新なども考慮する必要があるかと思います。 また、ArcGIS Connectors for Power Automate では、今回紹介した以外にも多くの操作を行うことが可能です。詳細については、ArcGIS Connectors for Power Automate のアクションをご確認ください。 今回は、Power Automateによる連携方法を紹介しましたが、ArcGIS には、多くの API/SDK が用意されていますので、次回は API/SDK を活用して、開発に踏み込んだ連携方法も紹介できたらと思います。   ■関連リンク ArcGIS Connectors for Power Automate Esri Community Salesforce で SSO を実現！ - OpenID Connect で ArcGIS 連携 ... View more

はじめに ArcGIS Online や ArcGIS Enterprise では、OpenID Connect (OIDC) を利用したログインを構成することで、組織内で利用しているシステムと同じ認証情報を使用して、ArcGIS Online や ArcGIS Enterprise へサイン インすることが可能となります。これまで、OpenID Connect を利用した ArcGIS との連携は幾つかブログで紹介しています。 OpenID Connect を利用した ArcGIS Enterprise と Yahoo との連携   OpenID Connect を使用した ArcGIS Online と WAGRI との連携 AWS で SSO を実現！ - OpenID Connect で ArcGIS 連携 今回は、Salesforce のユーザーを使用して、ArcGIS Online へサイン インできるよう構成する手順についてご紹介していきます。 画面の流れは以下となり、ArcGIS Online のログイン画面から Salesforce の認証画面に遷移し、Salesforce のユーザーでサイン インすることで、ArcGIS Online を利用することができます。   Salesforce 側の設定 Salesforce は、クラウドベースの顧客関係管理（CRM）のソフトウェアです（CRM の詳細）。今回、Salesforceと ArcGIS Online との連携は、Salesforce の Developer Edition の環境を使用しました。Developer Edition は Salesforce 開発者がプライベートな環境として無料で利用できる環境です。Developer Edition は 180 日間ログインしていないと無効化され、使用できなくなります。 Developer Edition のサイン アップ手順については、Salesforce デベロッパーブログで紹介されていますので、ご確認ください。 それでは、Salesforce 側の設定について紹介していきます。 Salesforce 側の各種設定等については、Salesforce のヘルプ ドキュメントにも詳しく紹介されていますので、ご確認ください。今回は、OpenID Connect ID プロバイダーとしての Salesforce や OpenID Connect を使用した接続アプリケーションとしてサービス プロバイダーを統合のドキュメントを参考にしています。※ なお、弊社では、Salesforce のサポートは行っておりません。 はじめに Salesforce で接続アプリケーションを作成していきます。 設定のアプリケーション マネージャーの新規接続アプリケーションから「接続アプリケーションを作成」を選択して、続行をクリックします。 下記の画面で、「接続アプリケーション名」、「API 参照名」、「取引先責任者メール」に対して、任意の名前やメール アドレスを設定してください。 そして、API（OAuth 設定の有効化）セクションの「OAuth 設定の有効化」をチェックしてください。 「コールバック URL」 と「選択した OAuth 範囲」の設定を行います。 コールバック URL はこの時点では設定すべき値はないため、「https://hoge.hoge.com」などと設定します。あとで、ArcGIS Online 側で設定されるログイン リダイレクト URL とログアウト リダイレクト URL を設定します。 選択した 0Auth 範囲では、【ID URL サービスにアクセス】と【一意のユーザー識別子にアクセス】を選択して追加します。「サポートされる認証フローに Proof Key for Code Exchange (PKCE) 拡張を要求」のチェックを外します。設定が完了しまたら「保存」ボタンをクリックします。 保存ボタンをクリックしたら以下の画面に遷移します。コンシューマー キーと秘密セクションから「コンシューマーの詳細を管理」をクリックして、「コンシューマー鍵」と「コンシューマーの秘密」をコピーして保存しておきます。ArcGIS Online 側の設定で使用します。   ArcGIS Online側の設定 ArcGIS Online の設定について紹介していきます。詳細な設定方法については、ArcGIS Online のドキュメント「OpenID Connect ログインの設定」を参考にしてください。 組織サイトに管理者としてログインします。設定の [セキュリティ] をクリックして、[ログイン] セクションの [OpenID Connect ログイン] をクリックします。 下記の OpenID Connect ログインの設定画面が表示されます。[ログイン ボタン ラベル] には、任意の名前を設定します。[新規メンバーの加入を許可] は、[自動] オプションを選択します。[自動] にすることで、メンバーは、OpenID Connect ログインでサイン インすることで、組織サイトに加入できます。詳細については、ArcGIS Online のドキュメント「メンバーの招待と追加」をご確認ください。 [登録済みクライアント ID]、[認証方法] の [クライアント シークレット] には、Salesforce 側の設定で取得した「コンシューマー鍵」と「コンシューマーの秘密」を使用します。[登録済みクライアント ID] には、「コンシューマー鍵」、[認証方法] の [クライアント シークレット] には、「コンシューマーの秘密」を設定してください。 [プロバイダーの範囲/権限] には、openid、id、profile、email、address、phone を設定します。[プロバイダー発行者ID] には、https://≪MYDOMAIN≫.my.salesforce.com を設定します。 [OAuth 2.0 認証エンドポイント URL] や[トークン エンドポイント URL] などに必要な設定内容は、https:// ≪MYDOMAIN≫.my.salesforce.com/.well-known/openid-configuration を参照することで確認することができます。 それぞれ以下の内容を設定します。 ・[OAuth 2.0 認証エンドポイント URL]：https://≪MYDOMAIN≫.my.salesforce.com/services/oauth2/authorize ・[トークン エンドポイント URL]：https:// ≪MYDOMAIN≫.my.salesforce.com/ services/oauth2/token ・[JSON Web キー セット (JWKS) URL]：https:// ≪MYDOMAIN≫.my.salesforce.com/id/keys ・[ユーザー プロファイル エンドポイント URL (推奨)]：https:// ≪MYDOMAIN≫.my.salesforce.com/services/oauth2/userinfo すべての設定が完了したら保存ボタンをクリックします。[OpenID Connect ログイン] の横にある [ログインの構成] リンクをクリックして、OpenID Connect ログインの編集を開きます。 設定プロセスを完了することで、下記の画面の [ログイン リダイレクトURL] と [ログアウト リダイレクト URL] は、自動で生成されますので、Salesforce 側で設定したコールバック URL（https://hoge.hoge.com）を [ログイン リダイレクト URL] と [ログアウト リダイレクト URL] に置き換えます。 下記の Salesforce 側の設定画面において、コールバック URL を置き換えます。 これですべての設定は完了です。Salesforce のユーザーとして、ArcGIS Online へサイン インして、ArcGIS Online を利用することが可能となります。 まとめ 今回は、OpenID Connect を利用して、ArcGIS Online と Salesforce との連携について紹介しました。ArcGIS Online は、OpenID Connect 認証プロトコルをサポートしているため、OpenID Connect をサポートしている Google や Okta などとの連携も可能です。 また、ArcGIS Online は、SAML ログイン アカウントの構成に SAML 2.0 をサポートしています。詳細は、ArcGIS Online のドキュメント「SAML ログインの設定」をご参照ください。 これまでに、ArcGIS Online / Enterprise および ADFS の連携ガイドやArcGIS Online / Enterprise および Shibboleth 連携ガイドも公開しています。 ArcGIS Online/ArcGIS Enterprise は、OpenID Connect や SAML 2.0 をサポートしているため、他システムとの連携も容易に可能となっています。 以上、参考となれば幸いです。   ■参考サイト ArcGIS Online OpenID Connect ログインの設定 SAML ログインの設定 ArcGIS Enterprise OpenID Connect ログインの設定 ポータルでの SAML 準拠の ID プロバイダーの構成 ... View more

はじめに オープンソースの MapLibre GL JS から ArcGIS Location Platform が提供するプレイス サービスを使ってみましたので、MapLibre GL JS によるプレイス サービスを使用した開発について簡単に紹介したいと思います。 ArcGIS Location Platform は、マッピングと空間解析のアプリケーションを構築する開発者向けの PaaS（Platform as a Service）サービスです。マッピング API や SDK などを使用して、高品質のロケーション サービスにアクセスし、アプリケーションやビジネス システムにロケーション インテリジェンスを組み込むことができます。 プレイス サービスは、ArcGIS Location Platform が提供するロケーション サービスのひとつで、1,000 以上の主要地（POI）データのカテゴリーにアクセスできます。例えば、近傍検索では、ある位置から指定された半径内のプレイスを見つけたり、境界ボックス内のプレイス検索では、現在のマップ範囲内になるプレイスを検索して表示したり、各プレイスに関する詳細情報を取得できます。プレイス サービスについては、ArcGIS ブログ（英語）「Bring Places Data into Your Apps with the New ArcGIS Platform Places Service」、「Elevating Developer Experience: Fresh POI Data, Stylish Map Icons, and Localized Categories via ArcGIS Places」でも紹介されていますので、ご確認ください。 プレイス サービスを使用するにあたり、開発を始めるためのガイドについては、ArcGIS Location Platform の Place finding をご参照ください。プレイス サービスの仕様や使用方法、各 API・SDK 等で使用する方法まで詳しく紹介されています。 今回は、MapLibre GL JS からプレイス サービスを使用し、Esri Developer のチュートリアル「Find nearby places and details」を参考にしています。Esri Developer には、ロケーション サービスの概要や使用方法、また、各 API・SDK によるドキュメントが充実しています。 Esri Developer の概要については、ArcGIS ブログ（英語）「A new developer website experience」でも紹介していますので、ご確認ください。   開発準備 プレイス サービスを使用した開発を始めるため、開発者アカウントを作成する必要があります。ArcGIS Location Platform が提供するロケーション サービスは、開発者アカウントを作成することで、無償から使用することができます。プレイス サービスも無料枠（毎月）があるため、手軽に使用することができます。 開発者アカウントの作成方法については、ArcGIS Developers 開発リソース集の開発者アカウントの作成をご確認ください。 そして、プレイス サービスにアクセスするため、API キーを使用します。API キーは、ArcGIS の安全なサービス、コンテンツ、および機能へのアクセスを許可する、長期間のアクセス トークンです。API キーの取得方法については、ArcGIS Developers 開発リソース集の API キーの取得をご確認ください。API キーの作成では、権限の選択で、アプリケーションが使用するコンテンツやサービスにアクセスするための適切な権限の設定が必要となります。今回はベースマップとプレイスを使用するための権限を付与します。これで、開発を始めるための準備は完了です。 MapLibre GL JS による開発 今回、MapLibre GL JS からプレイス サービスを使用した開発には、MapLibre GL JS のドキュメント「Find nearby places and details」を参考にしています。近傍検索をプレイス サービスを使用して行い、ある地点から指定された半径内にある POI データを検索します。 ここでは、注目したいポイントに絞ってコードを紹介しています。コードの詳細については、「Find nearby places and details」でも紹介していますので、合わせてご確認ください。 <! -- MapLibre GL JS の読み込み--> <script src=https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.js></script> <link href=https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css rel="stylesheet" /> <!-- Calcite Components の読み込み --> <script type="module" src="https://js.arcgis.com/calcite-components/2.12.1/calcite.esm.js"></script> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.12.1/calcite.css" /> <!-- ArcGIS REST JS : リクエストとプレイスの読み込み --> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-places@1.0.0/dist/bundled/places.umd.js"></script> <!-- 検索範囲を視覚化するために使用するTurf.jsの読み込み --> <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6.5.0/turf.min.js"></script>  背景地図や地物などの地図表示には、MapLibre GL JS を使用します。近傍検索の結果の表示には、Calcite Components を使用してします。Calcite コンポーネントは、優れた Web エクスペリエンスを構築するための、構成可能な Web コンポーネントが用意されています。これにより、リッチな Web アプリを構築することが可能です。近傍検索の実行には、ArcGIS REST JS の places パッケージを使用しています。ArcGIS REST JS は、ArcGIS のサービスにアクセスすることができ、マッピングや空間解析のアプリケーションを構築するための軽量な JavaScript のモジュールです。 その他、検索範囲を地図上で表示するため も使用しています。Turf.js は、オープンソースの地理空間解析ライブラリです。 // 検索カテゴリーの設定 let activeCategory = "16000"; let userLocation, clickedPoint; // activeCategory を更新するイベント ハンドラー categorySelect.addEventListener("calciteComboboxChange", e => { activeCategory = categorySelect.value; }); プレイス の検索を実行するには、カテゴリー IDが必要です。各カテゴリー IDは、「中華レストラン」（3099）や「スポーツ・レクリエーション」（18000）のように、プレイスはユニークなカテゴリーに対応しています。 使用可能なプレイスのカテゴリーの詳細については、「Find place categories」をご参照ください。 アクティブなプレイスのカテゴリーとクリックされた場所を追跡するグローバル変数を宣言します。アクティブなカテゴリーを 16000 に設定し、これはプレイスのランドマークとアウトドアのカテゴリーに対応しています。新しいカテゴリーがドロップダウンから選択されたときに activeCategory を更新するイベント ハンドラーを作成します。 const searchRadius = 750; // クリックした地点と検索するエリアを表すレイヤーの設定 map.once("load", () => { map.addSource("clicked-point", { type: "geojson", data: { "type": "Feature", "geometry": { "type":"Point", "coordinates": [] } } ); map.addLayer({ id:"search-location", source:'clicked-point', type:"fill", paint: { 'fill-color': '#aaaaaa', 'fill-opacity':0.25, 'fill-outline-color':'#000000', } }) }) // 検索範囲の設定 map.on('click', function (e) { userLocation = e.lngLat; 　// turf.circle を使用して、ポイントの周囲にメートル単位の半径の円を作成 const searchArea = turf.circle([e.lngLat.lng, e.lngLat.lat], searchRadius, { steps:36, units:"meters" }); map.getSource('clicked-point').setData(searchArea); })  近傍検索は、ユーザーが指定した位置と半径を定義し、指定された位置から半径内のあるプレイス データを検索します。レイヤーの定義として、ユーザーが地図上でクリックした地点と検索範囲を表すレイヤーを設定します。クリック ハンドラーを追加して、ユーザーが地図上でクリックした地点の周囲にメートル単位の半径の円を表します。検索範囲を視覚化するために Turf.js を使用します。クリックが指定されたら、turf.circle を使って、ポイントの周囲にメートル単位の半径の円を作成します。  function showPlaces() { // ArcGIS REST JS によるプレイスサービスへのリクエスト arcgisRest.findPlacesNearPoint({ x: userLocation.lng, y: userLocation.lat, categoryIds:activeCategory, radius:searchRadius, authentication }) }; 位置とカテゴリーが設定されたら指定した地点の近くの場所を検索するため、プレイス サービスにリクエストします。新しい関数 showPlaces を定義します。内部では、ArcGIS REST JS の findPlacesNearPoint 関数を使用して、Places サービスにリクエストを送信します。パラメーターには、userLocation、searchRadius、activeCategory、authentication オブジェクトを指定します。 // 結果の表示 function addResult(place) { // MapLibre の Marker による地図表示 const marker = new maplibregl.Marker() .setLngLat([place.location.x, place.location.y]) .addTo(map); currentPlaces.push(marker); // calcite-list-item 要素を使用して表示 const infoDiv = document.createElement("calcite-list-item"); resultPanel.appendChild(infoDiv); const description = ` ${place.categories[0].label} - ${Number((place.distance / 1000).toFixed(1))} km `; infoDiv.label = place.name; infoDiv.description = description; // HTML 要素をクリックし、関連する Marker に対してポップアップ表示 marker.id = place.placeId; marker.setPopup(new maplibregl.Popup().setText(place.name)); infoDiv.addEventListener("click",e => { marker.togglePopup(); // プレイスの詳細表示 getDetails(marker); }) }; プレイス サービスによって指定されたカテゴリーに一致する地点近くのプレイスのリストが返却されますので、結果を地図上にポイントとして表示します。地図上でのポイント表示には、MapLibre の Marker クラスを使用します。また、各プレイスの情報を UI 上で表示するために、Calcite Design System の Components を使用して表示します。プレイスの情報を表示するために、calcite-list-item 要素を作成します。アイテムのプロパティを設定して、プレイス名、カテゴリー、およびユーザーがクリックした地点からの距離を表示します。この要素を結果リストに追加します。 // プレイスの詳細の取得と表示 function getDetails(marker) { // ArcGIS REST JS による特定 POI に関する詳細情報の取得 arcgisRest.getPlaceDetails({ placeId: marker.id, requestedFields: ["all"], authentication }) .then((result)=>{ map.flyTo({center:marker.getLngLat()}); // calcite-flow-item 要素を使用して作成 infoPanel = document.createElement("calcite-flow-item"); // calcite-flow-item 要素のテンプレートに含まれる <flow> 要素にアイテムを追加 flow.appendChild(infoPanel); const placeDetails = result.placeDetails; infoPanel.heading = placeDetails.name; infoPanel.description = placeDetails.categories[0].label; // setAttribute ヘルパー関数を呼び出して、属性が有効な場合に表示します。各属性のCalcite UIアイコンを選択します。 setAttribute("Description", "information", placeDetails?.description); setAttribute("Address", "map-pin", placeDetails?.address?.streetAddress); setAttribute("Phone", "mobile", placeDetails?.contactInfo?.telephone); setAttribute("Hours", "clock", placeDetails?.hours?.openingText); setAttribute("Rating", "star", placeDetails?.rating?.user); setAttribute("Email", "email-address", placeDetails?.contactInfo?.email); setAttribute("Website", "information", placeDetails?.contactInfo?.website?.split("://")[1].split("/")[0]); setAttribute("Facebook", "speech-bubble-social", (placeDetails?.socialMedia?.facebookId) ? `www.facebook.com/${placeDetails.socialMedia.facebookId}` : null); setAttribute("Twitter", "speech-bubbles", (placeDetails?.socialMedia?.twitter) ? `www.twitter.com/${placeDetails.socialMedia.twitter}` : null); setAttribute("Instagram", "camera", (placeDetails?.socialMedia?.instagram) ? `www.instagram.com/${placeDetails.socialMedia.instagram}` : null); infoPanel.addEventListener("calciteFlowItemBack", e => { marker.togglePopup(); }) }); } // setAttribute ヘルパー関数 const setAttribute = (heading, icon, validValue) => { // 属性情報が有効な場合に表示 if (validValue) { const element = document.createElement("calcite-block"); element.heading = heading; element.description = validValue; // 各属性の Calcite UI アイコンを選択 const attributeIcon = document.createElement("calcite-icon"); attributeIcon.icon = icon; attributeIcon.slot = "icon"; attributeIcon.scale = "m"; element.appendChild(attributeIcon); infoPanel.appendChild(element); } }; ユーザーがプレイスのリストからパネル内のプレイスをクリックして、詳細情報を表示します。特定のプレイスの詳細情報を取得するため ArcGIS REST JS の getPlaceDetails 関数を使用します。リクエスト パラメーターには、プレイス ID、プレイスに対して返却される属性を定義するフィールドの配列、authentication オブジェクトを指定します。 返却された結果は、Calcite Design System の Components の calcite-flow-item 要素を使用します。calcite-flow-item 要素のテンプレートに含まれる <flow> 要素にアイテムを追加します。例えば、infoPanel.heading = placeDetails.name; では、heading にプレイスの名前を追加しています。 また、その他の詳細情報の表示には、setAttribute ヘルパー関数を呼び出して、属性が有効な場合に表示します。各属性の Calcite UI icon を選択して表示するように指定しています。 今回作成した全体のコードは以下となります。 <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <!-- MapLibre GL JS の読み込み --> <script src=https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.js></script> <link href=https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.css rel="stylesheet" /> <!-- Calcite Components の読み込み --> <script type="module" src="https://js.arcgis.com/calcite-components/2.12.1/calcite.esm.js"></script> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.12.1/calcite.css" /> <!-- ArcGIS REST JS: : リクエストとプレイスの読み込み --> <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-places@1.0.0/dist/bundled/places.umd.js"></script> <!--検索範囲を視覚化するために使用する Turf.js の読み込み --> <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6.5.0/turf.min.js"></script> <style> body { margin: 0; padding: 0; width:100%; height:100%; display:flex; flex-direction:row; } #map { position:absolute; left:350px; top:0; bottom:0; right:0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; z-index: 1; } .contents { position:absolute; top:44px; bottom:0; left:0; width:350px; overflow-y: auto; overflow-x: hidden; } #categorySelect { margin: 5px; width:340px; } </style> </head> <body> <calcite-combobox id="categorySelect" placeholder="Filter by category" overlay-positioning="fixed" selection-mode="single"> <calcite-combobox-item value="10000" text-label="アート/エンターテイメント"></calcite-combobox-item> <calcite-combobox-item value="11000" text-label="ビジネス/プロフェッショナル サービス"></calcite-combobox-item> <calcite-combobox-item value="12000" text-label="コミュニティ/行政機関"></calcite-combobox-item> <calcite-combobox-item value="13000" text-label="飲食店"></calcite-combobox-item> <calcite-combobox-item value="15000" text-label="健康/医療"></calcite-combobox-item> <calcite-combobox-item selected value="16000" text-label="ランドマーク/アウトドア"></calcite-combobox-item> <calcite-combobox-item value="17000" text-label="小売"></calcite-combobox-item> <calcite-combobox-item value="18000" text-label="スポーツ/レクリエーション"></calcite-combobox-item> <calcite-combobox-item value="19000" text-label="旅行/交通"></calcite-combobox-item> </calcite-combobox> <div class="contents"> <calcite-flow id="flow"> <calcite-flow-item> <calcite-list id="results"> <calcite-notice open><div slot="message">地図上をクリックすると、その場所の周辺を検索することができます。</div></calcite-notice> </calcite-list> </calcite-flow-item> </calcite-flow> </div> <div id="map"></div> <script> const categorySelect = document.getElementById("categorySelect"); const resultPanel = document.getElementById("results"); const flow = document.getElementById("flow"); let infoPanel; // setAttribute ヘルパー関数 const setAttribute = (heading, icon, validValue) => { // 属性情報が有効な場合に表示 if (validValue) { const element = document.createElement("calcite-block"); element.heading = heading; element.description = validValue; // 各属性の Calcite UI アイコンを選択 const attributeIcon = document.createElement("calcite-icon"); attributeIcon.icon = icon; attributeIcon.slot = "icon"; attributeIcon.scale = "m"; element.appendChild(attributeIcon); infoPanel.appendChild(element); } }; const accessToken = "<API Key>"; const basemapEnum = "arcgis/streets"; const map = new maplibregl.Map({ container: "map", // the id of the div element style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapEnum}?token=${accessToken}&language=ja`, zoom: 14, // starting zoom center: [139.767125, 35.681236], // starting location [longitude, latitude] pitch: 50, hash: true }); const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken); // ズーム・回転 map.addControl( new maplibregl.NavigationControl({ visualizePitch: true, showZoom: true, showCompass: true }) ); // スケール表示 map.addControl(new maplibregl.ScaleControl({ maxWidth: 200, unit: 'metric' })); // 検索カテゴリーの設定 let activeCategory = "16000"; let userLocation, clickedPoint; const searchRadius = 150; // クリックした地点と検索するエリアを表すレイヤーの設定 map.once("load", () => { map.addSource("clicked-point", { type: "geojson", data: { "type": "Feature", "geometry": { "type":"Point", "coordinates": [] }} }); map.addLayer({ id:"search-location", source:'clicked-point', type:"fill", paint: { 'fill-color': '#aaaaaa', 'fill-opacity':0.25, 'fill-outline-color':'#000000', } }) map.addSource("start", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); map.addLayer({ id: "start-circle", type: "circle", source: "start", paint: { "circle-radius": 6, "circle-color": "white", "circle-stroke-color": "black", "circle-stroke-width": 2 } }); map.addSource("trailheads", { type: "geojson", data: `https://services.arcgis.com/wlVTGRSYTzAbjjiC/ArcGIS/rest/services/RealEstatePropertyMaster/FeatureServer/0/query?token=${accessToken}&f=pgeojson&where=1=1`, }); map.addLayer({ id: "trailheads-circle", type: "circle", source: "trailheads", paint: { "circle-color": "hsla(0,0%,0%,0.75)", "circle-stroke-width": 1.5, "circle-stroke-color": "white", } }); }) // 検索範囲の設定 map.on('click', function (e) { const coordinates = e.lngLat.toArray(); const point = { type: "Point", coordinates }; map.getSource("start").setData(point); userLocation = e.lngLat; // turf.circle を使用して、ポイントの周囲にメートル単位の半径の円を作成 const searchArea = turf.circle([e.lngLat.lng, e.lngLat.lat], searchRadius, { steps:36, units:"meters" }); map.getSource('clicked-point').setData(searchArea); showPlaces(); }) // activeCategory を更新するイベント ハンドラ categorySelect.addEventListener("calciteComboboxChange", e => { activeCategory = categorySelect.value; if (userLocation) showPlaces(); }); const currentPlaces = []; function showPlaces() { for (let place of currentPlaces) { place.remove(); } resultPanel.innerHTML = ""; if (infoPanel) infoPanel.remove(); // ArcGIS REST JS によるプレイスサービスへのリクエスト arcgisRest.findPlacesNearPoint({ x: userLocation.lng, y: userLocation.lat, categoryIds:activeCategory, radius:searchRadius, authentication }) .then((response)=>{ response.results.forEach((result)=>{ addResult(result); }); }); }; // 結果の表示 function addResult(place) { // MapLibre の Marker による地図表示 const marker = new maplibregl.Marker() .setLngLat([place.location.x, place.location.y]) .addTo(map); currentPlaces.push(marker); // calcite-list-item 要素を使用して表示 const infoDiv = document.createElement("calcite-list-item"); resultPanel.appendChild(infoDiv); const description = ` ${place.categories[0].label} - ${Number((place.distance / 1000).toFixed(1))} km `; infoDiv.label = place.name; infoDiv.description = description; // HTML 要素をクリックし、関連する Marker に対してポップアップ表示 marker.id = place.placeId; marker.setPopup(new maplibregl.Popup().setText(place.name)); infoDiv.addEventListener("click",e => { marker.togglePopup(); // プレイスの詳細表示 getDetails(marker); }) } // プレイスの詳細の取得と表示 function getDetails(marker) { // ArcGIS REST JS による特定 POI に関する詳細情報の取得 arcgisRest.getPlaceDetails({ placeId: marker.id, requestedFields: ["all"], authentication }) .then((result)=>{ map.flyTo({center:marker.getLngLat()}); // calcite-flow-item 要素を使用して作成 infoPanel = document.createElement("calcite-flow-item"); // calcite-flow-item 要素のテンプレートに含まれる <flow> 要素にアイテムを追加 flow.appendChild(infoPanel); const placeDetails = result.placeDetails; infoPanel.heading = placeDetails.name; infoPanel.description = placeDetails.categories[0].label; // setAttribute ヘルパー関数を呼び出して、属性が有効な場合に表示します。各属性の Calcite UI アイコンを選択します。 setAttribute("Description", "information", placeDetails?.description); setAttribute("Address", "map-pin", placeDetails?.address?.streetAddress); setAttribute("Phone", "mobile", placeDetails?.contactInfo?.telephone); setAttribute("Hours", "clock", placeDetails?.hours?.openingText); setAttribute("Rating", "star", placeDetails?.rating?.user); setAttribute("Email", "email-address", placeDetails?.contactInfo?.email); setAttribute("Website", "information", placeDetails?.contactInfo?.website?.split("://")[1].split("/")[0]); setAttribute("Facebook", "speech-bubble-social", (placeDetails?.socialMedia?.facebookId) ? `www.facebook.com/${placeDetails.socialMedia.facebookId}` : null); setAttribute("Twitter", "speech-bubbles", (placeDetails?.socialMedia?.twitter) ? `www.twitter.com/${placeDetails.socialMedia.twitter}` : null); setAttribute("Instagram", "camera", (placeDetails?.socialMedia?.instagram) ? `www.instagram.com/${placeDetails.socialMedia.instagram}` : null); infoPanel.addEventListener("calciteFlowItemBack", e => { marker.togglePopup(); }) }); } </script> </body> </html> すぐに動作を確認されたい方は、Esri がサンプルとして でも公開していますので、ご確認ください。ただし、認証の設定が必要となりますので、API キーを取得して指定する必要がございます。 今回紹介した近傍検索については、Mapping and location services guide の Nearby Search にて具体的な使い方なども紹介していますので、ご確認ください。 まとめ オープンソースの MapLibre GL JS からプレイス サービスを使用した方法を中心に紹介しました。ArcGIS Location Platform が提供するロケーション サービスとして、プレイス サービスについても紹介しました。 MapLibre GL JS からプレイス サービスの使用方法については、Find places in a bounding box でも紹介しています。こちらでは、検索ボックスからテキスト ベースで内容を入力して検索を実行し、バウンディング ボックス内のプレイスを検索する方法を学ぶことができます。こちらもご確認ください。 MapLibre GL JS やプレイス サービスについて、ぜひ、この機会にお試しください！   ■参考サイト MapLibre GL JS Introduction to Places Mapping and location services guide Place finding ... View more

はじめに 以前のブログ「ArcGIS Web AppBuilder のサポート終了について」でご紹介した通り、サポートが終了する ArcGIS Web AppBuilder の後継として ArcGIS Experience Builder への移行を推奨しています。 ArcGIS Experience Builder は、最新の Web マッピング技術を使用して構築されています。そのため、柔軟なデザインと 3D コンテンツや表示デバイスごとの設計といったモダンな機能を有しています。 ArcGIS Experience Builder について、Web アプリ作成をはじめようと思っている方には ArcGIS Experience Builder の機能や作成方法を紹介したブログ記事、ArcGIS Web AppBuilder から ArcGIS Experience Builder への移行が必要な方には、移行に関してのブログ記事、カスタム ウィジェットの開発が必要な方には、ArcGIS Experience Builder (Developer Edition) を使用したハンズオン資料が公開されているなど、多くの有益な情報が公開されています。 今回の記事では、これまで紹介した ArcGIS Experience Builder に関してのブログ記事やハンズオン資料を中心にまとめていますので、ぜひ、参考にしていただければ幸いです。   ESRIジャパン ブログ記事 ArcGIS Experience Builder で Web アプリを作成しよう！ ArcGIS Experience Builder で Web アプリ作成をはじめようと思っている方へのサポートとして、ArcGIS Experience Builder の機能や作成方法を紹介しています。 初心者の方でも分かりやすいように、アプリ作成のステップごとにストーリーを公開しています。これらのストーリーは ArcGIS StoryMaps で作成・公開されています。 ArcGIS Web AppBuilder から ArcGIS Experience Builder に移行しよう – 両製品の違いと移行のメリット 移行に向けて気になるポイントを 3 回に分けて紹介しています。第一弾では、両製品の違いと移行のメリットに焦点を当てて紹介しています。 ArcGIS Web AppBuilder から ArcGIS Experience Builder に移行しよう – ウィジェットについて 第二弾では、移行作業のフローを示しつつ両製品の機能面についてウィジェットを中心にさらに深掘りして紹介しています。 ArcGIS Web AppBuilder から ArcGIS Experience Builder に移行しよう – Web アプリのデザイン 第三弾では、ArcGIS Web AppBuilder から ArcGIS Experience Builder の移行に向けて、両製品を利用して作成できるアプリのデザインについて説明しています。    ハンズオン資料 ハンズオン - ArcGIS Experience Builder (Developer Edition) カスタム ウィジェット開発 ArcGIS Experience Builder (Developer Edition) を利用してカスタム ウィジェット開発を体験するハンズオン資料です。 ArcGIS Developers 開発リソース集には ArcGIS Experience Builder (Developer Edition) を利用した開発に役立つガイドを公開していますので、参考にしてください。 コア コンセプト インストール ガイド カスタム ウィジェット開発ガイド デプロイ パターン デプロイ   その他 ArcGIS Experience Builder 2024年 ロードマップ（英語） 2024年に予定されている ArcGIS Experience Builder の機能のロードマップです。 Web AppBuilder と Experience Builder の機能マトリックス（英語） ArcGIS Web AppBuilder と ArcGIS Experience Builder の機能マトリックスです。ArcGIS Online および ArcGIS Enterprise のウィジェットの移行状況を一目で把握することができます。 Web AppBuilder と Experience Builder の機能比較表（日本語） ArcGIS Web AppBuilder と ArcGIS Experience Builder の機能比較表です。各 Web AppBuilder ウィジェットArcGIS Online で現在利用可能なウィジェットを一覧表示しています。 Experience Builder を始めるのに役立つリソースの全リスト（英語） 米国 Esri 社の Experience Builder チームによって作成された製品リソースのリストが記載されています。​   最後に ArcGIS Experience Builder と ArcGIS Experience Builder（Developer Edition）の最新バージョンについては、ArcGIS ブログにて、新機能紹介やリリース情報を紹介していますので、ご参照ください。   ■参考サイト ESRIジャパン 製品ページ ArcGIS Experience Builder ArcGIS Experience Builder（Developer Edition） ArcGIS Developers（英語） ArcGIS Experience Builder（Developer Edition） ArcGIS Developers 開発リソース集 ArcGIS Experience Builder（Developer Edition） esri video（英語） ArcGIS Experience Builder   ... View more

はじめに ArcGIS Maps SDK for JavaScript のバージョン 4.28 ではフロント エンド Web 開発の生産性を最大化させる、 Web コンポーネント ライブラリとして Maps SDK コンポーネントが導入されました。詳細については、 「ArcGIS Maps SDK コンポーネントで Web アプリを構築」で紹介しています。 また、バージョン 4.29 では、新しくチャート コンポーネント ライブラリの追加と、コンポーネント API の強化、ドキュメントとサンプルの改良が行われ、多くの新機能が追加されています。最新バージョンの ArcGIS Maps SDK for JavaScript のバージョン 4.29 については、ArcGIS ブログの 「ArcGIS Maps SDK for JavaScript バージョン 4.29 をリリースしました！」をご確認ください。 今回は、そんな ArcGIS Maps SDK コンポーネントの Map コンポーネントを使ってみましたので紹介したいと思います。   Map コンポーネント を使ってみる Map コンポーネント は、ArcGIS Maps SDK for JavaScript の  Introduction - components  (beta)  から始めることができます。各コンポーネントの使い方として、チュートリアルなども提供されています。 また、Component API として、以下の ArcGIS Maps SDK for JavaScript components (beta) のガイドも公開されており、ドキュメントは、多く提供されています。 Map コンポーネント は、Get started の Templates に、フレームワークや Webpack などのサンプルが GitHub にも公開されていますので、すぐにお試しいただくことができるようになっています。 Script tags (AMD) Vite React Angular Vue Webpack   それではさっそく Map コンポーネント を使っていきたいと思います。一番ベーシックな方法は Script tags (AMD) による方法で、HTML の <arcgis-map/> タグなどを使用する方法です。JavaScript によるコーディングは必要としないため、HTML などの知識があれば 簡単に Web サイトに地図を組み込むことができます。 手順としては、はじめに ArcGIS Maps for JavaScript の API ライブラリ、CSS を CDN から参照するように指定します。   <!-- Load the ArcGIS Maps SDK for JavaScript --> <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/dark/main.css" /> <script src="https://js.arcgis.com/4.29/"></script>   そして、Map コンポーネント を CDN から参照するように指定します。   <!-- Load the Map Components --> <script type="module" src="https://js.arcgis.com/map-components/4.29/arcgis-map-components.esm.js"></script>   HTML の要素として、<arcgis-map/> タグを使用して、地図を表示しています。凡例表示や住所・目標物検索などの機能も追加しています。地図で使用できる機能は、HTML タグとして定義することで簡単に地図機能を作成することができます。ここでは、<arcgis-expand/>、<arcgis-search/>、<arcgis-legend/> タグを使用しています。   <div class="map-container"> <arcgis-map item-id="2436023590ed4bbd901a7f5d563cc005"> <arcgis-expand position="top-right"> <arcgis-search></arcgis-search> </arcgis-expand> <arcgis-legend position="bottom-left"></arcgis-legend> </arcgis-map> </div>   Map コンポーネントで提供されている各コンポーネントの内容や使い方の詳細については、以下の COMPONENT REFERENCE で確認することができます。各コンポーネントのプロパティ、イベント、メソッドについても確認することができます。多くの Map コンポーネント の機能が提供されています。 よく利用されるシーンとして、例えば、コーヒーショップを紹介する Web サイトに店舗の場所を地図上で表示してみたいなどがあるかと思います。以下のようなサンプルサイトのショップを紹介する Web サイトにも簡単に組み込むことができます。また、WordPress などのような Web サイトを構築する CMS などは、基本的には HTML タグを使用してコンテンツを作成することができますので、Map コンポーネント を活用するのも手段のひとつになるのではないでしょうか。   次にフレームワーク（React、Angular、Vue など）を使用した例を簡単に紹介したいと思います。各コンポーネントは、フレームワークに依存しないように設計されており、特定のアプリケーション フレームワーク（React、Angular、Vue など）に縛られることなく、利用できるようになっています。 ここでは、React と Vue のフレームワークでの Map コンポーネント の利用方法について紹介したいと思います。React や Vue フレームワーク以外の利用方法については、Programming patterns、Angularフレームワークについては、Web components in Angular を参照してください。また、GitHub には Vite や Webpack などの Templates が公開されていますので、こちらもあわせてご参照ください。 はじめに React フレームワークの使用方法について紹介します。各コンポーネント・パッケージには、React に適したパッケージが追加されています。arcgis/map-components の場合は、@arcgis/map-components-react を使用することが推奨されています。詳細は、Web components in React をご確認ください。 以下は、index.tsx に記述している例で、地図表示として、<ArcgisMap/>、<ArcgisSearch/>、<ArcgisLegend/> タグを使用しています。< ArcgisMap/> コンポーネントのプロパティを設定し、イベントが動作するように指定しています。   import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; // /map-components-react から ArcgisMap, ArcgisSearch, ArcgisLegend をインポートします。 import { ArcgisMap, ArcgisSearch, ArcgisLegend } from "@arcgis/map-components-react"; // カスタム要素をカスタム要素レジストリに登録するために defineCustomElements をインポートします。 import { defineCustomElements } from "@arcgis/map-components/dist/loader"; // カスタム要素を登録します。 defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets" }); const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( <React.StrictMode> <ArcgisMap itemId="<アイテム ID を指定>" onArcgisViewReadyChange={(event: any) => { console.log('MapView ready', event); }} > <ArcgisSearch position="top-right"></ArcgisSearch> <ArcgisLegend position="bottom-left"></ArcgisLegend> </ArcgisMap> </React.StrictMode> );   React のソースコードの詳細については、GitHub で公開されている Templates の react をご確認ください。 React フレームワークで実行して Map コンポーネント を使用した例です。   次に Vue フレームワークによる例です。 Vue については、フレームワークを使って構築する際のプログラミング パターンに関する新しいガイド トピックにも追加されています。 以下は、App.vue による例で、カスタム要素のレジストリに登録するために defineCustomElements をインポートして、カスタム要素を登録します。地図部分は、template として Map.vue を参照するように設定します。   <script setup> import Map from "@/components/Map.vue"; import { defineCustomElements } from "@arcgis/map-components/dist/loader"; defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets" }); </script> <template> <Map /> </template>   地図表示として、Map.vue では、<arcgis-map/>、<arcgis-search/>、<arcgis-legend/> タグを使用しています。<arcgis-map/> コンポーネントのプロパティを設定し、イベントが走るように指定しています。   <script setup> function onReady(event) { console.log("MapView ready", event); } </script> <template> <arcgis-map item-id="<アイテム ID を指定>" @arcgisViewReadyChange="onReady"> <arcgis-search position="top-right" /> <arcgis-legend position="bottom-left" /> </arcgis-map> </template>   Vue のソースコードの詳細は、GitHub で公開されている Templates の vue をご確認ください。 Vue フレームワークで実行して Map コンポーネント を使用した例です。   まとめ ArcGIS Maps SDK コンポーネントの Map コンポーネントを紹介しました。HTML を使用することで簡単に Web サイトなどに組み込むことができます。また、フレームワークにも簡単に組み込むことができるため、Web アプリケーションを少ないコーディング量で実現できるのではないでしょうか。今回触れた以外にも Map コンポーネントには、地図機能として多くのコンポーネントが提供されています。 バージョン 4.29 では、棒グラフや線グラフなどを実現できる Charts components も提供されるようになり、Map コンポーネントと組み合わせることができるため、よりリッチな Web サイトや Web アプリを作成することができるのではないでしょうか。 ArcGIS Maps SDK のコンポーネント ライブラリは、独自のアプリケーションに簡単に組み込むことができるようになっています。 せひ、この機会にお試しいただければと思います！   ■参考サイト ArcGIS Maps SDK for JavaScript Introduction - components (beta) ArcGIS Maps SDK コンポーネント Storybook ArcGIS Maps SDK Components Storybook GitHub arcgis-maps-sdk-javascript-samples-beta   ... View more

はじめに これまで過去2回にわたって kintone と ArcGIS の連携について紹介してきました。第3弾となる今回は ArcGIS Field Maps という現場でデータ収集が行えるモバイルアプリを使用して、kintone と連携を試してみましたので、具体的な連携方法について紹介していきます。 ArcGIS Field Maps は、マップ ベースでの現地調査業務に特化したアプリで、現場作業員がデータ収集時に活用できるマップ操作やデータ更新、リアルタイムの位置共有といった機能を兼ね備えたオールインワン アプリです。 ArcGIS Filed Maps の使い方や機能などの詳細については、ESRIジャパンの ArcGIS ブログでも公開していますので、ご参照ください。 連携の流れ 連携で使用した kintone アプリは、kintone が提供している業務アプリの不動産物件マスタを使用しました。不動産物件マスタは、前回の記事でも紹介した 不動産マスタ_ArcGIS 連携アプリを使用しました。 ArcGIS Field Maps を使用して、現地で不動産物件情報の登録や編集などを行い、その結果を kintone 側にも反映させるという流れになります。データ仕様に関しては、kintone でデータを削除する場合にレコード番号が必要になるなど、kintone 側でもデータ管理ができるように不動産マスタ_ArcGIS 連携で使用しているデータをそのまま使用しました。データは事前に ArcGIS Field Maps で使用できるようにフィーチャ レイヤーの作成などを行う必要があります。今回は不動産物件という名前でフィーチャ レイヤーを作成しました。  ArcGIS Field Maps と kintone との連携は、Make を使用しました。Make は、サードパーティ製のワークフロー自動化サービスです。Web アプリケーションやサービスを統合するためのツールで、プログラミングができない人でも使いやすいように設計されており、ビジネスプロセスの自動化やタスクの自動化を行うことができます。連携として、Make には、以下のような様々なテンプレートが用意されており、例えば、Google スプレッドシートにデータを追加したら、Slack に通知する、Trello のカードが更新されたら、メールで通知する、などの連携を簡単に実現することができます。             また、ArcGIS Field Maps を利用したインテグレーションやテンプレートなど多く用意されています。 ArcGIS Field Maps では、Make を通じて Webhook をサポートしています。 Webhook は、アプリケーションが他のアプリケーションに、イベントによって発生する情報を提供することを可能にします。Webhook の一般的な使用方法は、電子メールや SMS による通知の送信、ソーシャルメディアへのメッセージ投稿、スプレッドシートへのレコード自動書き込み、エンタープライズ データベースの更新などです。Make に ArcGIS Field Maps アプリが組み込まれることで、ユーザーは ArcGIS Field Maps を Webhook ワークフローに統合することができます。ArcGIS Field Maps では、Webhook をトリガーにする、API を呼び出すといった方法での連携利用が可能です。 ※ Make の使い方の QA などは、サポート対象外となります。 ArcGIS Field Maps とkintone との連携 ArcGIS Field Maps とkintone との連携では、Webhook をトリガーとして使用しました。具体的には、ArcGIS Field Maps モバイルアプリでフィーチャを作成、更新、削除されたときに Webhook によって電子メール通知を送信するなど、別のアクションをトリガーすることができ、このトリガーによって kintone 側にデータの作成や更新、削除を行っています。以下の図が Make によって作成した ArcGIS Filed Maps と kintone の連携の完成形になります。 ここからは、各設定について簡単に説明していきます。詳細については、ArcGIS Field Maps リソースの ArcGIS Field Maps の自動化や Make のヘルプや API リファレンスなどをご参照ください。 ArcGIS Field Maps の設定では、Make で Webhook にField Maps アプリを追加します。[Watch Features] トリガーモジュールを選択して Webhook に設定するため ArcGIS Online 組織サイトへ接続して、[Feature Layer] で、接続の ArcGIS Online から編集可能なフィーチャ レイヤーを選択します。ここでは不動産物件のフィーチャ レイヤーを選択しています。 次に Webhook に含める [Trigger events] を選択します。[Trigger events] は、以下のシナリオがあり、ここではすべて選択しています。 [Features Created] - フィーチャが作成されたときにシナリオをトリガーします。 [Features Updated] - フィーチャが更新されたときにシナリオをトリガーします。 [Features Deleted] - フィーチャが削除されたときにシナリオをトリガーします。 最後に [Save] をクリックして、[OK] をクリックします。これで、Filed Maps モジュールが構成されます。 続いて、[Tools] セクションの [Flow Control] をクリックして、オプションのリストから、[Iterator] を選択します。[Iterator] モジュールは自動的に Field Maps モジュールに接続されます。 このため、複数のフィーチャが同時に返された場合に、Webhook はフィーチャの配列を反復処理できます。 [Iterator] モジュールを選択し、[Array] テキスト ボックスをクリックします。[ArcGIS Field Maps - Watch Feature Service] のドロップダウン メニューで、次の配列の中から 1 つ以上を検索して選択します。 [Adds []] - フィーチャが作成された場合 [Updates []] - フィーチャが更新された場合 [Delete IDs []] - フィーチャが削除された場合 ここでは、すべて選択しています。 そして、[Tools] セクションの [Flow Control] をクリックして、オプションのリストから、[Router] を選択します。条件分岐用として [Router] を追加しています。データの登録・更新・削除の条件で設定しています。 分岐の条件としては、 {{2.edits.`0`.features.adds[].attributes.GlobalID}} - フィーチャが作成された場合 {{2.edits.`0`.features.updates[].attributes.GlobalID}} - フィーチャが更新された場合 {{2.edits.`0`.features.deleteIds[]}} - フィーチャが削除された場合 以下のように 3 つの条件を設定します。 最後に kintone 側にデータを反映させるための連携設定を行います。 Make では、kintone モジュールも用意されており、目的の機能に応じて設定することが可能です。データの登録では、Create a Record を使用して、App ID は kintone アプリの不動産マスタ_ArcGIS 連携を選択します。Record の各 Value には、フィーチャ レイヤーの属性情報を指定します。 データの更新では、Update a Record を使用して、App ID は kintone アプリの不動産マスタ_ArcGIS 連携を選択します。Update key としてユニークなIDが必要となるため、ここでは、Global ID を使用しました。Record の各 Value には、フィーチャ レイヤーの属性情報を指定します。 データ削除の場合は、kintone 側に登録されている Record ID を使用して削除する必要があるため、削除対象のレコード番号を取得する必要があります。そのため、Search Records を使用して、GlobalID をキーにしてレコード番号を取得します。そして、取得したレコード番号を Delete a Record で使用して、データの削除を行います。 すべての設定が完了したら [Save] をクリックして、シナリオを保存します。 必要に応じて、[Run once] をクリックして Webhook をテストします。 [Run once] をクリック後に、Field Maps を開いて、フィーチャを作成、更新、または削除します。 kintone の不動産マスタ_ArcGIS 連携アプリでフィーチャが反映されているかを確認します。 [Scheduling] 切り替えボタンを使用して、シナリオをアクティブ化します。スケジュールを [Immediately] に設定して、フィーチャが更新されるたびにシナリオが実行されるようにします。  ArcGIS Field Maps と kintone で確認 以下は、ArcGIS Field Maps の画面操作の様子です。以下のように現地で不動産物件の情報の登録や更新などを行います。 ArcGIS Field Maps で不動産物件の情報を更新後、しばらく経過すると kintone の不動産マスタ_ArcGIS 連携アプリにて反映されます。反映されれば以下の画面のように確認することができます。 まとめ 今回は、以前に紹介した不動産物件マスタのアプリと ArcGIS Field Maps との連携にフォーカスして紹介しました。Make を使用することで、開発することなく、API 連携ができるのは便利だと思いました。ただ、連携先の API の仕様などの理解をしておくと、Make での設定などはスムーズにできると思います。 今回の Make での連携は一例ですが、非常に多くのパターンの連携ができるようになっています。ArcGIS Field Maps の Field Maps の自動化や ArcGIS Field Maps と電子メール通知の自動化については、Esri のブログやビデオなどでも紹介していますので、ぜひ、お試しいただければと思います。 ■関連リンク ArcGIS Field Maps | ESRIジャパン 製品ページ ArcGIS Field Maps | ArcGIS リソース集 スタートアップ ガイド 米国 Esri 社 Web サイト ArcGIS Field Maps Esri Community kintone と ArcGIS の連携を試してみました ～第2弾 不動産物件マスタのアプリ拡張 ～   ... View more

はじめに CesiumJS が ArcGISのロケーションサービスを利用したアプリケーションを構築するためのオープンソースライブラリとして全面的にサポートされました。これにより、CesiumJS の 3D レンダリングエンジンと ArcGIS のロケーションサービスを使用して、ベースマップへのアクセス、ホストデータの表示、ジオコーディング、ルート検索、人口統計データ（ジオエンリッチメント）、空間解析などを行うアプリケーションを構築することができます。 本内容のアナウンスは Cesiumのブログ「Cesium and Esri Announce Support for ArcGIS Location Services in CesiumJS」でも紹介されています。 本記事では、米国 Esri 社が ArcGIS Blog にて投稿した「Announcing support for CesiumJS and ArcGIS location services」の記事を翻訳して紹介します。 CesiumJS で ArcGIS ロケーションサービスを利用したアプリケーション開発のガイドとして ArcGIS Developersのサイトで CesiumJS の開発者ガイドが公開されています。 CesiumJS に関する新しい ArcGIS Developers ガイドのチュートリアル   新しい ArcGIS Developers のガイドには、CesiumJS とロケーションサービスをインテグレーションする方法を説明する 20 のチュートリアルが含まれています。以下のサービスが対象となります。 ベースマップ スタイル サービス ホスト フィーチャ サービス ホスト シーン サービス (I3S) ホスト イメージ タイル サービス ジオコーディング サービス ルート検索 サービス ジオエンリッチメント サービス 空間解析 サービス 構築できるアプリケーションの種類については、以下をお読みください。   はじめましょう Cesium JS と ArcGIS ロケーションサービスを使用して開発を始めるには、ArcGIS Developer アカウントか ArcGIS Online アカウントのどちらかが必要です。お持ちでない場合は、サービスに限定的にアクセスできる無料アカウントで始めることができます。 無料アカウントの作成については、ArcGIS 開発リソース集の「開発者アカウントの作成」も参考としてください。 また、アプリケーションの開発およびデプロイには、Cesium ion のアカウントも必要です。アカウントを作成するには、ion.cesium.com にアクセスします。   CesiumJS で ArcGIS のベースマップ スタイルを表示 CesiumJSで使用できる他のサービスへのアクセス CesiumJS で表示される ArcGIS のイメージと標高レイヤー CesiumJS ライブラリに、World Imagery、World Oceans、World Hillshade スタイルを含む ArcGIS ベース レイヤーにアクセスする新しいクラスが追加されました。ArcGisMapServerImageryProvider クラスを使用すると、アプリケーションでこれらのレイヤーをイメージ タイルとしてアクセスできます。これらのレイヤーにアクセスするには、API キーなどの ArcGIS アクセストークンが必要です。 ArcGIS ベース レイヤーを CesiumJS アプリケーションに追加する方法の例を次に示します。 const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN"; Cesium.Ion.defaultAccessToken = cesiumAccessToken; const apiKey = "YOUR_ARCGIS_API_KEY"; Cesium.ArcGisMapService.defaultAccessToken = apiKey; const arcgisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE); const viewer = new Cesium.Viewer("cesiumContainer", { baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery) }); また、デフォルトの BaseLayerPicker を使用して、アプリケーションに ArcGIS ベース レイヤーを直接読み込むこともできます。この方法でレイヤーを読み込むには、CesiumJS に含まれるデフォルトのアクセストークンをオーバーライドする必要があります。 Cesium.ArcGisMapService.defaultAccessToken = "YOUR_ARCGIS_API_KEY"; CesiumJS で ArcGIS ベース レイヤーを使用する方法の詳細については、新しい CesiumJS ガイドのチュートリアル「Display a scene」を参照してください。   CesiumJS で ArcGIS のホストデータを表示 CesiumJS は、フィーチャ データや I3S データなど、ArcGIS でホストされているデータを表示することもできます。アプリケーションでフィーチャにアクセスするには、GeoJsonDataSource クラスを使用して、ArcGIS でホストされているフィーチャ サービスをクエリすることで、ポイント、ポリライン、ポリゴンを表示することができます。 スタイル設定されたホスト フィーチャ サービスのフィーチャを CesiumJS で表示。サンタモニカ山脈の公園、トレイル、登山口を表現しています。 次にホスト フィーチャ サービスからフィーチャを追加する方法の例を示します。 arcgisRest.queryFeatures({ url: featureServiceURL, authentication, f:"geojson" }).then((response) => { const data = Cesium.GeoJsonDataSource.load(response) viewer.dataSources.add(data); }) フィーチャを追加する方法の詳細については、チュートリアルの「Add features as GeoJSON」を参照してください。   CesiumJS で表示される 3D メッシュ レイヤーです。メッシュにはフランクフルトの街並みが描かれており、建物や道路、樹木などが描かれています。 I3SDataProvider クラスを使用して、ホストされた I3S データを CesiumJS アプリで表示することができます。CesiumJS は現在、OGC I3S 標準に準拠した 3D オブジェクトレイヤーと 3D メッシュ レイヤーをサポートしています。 次にホストされた I3S データを CesiumJS アプリケーションに追加する方法の例を示します。 const frankfurtMesh = "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer"; const i3sProvider = await Cesium.I3SDataProvider.fromUrl(frankfurtMesh, { geoidTiledTerrainProvider: geoidService, token: apiKey }) viewer.scene.primitives.add(i3sProvider); I3S データを追加する方法の詳細については、チュートリアルの「Add an integrated mesh」を参照ください。   CesiumJS で使用できる他のサービスへのアクセス CesiumJS で視覚化した運転ルートと道順です。ルートと道順は ArcGIS のルート検索サービスを使用して計算されています。 また、CesiumJS を使用して、すぐに使用できる他の ArcGIS ロケーションサービスからの結果を表示することもできます。これらのサービスには、ジオコーディングサービス、ルート検索サービス、ジオエンリッチメント サービス、空間解析サービスなどがあります。 CesiumJS の 3D 機能により、サービスの結果をユニークな方法で簡単に視覚化することができます。例えば、次の画像は、空間解析操作の結果を CesiumJS で視覚化したものです。 ホット スポットの解析結果を CesiumJS で視覚化したものです。ホット スポットは背の高い赤いクラスター、コールド スポットは背の低い青いクラスターで視覚化されています。 このホット スポット解析は空間解析サービスを使用して、その結果を CesiumJS で視覚化しています。CesiumJSのモデリング機能により、3D データへの強力なレンダリングが可能になり、データ内のホット スポットやコールド スポットがどこにあるのかを即座に伝えることができます。新しい「Perform a feature analysis」のチュートリアルには、この分析を実行するための詳細な手順が記載されています。 この記事では、ArcGIS と CesiumJS を使って構築できる一例を紹介しています。もっと詳しく知りたい方は、ArcGIS Developers の Web サイトにある「CesiumJS guide」のガイドを参照してください。   ■関連リンク ArcGIS Platform ESRIジャパン製品ページ ArcGIS Developers ESRIジャパン製品ページ ArcGIS Developers 開発リソース集 ArcGIS (米国) ブログ Announcing support for CesiumJS and ArcGIS location services Esri 社（米国）Web サイト ArcGIS Developers （CesiumJS） Cesium (米国) ブログ Cesium and Esri Announce Support for ArcGIS Location Services in CesiumJS   ... View more

はじめに .NET MAUI をサポートしている ArcGIS Maps SDK for .NET を利用することで、地図アプリを開発することができます。ArcGIS Maps SDK for .NET は、Esri が提供する地図アプリ用の SDK で、Windows、mac OS 及び iOS、Android プラットフォーム上で動作するネイティブ GIS アプリケーションの開発キットであり、Windows デスクトップや Windows タブレット、iOS、Android などの多様なプラットフォーム向けに様々な GIS 機能を持ったアプリケーションを開発することができます。 今回は、ArcGIS Maps SDK for .NET で .NET MAUI を使用して、Esri が公開しているサンプルプログラムをiOS と Android の物理デバイスにデプロイするところまでを紹介したいと思います。 .NET MAUI とは .NET Multi-Platform App UI (.NET MAUI) は、C# と XAML を使用して、ネイティブのモバイル アプリやデスクトップ アプリを作成するためのクロスプラットフォーム フレームワークです。.NET MAUI を使用することで、1 つの共有コードから Android、iOS、macOS、Windows で実行できるアプリを開発することができます。 .NET MAUI の詳細については、Microsoft 社の Microsoft Learn ページの「.NET MAUIとは」を参照してください。 ArcGIS Maps SDK for .NET とは ArcGIS Maps SDK for .NET を使用すると、Android、iOS、macOS および Windows 用のマッピングおよび位置情報解析アプリを構築できます。この API を使用することで、Windows Presentation Foundation（WPF）、Windows UI Library（WinUI）、Universal Windows Platform（UWP）、および .NET MAUI の各アプリケーション プラットフォームで作成するデスクトップ アプリとモバイル アプリで、ビジネス及びアプリケーション ロジック コードを共有することができます。 現在の最新バージョンは、2022 年 12 月 14 日（日本時間 2022 年 12 月 15 日）にリリースしましたバージョン 200.0 になります。詳細は、「ArcGIS Maps SDK for .NET バージョン 200.0 をリリースしました」を参照してください。 ArcGIS Maps SDK for .NET では多くの機能を提供しており、主な機能の詳細については、ArcGIS Maps SDK for .NET の ガイドの Key features (英語) や Tutorials (英語) を参照してください。 また、すぐに試してみたい方は、WPF版として、Microsoft Store から ArcGIS Maps SDK for .NET Samples (WPF) が提供されています。iOS 版は、Apple Store の ArcGIS Runtime SDK Samples、 Android 版は、Google Play から ArcGIS Runtime SDK Sample View で確認していただくことも可能です。サンプルは、ArcGIS Runtime SDK として提供していますが、ほぼ同じ機能を確認することができます。こちらは、SDK の名称が変更されたことで、ArcGIS Runtime SDK から ArcGIS Maps SDKs for Native Apps となっています。ArcGIS Maps SDK for .NET は、ArcGIS Maps SDKs for Native Apps のラインナップとして提供しており、現在 iOS 版として、ArcGIS Maps SDK for Swift (Beta)、Android 版としては、ArcGIS Maps SDK for Kotlin (Beta) を提供しています。 サンプルアプリの実行 サンプルアプリの各機能は、以下の ArcGIS Maps SDK for .NET の MAUI Samples から確認することもできます。 サンプルアプリの開発環境として、Visual Studio for Mac を使用して、アプリのビルドから物理デバイスでのデプロイまでを行いました。ArcGIS Maps SDK for .NET の開発環境や実行環境については、製品仕様の動作環境をご確認ください。 サンプルアプリは、GitHub で提供している arcgis-maps-sdk-dotnet-samples を Git からクローンか、直接ダウンロードします。 サンプルアプリは、WPF や WinUI、UWP なども提供していますが、今回は、.NET MAUI を使用するため直接 src/MAUI/ArcGIS.Samples.Maui.sln のソリューションプログラムを Visual Studio for Mac で開きます。NuGet パッケージなど、依存関係のパッケージのインストールを行います。 準備が整ったら、[Visual Studio for Mac] ツール バーで、デバッグ ターゲットを iOS シミュレーターから機種を選択して、 [再生] ボタンを押して iOS シミュレーターでアプリを起動します。iOS シミュレーターが起動して、サンプルアプリを確認することができます。同様に Android エミュレーターでも動作させることができます。Android エミュレーターは、Android デバイスマネージャーであらかじめデバイスを設定しておく必要があります。 ここまで、Visual Studio for Mac での iOS シミュレーターや Android エミュレーターでの起動方法を簡単に紹介してきましたが、Visual Studio for Mac のインストールやアプリのビルド等については、Microsoft Learn ページ .NET MAUI のドキュメントの「インストール」や「最初のアプリをビルドする」が参考になりました。 次に物理デバイスにデプロイをしていきます。 iOS の場合は、物理デバイスでアプリをテストするには、デバイスをプロビジョニングする必要があります。詳細は、.NET MAUI のドキュメント「iOS 用のデバイス プロビジョニング」が分かりやすく、ここでは簡単な手順のみを紹介します。 iOS では、デバイスにアプリをデプロイする前に、Apple の開発者プログラムのサブスクリプションが必要になります。Apple Developer Program、または、Apple Developer Enterprise Program のプログラムにアクセスしてプログラムに登録します。そうすることで、アプリの開発やテスト、配布などを行うことができます。 iOS デバイスをプロビジョニングする方法として、Visual Studio によって自動的に作成して管理する方法「自動プロビジョニング」と Apple Developer ポータルで作成して管理する「手動プロビジョニング」があります。 ここでは、推奨されている自動プロビジョニングで行いました。 ソリューション ウィンドウで、.NET MAUI アプリプロジェクトの Platform > iOS フォルダ から Info.plist ファイルを開きます。Info.plist エディターで、[ソース]ビューから[アプリケーション]ビューに変更します。 [アプリケーション] ビューの [署名] セクションで、[自動プロビジョニング] を選択します。Apple アカウントでサイン インして、自動プロビジョニングを有効にするチームを選択してください。Visual Studio for Macがプロジェクトの自動プロビジョニングを試み、プロセスが正常に完了したかどうかを示します。 　※ 自動プロビジョニングが失敗した場合は、[自動署名] ウィンドウにエラー理由が表示されます。 プロビジョニングを構成した後、アプリをデバイスにデプロイできるようになります。 [アプリケーション] ビューの [配置情報] セクションで、[デプロイ ターゲット] ドロップダウンを使用して、アプリでサポートされている最小 iOS バージョンに展開先を設定します。 　※　配置ターゲットの値は、[ビルド > ターゲット プラットフォーム] タブの [プロジェクトのプロパティ] ダイアログで定義されている [最小 iOS バージョン] の値と同じである必要があります。 iOS デバイスが USB または Wi-Fi 経由で Mac に接続されていることを確認します。 [Visual Studio for Mac] のツール バーで、デバッグ ターゲットが接続されている iOS デバイスに設定されていることを確認し、[再生] ボタンを押してデバイスでアプリを起動します。                   物理デバイスにアプリがインストールされて以下のように確認することができます。 Android アプリをデプロイしてテストするには、デバイスで開発者モードと USB デバックを有効にして、デバイスを USB 経由でコンピューターに接続して行います。 デバイスの接続後は、[Visual Studio for Mac] ツール バーで、デバッグ ターゲットが接続されている Android デバイスに設定されていることを確認し、[再生] ボタンを押してデバイスでアプリを起動します。 物理デバイスにアプリがインストールされて以下のように確認することができます。以下は、MAUI Sample の Find address と Navigate route のサンプルになります。 Android アプリのデプロイに関しての詳細は、.NET MAUI のドキュメントの「デバック用に Android デバイスを設定する」をご確認ください。 まとめ 今回は ArcGIS Maps SDK for .NET で .NET MAUI を使用して、iOS と Android の物理デバイスにアプリをデプロイするところまでを紹介しました。 ArcGIS Maps SDK for .NET は、WPF や WinUI、UWP にも対応しています。サンプルとして、WPF samples、WinUI samples、UWP samples も同じように提供していますので、ぜひこちらもお試しいただければと思います。 ■関連リンク ArcGIS ブログ ArcGIS Maps SDK for .NET バージョン 200.0 をリリースしました ArcGIS Developers 開発リソース集 技術 Tips 集 > ArcGIS Maps SDK for .NET Esri 社（米国）Web サイト ArcGIS Maps SDK for .NET         ... View more

はじめに これまで 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> <!-- Panel to display records --> <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 は地震のフィーチャ サービスへのクエリに使用される予定です。 <!-- Filter records --> <calcite-filter placeholder="Try searching Alaska"></calcite-filter> 2．次に id 属性を持つ calcite-notice を追加し、ユーザーにオンデマンドでフィードバックを提供します。 <!-- An active class will be added to display the number of records --> <calcite-notice id="note"> </calcite-notice>​ 3．calcite-notice では、divを追加して title スロットに配置し、後で id 属性を使って地震発生件数を入力するのに使用します。 <!-- An active class will be added to display the number of records --> <calcite-notice id="note"> <div id="number-records" slot="title"> <!-- Content is automatically generated --> </div> </calcite-notice>​ 4．地震の結果を格納するために、class 属性を持つ div を追加します。また、パネルの footer スロットに calcite-pagination を配置し、page-size 属性を追加して1ページに表示する件数を指定します。 <!-- Container with Cards --> <div class="card-container"> <!-- Content is automatically generated --> </div> <!-- Pagination --> <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) ... View more

はじめに 以前にサイボウズ株式会社が提供している 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 の連携を試してみました。         ... View more