Latest Contributions by YusukeNUNOKAWA

HTML5 は昨年の2014年に勧告され、現在では多くの Web サイトや Web アプリケーションに採用されています。ArcGIS の Web アプリケーション開発用ライブラリである ArcGIS API for JavaScript もまた HTML5 を採用した機能が多く含まれています。本記事では、HTML5 の機能ごとにそれぞれ GIS 機能として実装された例を Esri が提供するサンプル アプリを交えてご紹介していきます（一部、ESRIジャパンが提供するサンプル アプリを含みます）。 ■Canvas Canvas は HTML 要素として採用され、動的な２次元ビットマップ画像の描画を実現します。 ArcGIS API for JavaScript でもいわゆる地図の描画方法や表現に特化した機能として扱われています。 ヒートマップ表示（esri/renderers/HeatmapRendere） Explore Heat Maps | ArcGIS API for JavaScript 点密度表示（esri/renderers/DotDensityRendere） Dot density with multiple classes | ArcGIS API for JavaScript ピクセル フィルタリング（esri/layers/RasterLayer） Raster layer slider | ArcGIS API for JavaScript​   ■SVG 前出の Canvas がビットマップ画像であるのに対し、SVG は２次元のベクター画像を担っています。ブラウザー上でアニメーションやインタラクティブなグラフィックを実現します。 ArcGIS API for JavaScript ではクラス自体が SVG によって作成されているわけではなく、主に独自のシンボル表現やグラフィカルなアニメーション効果を開発者が必要に応じて SVG を操作して地図に組み込むことができます。 カスタム マーカー シンボル（esri/symbols/SimpleMarkerSymbol） SVG path to create a SimpleMarkerSymbol | ArcGIS API for JavaScript CSS シンボル スタイリング（esri/layers/FeatureLayer） SVG and CSS to style polygons | ArcGIS API for JavaScript   ■Geolocation Geolocation は JavaScript でユーザーの位置情報を扱うための API として提供されています。 位置情報を扱うことから GIS との親和性が高く、ArcGIS API for JavaScript でもクラスとして実装される以前からサンプル コードが提供されていました。実装された機能は現在地表示のためのボタン UI と非常にシンプルです。 現在地表示ボタン（esri/dijit/LocateButton） Locate Button | ArcGIS API for JavaScript ■WebSocket WebSocket は双方向通信用を実現するプロトコルとして提供されています。サーバー側からのプッシュ送信を可能にするため、リアルタイム性の高いデータ更新を実現します。 WebSocket は配信側のサーバーも対応している必要があるため、ArcGIS for Server のエクステンション製品である ArcGIS GeoEvent Extension for Server とセットで実現します。 [画像] ストリーム レイヤー（esri/layers/StreamLayer） Stream Layer | ArcGIS API for JavaScript   ■Web Workers Web Workers はシングルスレッドの JavaScript の処理をマルチスレッドで行うための API として提供されています。UI あるいは地図のインタラクティブな操作をブロックすることなく、長時間の処理をバックグラウンドで実行することができます。 ArcGIS API for JavaScript では現在ベータ版として実装されたジオメトリ エンジンがそれにあたり、高度な幾何学演算を非同期で行うことができます。従来サーバー側に任せていた複雑な処理を Web Workers を使ってクライアント側でのバックグラウンド実行を実現しています。サーバー側で処理を行っていた機能が今後クライアント側で行うケースが増えていくかもしれません。 クライアント サイドでの幾何学計算の非同期実行（esri/geometry/geometryEngineAsync） http://github.com/esrijapan/jsapi-samples/geometry-engine/async.html   以上、HTML5 を採用した機能を一挙紹介してまいりました。今回は API として実装された例をご紹介しましたが、開発者のスキルによっては、独自に HTML5 の機能を組み合わせて GIS 機能を拡張することも可能です。今後も ArcGIS API for JavaScript は Web の技術を取り入れて進化を続けていく予定ですのでご期待ください。     ■関連リンク GitHub： Esri Japan GitHub： https://esrijapan.github.io/   ESRIジャパン Web サイト： ArcGIS for Developers： http://www.esrij.com/products/arcgis/developer/arcgis-online-for-developers/ ArcGIS API for JavaScript：http://www.esrij.com/products/arcgis/developer/arcgis-web-mapping/arcgis-api-for-javascript/   Esri 社（米国）Web サイト： ArcGIS for Developers： https://developers.arcgis.com/ ArcGIS API for JavaScript：https://developers.arcgis.com/en/javascript/ ... View more

2017 年 5 月 24 日（水）に 6 回目となる GeoDev Meetup を開催しました！ 前回に引き続き、「ArcGIS で作成した地図をアプリに組み込んでみること」をメインテーマとしてチャレンジしました。また LT 枠では、参加者の方や弊社社員からの GIS にまつわるトークを通して意見や経験を共有しました！ GeoDev Meetup とは？ 地理情報や地図・位置データを扱う（扱ってみたい）エンジニアやデザイナーの交流の場 ArcGIS を使ったデータ可視化・解析やアプリ開発をやってみる D3.js や Leaflet などのオープン ソースの技術と連携したいという方も大歓迎！ ということを目指して開催しています。 GeoDev Meetup は、新しい仲間に出会えることができる場や、ArcGIS を利用することで、新しいビジネスの創出や新しい事業を開発するきっかけなどが生まれる場にしたいと考えています。ArcGIS を通じた大きなコミュニティが日本でももっと活発になるようにしていきたいと思います。 過去第 4 回目と第 5 回目の Meetup の様子はこんな感じでした！ LT タイム！ 今回の LT タイムでは、ゲスト 1 名と弊社スタッフ 2 名の計 3 名からの発表がありました。 LT ① - ArcGIS Developer セッション 2017 振り返り (@freedom_tk) Meetup 開催のおよそ１週間前に六本木の東京ミッドタウンで開催しました「GISコミュニティフォーラム」にて、GeoDev Meetup 運営メンバーの企画による開発者向け「ArcGIS Developer セッション」を実施しました。このセッションにご参加いただいたことが縁となって Meetup #6 へ遊びに来てくださった方もいらっしゃいますが、振り返りということで、セッションでどのようなことをお伝えしたか、どのようなコンテンツを提供したかをお話しました。 LT ② - IoT×GIS：屋内測位 と ArcGIS プラットフォームとの連携 続いて、こちらも弊社スタッフによる発表です。昨今の IoT ビジネスの盛況に対して、私たちも IoT でどのように GIS が活かせるのかを各所でお伝えしたり、実証実験などに取り組んだりしています。その中で特に注力している「屋内測位」というテーマでこれまで活動してきた中で得た経験や、その仕組みについてお話しました。 特に IndoorAtlas 社が提供する、「地磁気による屋内測位サービス」を ArcGIS と組み合わせたプロトタイピングとして開発し、ArcGIS Developer セッションで披露した参加者体感型デモ（ゲーム）について詳しくお話しています。 LT ③ - WINGFIELD の紹介 (@Kohsuke_Hada) こちらはゲスト LT として、ご本人が運営されている「WINGFIELD」という GIS 関連の技術ネタなどを配信しているブログについてお話いただきました。特に GeoDev Meetup 運営スタッフがおもしろい！と思ってリクエストした「グリニッジ天文台で本当の標準時子午線を探す」という記事について詳しくお聴きしました。標準時子午線のモニュメントが古い測地系に基づく経度０度に配置されており、現在の世界測地系に基づいた経度０度はどの程度離れているのか？というのを実際に現地で確認するという非常にユニークでマニアックな内容でした。このブログのなかで実際に現地に行ったときの YouTube の映像も公開していますので、ぜひご覧ください。 もくもくタイム→成果発表会 LT の後は、ArcGIS のクラウドサービスを使った地図作成過程やアプリ作成の選択肢などをご説明し、参加者の方々には自由にもくもく作業していただきました。今回は、LT で取り上げられたネタがおもしろかったので、もくもくタイム中にその話を参加者と発表者で取り交わしていたり、弊社スタッフへ活発に質問が出たりと、無口で「もくもく」な雰囲気ではなく、にぎやかな時間となりました。 もくもくタイムのあとは毎度、成果発表会の時間を設けており、今回は GeoDev Meetup での LT はすでに２度目となる @_shimizu さんより、最近話題になったミサイル到達範囲について、座標系に則した円を描かないと正確な距離にはならないから、２つの異なる座標系を使って範囲円が歪んだ楕円になる場合と完全な円になる場合を見比べる D3.js 製の簡易アプリを紹介していただきました。 おわりに ご参加いただいたみなさま、ありがとうございました！ 今回は unity と地図を関連させたい！と熱い想いを持った方や、屋内測位にご興味のある方、GIS に関する最新の JavaScript ライブラリで挑戦している方などに参加いただけて、GIS と何か技術を連携させるということがとても有意義だなっと感じる Meetup でした！ 関連リンク   GeoDev Meetup 開催レポート        ・GeoDev Meetup – RESAS API ハッカソン予習・復習会 開催レポート        ・GeoDev Meetup – RESAS データ可視化・解析もくもく会 開催レポート        ・GeoDev Meetup #3 - 地図で使える RESAS データ作成・可視化もくもく会開催レポート        ・GeoDev Meetup #4 - 地図データ可視化・アプリ作成もくもく会開催レポート        ・GeoDev Meetup #5 - 地図データ可視化・アプリ作成もくもく会開催レポート ESRIジャパン RESAS 関連ブログ ・ArcGIS を使って RESAS API データをビジュアライズしてみよう！ ・大解剖！ハッカソン最優秀賞作品 「Tsuredatsu」 From RESAS x Japan Hackathon ～地域の連鎖をデザインしよう！～ ArcGIS 関連ページ ・ArcGIS for Developers ・ArcGIS for Developers 開発リソース集 ・ArcGIS Online ・ArcGIS Open Data ... View more

毎年、GISコミュニティフォーラムの前日には、技術セッションのみのプレフォーラム・セミナーを開催しています。本連載では、開発者向けのセッションを案内してまいります。 今回は「屋内測位」をテーマにしたセッションの紹介です！       セッションの開催概要 日時：5月16日(火曜日)　14：20～15：00 場所：東京ミッドタウン 4F ルーム1-2 概要：これまで ESRIジャパンでは屋内での GIS 活用に関する実証実験を行ってきました。その取り組みを紹介しながら、実際にどのように ArcGIS を活用してきたかを技術的な視点からご紹介します。データの集約や可視化に便利な ArcGIS プラットフォームを使って IoT×GIS を始めてみましょう！     IndoorAtlas SDK を使用して屋内の位置情報を取得する   セッションでは ArcGIS とは別に屋内測位の要素技術として iBeacon や地磁気を使用した屋内測位技術についても紹介します。 IndoorAtlas 社が提供する地磁気測位サービスでは、スマートフォンを使用して事前に対象エリアの地磁気情報を計測しておくことで、特別な計測機器等を使わずに屋内で自位置を特定するアプリを開発できます。 アプリ開発用に Android、iOS、Cordova 向けの SDK が提供されています。例えば iOS では、以下のようなコードで現在位置を取得できます。   override func viewDidLoad() { super.viewDidLoad() // IALocationManagerの作成 self.ialm = IALocationManager.sharedInstance() // APIキーとSecretキーを設定 self.ialm.setApiKey(<APIKey>, andSecret: <APISecret>) // デリゲートを設定 self.ialm.delegate = self // 位置情報の取得を開始 self.ialm.startUpdatingLocation() }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   位置情報が更新されると、デリゲート メソッドが呼ばれます。 func indoorLocationManager(_ manager: IALocationManager, didUpdateLocations locations: [Any]) { // 緯度・経度・階数情報を取得 let iaLocation = locations.last as! IALocation let clLocation = iaLocation.location print("緯度:\(clLocation!.coordinate.latitude), 経度:\(clLocation!.coordinate.longitude), 階数:\(iaLocation.floor!.level)") }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     このようにして屋内測位で取得した位置情報は、ArcGIS の API を使用して簡単にクラウド GIS「ArcGIS Online」に蓄積し、リアルタイムに地図上で可視化することができます。その方法も詳しくデモを交えてお伝えします！   当日はこの他にも素敵なトピックをそろえていますので、ご期待ください！ 皆様のご来場をお待ちしております。     参加方法   本セッションへの参加登録は弊社サイトより、GISコミュニティフォーラムへの参加登録にてお願いします。(無料です) ... View more

毎年、GISコミュニティフォーラムの前日には、技術セッションのみのプレフォーラム・セミナーを開催しています。本連載では、開発者向けのセッションを案内してまいります。 今回は「ArcGIS API for JavaScript」をテーマにしたセッションの紹介です！     セッションの開催概要 日時：5月16日(火曜日)　16：50～17：30 場所：東京ミッドタウン 4F ルーム1-2 概要：Web アプリ開発のための ArcGIS API for JavaScript はバージョン 4.x 系がリリースされ、シンプルなコーディングでパワフルなアプリを開発可能になりました。新しく生まれ変わった API について、デモを交えて最新情報とともにご紹介します。     ポータル サイトのアイテムを表示してみる バージョン 4.x では、ArcGIS Online および Portal for ArcGIS のポータル サイトとの連携が強化され、ポータル サイトに登録されているアイテムの管理や利用がより簡単に行えるようになりました。   例えば、ポータル サイトで作成した Web マップをアプリで利用するとき、バージョン 3.x では、ポータル サイトと連携するユーティリティ クラス（esri/arcgis/utils）の createMap() メソッドを使用していました。 バージョン 4.x では、ユーティリティ クラスが廃止され、Web マップ クラス（esri/WebMap）およびポータル アイテム クラス（esri/portal/PortalItem）に置き換わりました。 以下は、Web マップを表示するサンプルです。   Load a basic web map   コードを見てみましょう。 portalItem オプションに参照する Web マップの ID を渡して、Web マップを作成しているのが分かります。 WebMap クラスは Map クラス（esri/Map）を継承しています。したがって、Web マップも Map クラスと同様、View を変更することで、2D / 3D の切り替えが可能です。 サンプルでは、Web マップを MapView（esri/views/MapView）を使い描画しています。SceneView（esri/views/SceneView）を使って 3D でレンダリングしてみましょう。     バージョン 4.x では、このように、アプリから Web マップを利用する方法が変更になりました。また、Web シーンを表示するための Web シーン クラス（esri/WebScene）や、アイテムとして登録されているレイヤーを利用するためのメソッド（esri/layers/Layer.fromPortalItem()）が追加されるなど、ポータル サイトを活用したアプリをさらに効率的に開発できる機能が提供されています。   当日はこの他にも素敵なトピックをそろえていますので、ご期待ください！ 皆様のご来場をお待ちしております。     参加方法 本セッションへの参加登録は弊社サイトより、GISコミュニティフォーラムへの参加登録にてお願いします。(無料です) ... View more

毎年、GIS コミュニティフォーラムの前日には、技術セッションのみのプレフォーラム・セミナーを開催しています。本連載では、開発者向けのセッションを案内してまいります。 今回は「オフライン」をテーマにしたセッションの紹介です！ セッションの開催概要 日時：5月16日(火曜日)　16：00～16：40 場所：東京ミッドタウン 4F ルーム1-2 概要：通信が制限されている状況で地図を使用するためには、オフライン環境に対応したアプリが必要です。当セッションでは、オフライン地図の必要性や仕組み、地図の編集方法など、ArcGIS で開発することにより得られるメリットを含めてご紹介していきます。 オフラインでも地図上にデータが追加できる！ オフライン環境のアプリで地図を使うためには、ローカルに地図を表示するためのデータをあらかじめ作成しておきます。ArcGIS を使ってこのデータをローカルに作成すると、データベース構造を保ったファイルとしてダウンロードすることができます。ファイルを作成するコードを実装する必要はありません。 今回は、このダウンロードしたファイル操作について、サンプル コードを使ってご紹介します。下記のコードは、追加したいジオメトリ (ポイント) と、持たせたい属性情報を指定して、ローカルファイルにデータを追加しています。 テーブル定義は、あらかじめ ArcGIS Online または ArcGIS Server でフィーチャ レイヤーに必要な属性情報のカラムを定義しておきます。 　　 実際の主要なコード (Android/Java) はこのようになります。 /** * 端末のローカルファイルを扱うオブジェクトを作成する * */ Geodatabase geodatabase = new Geodatabase("*.geodatabaseまでのPath"); GeodatabaseFeatureTable GdbFeatureTable = geodatabase.getGeodatabaseFeatureTables().get(0); /** * 更新データ(ポイントなどのジオメトリを含む)を作成する * */ java.util.Map<String, Object> attributes = new HashMap<String, Object>(); attributes.put("address","Esriジャパン"); // 追加したいポイントを第二引数に設定する Feature addedFeature = GdbFeatureTable.createFeature(attributes, pPoint); /** * 端末のローカルファイルを更新する * */ final ListenableFuture<Void> addFeatureFuture = mGdbFeatureTable.addFeatureAsync(addedFeature);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ポイントを追加するために必要な属性情報のオブジェクトは、HashMap を使って作成し、それと位置情報を含むポイントのオブジェクトの 2 つを引数にして、Feature オブジェクトを作成します。ここまでできたらローカルファイルを参照しているオブジェクトに addFeatureAsync するだけです。 ※このコードを含むアプリは ESRIジャパンの GitHub で近日公開予定です。 当日はこの他にも素敵なトピックをそろえていますので、ご期待ください！ 皆様のご来場をお待ちしております。 参加方法 本セッションへの参加登録は弊社サイトより、GISコミュニティフォーラムへの参加登録にてお願いします。(無料です) ... View more

毎年、GIS コミュニティフォーラムの前日には、技術セッションのみのプレフォーラム・セミナーを開催しています。本連載では、開発者向けのセッションを案内してまいります。 今回は「プラットフォームアプリへの移行」をテーマにしたセッションの紹介です！       セッションの開催概要 日時：5月16日(火曜日)　15：10～15：50 場所：東京ミッドタウン 4F ルーム1-2 概要：今後の ArcGIS の方向性を踏まえ、ArcGIS Engine からの ArcGIS Runtime や ArcGIS Pro SDK への移行の方法について解説します。また、移行にともなうアプリ開発から運用までのライセンスについてもご紹介します。     ArcGIS Pro SDK のアドインを活用してみる   ArcGIS Pro SDK は、ArcGIS Pro アプリケーションの拡張アドインを作成するための開発キットです。.NET（C#、VB）を使用した拡張が可能で、UI は WPF のXAML で作成することができます。 セッションでは最新の ArcGIS Pro SDK 1.4 の新機能「Configuration」について紹介したいと思います。「Configuration」とは、新しく追加されたカスタマイズのパターンで、具体的には以下のことができるようになりました。   ArcGIS Pro UI にソリューション ブランディングを付加 カスタム スプラッシュ スクリーン、スタートアップ ページ、カスタム アイコンなど ロール ベースのカスタマイズ サインインした指定ユーザーのロールによるリボン UI 変更など アドインの管理   新機能の「Configuration」は、Visual Studio のプロジェクト テンプレートから利用することができます。     プロジェクトを作成後、スプラッシュ スクリーンやスタートアップ ページ用の XMAL が作成されますので、XMAL を利用してカスタム UI などを作成することができます。     このように ArcGIS Pro SDK 1.4 ではカスタマイズ機能が強化されました。   当日はこの他にも素敵なトピックをそろえていますので、ご期待ください！ 皆様のご来場をお待ちしております。     参加方法 本セッションへの参加登録は弊社サイトより、GISコミュニティフォーラムへの参加登録にてお願いします。(無料です) ... View more

毎年GISコミュニティフォーラムの前日には、技術セッションのみのプレフォーラム・セミナーを開催しています。本連載では、開発者向けのセッションを案内してまいります。 今回は「データサイエンス」をテーマにしたセッションの紹介です！ セッションの開催概要 日時：5月16日(火曜日)　13:30-14:10 場所：東京ミッドタウン タワー棟 4F ルーム1-2 概要：Python（Pandas, SciPy, Matplotlib など）を駆使したデータサイエンスに ArcGIS を組み込んで、「The Science of Where」をあなたの手に。データ分析のワークフローを劇的に変えた Jupyter Notebook 上で ArcGIS API for Python の真価を披露いたします。 ArcGIS API for Python のセットアップについて セッション当日は Jupyter Notebook を使ったデモを紹介する予定です。ノートブックはセッション参加者の方に共有する予定ですので、環境を作っておけばすぐにお試しいただけます。以下、デモの実行に必要な環境です。 ArcGIS for Developers アカウントの作成 ArcGIS for Developers サイトで開発者アカウントを作ります。 Anaconda のインストール Anaconda for Python の最新バージョンをインストールしてください。 ArcGIS API for Python のインストール 以下のコマンドを実行して arcgis パッケージをインストール $ conda install -c esri arcgis Jupyter Notebook の起動 以下のコマンドを実行して Jupyter Notebook を起動 $ jupyter notebook ArcGIS API for Python は Python 3.5 以上で動作します。バージョン 2 系をお使いの方はバージョン 3 系を使いましょう。 最新バージョンの Anaconda をインストールすればバージョン 3 系がセットで入ります。 また、Anaconda では仮想環境を作れるので、これを機にバージョン 2 系と 3 系で環境を分けるのもよいかもしれません。 当日はこの他にも素敵なトピックをそろえていますので、ご期待ください！ 皆様のご来場をお待ちしております。 参加方法 本セッションへの参加登録は弊社サイトより、GISコミュニティフォーラムへの参加登録にてお願いします。(無料です) ... View more

毎年GISコミュニティフォーラムの前日には、技術セッションのみのプレフォーラム・セミナーを開催しています。本連載では、開発者向けのセッションを案内してまいります。 今回は「3D」をテーマにしたセッションの紹介です！   セッションの開催概要   日時：5月16日(火曜日)　11:30～12:10 場所：東京ミッドタウン 4F ルーム1-2 概要：3D アプリを作成することに難しいイメージがありませんか？ArcGIS では、2D のアプリを作成するのと同じように 3D アプリを作成することができます。本セッションでは、データの準備から実装、3D で表現することのメリットまで、デモを交えて 3D アプリ開発の基本をご紹介します。     リアルなシンボルを地図に表示してみる 3Dで表現することのメリットのひとつに、本物と同じ形状の地物を地図上に表現できることがあります。 ArcGIS Online や Portal for ArcGIS には、Web スタイルと呼ばれるリアルな 3D シンボルがホストされており、Web スタイル シンボル（esri/symbols/WebStyleSymbol）クラスを活用することで、ArcGIS API for JavaScript から利用可能です。 看板や車、木など街中で見かけるさまざまな目標物が Web スタイルとして用意されており、簡単に、リアルなシンボルを地図に表示できます。   ArcGIS API for JavaScript Playground   上記のリンクをクリックしてプレイグラウンドを開いてみましょう。 このプレイグラウンドは、API が提供する豊富なシンボルを、インタラクティブに選択したり、コードを書き込んだりして、どのようなシンボルが作成できるのかをその場で確認することができます。 では、WebStyleSymbol ボタンをクリックしてみてください。 右上に Web スタイル シンボルのオプション 選択画面が表示されます。styleName と name のドロップダウン リストから適当なスタイル名とシンボル名を選択すると地図に選択したシンボルが表示されます。 また、右下には、選択したシンボルを作成するために必要なコードが書かれています。コードを見てみると、Web スタイルのシンボル名、スタイル名、そしてWeb スタイルがホストされているポータル サイトの URL を設定しているのがわかります。 このように、Web スタイル シンボルを利用することで、3 つのオプションを設定するだけで、リアルなシンボルを簡単に地図に表示させることができます。     今回ご紹介したプレイグラウンドは、Web アプリ開発のための ArcGIS API for JavaScript を使用していますが、セッションでは、ネイティブアプリ開発キットである ArcGIS Runtime SDK での 3D アプリ開発についてもご紹介する予定です。   当日はこの他にも素敵なトピックをそろえていますので、ご期待ください！ 皆様のご来場をお待ちしております。     参加方法 本セッションへの参加登録は弊社サイトより、GISコミュニティフォーラムへの参加登録にてお願いします。(無料です) ... View more

来る 5 月 16 日～ 18 日の日程で、GIS コミュニティフォーラム（主催：ESRIジャパンユーザ会）が開催されます！ このイベントは、日本国内の GIS ユーザー並びに GIS にご興味をお持ちの方々の情報交換と GIS 利用促進を目的としています。 GIS、リモートセンシングに携わる多くの方にご参加いただき、活用事例や最新テクノロジーの紹介を通してお互いのアイデアを共有する場として、毎年多くの方にご来場いただいています！       ArcGIS に関連する技術セッションが豊富です   なかでも 5 月 16 日に行われるプレフォーラム セッションは、ESRIジャパンの技術スタッフがそれぞれセッションを持ち、ArcGIS 製品を中心とした技術情報や最新情報を紹介します！GeoNet では、特に開発者向けのセッションにフォーカスして、どのような内容でプログラムが作られているかを来週よりいち早くご紹介していきます！   開発者向けセッションのプログラム（ルーム 1-2）   開催場所：東京ミッドタウン（六本木） 日時：5月16日 (火) 11:30 ~ 17:30   時間 セッション タイトル 11:30-12:10 3D GIS アプリ開発は難しくない！ 13:30-14:10 ArcGIS Python API で始めるデータサイエンス 14:20-15:00 IoT×GIS：屋内測位と ArcGIS プラットフォームをつなげよう！ 15:10-15:50 ArcGIS Engine からプラットフォーム アプリへの移行の勘所とは？ 16:00-16:40 ゼロから始めるオフラインアプリ開発 16:50-17:30 ArcGIS API for JavaScript ～Web アプリ開発 最新情報～   各セッションの概要から技術トピックを順々にお届けしてまいりますのでご期待ください！     ArcGIS Developer セッション 2017 も注目です！     日時：5月18日(木曜日) 13:30 ~ 15:10 ※こちらのセッションの開催日時はプレフォーラムとは異なっておりますのでご注意ください。   5月17日に行われる「ArcGIS Developerセッション ～あなたもGeoDevコミュニティと一緒に成長しよう！～」では、弊社がこの1年で注力してきたことのひとつである「GeoDev（開発者コミュニティ）」から、活動内容や活動を通して生み出された ArcGIS 開発の実例をご紹介します。実際に支援したハッカソンで生まれた優秀作品の紹介も行います。   セッション中は最新の GIS 関連技術を駆使したデモとして参加者を巻き込んだゲームを実施予定！ゲームを通して GIS でここまでできる！というところをぜひ一緒に体感してみませんか？ 参考までに、昨年実施したデモの内容は「Apple Watch と iPhone から取得した位置情報＆心拍数のログを公開中！」でご覧いただけます。     参加方法   本セッションへの参加登録は弊社サイトより、GISコミュニティフォーラムへの参加登録（無料）にてお願いします。     関連リンク   GISコミュニティフォーラム関連ページ GIS コミュニティフォーラム ArcGIS Developer セッション ArcGIS 関連ページ ArcGIS for Developers 開発リソース集 ArcGIS Online ArcGIS Open Data ... View more

交通ネットワークを使った解析にはいくつか種類があります。 ルート案内 最寄り施設の検索 到達圏 配車ルート（VRP: Vehicle Routing Problem） 　　など 今回は「到達圏」を Leaflet.js から利用してみます。 到達圏とは、任意の地点から交通ネットワーク上で一定の時間内に到達可能なエリアのことです。 ArcGIS のクラウドでは到達圏の解析処理を Web サービス (REST) として利用できるので、エンジニアであればすぐにアクセスできます。 今まで紹介した住所検索や属性/空間検索といった機能はほぼ使い放題※なのですが、到達圏解析はやや高度な分析処理となるため、月ごとの使用回数に上限があります。 ArcGIS for Developers では毎月クレジットが配布され、このクレジットを消費してサービスを利用します。 クレジットに関する説明は「クレジット | ArcGIS for Developers - ESRIジャパン」をご覧ください。 到達圏の使いどころ 到達圏はあまり見慣れない図形かもしれません。 しかし、現在地から自動車で 10 分以内で到着できる範囲にある店舗を検索するといった機能は割と一般的なものだと思います。 下の画像はクリックした地点から徒歩で 10 分圏内にある無料公衆無線ＬＡＮスポットを表示しています。 フリーランスのエンジニアや訪日外国人旅行者などに重宝しそうですね。 これを ArcGIS で実現するとしたらフローはこんな感じです。 ArcGIS に到達圏作成をリクエスト ArcGIS が到達圏を算出 取得した到達圏を入力値とした店舗データの空間検索リクエストを作成/送信 結果を地図に表示 主な GIS の機能としては到達圏解析と空間検索ですが、どちらも ArcGIS で API 提供されているので、それらを組み合わせることで実現ができます。 空間検索については前々回の記事（『Leaflet.js で空間フィルタリングをやってみる』）を参考にしてください。 Leaflet.js で ArcGIS の解析サービスを実行 今回のサンプルは ArcGIS for Developers アカウントをお持ちであれば、ログインしてお試しいただけます。 到達圏 - Esri Leaflet  アカウントは無償ですぐに作れるのでぜひ。 無償アカウントでも月に最大 100 件まで到達圏解析の実行が可能です。 なお、ArcGIS の OAuth 認証の実装についての紹介はまたの機会にしておきます。 さて、実装方法の紹介をしていきます。 解析サービスの実行には L.esri.GP.service を使います。 GP とはジオプロセシング（Geoprocessing）の略称で、GIS 解析処理の呼び方だと思ってください。 また、L.esri.GP.service は Esri Leaflet のプラグインなので、別途 CDN の URL を追加します。 <!-- Esri Leaflet Geoprocessing CDN --> <script src="https://cdn.jsdelivr.net/leaflet.esri.gp/2.0.0/esri-leaflet-gp.js"></script>‍‍‍‍‍‍   到達圏解析のサービス（logistics.arcgis.com）を使って解析サービスの初期化とタスクの作成を行います。 このサービスは非同期タイプの解析サービスなので、asyncInterval で処理が完了しているかを確認する間隔を指定します。 REST API の詳細は以下で確認できます。 Service Area service with asynchronous execution | ArcGIS REST API // 解析サービスの初期化 gpService = L.esri.GP.service({   url: "https://logistics.arcgis.com/arcgis/rest/services/World/ServiceAreas/GPServer/GenerateServiceAreas",   token: token,   asyncInterval: 1 }); // タスクの作成 gpTask = gpService.createTask(); // タスクの入力パラメーター設定 (5 分と 10 分圏内) gpTask.setParam('break_values', '5 10'); // タスクの出力パラメーター名の設定 gpTask.setOutputParam('Service_Areas'); // 地図をクリックしたら実行 map.on('click', runDriveTimes);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 実行処理を書きます。 // 到達圏解析の実行 function runDriveTimes(evt) {   // 出発地をクリックした地点の緯度経度に指定   gpTask.setParam('facilities', evt.latlng);   // 実行   gpTask.run(driveTimeCallback); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 解析結果をコールバックで取得します。 取得したデータは GeoJSON なので L.geoJson を使って表示します。 コールバック関数名は先の gpTask.run() の引数に指定したものを使います。 // 結果表示用のレイヤー var driveTimes = L.featureGroup().addTo(map); // 到達圏解析のコールバック function driveTimeCallback(error, response, raw){ // 結果（GeoJSON）の表示 var results = L.geoJson(response.Service_Areas, {    style: function (feature) {      if (feature.properties.ToBreak === 10) {        return {color: '#ff6600', fillColor: '#ff6600'};      } else if (feature.properties.ToBreak === 5) {        return {color: '#ff0099', fillColor: '#ff0099'};      }    } }); driveTimes.addLayer(results); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 以上が、ArcGIS 解析サービスの実行から結果取得までの流れです。 ※住所検索サービスには100万リクエスト/月の上限がございます 関連リンク Leaflet.js Esri Leaflet Esri Leaflet Geocoder ArcGIS for Developers ArcGIS for Developers 開発リソース集 ... View more

先日、室蘭市で開催された「企業・団体対抗 観光ハッカソン」に参加してきました！   作品条件の 1 つに総務省公共クラウドの観光オープンデータを使用するというものがあり、今回作成したアプリでは室蘭市の観光情報のデータを寄り道案内に使用しました。 私たちのチームは、その公共クラウドの名前を冠した「公共クラウド賞」を受賞しました。   作成したアプリはこちらです。     MUROSARU（ムロサル）     MUROSARU (ムロサル) とは、北海道の方言にある「書かさる」、「押ささる」などの「〜さる」といった意思に反して行われるというニュアンスの言葉からもじった造語です。このアプリのコンセプトは「寄り道」なので、目的地でないにも関わらず、つい引き寄せられてしまうという意味合いを込めています。   近くにある観光名所を望むのに適した撮影スポットを写真で視覚的に伝え、そこまでのルートを案内します。また、市内に点在する室蘭市マスコットである「くじらん」の場所を共有して、みんなで隠れくじらんを探したり、投稿したりすることができます。   デモを含むアプリの詳細情報とソースは GitHub にて公開しています。   GitHub - EsriJapan/photospot-finder: 室蘭市の観光ハッカソン向けに作成したアプリ    MUROSARU はモバイル向け Web アプリです。 今回のアイデアをアプリにしようと思うとどうしても画面遷移が前提になるので、React を使って SPA（Single Page Application）っぽく作りました。 地図部分は Leaflet.js です。 一方、空間的なクエリ REST API 対応のデータ配信やルート検索などのサービス部分は ArcGIS for Developers （開発者向け ArcGIS クラウドサービス）を使っています。 プラグイン（Esri Leaflet）を使えば ArcGIS のデータも Leaflet.js の地図上で自由にマッシュアップできます。     このように、バックエンドは ArcGIS for Developers を使い、フロントエンドはオープンソースで組んでいます。 よって、ArcGIS for Developers さえあれば、MUROSARU は作れます。   特にフロント周りの技術的な話は別の機会に書きたいと思います。 Esri Leaflet については記事がいくつかありますのでご参考まで。   Esri Leaflet Tips     ハッカソン当日の様子   参加した企業・団体は全 5 チームです。 企業・団体対抗なので、チームビルディングなどはなく事前準備も OK のため、会場に入るとすでに作業するチームも。。 想定していた以上のギークな空気感に少々物怖じしましたが、この独特のピリッとした感じがハッカソンの醍醐味でもあります。     事前準備 OK なので、データ配信のところと、アプリ側の基本 UI と機能は作っておいたのですが、周りの雰囲気から「このままでいいのか？」という妙なプレッシャーを受け、やり残したイシューをガシガシつぶしていきました。 これもよくあることですが、些細な更新でもデプロイすると新たなバグが発生したりするものです。 結局、制限時間いっぱいまでコード書いていました。 ハッカソンでも出来る限りテストコードは書いたほうがいいですね。     社内アイデアソンの開催   私たちが作ったアプリのアイデアは、事前に社内アイデアソンを開催して集まったアイデアの中から、アプリ制作の実現性をもとに判断して選んだものです。 そのおかげで、アイデアのブラッシュアップや準備に時間を割けたことが、今回受賞にこぎつけた一因だったと思います。 たとえば、くじらんを収集するというアイデアはアイデアソン時点では存在していませんでした。     会社としてハッカソンに出場したのは初めてでしたが、企業対抗という独特の緊張感（恐怖感？）を味わえたのはよい経験でした。 今後もこういった場に積極的に参加して、実践を通して ArcGIS の魅力を伝えていきたいです！ ... View more

地図データのスタイリングと言えば「コロプレスマップ」が有名でしょうか。 統計値にもとづいて、エリアを色分けしているのがこれですね。 Leaflet.js のチュートリアルにもこれを実現する方法が記載されています。 他にも施設の種類によってアイコンを分類したり、地震の震度によってポイントのサイズを決めたりすることも、本質的には属性データをもとにスタイリングするというところでは変わりません。 しかし、こういった地図デザインをコーディングで表現していくというのは、なかなか骨が折れますし、期待した表現に辿り着くためにはある程度デザイン パターンを押さえておく必要もありそうです。 そんなデータ可視化にそこまで強くないエンジニアをサポートするための機能が ArcGIS には揃っており、Leaflet.js でも利用できる機能を紹介していきたいと思います。 もちろん、普段からデータ可視化に慣れ親しんでいるエンジニアにとっても便利な機能ですよ。 Esri Leaflet Renderers 前回の記事（GeoJSON を REST API 配信して Leaflet.js で表示しよう - Esri Leaflet Tips）で紹介したフィーチャ サービス（フィーチャ レイヤー）を覚えていますか？ 実は、フィーチャ サービスは可視化のためのスタイル情報をメタデータとして持っているんです！！ このスタイル情報をもとに Leaflet.js の地図上にそれを再現するために開発されたプラグインが Esri Leaflet Renderers ※1 です。 これは L.esri.FeatureLayer のメタデータを参照して自動的にスタイリングしてくれるスグレモノです。 以下のサンプルは Esri Leaflet Renderers を読み込んでフィーチャ サービスをスタイリングして表示しています。 試しに [External Resources] から esri-leaflet-renderers.js を削除して、再度実行すると、色分けされないことが確認できます。 Renderer with Esri Leaflet Renderers - JSFiddle  ArcGIS のデータ可視化デザインツール ArcGIS には地図上で扱うデータの可視化をデザインするためのツール（マップ ビューアー）があります。 マップ ビューアーにはデザインだけでなく、データ編集やレイヤーの検索・追加などの汎用的な機能を備えた基本ビューアーです。 マップ ビューアーのデザイン機能を使えば、データ可視化に強くない方でも、すぐに（しかも楽しく！）データをスタイリングできます。 開発者アカウント※2 があれば自由に使えるツールですので、ぜひ一度試してみてください。 詳しいデザイン方法については以下のブログ記事を参考にしてみてください。 スマート マッピングでデータの地図表現をより簡単に その①  スマート マッピングでデータの地図表現をより簡単に その②  スマート マッピングでデータの地図表現をより簡単に その③  デザインが完了したら、[レイヤーの保存] をします。 そうすることで、参照元であるフィーチャ サービスのメタデータにあるスタイル情報を更新することができます。 変更への柔軟性 データ可視化に必要な情報はサービスのメタデータとして外部化されており、そのスタイル情報はツールによって容易に更新できます。 これのメリットはデータ可視化がコードに依存しないことです。 コード上には 1 文字もスタイルに関する記述がないため、地図表現上のデザイン変更にも柔軟に対応することができます。 また、実際に色をつけたり、サイズを変えたりといった可視化作業をする場合に、それを地図で確認しながら実施できることももう一つのメリットです。 さて、前回の記事で紹介した OpenStreetMap の道路データを使って公開したフィーチャ サービスをマップ ビューアーでデザインしてみました。 色は単一ですが、線幅を道路の種別に応じて変更しています。 Esri Leaflet: Renderer - JSFiddle  これをたとえば道路の交通量に応じて線の色を変えるといったスタイルを組み合わせても面白いと思います。 メタデータが定義するスタイル情報とは可視化のルールですので、上記の例である交通量のような変化のある属性値であっても、リアルタイムにデータの可視化へ反映することも可能です。 ※1 Esri Leaflet とプラグイン群は弊社での技術サポートは行っておりませんが、GitHub リポジトリにてバグ・課題の報告やプルリクエストによる改善が可能です ※2 テスト・開発目的あるいは非商用目的でのアプリ公開（個人/NPO/NGO/教育機関のみ）は無償でご利用いただけます 関連リンク Leaflet.js Esri Leaflet Esri Leaflet Renderers ArcGIS for Developers ArcGIS for Developers 開発リソース集 ... View more

GeoJSON とは地理空間データ フォーマットの 1 つであり、Web ではもっともポピュラーなフォーマットです。 GeoJSON の仕様については geojson.org に詳しいです。 本記事は、「GeoJSON を使って地図へのデータ表示してるんだけど、データに対する検索や空間的な条件に応じた抽出などを動的に行いたい。ただし、クライアントで処理するのは避けたいし、地理データ取得用に API 書くのも面倒だな」という人にオススメの内容です。 タイトルの通り、GUI 操作ですぐに公開できる動的なクエリ API を備えたサービスの配信方法から、それを使って Leaflet.js で特定の条件に従ったデータのみを表示するところまでを紹介します。 ここで言うクエリ API とは、以前の記事（Leaflet.js で空間フィルタリングをやってみる - Esri Leaflet Tips）で紹介した ArcGIS の REST API です。 ArcGIS にデータをアップロードするだけでサービスとしての配信ができるのでとても便利です。 ざっと手順をまとめてみました。 ArcGIS に GeoJSON をアップロード REST エンドポイントを確認 Leaflet.js の地図上にデータを表示 ArcGIS に GeoJSON をアップロード ArcGIS のクラウド（ArcGIS Online）に GeoJSON をアップロードするだけで、REST API としてデータにアクセス可能な状態で配信されます。 今回は OpenStreetMap（OSM）のデータを GeoJSON としてエクスポートしたものを使って ArcGIS に公開してみました。 OSM のエクスポートには overpass turbo を使いました。 GeoJSON データの公開は ArcGIS Online のマイコンテンツ ページから行います。 マイコンテンツは開発者アカウント※1 を作成すれば、サインインしてアクセスできます。 公開までの流れは以下のヘルプに詳しく載っているので試してみてください。 シェープファイルまたは GeoJSON ファイルの公開—ArcGIS Online ヘルプ | ArcGIS  REST エンドポイントを確認 GeoJSON を公開したら REST エンドポイントを確認しましょう。 公開すると下の画像のようにアイテム ページが表示されます。 [レイヤー] セクションに REST エンドポイントを確認するためのページ リンクがあります。 上の画像では「streets_0」です。 クリックすると下の画像のページに移動します。 ここには配信しているサービスの情報や、REST API のオペレーションを実行するためのインターフェイスが用意されています。 Leaflet.js ではエンドポイントとなるこのページの URL を使います。 Leaflet.js の地図上にデータを表示 ArcGIS REST API として配信したフィーチャ レイヤーは GeoJSON 形式でデータを取得できます。 試しに以下の URL にアクセスしてみてください。 これは highway フィールドの値が motorway あるいは motorway_link のデータのみを GeoJSON で出力する URL です。 http://services1.arcgis.com/RVzd6I1g6h9fqyZM/arcgis/rest/services/streets/FeatureServer/0/query?where=highway=%27motorway%27%20OR%20highway=%27motorway_link%27&f=geojson では、これを Leaflet.js でどのように扱って、地図に表示させるのか。 GeoJSON で出力されますが、表示には L.GeoJson ではなく、 Esri Leaflet ※2 の L.esri.FeatureLayer を使います。 このクラスはクエリ API によるデータ取得と表示までの一連をラッピングしたレイヤー クラスです。 以前の記事で実施した空間フィルタリングでは、L.esri.Query を使った検索結果の表示は L.GeoJson を使いましたが、今回はよりシンプルな手法になります。 // OSM 道路データ レイヤー L.esri.featureLayer({   url: 'https://services1.arcgis.com/RVzd6I1g6h9fqyZM/arcgis/rest/services/streets/FeatureServer/0' }).addTo(map);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ L.esri.FeatureLayer には where というあらかじめ特定の条件に沿ったデータのみを表示するように指定できるコンストラクタ オプションが用意されています。 where には SQL シンタックスで条件を記述します。 先に指定した条件を適用してみましょう。 上のコードに 1 行追加するだけです。 なお、setWhere() メソッドを使えば、レイヤーの初期化後も動的に条件を変更・反映することもできます。 // OSM 道路データ レイヤー L.esri.featureLayer({   url: 'https://services1.arcgis.com/RVzd6I1g6h9fqyZM/arcgis/rest/services/streets/FeatureServer/0',   where: "highway='motorway' OR highway='motorway_link'" }).addTo(map);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ デモ サンプルを用意したので、where の 1 行を省いた結果もあわせて確認してみてください。 Esri Leaflet: FeatureLayer - JSFiddle  ※1 テスト・開発目的あるいは非商用目的でのアプリ公開（個人/NPO/NGO/教育機関のみ）は無償でご利用いただけます ※2 Esri Leaflet は弊社での技術サポートは行っておりませんが、GitHub リポジトリにてバグ・課題の報告やプルリクエストによる改善が可能です 関連リンク Leaflet.js Esri Leaflet ArcGIS for Developers ArcGIS for Developers 開発リソース集 ... View more

先週公開した記事（Leaflet.js で空間フィルタリングをやってみる - Esri Leaflet Tips ）で紹介した空間フィルタリングのサンプル アプリは、住所や地名を入力して周辺の施設を検索するという機能でしたが、これを Slack などのチャット上で実行できたら便利かしら？と思い立ち BOT を作ってみました。 「BOT（ボット）」とはロボットの略称で、最近では Twiter や LINE、Slack などのタイムライン上で会話ができるプログラムやアカウントのことを指す場合が多いですね。 このような BOT 向けの API やツールが公開されているため、BOT を作ってみたという開発者の記事をよく見かけるようになりました。 今回、BOT 作成にはオープンソースのチャット ロボットである Hubot という GitHub が作成した BOT プログラムを使いました。 また、最近エンジニアの間では一般的なチャットツールとなっている Slack 向けの BOT として作ってみました。 仕様 まずは BOT を使って結果を得るまでのフローを整理します。 BOT に「探して xx駅」や「探して 東京都千代田区平河町2-7-1」のように「探して」の後に場所名や住所を伝える BOT は「探して」の後に記載された場所名・住所をもとに ArcGIS の住所検索サービスへのリクエストを送信 レスポンスから結果の緯度経度を抜き出して地図の URL に付記して Slack に送信 地図は URL パラメーターにある緯度経度にズーム＆バッファー生成 バッファー内に含まれる無料 wifi スポットをフィルタリング この中で Hubot として実装したのは 1 ～ 3 です。 インストールから Slack への Hubot の設定等については、いろいろ詳しい記事があるので、そちらを参照するとよいと思います。 今回は主に Slack への BOT 設定をして、Hubot を Heroku にデプロイした後の話をします。 主に Hubot のスクリプトについてです。 4, 5 は Esri Leaflet Tips にて紹介した空間フィルタリングのサンプルをベースに、バッファーの中心座標が URL パラメーターの緯度経度取得をトリガーとするように作り直しました。 サンプルを Gist に置きましたのでご覧ください。 なお、無料 wifi スポットのデータは、オープンデータとして国土交通省が公開している歩行者移動支援サービスに関するデータサイトにある「無料公衆無線ＬＡＮスポット」（国土交通省観光庁） を ESRIジャパン株式会社が加工したものを使っています。 無料 wifi スポット検索 URL パラメーターへの緯度経度埋め込みを試してみたい方はこちらにアクセスしてみてください。 デフォルトは札幌駅の緯度経度です。 https://bl.ocks.org/ynunokawa/raw/8ec5c70d089a55bcabf7e3fd5dce9e39/?lat=43.06858648700046&lng=141.3508507640006  住所・地名検索用 API（Esri World Geocoding Service） Hubot では BOT の基本フローである「特定のメッセージを受け取ったら、対応するメッセージを返信する」というプログラムを CoffeeScript で記述します。 今回の実装はメッセージを受け取った後に緯度経度を取得するための処理を加えています。 Esri の住所検索サービス（World Geocoding Service）※1 へ住所・地名を送信して、取得した緯度経度を加えたアプリ URL を返信するという流れになります。 REST API の仕様は以下に詳しいです。 World Geocoding Service—ArcGIS REST API: World Geocoding Service | ArcGIS for Developers  ここでも簡単に説明しますが、ArcGIS の住所検索サービスには 4 つのオペレーションが存在します。 findAddressCandidates：住所や地名に一致した緯度経度（複数候補）を返します geocodeAddresses：複数の住所や地名を一度にバッチ処理して緯度経度を返します reverseGeocode：緯度経度に一致した住所を返します suggest：入力テキストに対して候補となる住所や地名を返します REST の URL は以下のように作ります。 http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/[オペレーション名]?[パラメーター] 各オペレーションに対応したパラメーターは仕様を確認してください。 今回は Slack 上で入力された住所・地名を使って緯度経度を取得できればよいので、findAddressCandidates を使います。 findAddressCandidates でよく使うパラメーターは以下の通り。 パラメーター 内容 f レスポンスのフォーマットを指定 (json | pjson) singleLine 緯度経度を取得する住所・地名を指定 searchExtent 検索範囲を指定 location 基点となる位置を指定、distance で指定した値の半径円内に含まれる結果を優先します distance location で指定した位置からの距離を指定 (デフォルトでは 50,000 メートル) maxLocations 取得する結果 (候補) の数を指定 forStorage 永続的に保存※2 を行うかどうかを指定 たとえば、永田町駅の緯度経度を取得する URL はこのようになります。 https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?outSr=4326&forStorage=false&ou…  Hubot のスクリプト（CoffeeScript）を書く Hubot のスクリプトとして記述する内容を整理します。 メッセージの頭に「探して」という記述があるかどうかの判別 「探して」の後に記述されているキーワード (住所・地名) を参照 キーワードをもとに住所検索リクエストの URL を生成・送信 結果の緯度経度をもとに地図 URL を生成 Slack にメッセージとして地図 URL を送信 上記フローの 1 ～ 3 のスクリプトです。 Hubot のスクリプトには msg.http を使ったリクエスト URL の生成・送信が可能なので、これを利用しています。 msg.match[1] に「探して」の後に記述されたキーワードが含まれているので、それをリクエスト URL の singleLine パラメーターに指定しています。 robot.respond /探して (.*)/i, (msg) ->   keyword = msg.match[1]   msg.send keyword + '周辺の無料 wifi スポットだよ！'   request = msg.http('http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates')     .query({       f: 'json',       singleLine: keyword,       outSr: 4326,       forStorage: false,       outFields: '*',       maxLocations: 1     })     .get()‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 残りのフロー 4 ～ 5 のスクリプトです。 コールバックにエラー処理と取得した結果は JSON.parse でパースした json を参照します。 緯度経度は json.candidates[].location に x と y パラメーターとして与えられているので、これをもとに地図 URL を作ります。 最後に msg.send で地図 URL を送信して、終わり。   request (err, res, body) ->     if err        msg.send 'みつからないよ〜'        robot.emit 'error', err, res        return     json = JSON.parse body      appUrl = 'https://bl.ocks.org/ynunokawa/raw/8ec5c70d089a55bcabf7e3fd5dce9e39/?lat=' + json.candidates[0].location.y + '&lng=' + json.candidates[0].location.x      msg.send appUrl if json.candidates.length > 0‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 今回作った Hubot はサンプルとして GitHub に公開しているので、よければお試しください。 GitHub - ynunokawa/hubot-spatial: Hubot to know where nearby spots with map  なお、社内やチーム内で実運用する場合は、ArcGIS for Developers の有償プランにグレードを上げる必要があるのでご注意を。 ※1 住所検索サービスは100万リクエスト/月の上限内であれば使い放題です ※2 findAddressCandidates で取得した結果の永続的な保存にはクレジットが必要です 関連リンク HUBOT  Hubot | Slack  Esri Leaflet ArcGIS for Developers ArcGIS for Developers 開発リソース集 ... View more

Esri Leaflet Tips では Leaflet.js と ArcGIS を組み合わせてできることを紹介しています。 前回は Esri Leaflet ※という ArcGIS 連携のための Leaflet プラグインを使って、ArcGIS の住所検索サービスを利用した検索フォームを実装してみました。 さて、今回はもう少し GIS (Geographic Information System：地理情報システム) 的な機能として空間フィルタリングを Leaflet.js で実装してみましょう。 空間フィルタリング (あるいは空間検索) とはその言葉の通り、ある特定のエリア内に存在するデータのみを抽出する作業です。 言葉の定義については、弊社で公開している GIS 基礎解説 (空間検索) に詳しいです。 よく使われる例としては、駅から半径 xx メートル以内の店舗を抽出して最寄りの店舗を地図上に可視化したり、地図に表示されている範囲に含まれる施設情報をテーブル表示したりといった機能が挙げられます。 空間的な処理を容易にする GeoServices API 空間フィルタリングをする際には抽出する対象となるデータが何なのかで実装方法が異なります。 Leaflet を含め、地理情報を記述するデータ フォーマットとしては GeoJSON がポピュラーですが、ArcGIS のクラウドで配信可能な GeoServices API (ArcGIS REST API とも呼ばれます) という形式を利用することで、いわゆるクエリに応じた空間判定の結果を動的に取得することが可能です。 ArcGIS のクラウド上にある GIS サーバー側で空間的な処理を行ってくれるため、複雑なエリアを対象とした空間フィルタリングでも、REST API さえ理解していれば実現できることが大きなメリットです。 また、前回の記事で紹介した住所検索やルート案内などの交通ネットワーク解析もすべて GeoServices API として配信されています。 さて、では本題に入りましょう。 L.esri.Query 今回は Esri Leaflet の L.esri.Query クラスを利用します。 L.esri.Query とは ArcGIS にホストしたデータに対して where 句での属性検索や空間領域に含まれるかどうかといった空間検索を処理するためのリクエストを発行し、検索結果として位置情報 (座標) と属性情報を GeoJSON 形式で取得することができます。 L.esri.Query にはいくつかのメソッドが用意されており、多様な属性/空間検索に対応できます。 以下に代表的なメソッドを紹介します。 メソッド 説明 within(<Geometry> geometry) 引数のジオメトリに含まれるデータの取得 contains(<Geometry> geometry) 引数のジオメトリに完全に含まれるデータの取得 intersects(<Geometry> geometry) 引数のジオメトリと交差するデータの取得 nearby(<LatLng> latlng, <Integer> distance) 引数の中心緯度経度と距離に含まれるデータの取得 where(<String> where) where 句によって引数に指定した属性条件に一致するデータの取得 returnGeometry(<Boolean> returnGeometry) 座標情報の取得の有無 (属性情報のみでよければ false) orderBy(<String> fieldName, <String> order) 引数に指定した属性フィールドをもとに結果 (配列) の順序を指定 なお、これらをメソッドチェーンでつなぐことで複数の条件を１つのクエリとして実行することも可能です。 以下の例は、ある範囲内に含まれてかつ施設種別がコンビニで ID を昇順で結果を返すという条件を定義しています。 query.within(bounds).where("type='コンビニエンスストア'").orderBy('id', 'ASC');‍‍‍‍‍‍‍‍‍‍ 空間フィルタリングをやってみる 前置きはここまでで、ここからは実際に空間フィルタリングを実装してみましょう。 わかりやすく冒頭で例として挙げていたように、「駅から半径 xx メートル以内の店舗を抽出して最寄りの施設を地図上に可視化」してみましょう。 実際のデモはこちら。 Esri Leaflet Query - JSFiddle  この機能の実装に必要なフローを整理してみます。 駅の検索 任意の地点を中心とした半径 xx メートルのバッファー生成 バッファーの座標を使ってクエリを生成 フィルタリング結果を表示 1 は前回紹介した L.esri.Geocoding.Geosearch が使えそうです。 ArcGIS の住所検索サービスは駅名や施設名のような POI にも対応しているので、住所検索フォームから駅名を入力して、検索結果をバッファー生成の中心点として利用します。 検索結果の座標値は results イベントで拾えます。 詳しくは前回の記事をご覧ください。 続いて、2 のバッファーの表示には L.Circle を使います。 // 検索結果用の空レイヤー（住所検索） var results = L.layerGroup().addTo(map); ... // 住所検索結果のバッファー表示 results.addLayer(L.circle(resultLatlng, r));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 3 と 4 のクエリ生成と検索結果の表示です。 まずクエリの初期化の際に、施設データ (今回は保育園のオープンデータを使用) の配信 URL を設定します。 今回は L.esri.Query の nearby() メソッドを使います。 このメソッドは中心座標と半径を引数に与えることで、バッファー内に含まれるデータを検索することができます。 query.run() のコールバック関数内で取得できる検索結果 (featureCollection) をあらかじめ用意しておいた L.geoJson のレイヤーに追加して地図に表示をします。 // 検索結果用の空レイヤー（空間検索） var filterResults = L.geoJson(null, {      onEachFeature: function (feature, layer) {     layer.bindPopup(feature.properties['施設名']);   } }).addTo(map); ... // 空間検索用クエリの初期化 var query = L.esri.query({   url: 'https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/%E4%BF%9D%E8%82%B2%E5%9C%9223%E5%8C%BA/FeatureServer/0' }); query.nearby(resultLatlng, r); // クエリの実行 query.run(function(error, featureCollection, response){   // クエリ結果の表示   filterResults.addData(featureCollection); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ いかがでしたでしょうか？ クラウドにデータをアップロードして配信するだけで、空間フィルタリングのようなクエリの API を利用できるのは GeoServices API (ArcGIS REST API) の強みです。 DB × サーバー API 実装の組み合わせで一から空間的な機能を作らずとも、ArcGIS にサインアップするだけで開発/運用環境として GeoServices API 配信のための GIS サーバー機能を手に入れることができます。 クエリの API をサポートしたデータ配信の詳細は以下を参考にしてください。 地図サービスの公開 - ArcGIS for Developers 開発リソース集 ホスト フィーチャ レイヤーの公開—ArcGIS Online ヘルプ | ArcGIS  開発あるいは非商用目的での公開 (個人/NPO/NGO/教育機関のみ) は無償でできます。 気軽に GeoServices API の威力をご自身の目で確認してみてください。 これからも、引き続き Esri Leaflet で実現できるおもしろい機能を紹介していきたいと思います。 ※ Esri Leaflet は弊社での技術サポートは行っておりませんが、GitHub リポジトリにてバグ・課題の報告やプルリクエストによる改善が可能です 関連リンク Leaflet.js Esri Leaflet Esri Leaflet Geocoder ArcGIS for Developers ArcGIS for Developers 開発リソース集 ... View more