Latest Contributions by TakahiroKAMIYA

①Creating Custom Widgets　 nls/ja/strings.js define({ _widgetLabel: "シェープファイルの追加 (3D)" }); ②Adding items from ArcGIS Enterprise Adding custom widgets in the application extension (AppBuilder) in ArcGIS Enterprise 10.8.1 The title: シェープファイルの追加 (3D) ③Creating a WebAppBuilder from ArcGIS Enterprise. Add a custom widget added in ② An error occurs that the app will not start. Q: Shouldn't the names ① and ② be the same? Is there a limitation in the item name or a known bug that prevents the application from launching normally when the item name registered to Portal and the _widgetLabel of nls/en/string.js are the same? ... View more

はじめに ウィジェットの基本実装の方法を学習する手段の第一歩として、Experience Builder を使用したチュートリアルの Create a starter widget のサンプルの解説を翻訳して紹介します。 ArcGIS Experience Builder を使用すると、さまざまなウィジェットを選択して、インタラクティブにアプリケーションを構築することができます。これらのアプリケーションは、エクスペリエンスと呼ばれます。ユーザーにより多くのオプションを提供したい場合は、独自のカスタム ウィジェットを作成して、ArcGIS Experience Builder に追加することができます。作成できるウィジェットの種類は、必要な機能によって異なります。マップと相互に連動するウィジェットや ArcGIS の外部で操作を実行するウィジェットなどが作成できます。ウィジェットを作成してインストールすると、ArcGIS Experience Builder は自動的にウィジェットを検出して、ユーザーが利用できるようにします。 このチュートリアルでは、新しいウィジェットの作成に必要なフォルダとファイルを作成します。これらのファイルは、他のウィジェット チュートリアルのスターターとして使用できます。   インストール ArcGIS Experience Builder インストールガイドを参照して、ArcGIS Experience Builder のダウンロードやインストール、設定を行います。   ステップ 新しいフォルダの作成 新しいウィジェットを作成するための最初のステップは、ウィジェット ファイルを配置するためのフォルダを作成することです。 1. エクスプローラーなどで ArcGIS Experience Builder を解凍したフォルダに移動します。 ArcGIS Experience Builder のフォルダ構成の詳細については、インストール ガイドを参照してください。 2. ArcGIS Experience Builder フォルダで、次のパスを展開します。 　/client/your-extensions/widgets 3. widgets フォルダに、starter-widget という名前の新しいフォルダを作成します。フォルダのパスは次のようになります。 ウィジェット フォルダにスペースを含めることはできません。ウィジェットの構築の詳細は、ウィジェットの実装を参照してください。 　/client/your-extensions/widgets/starter-widget   manifest ファイルの作成 ウィジェットのプロパティを定義するには、manifest ファイルが必要です。これらは、ArcGIS Experience Builder のロード時に読み込まれます。 manifest.json の name プロパティがウィジェットのフォルダ名と一致することが重要です。 4. starter-widget フォルダに、manifest.json という名前のファイルを作成します。ウィジェットを定義するために、以下の JSON オブジェクトを追加します。 { "name": "starter-widget", "type": "widget", "version": "1.1.0", "exbVersion": "1.1.0", "author": "Your Name", "description": "A hello world starter widget", "copyright": "", "license": "", "properties": {}, "supportedLocales": ["en"], "defaultSize": { "width": 800, "height": 500 } }   ベース クラスの実装 ウィジェットのメインロジックは widget.tsx に実装されている必要があります。このファイルは BaseWidget クラスを実装する必要があります。 5. starter-widget フォルダ内に src という新しいフォルダを作成します。このフォルダの中に、runtime という名前のフォルダを作成します。 6. runtime フォルダに widget.tsx という名前のファイルを作成します。以下のコードを追加して BaseWidget クラスを実装します。 1行目は　jimu-core モジュールから AllWidgetProps、BaseWidget、jsx をインポートしています。 ウィジェットを実装するには　BaseWidget クラスを拡張する必要があります。body では、render 関数がシンプルな div 要素としてテキストを返します。レンダー関数は、JSX（ユーザーに表示される HTML のような構文）を返す React の特別な概念です。 /** @jsx jsx */ import { AllWidgetProps, BaseWidget, jsx } from "jimu-core"; export default class Widget extends BaseWidget<AllWidgetProps<any>, any> { render() { return ( <div className="widget-starter jimu-widget"> This is your starter widget! </div> ); } } 7. ターミナルで、停止 (ctrl + c) して、npm start で /client フォルダで実行されているスクリプトを再起動します。   ウィジェットのテスト フォルダを作成してファイルを配置したら、ArcGIS Experience Builder を実行して新しいページにウィジェットを追加してテストします。ビルダーは自動的にウィジェットを検出し、使用可能な状態にします。 8. Web ブラウザでArcGIS Experience Builder を表示します。例：https://localhost:3001 9. ビルダーで [新規作成] をクリックして、新しいエクスペリエンス ページを作成します。 10. 空白のスクロール テンプレートの [作成] をクリックします。 11. ウィジェットの挿入パネルが開きます。そこから、新しい starter-widget ウィジェットをエクスペリエンスにドラッグします。 ウィジェットに無効なアイコンが含まれている可能性があります。それは問題ありません、まだ、それを作成していません。 ウィジェットが表示されない場合は、セットアップ手順に従って、/client フォルダで npm start を実行したことを再確認してください。 12. ArcGIS Experience Builder ツールバーで、[保存] をクリックしてから [プレビュー] をクリックすると、エクスペリエンスがカスタム ウィジェットと共に新しいブラウザ タブで開きます。 おめでとうございます、これで完了です。 ウィジェットを完成したウィジェットと比較してみてください。ウィジェットに機能を追加するには、次のチュートリアルをチェックしてください。   チャレンジ エクスペリエンスページにマップ ウィジェットを追加します。 13. ウィジェットの挿入ボタンをクリックして、マップ ウィジェットをエクスペリエンスにドラッグします。 14. プレビュー領域でマップ ウィジェットをクリックしてから、ウィジェットの設定パネルでマップの選択をクリックします。 15. データの選択パネルで、新しいデータの追加をクリックします。 16. データの追加モーダルで、ArcGIS Online タブを選択し、Web マップ「eb1be6543e304b4d81ed55439c412c2c」を検索します。検索結果をクリックして選択し、終了をクリックします。(この Web マップには、意図的に操作レイヤーがないことに注意してください)。 17. 選択データパネルで新しく追加された LA Parks and Trails Map をクリックして、Web マップを選択します。   他のウィジェットを探す ここに移動して、より多くのウィジェットを探索してください。   まとめ 今回は、Experience Builder を使用した Create a starter widget のサンプルを翻訳して紹介しました。次のステップとして、Get map coordinates や Add layers to a map のチュートリアルも併せて参照してください。また、その他にもカスタム ウィジェットには、多くのサンプルコードが ArcGIS Experience Builder の Sample Code や GitHub も公開していますので、こちらも併せて参照していただければと思います。   関連リンク ・Create a starter widget ・Get map coordinates ・Add layers to a map ・ArcGIS Experience Builder (Sample Code) ・arcgis-experience-builder-sdk-resources (Esri GitHub)   ... View more

はじめに 「さわって覚える ArcGIS API for Python」シリーズブログは、ArcGIS API for Python のガイド、サンプル、API リファレンスなどのリソースを最大限ご活用いただく第一歩として、ガイドの中で紹介されている主要なモジュールを中心に、実際にさわって覚えていただくようなノートブックと共に、シリーズとして紹介しています。 基本編 (GIS モジュール編) フィーチャ データ編 場所検索、ジオコーディング編 ネットワーク解析編 (前編) / ネットワーク解析編 (後編) マッピング、可視化編 ラスター編 Spatially Enabled DataFrame 編   前回の記事では、ネットワーク解析を前編、後編に分けてご紹介しました。第 5 回目は、マッピング、可視化編として、「マップ ウィジェットの使用」と「スマートマッピング」のノートブックをもとに主要な処理を解説していきます。紹介したノートブックは GitHub にも公開していますので、ご参照ください。 ArcGIS API for Python の環境構築がまだお済みでない方は、開発リソース集のインストールガイドにインストール方法を掲載しておりますので、ご参照ください。 本記事では以下の内容でマップ ウィジェットを使用したマップやレイヤーの操作方法、可視化手法としてスマートマッピングについてご紹介します。 注意：本記事は ArcGIS API for Python バージョン 2.3.x までで動作します。モジュールの変更に伴い一部機能は変更または廃止されています。バージョン 2.4.0 以降をお使いの方は What's New in 2.4.0 をご参照の上メソッドなどを置き換えてご活用ください。   1. マップ ウィジェットの使用    1-1. マップのプロパティを設定    1-2. マップに対してのレイヤーの操作 ・レイヤーの追加 ・レイヤーの一覧を確認 ・レイヤーの削除    1-3. グラフィック ・描画 ・削除 2. Webマップの保存 3. スマートマッピング   1. マップ ウィジェットの使用 GIS オブジェクトには、地理的な位置の表示や GIS コンテンツの可視化、および分析結果の表示のためのマップ ウィジェットが含まれています。マップ ウィジェットを使用するには、GIS オブジェクトの map()  メソッドを使用します。gis.map() を変数に設定し、その変数を呼び出すことでノートブックにマップ ウィジェットを表示させることができます。 以下の例では、map() メソッドのコンストラクタとして、日本と指定し、日本を中心とした範囲でマップ ウィジェットを作成しています。そのほかにもコンストラクタに設定できる引数として以下の内容があります。 引数 説明 location Optional string：マップを中央に配置する場所の住所、または、緯度経度を指定 mode Optional string：マップモードを '2D' または '3D' で指定、デフォルトは '2D' です。  注意：マップ ウィジェットは Jupyter Notebook 内のみサポートされています。   # インポート import arcgis from arcgis.gis import GIS # GIS オブジェクトを作成します。 gis = GIS("ポータルの URL", "ユーザー名", "パスワード") # マップ ウィジェットの作成 map1 = gis.map('日本') # コンストラクタに地名を指定します。 # マップの範囲を初期化して表示 map1 ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     1-1. マップのプロパティを設定 マップ ウィジェットには、ズームレベルやマップの中心、回転、ベースマップなど設定するためのプロパティが提供されています。以下ではズームレベルやマップの中心、ベースマップのプロパティを使用する例をご紹介します。   ① ズームレベル   # ズームレベルの確認 map1.zoom‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     zoom プロパティに値を指定すると、設定したズームレベルに応じてマップ ウィジェットが更新されます。   # ウィジェットの更新 (zoom プロパティにズームレベルを指定) map1.zoom = 10‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     ② 地図の中心 center プロパティは、現在表示している地図の中心座標を取得することができます。   map2 = gis.map() # デフォルトのパラメーターでマップオブジェクトを作成します。 map2 # 地図の中心座標を確認 map2.center‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     center プロパティに緯度と経度を指定することで、指定した座標を中心にマップ ウィジェットが更新されます。ズームレベルを 15 に指定して確認すると東京駅が中心になっていることが分かります。     map2.center = [35.681236, 139.767125] # ここでは、地図の中心を東京駅に指定しています。 map2.zoom = 15‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     ③ ベースマップ basemap プロパティは、現在使用しているベースマップを把握したり、新しいベースマップに更新したりできます。 マップ ウィジェットに含まれているベースマップのリストを確認するには、basemaps プロパティを呼び出します。     map3 = gis.map() # デフォルトのパラメーターでマップオブジェクトを作成します。 map3.basemaps‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ベースマップを変更するには、basemap プロパティに変更させたい目的のベースマップを指定します。例えば、以下のように 'dark-gray-vector' を指定することでベクター ベースマップに変更することができます。   map3.basemap = 'dark-gray-vector' map3‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ArcGIS API for Python 2.4.0 でマップウィジェットが更新されたため、2.4.0 以降では下記のコードでベースマップのリストの表示やベースマップを変更することができます。 バージョン 2.4.0 以降の場合   ## ベースマップ一覧の表示 map3 = gis.map() # デフォルトのパラメーターでマップオブジェクトを作成します。 map3.basemap.basemaps     ## ベースマップの変更 map3.basemap.basemap = 'dark-gray-vector'     1-2. マップに対してのレイヤー操作 マップ ウィジェットに対してレイヤーを追加してレンダリングしたり、追加したレイヤーを削除したりできます。以下では、マップ ウィジェットに対してレイヤーを操作する方法についてご紹介します。   レイヤーの追加 レイヤーの追加は、add_layer() メソッド※を使用します。add_layer() メソッドの引数に Item オブジェクト、またはレイヤー オブジェクトを指定することによりレイヤーをマップ ウィジェットに追加することができます。 ※ ArcGIS API for Python 2.4.0 で add_layer() メソッドは add() メソッドに更新されました。      詳細は What's New in 2.4.0 をご参照ください。 はじめにレイヤーを追加するためにマップ ウィジェットを作成します。   # Web マップとしてウィジェットを保存するため、ログインします。 gis = GIS("https://www.arcgis.com", "ユーザー名", "パスワード") usa_map = gis.map('USA') usa_map‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     ① Item オブジェクトによるレイヤーの追加 Item オブジェクトは、ContentManager の get() メソッドにアイテム ID を指定することで取得すことができます。   ## Item オブジェクトを取得 world_timezones_item = gis.content.get('312cebfea2624e108e234220b04460b8') ## Item オブジェクトを add_layer() メソッドに指定 usa_map.add_layer(world_timezones_item) usa_map‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   バージョン 2.4.0 以降の場合   ## Item オブジェクトを取得 world_timezones_item = gis.content.get('312cebfea2624e108e234220b04460b8') ## Item オブジェクトを add() メソッドに指定 usa_map.content.add(world_timezones_item)     ② レイヤー オブジェクトによるレイヤーの追加 マップには、FeatureLayer (フィーチャ レイヤー)、FeatureCollection (フィーチャ コレクション)、ImageryLayer (イメージ レイヤー)、MapImageLayer (マップイメージ レイヤー) などのさまざまなレイヤーオブジェクトを追加することができます。 FeatureLayer (フィーチャ レイヤー)  の具体的な使用方法については、さわって覚える ArcGIS API for Python：フィーチャ データ編 もご参照ください。 ここでは、FeatureLayer (フィーチャ レイヤー) を使用した例をご紹介します。先ほどと同様に Item オブジェクトを取得し、Item オブジェクトの layers プロパティにアクセスして、FeatureLayer (フィーチャ レイヤー)を取得します。   # Item オブジェクトを取得 world_countries_item = gis.content.get('ac80670eb213440ea5899bbf92a04998') # layers プロパティで、フィーチャ サービスで利用可能な1番目のレイヤーを取得します。 world_countries_layer = world_countries_item.layers[0] world_countries_layer‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     取得したレイヤー オブジェクトの world_countries_layer を add_layer() メソッドに指定することで、マップに追加することができます。add_layer() メソッドを呼び出すときに、レンダラーの指定に options パラメーターの dictionary (辞書) を設定することができます。以下の例では、レイヤーの透過度 (opacity) を設定しています。opacity の値の範囲は 0 から 1 で、0 は完全に透過、1 は完全に不透明になります。   # レイヤーの追加 usa_map.add_layer(world_countries_layer, options={'opacity':0.4}) usa_map‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     バージョン 2.4.0 以降の場合   # レイヤーの追加 usa_map.content.add(world_countries_layer, options={'opacity':0.4})     レイヤーの一覧を確認 layers プロパティを呼び出すことで、マップに追加されたレイヤーの一覧表を表示することができます。   # レイヤーの一覧を確認 usa_map.layers‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     バージョン 2.4.0 以降の場合   # レイヤーの一覧を確認 usa_map.content.layers     レイヤーの削除 レイヤーを削除するには、remove_layers() メソッド※を使用します。remove_layers() メソッドの layers プロパティに削除したいレイヤーのリストを指定します。削除できる有効なレイヤーのリストを取得するには、「レイヤーの一覧を確認」で、ご紹介した layers プロパティを使用します。 以下の例では、world_countries_layer レイヤーを削除する方法を示しています。レイヤーの削除に成功した場合は、True が返ってきます。     usa_map.remove_layers(layers=[world_countries_layer])‍‍‍‍‍‍‍‍‍   すべてのレイヤーを削除するには、remove_layers() メソッドの layers プロパティにレイヤーリストを指定しないで呼び出すことで削除できます。 ※ バージョン 2.4.0 以降の場合、特定のレイヤーの削除は remove() メソッド、すべてのレイヤーの削除は remove_all() メソッドを使用します。   ## 特定のレイヤーを削除 usa_map.content.remove(index) ## すべてのレイヤーを削除 usa_map.content.remove_all()     1-3. グラフィック draw() メソッド※を使用することで、マップ上にグラフィックを描画したり、スケッチしたりすることができます。 ※グラフィックの描画はバージョン 2.3.x までの機能です。2.4.0 以降は廃止されました。 描画 描画は、矩形、楕円、矢印などいくつかの図形を使用して描画することができます。 draw() メソッドに 'rectangle' を指定することで、マップに矩形を描画することができます。draw() メソッドを呼び出したあとに、マップ上でマウスの右クリックを押下することで、矩形を描画させることができます。   usa_map.draw('rectangle')‍‍‍‍‍‍‍‍‍     draw() メソッドに circle を指定することで、マップに円を描画することができます。同様にdraw() メソッドを呼び出したあとに、マップ上でマウスの右クリックを押下することで、円を描画させることができます。   usa_map.draw('circle')‍‍‍‍‍‍‍‍‍   その他、マップ上でスケッチがサポートされている図形のリストは、draw の API リファレンスをご参照ください。   削除 削除は、clear_graphics() メソッドを呼び出すことで、マップに描画されたグラフィックをすべて削除することができます。 clear_graphics() メソッドを呼び出し、マップに描画されたグラフィックをすべて削除します。   usa_map.clear_graphics()‍‍‍‍‍‍‍‍‍     2. Web マップの保存 Python API バージョン 1.3 から、マップ ウィジェットを Web マップとして保存することができます。 この処理は、ベースマップ、スマートマッピング、ポップアップ、範囲、カスタム シンボル、グラフィックなど、追加された全てのレイヤーや設定を Web マップとして保存します。 Web マップの詳細については、開発リソース集のコンセプトページの Web マップをご参照ください。 マップを保存するには、save() メソッドを使用します。このメソッドは Web マップの Item オブジェクトを新規に作成します。以下のように save() メソッドの item_properties、thumbnail、folder パラメーターを指定しています。 item_properties には、アイテムのタイトルやスニペット、タグなどを指定できます。thumbnail は、サムネイル画像のパスやURL、folder はアイテムを配置するフォルダの名前になります。item_properties の詳細については、save() メソッドをご参照ください。   webmap_properties = {'title':'USA time zones and capitols', 'snippet': 'Jupyter notebook widget saved as a web map', 'tags':['automation', 'python']} webmap_item=usa_map.save(webmap_properties, thumbnail='./webmap_thumbnail.png', folder='webmaps') webmap_item‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     Web マップは、Notebook で使用したり、各 ArcGIS が提供しているアプリ等で使用することができます。また、Python API で使用する Web マップの使用方法については、working with web maps and scenes  をご参照ください。   3. スマートマッピング スマート マッピングは、ArcGIS Online および Portal for ArcGIS (10.3.1 以降) に組み込まれた新しい機能で、美しいマップを簡単に作成することができます。スマート マッピングを使用すると、データを素早く分析し、デフォルトを設定 (シンボルの大きさや、色、表示縮尺、分類の閾値などが自動で設定) して、簡単にイラストマップを作成することができます。   このエキサイティングな機能の詳細については、ヘルプページとこのブログ記事をご覧ください。ここには、データのスタイルを変更する様々な方法についての 詳細なヘルプがあります。   ① ラインの可視化 最初の例では、streets レイヤーを使用して直線的な特徴を可視化する方法をご紹介します。マップに Item オブジェクトを追加すると、マップ ウィジェットはアイテムのデフォルトのシンボルを使用してレンダリングします。スマートマッピングを使えば、これをカスタマイズすることができます。以下の例では、ClassSizeRenderer を使用して、ライン フィーチャの太さを変化させて値の違いを強調しています。   はじめにマップ ウィジェットを作成します。   from arcgis.gis import * gis = GIS() map1 = gis.map('USA',3)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     次に USA Freeway System by esri_dm というタイトルの項目を検索して、マップに追加します。   search_result = gis.content.search('title:USA Freeway system AND owner:esri_dm', item_type = 'Feature Layer') search_result‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     検索した Item オブジェクトの search_result を変数 freeway_item に設定し、add_layer() メソッドに freeway_item を指定してレイヤーを追加します。   freeway_item = search_result[0] map1.add_layer(freeway_item) map1‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     バージョン 2.4.0 の場合   freeway_item = search_result[0] map1.content.add(freeway_item) map1‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     高速道路 (freeway) レイヤーはシンプルなシンボルを使用しています。次にフィーチャ レイヤーの利用可能なフィールドの1つで可視化してみましょう。そのためには、まずアイテムのレイヤーを FeatureLayer オブジェクトとして取得します。オブジェクトの FeatureLayer から、URL と利用可能なフィールドを見つけることができます。   # サービスで利用可能な1番目のレイヤーを使用します. freeway_feature_layer = freeway_item.layers[0] # レイヤーの URL とフィールド名を表示します. print(freeway_feature_layer.url) for field in freeway_feature_layer.properties['fields']: print(field['name'])‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     map1.add_layer(freeway_feature_layer, {"renderer":"ClassedSizeRenderer", "field_name": "DIST_MILES"})‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ # 2.4.0 以降 map1.content.add(freeway_feature_layer, {"renderer":"ClassedSizeRenderer", "field_name": "DIST_MILES"})‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ここでは DIST_MILES フィールドを使用して、レンダラーには、ClassedSizeRenderer を指定します。また、地図の範囲を変えて、違いをより分かりやすくしましょう。   # 地図の範囲をロサンゼルスに変更する map1.center = [34, -118]‍‍‍‍‍‍‍‍‍‍‍‍‍‍ map1.zoom = 10 map1‍‍‍‍‍‍‍‍‍‍‍‍‍‍   このように、長い距離の高速道路は太い線で、短い距離の高速道路は細い線で表現しています。   ② ポリゴンの可視化 エリアまたはポリゴン フィーチャは、値の違いを表すために様々な色で表示されます。 以下の例は、ClassedColorRenderer を使用して、ワシントン州の人口の違いを可視化する方法をご紹介しています。   前のサンプルで見たように、スマートマッピングの機能を使用することで、レンダラーのタイプと使用するフィールドを指定するだけでマップを作成でき、あとはベースマップに基づいて適切なカラースキーム (配色)を特定したり、カラーランプの最小値と最大値を指定したりします。   また、定義式 (definition_expression) を使ってレイヤーから表示されるフィーチャを制限する方法や、ベースマップが見えるようにレイヤーを透過度で表現する方法もご紹介していきます。   マップ ウィジェットを作成します。   map2 = gis.map('Seattle, WA', 6) map2‍‍‍‍‍‍‍‍‍‍‍‍     ポリゴンの可視化に利用するフィーチャ レイヤーは、米国の人口統計データを使用して、マップに追加します。 add_layer() の option 引数として、 type は、FeatureLayer を指定します。 url は、URLには、フィーチャ レイヤーの　REST のエンドポイントを指定します。 definition_expression には、"STATE_NAME='Washington'" と指定することで、ワシントン州のみを表示するようにフィルタリングしています。 renderer には、ClassedColorRenderer を指定します。 field_name には、POP2007 のフィールドを指定します。 opacity の透過設定には、0.7 を指定します。   map2.add_layer( { "type":"FeatureLayer", "url":"//sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", "definition_expression" : "STATE_NAME='Washington'", "renderer":"ClassedColorRenderer", "field_name":"POP2007", "opacity":0.7 } )‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ワシントン州を群別に人口で色分けして表示しています。   おわりに 最終回ではマッピング、可視化編ということで、マップ ウィジェットの使用方法からスマートマッピングによる可視化方法までの基本的な内容をご紹介しました。基本ではなく、マップ ウィジェットの高度な使用を考えている方は、ガイドの advanced-map-widget-usage をご参照ください。こちらには、3D フィーチャ レイヤーの表示、コールバック関数を使用した非同期な処理によるマップ ウィジェットの作成などをご紹介しています。 また、スマートマッピングでは自動的にクラス分類して表示しましたが、独自にクラスの分類を設定したい場合や、数値によってシンボルサイズを変更して表示したいなどがあるかと思います。そちらに関しては、ガイドの advanced-cartography-part1 や advanced-cartography-part2 を併せてご参照ください。   本シリーズは今回で最終回ですが、ArcGIS API for Python を使用する際は冒頭でご紹介したガイドやサンプル、API リファレンスなどのリソースと併せて、これまでご紹介した本シリーズブログもご活用ください。   関連リンク ArcGIS 関連ページ ArcGIS API for Python（ESRIジャパン製品ページ） ArcGIS Developers（ESRIジャパン製品ページ） ArcGIS Online（ESRIジャパン製品ページ） ArcGIS Developers 開発リソース集 ArcGIS API for Python（米国Esri ページ（英語））  シリーズブログ 関連ページ ArcGIS API for Python を使ってみよう シリーズブログ  開発リソース集 ArcGIS for API for Pythonのコンセプト インストールガイド ArcGIS for API for Pythonのための基礎環境：conda入門  関連するノートブック マップ ウィジェットの使用 スマートマッピング using-the-map-widget.ipynb (英語) smart-mapping.ipynb (英語) ... View more

はじめに ArcGIS API for JavaScript は React, Angular, Vue などの　JavaScript　のフレームワークと統合して利用することができ、その解説はAPI リファレンスの Using the ArcGIS API for JavaScript with Frameworks に記載されています。 前回は、そのフレームワークのひとつでもある Vue を使用した「Vue でカスタム ウィジェットを作成」の記事で、サンプルの解説を紹介しました。 今回は、React を使用した Using widgets with React のサンプルの解説を翻訳して紹介します。Web アプリの開発環境をお持ちでない場合でも、Using widgets with React の sandbox を利用して、該当箇所のコードを少し書換えすることでWeb ブラウザー上で動作を試すことが可能です。   サンプルの解説 このサンプルでは、React と ViewModels を使ってカスタム ウィジェットを作成する方法を紹介します。具体的には、ZoomViewModel を使用してカスタムの Zoom ボタンを作成する方法を示しています。 1. ReactをAMDモジュールとして設定 React と ReactDOM を AMD モジュールとして dojoConfig に追加します。   window.dojoConfig = { async: true, packages: [ { name: "react", location: "https://unpkg.com/react@16/umd/", main: "react.production.min" }, { name: "react-dom", location: "https://unpkg.com/react-dom@16/umd/", main: "react-dom.production.min" } ]   これで AMD モジュールとして使えるようになります。 2. シンプルなマップとビューを作成 簡単な Map を作成し、MapView もしくは SceneView に追加します。もし、ビューや基本的なマップの作成方法に慣れていない場合は、次のリソースを参照してください。 Intro to MapView Intro to SceneView API reference – View API reference – Map はじめての Web マッピングアプリケーション開発：地図表示編   var map = new Map({ basemap: "topo-vector" }); var view = new MapView({ container: "viewDiv", map: map, center: [-100.33, 25.69], zoom: 10, ui: { components: ["attribution"] // 帰属 (attribution) 以外のUIを空にします。 } });   3. React コンポーネントを作成 初期状態 (state) と定義済みのプロパティを使用して React コンポーネントを作成します。これについての詳細は React のドキュメントを参照してください。次に、React コンポーネントのアクションを ZoomViewModel のメソッドにバインドします。React コンポーネントのスタイルを View のプロパティにバインドして、現在の最小/最大ズームレベルを決定することも可能です。   class Zoom extends React.Component { state = { vm: new ZoomViewModel(), maxZoomed: false, minZoomed: false }; componentDidMount() { this.props.view.when(this.onViewLoaded); } onViewLoaded = (view) => { this.state.vm.view = view; watchUtils.init(view, "zoom", this.onZoomChange); }; onZoomChange = (value) => { this.setState({ maxZoomed: value === view.constraints.maxZoom, minZoomed: value === view.constraints.minZoom }); }; zoomIn = () => { if (!this.state.maxZoomed) { this.state.vm.zoomIn(); } }; zoomOut = () => { if (!this.state.minZoomed) { this.state.vm.zoomOut(); } }; render() { const maxstate = this.state.maxZoomed ? "button circle raised disable" : "button circle raised"; const minstate = this.state.minZoomed ? "button circle raised disable" : "button circle raised"; return ( <div className="zoom-btns"> <div className={maxstate} onClick={this.zoomIn}> <div className="center"> <i className="material-icons">add</i> </div> </div> <div className={minstate} onClick={this.zoomOut}> <div className="center"> <i className="material-icons">remove</i> </div> </div> </div> ); } };   4. React コンポーネントのレンダリング 次に、React コンポーネント用の DOM 要素を作成し、view の UI レイアウトに追加します。完了したら、React コンポーネントをレンダリングします。 完成版のサンプルコード   <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title> Using widgets with React | Sample | ArcGIS API for JavaScript 4.17 </title> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .zoom-btns { float: left; transition: opacity 0.25s ease-in-out; -moz-transition: opacity 0.25s ease-in-out; -webkit-transition: opacity 0.25s ease-in-out; } .button { display: inline-block; position: relative; margin: 5px; width: 50px; height: 50px; line-height: 50px; font-size: 2em; background-color: #fff; color: #646464; cursor: pointer; text-align: center; vertical-align: middle; } .button.circle { border-radius: 50%; } .button:hover { opacity: 0.8; color: rgba(0, 0, 0, 0.25); } .button.raised { transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.2s; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); } .button.raised:active { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); transition-delay: 0s; } .disable { opacity: 0.8; color: rgba(0, 0, 0, 0.25); } .disable:hover { opacity: 0.8; color: rgba(0, 0, 0, 0.25); } .material-icons { font-size: 1.2em; line-height: 50px; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css" /> <script> window.dojoConfig = { async: true, packages: [ { name: "react", location: "https://unpkg.com/react@16/umd/", main: "react.production.min" }, { name: "react-dom", location: "https://unpkg.com/react-dom@16/umd/", main: "react-dom.production.min" } ] }; </script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script src="https://js.arcgis.com/4.17/"></script> <script type="text/babel"> require([ "react", "react-dom", "esri/Map", "esri/views/MapView", "esri/core/watchUtils", "esri/widgets/Zoom/ZoomViewModel" ], function (React, ReactDOM, Map, MapView, watchUtils, ZoomViewModel) { const map = new Map({ basemap: "topo-vector" }); const view = new MapView({ container: "viewDiv", map: map, center: [-100.33, 25.69], zoom: 10, ui: { components: ["attribution"] // empty the UI, except for attribution } }); class Zoom extends React.Component { state = { vm: new ZoomViewModel(), maxZoomed: false, minZoomed: false }; componentDidMount() { this.props.view.when(this.onViewLoaded); } onViewLoaded = (view) => { this.state.vm.view = view; watchUtils.init(view, "zoom", this.onZoomChange); }; onZoomChange = (value) => { this.setState({ maxZoomed: value === view.constraints.maxZoom, minZoomed: value === view.constraints.minZoom }); }; zoomIn = () => { if (!this.state.maxZoomed) { this.state.vm.zoomIn(); } }; zoomOut = () => { if (!this.state.minZoomed) { this.state.vm.zoomOut(); } }; render() { const maxstate = this.state.maxZoomed ? "button circle raised disable" : "button circle raised"; const minstate = this.state.minZoomed ? "button circle raised disable" : "button circle raised"; return ( <div className="zoom-btns"> <div className={maxstate} onClick={this.zoomIn}> <div className="center"> <i className="material-icons">add</i> </div> </div> <div className={minstate} onClick={this.zoomOut}> <div className="center"> <i className="material-icons">remove</i> </div> </div> </div> ); } } const node = document.createElement("div"); view.ui.add(node, "bottom-left"); ReactDOM.render(<Zoom view={view} />, node); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>     まとめ 今回は、React を使用した Using widgets with React のサンプルを翻訳して紹介しました。 ArcGIS API for JavaScript で React を使用したガイドは、Using the ArcGIS API for JavaScript with React でも紹介しています。また、EsriのDeveloper Summit（動画英語：ArcGIS API for Javascript ：Using React and Webpack）でも紹介していますので、興味のある方は参照していただければと思います。 その他 React は、ArcGIS Experience Builder の Developer Edition (開発者向けエディション) で使用しています。Developer Edition (開発者向けエディション)でカスタム ウィジェットを作成する際に React を使用しています。 ArcGIS Experience Builder の Developer Edition (開発者向けエディション) の国内サポートは、11月末を予定しています。 これを機会に React を使用した開発をお試しください。   関連リンク はじめての Web マッピングアプリケーション開発：地図表示編 Using the ArcGIS API for JavaScript with Frameworks Custom widgets with Vue Vue でカスタム ウィジェットを作成 Using widgets with React React ... View more

はじめに ArcGIS Runtime SDK では バージョン 100.6 から AR (拡張現実)アプリの開発を実現するために AR ツールキットを提供しています。AR ツールキットは、オープンソースのツールキットとして、「Android/iOS/.NET (Xamarin)」 の３つのプラットフォームをサポートし、GitHub で公開されています。ArcGIS Runtime SDK の SceneView と AR ツールキットを使用することで AR アプリを開発することができます。 ※ オープンソースのツールキットは、AR だけではなく、地図アプリによく使用されるスケールバー、凡例、レイヤー リスト、属性テーブル、計測ツールなどの機能が UI 込みで提供されているため、地図アプリ開発を簡素化できます。ツールキットはサポート対象外ではありますが、オープンソースのためコードをダウンロード・改修してご使用することが可能です。 AR ツールキットで対応している端末は、iOS と Android になります。iOS は、ARKit を使用しているため、ARKit に対応している端末が必要になります。また、対応している iOS のバージョンも iOS 12 以上になります。詳細については、システム要件をご参照ください。 Android では、AR Core を使用しており、端末は ARCore をサポートしている必要があります。詳細については、Google の ARCore supported devices をご参照ください。また、対応している Android のバージョンについては、システム要件をご参照ください。 今回は、AR が提供するユースケースと AR ツールキットを使用したサンプルアプリケーションのビルドとデプロイまでの手順をご紹介していきたいと思います。ビルドとデプロイについて、開発環境には Visual Studio for Mac を使用し、SDK には ArcGIS Runtime SDK for .NET (Xamarin.Forms) を使用した例をご紹介します。   AR が提供するユースケース ArcGIS Runtime SDK の AR では、Flyover、Tabletop、World-scale の 3 つのユースケースを実現することができます。 Flyover： 仮想世界の窓としてデバイスにシーンを表示し、表示したシーン内を移動することができます。表示されるシーンの範囲はデバイスの位置と向きに応じて変わります。また、Flyover では、対象のエリア上に起動時の座標を設定することができます。ユーザーは画面をタッチしてシーンの表示範囲を変更したり、デバイスを移動・回転させて仮想世界を移動することができます。 Tabletop： テーブルの上など、現実世界の面に3次元模型のような比較的小さなスケールのシーンを可視化します。シーンのコンテンツは現実世界のカメラの映像に重ね合わせられます。そのため、ユーザーはテーブルの周りを移動して、さまざまな角度からシーンを見ることができます。この機能は遠隔地を三次元で参照したり、現場の立地計画、場所選定、リモートでのアセスメントに役立ちます。 World-scale： 現実世界の座標にシーン内の仮想的なデータとカメラが映す現実のデータがシーン内に表示されます。シーンが認識する3次元のデータの位置関係とカメラの被写体の位置関係をマッチさせることによって、現実世界の位置関係にマッチしたシーンを投影することができます。この機能はオフィスや現場など、現実世界であればどこでもリアルな地理データを可視化するのに最適です。また、固定資産管理、資源管理、ロケーションインテリジェンスの活用にも当該機能が役に立ちます。   AR ツールキットのサンプルアプリケーションのビルドとデプロイ AR ツールキットのサンプルアプリケーションでは、Flyover、Tabletop、World-scale の３つのユースケースのサンプルが提供されています。AR アプリの場合はカメラを使用するため、シミュレーターでは確認することができないため、実機で確認する必要があります。今回は、iOS、Android で実機を使用したサンプルアプリケーショのビルドとデプロイまでの手順についてご紹介していきます。   今回使用した開発環境や SDK のバージョンは以下のとおりです。 Visual Studio for Mac 8.75 Xcode　7 Xamarin.Forms 4.8.0.1364 ArcGIS Runtime SDK for .NET 100.9 iPhone 11：iOS 13.6 Android：バージョン 9（端末：ZenFone 6） 1. Visual Studio for Mac によるプロジェクトの起動 GitHub からソースファイルを任意の場所にクローンして、Visual Studio for Mac で「arcgis-toolkit-dotnet/src/Esri.ArcGISRuntime.ARToolkit.sln」を選択して開きます。 起動後、パッケージの復元が始まります。必要に応じてパッケージのインストールが求められます。 2. iOS 実機でのビルドとデプロイ（事前準備） iOS で iPhone や iPad の実機にデプロイする場合は、プロビジョニングプロファイルというものが必要になってきます。これは、Visual Studio for Mac では作成できないため、Xcode を使って作成する必要があります。まず、Mac 本体にデプロイ対象の端末を接続しておきます。そして、Xcode を起動し、Create a new Xcode project を選択して新規プロジェクトを立ち上げます。Single View Application を選択して、Product Name には任意の名前 (ここでは、ARToolkitSampleApp と入力）を入力して、プロジェクトを作成します。 次に Xcode と Visual Studio for Mac で作成したバンドル識別子を合わせます。Xcode のバンドル識別子に対応するプロビジョニングプロファイルを実機に配置しますので、Visual Studio for Mac で異なるバンドル識別子を設定している状態ですと信頼されている状態にならず実機でデバックすることができません。Visual Studio for Mac のバンドル識別子 (com.esri.ARToolkit.Forms) を Xcode の Bundle Identifier に入力します。                                                                     Visual Studio for Mac （バンドル識別子）                                                                                    Xcode (Bundle Identifier)   Xcode でのプロジェクトを選択して Signing & Capabilities のカテゴリで、プロビジョニングプロファイルが作成されているか確認することができます。プロビジョニングプロファイルが正常に作成された状態で端末に対してビルドが成功すれば問題はありません。   3. iOS 実機でのビルドとデプロイ（本番） 事前準備が完了したらVisual Studio for Mac から実機 (iPhone 11) に対してビルドとデプロイを行います。 AR ツールキットでは、ソリューションとして Xamarin.Forms、Xamarin.iOS、Xamain.Andorid が提供されています。今回は、Xamarin.Forms を使用して、iOS と Android のビルドとデプロイを行います。はじめに iOS をターゲットとするため、ARToolkit.Samples.Forms.iOS を選択します。そして、Debug | iPhone を選択して、接続している端末を選択します。 そして、次に Visual Studio for Mac で iOS バンドル署名を設定します。ARToolkit.Samples.Forms.iOS を選択して、左クリックボタンを押下し、メニューからオプションを選択します。 プロジェクト オプションが表示されますので、iOS バンドル署名を選択します。iOS バンドル署名において、署名とプロビジョニング プロファイルは Xcode で設定した内容を選択して、OK をクリックします。 ここまで準備が完了したら端末に対してビルドを開始します。▶ボタンをクリックすることでビルドが始まります。 アプリの配置が終了すると、以下のような画面が立ち上がります。これでデプロイは完了です。   4. Android 実機でのビルドとデプロイ（本番） 次に Android に対してビルドとデプロイを行います。Mac 本体に Android 端末を接続します。そして、ソリューションの ARToolkit.Samples.Forms.Android を選択します。そして、Debug を選択して、接続している端末を選択します。Android では端末が対応しているバージョンであれば接続することでビルドからデプロイまですぐに行うことができます。 ▶ボタンをクリックすることでビルドが始まります。 iOS と同様にビルドに成功すると端末に対しての配置が始まります。 アプリの配置が終了すると、以下のような画面が立ち上がります。これでデプロイは完了です。   AR ツールキットのサンプルアプリケーション サンプルアプリケーションでは、以下の 4 つの機能を提供しており、該当のソースファイルは、ARToolkit.Samples.Forms の Samles にそれぞれございます。   Continuous GPS Full-scale AR：背景地図とフィーチャ サービスを表示し、デバイスの GPS を使用して、継続的に現在地に原点をスナップするサンプルです。 AR で表示されるデータは、非常に高精度の GPS と優れたコンパスの位置合わせで実現することができます。以下の動画は、こちらのサンプルを使用した例になります。 ※上記は ArcGIS Runtime SDK for .NET ツールキットを利用して、Xamarin.Forms で開発されたアプリケーションを iOS をターゲットにビルドしたものを使用しております。 ※動画は iOS 端末にて撮影されたものです。   Earth：地球全体を端末上に浮かび上がらせ、操作することができるサンプルです。   Camera Tracking Disabled：ARCore/ARKit に依存せず、デバイスのモーションセンサーに基づいて３D 地形を見るための機能のみを備えたサンプルです。   Tap-to-place 3D Model：端末の画面をダブルタップして、そのタップした画面にシーンを配置することができる Tabletop の体験を実現しているサンプルです。 データは、Esri が用意しているものを使用していますが、例えば、Continuous GPS Full-scale AR では、フィーチャ サービスを目的のデータに置き換えることで、そのデータは AR アプリで参照することができます。各サンプルアプリケーションで使用されている API などの詳細については、ArcGIS Runtime SDK for .NET の Display scenes in augmented reality や GitHub の Augmented Reality View をご参照ください。   まとめ 今回は、AR ツールキットの紹介と ArcGIS Runtime SDK for .NET (Xamarin.Forms) を使用して AR ツールキットでサンプルアプリケーションのビルドとデプロイまでの手順をご紹介しました。Xamarin.Forms を利用することで、共通のソースファイルで、Android と iOS 版の AR  アプリを開発することが可能です。また、AR ツールキットで紹介されているサンプルアプリケーションは、Android と iOS 版でもそれぞれ同じものが提供されていますので、ご利用することが可能です。詳細については、ArcGIS Runtime SDK for Android と ArcGIS Runtime SDK for iOS の Display scenes in augmented reality をご参照ください。 ぜひ、これを機会に AR アプリの開発をはじめるきっかけとなれば幸いです。   関連リンク ArcGIS ブログ： Power mobile augmented reality experiences with ArcGIS Runtime!（英語） ArcGIS Runtime Toolkit for .NET ArcGIS 関連ページ ArcGIS Runtime SDK for .NET (ESRIジャパン製品ページ) ArcGIS Runtime SDK for iOS (ESRIジャパン製品ページ) ArcGIS Runtime SDK for Android (ESRIジャパン製品ページ) ArcGIS Runtime SDK for .NET (米国Esriページ (英語) ) ArcGIS Runtime SDK for iOS (米国Esriページ (英語) ) ArcGIS Runtime SDK for Android (米国Esriページ (英語) ) ARKit を使って 3D モデルをARで表示してみた。 ArcGIS Runtime SDK バージョン 100.6.0 をリリースしました。 ... View more

When adding a new polygon, double-click to complete the process, but an extra vertex will be added at this time. In the case of a triangle, it will look like this Click twice to create two dots, and double-click to create four dots at the end. Click three times to make three dots, and then double-click to make five dots. A double-click minute is added. Chrome system seems to be NG. https://developers.arcgis.com/javascript/3/samples/ed_feature_creation/ For some reason, some PCs reproduce and others do not. Does this have something to do with the graphics board? The API uses the following https://developers.arcgis.com/javascript/3/jsapi/draw-amd.html ... View more

  はじめに 「ArcGIS Runtime SDK で実現できるオフラインワークフロー」シリーズブログでは、オフラインアプリの開発を始める方の第一歩として、ArcGIS Runtime で実現できるオフラインワークフロー、データの準備、ポイントとなるコードについてご紹介しています。今回が最後のシリーズとなります 「～サービス パターン～」 についてご紹介します。 ArcGIS Runtime SDK で実現できるオフラインワークフロー ～概要編～ ArcGIS Runtime SDK で実現できるオフラインワークフロー ～デスクトップ パターン～ ArcGIS Runtime SDKで実現できるオフラインワークフロー ～サービス パターン～ 前回の記事では、デスクトップ パターンを実現するために必要なデータの作成方法とデータを読み込むためのコードについてご紹介しました。シリーズ第 3 回目となる今回は、サービス パターンをご紹介します。サービス パターンは、オンデマンドとプレプランの 2 つ方法によって、オフライン環境で利用できる地図データを作成することができます。 今回は、オンデマンドとプレプランを活用する第一歩として、Web マップを使用して、地図データをダウンロードして、オフライン マップを扱うまでのコードをご紹介していきます。   オンデマンドの実現に必要な手順 データ準備 ① Web マップ 今回は、昨年度開催された「ArcGIS 開発者のための最新アプリ開発塾2019」で使用した街路樹の Web マップを使用します。 Web マップを作成する手順については、ArcGIS for Developers 開発リソース集の Web マップの作成をご参照ください。   ② レイヤーの設定 Webマップは、オフラインで地図が使用できるように幾つかの設定を有効にする必要があります。例えば、オフライン マップでデータをダウンロードし、ダウンロードしたデータをフィーチャ サービスとの同期を有効化にするなどの設定があります。 オフラインで使用するための設定については以下をご参照ください。 ArcGIS Enterprise の ArcGIS Server ドキュメント「オフラインで使用するデータの準備」 ArcGIS Online 「ホスト フィーチャ レイヤーの管理」     コードのポイント Web マップを参照して、オフライン マップを扱うまでのステップをコードでご紹介します。 ① オフライン マップのタスク作成とパラメーターの設定 ② オフライン マップを生成するためのジョブの作成と実行   ① オンライン マップのタスク作成とパラメーターの設定 オンライン マップまたは、ポータルアイテムからオフライン マップのタスク (OfflineMapTask) を作成します。作成には、OfflineMapTask クラスの CreateAsync メソッドを使用します。 パラメーターの設定は、OfflineMapTask クラス の CreateDefaultGenerateOfflineMapParametersAsync メソッドにカバーする目的のエリアを指定して デフォルトのパラメーター (GenerateOfflineMapParameters)  を作成します。   デフォルト以外に以下のパラメーターを設定することができます。 AttachmentSyncDirection・・・・オフライン マップに添付ファイルを含めるかの設定 MaxScale・・・・オフライン マップの最大スケールの設定 MinScale・・・・オフライン マップの最小スケールの設定 その他のパラメーターについては、詳細パラメーターをご参照ください。   // 指定したポータルのアイテム ID から PortalItem クラスのインスタンスを作成 PortalItem webmapItem = await PortalItem.CreateAsync(portal, "acc027394bc84c2fb04d1ed317aac674"); // Map のプロパティに webmapItem を指定して、Map クラスのインスタンスを作成 Map onlineMap = new Map(webmapItem); // 上記で作成した onlineMap もしくは、webmapItem を CreateAsync メソッドに指定 OfflineMapTask takeMapOfflineTask = await OfflineMapTask.CreateAsync(onlineMap); // or webmapItem を指定した場合 OfflineMapTask takeMapOfflineTask = await OfflineMapTask.CreateAsync(webmapItem); // カバーするマップ エリアを指定して、デフォルトのパラメーターを作成します。 Envelope areaOfInterest = GetAreaOfInterest(); GenerateOfflineMapParameters parameters = await takeMapOfflineTask.CreateDefaultGenerateOfflineMapParametersAsync(areaOfInterest); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ② オンライン マップを生成するためのジョブの作成と実行 オフライン マップを生成してダウンロードするには、OfflineMapTask クラスの GenerateOfflineMap メソッドに GenerateOfflineMapParameters とマップを保存するためのデバイス上のディレクトリを指定して、GenerateOfflineMapJob を作成します。オフライン マップを作成してデバイスにダウンロードするには、GenerateOfflineMapJob を実行します。ジョブが完了すると、GenerateOfflineMapResult のインスタンスを返します。GenerateOfflineMapResult の OfflineMap プロパティを MapView の Map プロパティに指定することでオフライン マップを表示することができます。 // パラメーターとマップを保存するためのパスを指定して、オフライン マップを生成するジョブを作成します。 GenerateOfflineMapJob offlineMapJob = takeMapOfflineTask.GenerateOfflineMap(parameters, pathToOutputPackage); // ジョブ完了後、オフライン マップを作成してダウンロードを開始します。 GenerateOfflineMapResult offlineMapResult = await offlineMapJob.GetResultAsync(); if (!offlineMapResult.HasErrors) { // ジョブは正常に完了し、すべてのコンテンツが作成されました。 Debug.WriteLine("Map " + offlineMapResult.MobileMapPackage.Item.Title + " was saved to " + offlineMapResult.MobileMapPackage.Path); // オフライン マップを MapView に指定して表示します。 MyMapView.Map = offlineMapResult.OfflineMap; }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   以下は、Esri が公開しているサンプルソース (Generate offline map) を使用して実行したアプリの例となります。 上記のコードを使用して実行したイメージとなります。   1.　オフラインで使用するマップ エリアを指定してダウンロード   2．指定した範囲のマップがダウンロードされ、ダウンロードしたマップがオフライン マップとして使用できます。   オンデマンドのワークフローによって作成されたオフライン マップは、モバイルマップ パッケージが作成されます。作成されたモバイルマップ パッケージは、ディレクトリを指定することでオフライン マップを参照することができます。次のステップとして、このモバイルマップ パッケージを参照して、必要に応じてデータを編集したり、接続がオンラインになったらオンライン サービスと同期して、オンライン マップを更新したりできます。 詳細については、ArcGIS 開発者のための最新アプリ開発塾 2020 > ArcGIS Runtime SDK for .NET を使用して現地調査アプリを開発してみよう！ > Step3：アップロード機能の実装をご参照ください。   プレプランの実現に必要な手順 データ準備 ① Web マップ プレプランでは、モバイル マップパッケージを事前に作成して、現場作業員が必要なときにダウンロードできるようにします。これを行うには、Web マップにプレプラン エリアを作成します。Web マップは、オンデマンドで使用した街路樹の Web マップを使用します。   ② プレプラン エリアの作成 プレプラン エリアの作成は、ArcGIS Online または、ArcGIS Enterprise を使用して手動で作成する方法と Python スクリプト、ArcGIS REST API を使用してプログラミングで作成する方法があります。 ※ Web マップを使用してプレプラン エリアを作成する場合に、オフラインで使用できるように有効になっていることを確認する必要があります。 ※ ArcGIS Enterprise を使用して事前に計画されたプレプラン エリアを作成する場合は、ArcGIS Enterprise 10.6.1 以降を使用する必要があります。   ● ArcGIS Online によるプレプラン エリアの作成例 ArcGIS Online では、Web マップの設定で、マップ エリアのカテゴリの「エリアの管理」で作成することができます。   ArcGIS Online または、ArcGIS Enterprise を使用して作成する方法については以下をご参照ください。 ArcGIS Online を使用してWeb マップをオフラインにする ArcGIS Enterprise を使用して Web マップをオフラインにする Python スクリプト（ArcGIS API for Python）や ArcGIS REST API を使用して作成する方法については、「マップ エリアの作成 (プレプラン)」をご参照ください。   コードのポイント Web マップを参照して、オフライン マップを扱うまでのステップをコードでご紹介します。   ① マップ エリアの指定とパラメーターの設定 ② プレプランを行うためのジョブの作成と実行   ① マップ エリアの選択とパラメーターの設定 OfflineMapTask クラスの CreateAsync メソッドにマップ (Web マップから作成) または Web マップのポータル アイテムのいずれかを指定して、オフライン マップタスクの (OfflineMapTask) を作成します。OfflineMapTask の GetPreplannedMapAreasAsync メソッドを使用して、Web マップからマップ エリアのリストを取得して選択します。 パラメーターの設定は、DownloadPreplannedOfflineMapParameters クラスを使用してパラメーターを作成します。デフォルトのパラメーター設定には、選択したマップ エリアを OfflineMapTask の CreateDefaultDownloadPreplannedOfflineMapParametersAsync メソッドに指定します。   デフォルト以外に以下のパラメーターを設定することができます。 ContinueOnErrors・・・・オフラインに失敗した場合に DownloadPreplannedOfflineMapJob の実行を継続するかの設定 IncludeBasemap・・・・ベースマップをオフライン マップに含めるかの設定 その他については、「高度なパラメーター」をご参照ください。   // ID を使用して Web マップのアイテムを取得します。 PortalItem webmapItem = await PortalItem.CreateAsync(portal, "acc027394bc84c2fb04d1ed317aac674"); // Web マップのアイテムからマップを作成します。 Map onlineMap = new Map(webmapItem); // マップから OfflineMapTask を作成します。 OfflineMapTask takeMapOfflineTask = await OfflineMapTask.CreateAsync(onlineMap); // ... または、Web マップのポータルアイテムから作成します。 OfflineMapTask takeMapOfflineTask = await OfflineMapTask.CreateAsync(webmapItem); // 利用可能なマップ エリアの一覧を取得します。 IReadOnlyList<PreplannedMapArea> preplannedMapAreaList = await takeMapOfflineTask.GetPreplannedMapAreasAsync(); // すべてのマップ エリア foreach (PreplannedMapArea mapArea in preplannedMapAreaList) { // マップ エリアをロードします。 await mapArea.LoadAsync(); // このエリアのジオメトリを取得します。 Geometry aoi = mapArea.AreaOfInterest; // このエリアのポータルアイテムを取得し、タイトルとサムネイル画像を読み込みます。 PortalItem preplannedMapItem = mapArea.PortalItem; string mapTitle = preplannedMapItem.Title; RuntimeImage areaThumbnail = preplannedMapItem.Thumbnail; } // デフォルトのパラメーターを取得します（マップ エリアを指定します）。 DownloadPreplannedOfflineMapParameters defaultDownloadParams = await takeMapOfflineTask.CreateDefaultDownloadPreplannedOfflineMapParametersAsync(downtownMapArea);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ② プレプランを行うためのジョブを作成と実行 OfflineMapTask 上で DownloadPreplannedOfflineMap メソッドを呼び出して、マップをダウンロードするために DownloadPreplannedOfflineMapJob ジョブを作成します。DownloadPreplannedOfflineMap メソッドには、「① マップ エリアの選択とパラメーターの設定」で設定したパラメーターとダウンロードして保存するためのディレクトリのパスを指定します。マップ エリアをデバイスにダウンロードするには、DownloadPreplannedOfflineMapJob ジョブを実行します。 ジョブが完了すると、DownloadPreplannedOfflineMapResult のインスタンスを返します。 DownloadPreplannedOfflineMapResult の OfflineMap プロパティの Map プロパティに指定することでオフライン マップを表示することができます。   // parameters と pathToOutputPackage を指定します。 DownloadPreplannedOfflineMapJob preplannedMapJob = takeMapOfflineTask.DownloadPreplannedOfflineMap(parameters, pathToOutputPackage); // ジョブ完了後、オフライン マップを生成してダウンロードします。 DownloadPreplannedOfflineMapResult preplannedMapResult = await preplannedMapJob.GetResultAsync(); if (!preplannedMapResult.HasErrors) { // ジョブが正常に完了し、すべてのコンテンツが生成されます。 Debug.WriteLine("Map " + preplannedMapResult.MobileMapPackage.Item.Title + " was saved to " + preplannedMapResult.MobileMapPackage.Path); // オフライン マップを MapView で表示します。 MyMapView.Map = preplannedMapResult.OfflineMap; }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   以下は、Esri が公開しているサンプルソース (Download preplanned map area) を使用して実行したアプリの例になります。 上記のコードを使用して実行したイメージとなります。   1. オフラインで使用するマップを選択   2. 選択したマップのダウンロード   3. 選択したマップがダウンロードされ、ダウンロードしたマップがオフライン マップとして使用できます。   プレプランもオンデマンドと同様にオフライン マップは、モバイルマップ パッケージが作成されます。作成されたモバイルマップ パッケージは、ディレクトリを指定することでオフライン マップを参照することができます。次のステップとして、このモバイルマップ パッケージを参照して、必要に応じてデータを編集したり、接続がオンラインになったらオンライン サービスと同期して、オンライン マップを更新したりできます。 詳細については、ArcGIS 開発者のための最新アプリ開発塾 2020 > ArcGIS Runtime SDK for .NET を使用して現地調査アプリを開発してみよう！ > Step3：アップロード機能の実装をご参照ください。   まとめ 今回は、ArcGIS Runtime SDK を使って実現できるオフライン ワークフローのサービス パターンについてご紹介しました。サービス パターンでは、オンデマンドとプレプランの2パターンがあり、オンデマンドでは、必要な時に必要な範囲のエリアを指定してデータをダウンロードし、プレプランでは、マップの作成者が事前にオフラインで必要なエリアのデータをパッケージ化することで、ダウンロード時間を短縮することができます。 今回は、オンデマンドとプレプランを活用して Web マップを参照して地図データをダウンロードして、オフライン マップを扱うところまでをご紹介しました。 次のステップとして、このオフライン マップを編集したり、ネットワークに再接続した際に編集内容を同期したりすることが必要になってくるかと思います。 今回は詳細にはご紹介することはできませんでしたが、オフライン マップの編集や同期については、2020年8月25日に開催した ArcGIS 開発者のための最新アプリ開発塾の「ArcGIS プラットフォームを活用した現地調査アプリ開発ハンズオン 」で紹介しましたので、ご興味がございましたら参照していただければと思います。 これまで３回に渡って ArcGIS Runtime で実現できるオフラインワークフローにご紹介してきました。 第1回目は概要編として、ArcGIS Runtime SDK を使って実現できるオフライン ワークフローについてご紹介しました。また、第 2 回目のデスクトップ パターンでは、ArcGIS Pro によるモバイル マップ パッケージの使用方法やローカルデータとしてシェープファイルなどの使用方法についてご紹介しました。そして、第 3 回目では、サービスパターンをご紹介しました。 今回でシリーズは最後となりますが、ぜひ、オフライン マップの開発をはじめるきっかけとなれば幸いです。   関連リンク ArcGIS 関連ページ ArcGIS Runtime SDK for .NET (ESRIジャパン製品ページ) ArcGIS for Developers (ESRIジャパン製品ページ) ArcGIS Online (ESRIジャパン製品ページ) ArcGIS Enterprise (ESRIジャパン製品ページ) ArcGIS for Developer 開発リソース集 ArcGIS Runtime SDK for .NET (米国Esriページ (英語) ) シリーズブログ関連ページ デスクトップ地図アプリ開発 シリーズ ... View more

はじめに 前回本ブログでご紹介した開発リソース集ですが、今回あらたにコア コンセプトのページを追加しました。 また、新しいデザインにも変更してさらに見やすくなりました。 開発リソース集とは ArcGIS の API / SDK を利用して開発する方向けに、開発をよりスムーズにスタートしていただけるよう、ArcGIS がもつコンセプトの説明、開発環境の構築から簡単なアプリケーション作成までのガイド、開発に役立つ 技術 Tips 集を紹介しています。 コア コンセプトページとは ArcGIS とは何か？ArcGIS プラットフォームの理解や、それぞれの API / SDK でできること、データの扱いなど、開発を始める前に知っておきたい情報をまとめています。 出典は、ArcGIS for Developers (ArcGIS Core Concepts) で、以下の内容について日本語で解説しています。 ArcGIS とは API、SDK、アプリ セキュリティと認証 レイヤー Web マップ Web シーン REST API   各内容について、開発を行う上で参考となる情報を掲載しておりますので、ぜひ、ご参照いただければと思います。 今後の予定 今後も既存コンテンツの見直しを行い、各 API / SDK のチュートリアルなどコンテンツの拡充を行っていき、よりよい開発リソース集の提供を目指してまいります。 ArcGIS で開発を行う際は是非開発リソース集をご活用ください！ 関連リンク ArcGIS 関連ページ ArcGIS for Developers（ESRIジャパン製品ページ） ArcGIS for Developers (米国 Esri) ArcGIS for Developers (core-concepts)   開発リソース集 ArcGIS for Developers 開発リソース集 ArcGIS for Developers 開発リソース集 (コアコンセプト) ... View more

1. はじめに この記事は、[続編 はじめてのWeb マッピングアプリケーション開発] のシリーズ記事として、はじめて地図アプリの開発を行う開発者の方に向けて、ウィジェットを使ったアプリ開発についてシリーズで紹介しています。 続編 はじめてのWeb マッピングアプリケーション開発：ウィジェット編 続編 はじめての Web マッピングアプリケーション開発：印刷ウィジェット編 続編 はじめての Web マッピングアプリケーション開発：編集ウィジェット編 続編 はじめての Web マッピングアプリケーション開発：ナビゲーション ウィジェット編 続編 はじめてのWeb マッピングアプリケーション開発：OAuth 2.0編 前回はウィジェット編としてどんな GIS アプリケーションでも使えるような標準的なウィジェットを紹介しましたが、今回からはシナリオ ベースで使えるウィジェットを紹介していきます。今回はユーザーからのニーズが高い、印刷機能を実装する上で、便利な機能である印刷ウィジェットをご紹介したいと思います。 これまでの記事と同様に、ソースコードは ESRIジャパンの GitHub で公開していますので、ご覧ください。Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。   2. 印刷ウィジェット とは 印刷ウィジェットとは、前回のウィジェット編の記事でご紹介した、ArcGIS API for JavaScript が提供する UI コンポーネント群の一つです。 GIS アプリケーションではパンやズーム イン・アウトで柔軟に地図の見え方を変えることができることが紙地図と異なる大きな特徴の一つですが、ユーザーが現在見ている状態の地図画面をそのまま出力して、別のユーザーに見せたいときもあります。そんなときに使うのが印刷機能です。 ArcGIS API for JavaScript で提供されている印刷ウィジェットを使えば、数行のコードで印刷機能をGIS アプリケーションに実装することができ、さまざまなファイル形式・レイアウトで地図を印刷することができます。   対応ファイル形式（ArcGIS Online印刷サービスを使う場合）： PDF (georeferenced) PNG32 PNG8 JPG GIF EPS SVG SVGZ   対応レイアウト（ArcGIS Online の印刷サービスを使う場合*）： A3 横型 A3 縦型 A4 横型 A4 縦型 レター ANSI A 横型 レター ANSI A 縦型 タブロイド ANSI B 横型 タブロイド ANSI B 縦型 MAP_ONLY *ArcGIS Enterprise を使ってカスタム印刷サービスを公開すれば、独自のレイアウトに対応させることができます。   2-1. ウィジェットの実装 印刷ウィジェットの実装は前回の記事でご紹介した方法とほとんど変わりません。    ① Print モジュールの追加 require ステートメントで Print を追加します。 require([ "esri/Map", "esri/views/MapView", "esri/widgets/Print", ], function(Map, MapView, Print) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ② MapとViewの作成 Map と View の作成については、「はじめての-web-マッピングアプリケーション開発-地図表示編」のステップ3、4をご参照ください。 記事ではなくコードを参照したい方は、ESRI ジャパンの GitHub の前回の記事のコード をご参照ください。   ③ Print ウィジェットの作成 require で 追加した Print モジュールを使用して、Print クラスから Print オブジェクトを作成します。 Print オブジェクト の view プロパティに View を設定します。   printServiceUrl プロパティには ArcGIS Online が提供する印刷サービスを指定します。このプロパティに ArcGIS Enterprise がホストする印刷サービスを指定することで、ユーザーが独自にカスタマイズしたレイアウトが使えるようになります。   GIS アプリケーション上に Print ウィジェットを組み込むために、View に追加します。ここでは、View の右上隅にウィジェットを追加しました。 /************************************************************ * 省略 ************************************************************/ // Print ウィジェット var print = new Print({ view: view, printServiceUrl: "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task" }); view.ui.add(print, "top-right");‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   3. 印刷ウィジェットの使い方と機能 印刷ウィジェットでは、レイアウトを設定して地図を印刷する方法と、地図のみを印刷する方法が用意されています。 レイアウトを設定する場合は、ページ設定（例：A3 横型など）とファイル形式、高度なオプションとして、作成者や著作権、縮尺、DPI の設定ができます。 マップのみを印刷する場合は、ファイル形式、表示幅や高さ、高度なオプションとして縮尺や DPI の設定ができます。   4. Expand ウィジェット ArcGIS API for JavaScript は、ウィジェットを使用することで、非常に簡単に GIS アプリケーションに機能を追加することができますが、複数のウィジェットを配置すると、メインの地図の大部分がウィジェットと重なってしまい、以下の例のように UI のユーザービリティが損なわれます。   例：Print ウィジェットと BasemapGallery ウィジェットを同時表示   Expand モジュールを使うことで、ウィジェットをトグルで展開・折り畳みすることができるようになり、必要な時だけウィジェットを画面に展開することができます。   4-1.  Expand の実装 前回の記事でご紹介した、Search、BasemapGallery ウィジェットと、本記事でご紹介した印刷ウィジェットを、Expand モジュールを使って実装します。   ① Expandモジュールの追加 require ステートメントでを Expand 追加します。 require([ "esri/Map", "esri/views/MapView", "esri/widgets/Search", "esri/widgets/BasemapGallery", "esri/widgets/Print", "esri/widgets/Expand", ], function(Map, MapView, Search, BasemapGallery, Print, Expand) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ② それぞれのウィジェットの作成 /********************************************************** * 省略 **********************************************************/ // Search ウィジェット var search = new Search({ view: view }); // BasemapGallery ウィジェット var basemapGallery = new BasemapGallery({ view: view, source: { portal: { url: "https://www.arcgis.com", useVectorBasemaps: true // Load vector tile basemaps } } }); // Print ウィジェット var print = new Print({ view: view, printServiceUrl: "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task" });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ③ Expand インスタンスの作成 下記のように Expand インスタンスの作成の際のコンストラクターのオブジェクトの content プロパティに作成したウィジェットを追加することで、ウィジェットをトグルで展開・折り畳むことが可能になります。 /*********************************************************** * 省略 ***********************************************************/ var expandSearch = new Expand({ view: view, content: search }) view.ui.add(expandSearch, "top-right")‍‍‍‍‍‍‍‍‍;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   今回は複数のウィジェットの Expand インスタンスを作成する必要があるので、下記のように関数化して、一文で、View に複数の Expand インスタンスを追加します。 *group プロパティに ‘top-right’ などの値を入れて複数のウィジェットをグループ化することで、一方のウィジェットが展開されているときは他方のウィジェットは閉じられるなど、動作に整合性を持たせることができます。 /************************************************************ * 省略 ************************************************************/ function createExpandWidgets(widgets) { return widgets.map(widget => new Expand({ view: view, content: widget, group: 'top-right' })) } }); view.when(function () { view.ui.add(createExpandWidgets([search, basemapGallery, print]), 'top-right'); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   5. まとめ 今回は GIS アプリケーションでよく使用される印刷機能を実装する印刷ウィジェットをご紹介しました。印刷ウィジェットを使えばたった数行のコードで、汎用的に使える印刷機能を実装できます。複数のウィジェットをまとめて管理する上で便利な Expand ウィジェットも併せて、ぜひご活用ください。   今回作成したサンプルは以下で動作を確認することも可能です。 【完成図イメージ】   印刷ウィジェット：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/widget-print/widget-print.html   次回はデータの追加や削除を実装する上で便利な、編集ウィジェットについてご紹介します。   6. 関連リンク はじめてのWebマッピングアプリケーション開発 1. はじめての Web マッピングアプリケーション開発：地図表示編 2. はじめてのWeb マッピングアプリケーション開発：レイヤー表示編 3. はじめての Web マッピングアプリケーション開発：レイヤーの可視化編 4. はじめての Web マッピングアプリケーション開発：ポップアップの設定編 5. はじめての Web マッピングアプリケーション開発：Web マップの作成・表示編 6. はじめてのWeb マッピングアプリケーション開発：グラフィック編 7. はじめてのWeb マッピングアプリケーション開発：クエリ編 8. 続編 はじめての Web マッピングアプリケーション開発：ウィジェット シリーズ編   ArcGIS API for JavaScript ArcGIS for Developer 開発リソース集 ... View more

1. はじめに 以前、GeoNet で紹介した「はじめてのWeb マッピングアプリケーション開発のシリーズ記事」では、はじめて地図アプリの開発を行う方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れを 7回に渡って紹介してきました。 その続編としてウィジェットを使ったアプリ開発についてシリーズで紹介していきます。  続編 はじめてのWeb マッピングアプリケーション開発：ウィジェット編 続編 はじめての Web マッピングアプリケーション開発：印刷ウィジェット編 続編 はじめての Web マッピングアプリケーション開発：編集ウィジェット編 続編 はじめての Web マッピングアプリケーション開発：ナビゲーション ウィジェット編 続編 はじめてのWeb マッピングアプリケーション開発：OAuth 2.0編 番外編 はじめてのWeb マッピングアプリケーション開発：多言語のべースマップ活用編   続編の第1回目では、ArcGIS API for JavaScript を利用した Web アプリの開発を効率化する上で大事な要素となるウィジェットの概要や実装の流れについて紹介します。   これまでの記事と同様に、ソースコードは ESRIジャパンの GitHub で公開していますので、ぜひご覧ください。Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。   2. ウィジェット とは ウィジェットとは、ArcGIS API for JavaScript が提供している GIS 機能を兼ね備えた UI コンポーネントです。 通常、Web マッピングアプリケーション開発においては、GIS の機能はもちろんですが、いかに見やすく、使いやすいなど、ユーザビリティを考慮した開発が必要になってきます。そのためには、UI（ユーザーインターフェース）の開発が重要です。しかし、UI  の開発には操作性やデザインなど考えることが多岐に渡るため、多くの開発者が悩むところだと思います。 ArcGIS API for JavaScript では、GIS でよく使用するウィジェットを標準で幾つか提供しているので、ウィジェットを活用することで GIS の機能と同時にリッチな UI を Web マッピングアプリケーションに簡単に組み込むことができます。   以下では、よく使用される便利なウィジェットの例として、Search ウィジェットと BasemapGallery ウィジェットについて紹介しています。 Search ウィジェット はマップ内の目標物や場所を検索するためのウィジェットです。 このウィジェットは Esri が提供している ArcGIS World Geocoding Service を参照しており、住所や場所、建物名などを検索する機能を備えています。さらに、検索キーワードなどを入力すると、候補を自動的に表示して、最適なものを選択するオプションなども提供しています。 また、ArcGIS World Geocoding Service は、リクエスト結果を保存しなければ 100 万リクエストまでは、無償で使用できます。   BasemapGallery ウィジェットは背景地図の切り替えを行うためのウィジェットです。 このウィジェットは、ArcGIS Online や　ArcGIS Enterprise にホストされている背景地図にアクセスして表示します。背景地図の一覧を表示し、ウィジェット内に表示されている地図をクリックすると背景地図が切り替わります。 また、背景地図へのリクエストは、１ヶ月100万トランザクションまでは、無償で使用できます。トランザクションの考え方について、トランザクションの定義をご参照ください。   2-1.  ウィジェットの実装 次に ウィジェットの実装を行う流れを先ほどご紹介した Search ウィジェットと BasemapGallery ウィジェットを例に紹介します。   ① Search モジュールと BasemapGallery モジュールの追加 require ステートメントで Search モジュールと BasemapGallery を追加します。 require([ "esri/Map", "esri/views/MapView", "esri/widgets/Search", "esri/widgets/BasemapGallery" ], function(Map, MapView, Search, BasemapGallery) { ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ② Map と View の作成 Map と View の作成については、「はじめての-web-マッピングアプリケーション開発-地図表示編」のステップ3、4をご参照ください。 記事ではなくコードを参照したい方は、ESRI ジャパンの GitHub の前回の記事のコード をご参照ください。   ③ Search ウィジェットの作成 require で 追加した Search モジュールを使用して、クラスから Search オブジェクトを作成します。 Search オブジェクト の view プロパティに View を設定します。 地図上に Search ウィジェットを組み込むために、View に追加します。ここでは、View の右上隅にウィジェットを追加しました。 /************************************************************ * 省略 Map と View の作成 ************************************************************/ // Search ウィジェット var search = new Search({ view: view }); view.ui.add(search, "top-right"); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ④ BasemapGallery ウィジェットの作成 require で 追加した BasemapGallery モジュールを使用して、BasemapGallery クラスから basemapGallery オブジェクトを作成します。 basemapGallery オブジェクト の view プロパティに View を設定します。 source の portal プロパティでは、url　には、「https://www.arcgis.com」にしていますが、目的の組織サイトを参照することもできます。useVectorBasemaps を true にすることで、背景地図にはベクタータイル ベースマップが使用されます。また、false にした場合は、ラスタータイル ベースマップが使用されます。 地図上に BasemapGallery ウィジェットを組み込むために、View に追加します。ここでは、View の右上隅にウィジェットを追加しました。 // BasemapGallery ウィジェット var basemapGallery = new BasemapGallery({ view: view, source: { portal: { url: " https://www.arcgis.com", useVectorBasemaps: true // ベクタータイル ベースマップを使用 } } }); view.ui.add(basemapGallery, "top-right"); // Add to the map ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   地図上の右上に Search ウィジェットと BasemapGallery ウィジェットが追加されているのが分かるかと思います。ウィジェットを活用することで、少ないコード量で UI 含めて GIS の機能を実装することが可能となります。   2-2. View UI ArcGIS API for JavaScript は、シンプルな UI レイアウトを設定するためのインターフェースを提供しています。Search ウィジェットや BasemapGallery ウィジェットを右上に配置したように View は、ウィジェット または DOM 要素を隅に配置できる UI API を提供しています。   次のアプリケーションを例として取り上げます。 .search, .logo { position: absolute; right: 15px; } .search { top: 15px; } .logo { bottom: 30px; }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 上記の例のようにウィジェットを目的の位置に配置するには、CSS ファイルを設定することで可能となりますが、ウィジェットの数が多い場合やウィジェットの位置を変更する場合は、CSS ファイルを更新する必要があります。 しかし、次の例のように View の UI API を使用することで、CSS ファイルは不要となり、目的の位置にウィジェットを配置することが可能となります。先ほどの例では、右上隅に配置しましたが、以下のように左上隅に配置することもできます。 view.ui.add(search, "top-left"); view.ui.add(basemapGallery, "top-left");‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 詳細は、View が提供している UI API の add () メソッドをご参照ください。   また、デフォルトでは、MapView または SceneView のウィジェット コンポーネントが使用できます。デフォルトのウィジェットは、文字列の配列として扱うことができます。詳細は、DefaultUI クラスのコンポーネントをご参照ください。 例えば、以下のように、「"compass"」、「"zoom"」 を非表示にすることもできます。 ※ 変更前 // 変更前 view.ui.components = (["attribution", "compass", "zoom"]); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ※ 変更後 // 変更後 view.ui.components = (["attribution"]); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ さらにアプリケーション内で、ウィジェットの位置を動的に変更する必要がある場合は、UI API を使用してウィジェットの位置を移動、及び削除することもできます。 view.ui.move(logo, "bottom-left"); view.ui.remove(search); view.ui.remove([compass, "zoom"]);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   3. ArcGIS API for JavaScript で提供しているウィジェットの例 ArcGIS API for JavaScript では、標準で多くのウィジェットを提供しています。 例えば、地図機能としてよく使用されるケースとして以下の便利なウィジェットを提供しています。 地図上で現在位置を特定するための Locate ウィジェット   地図上に凡例を表示するための Legend ウィジェット   目的の場所をブックマークとして追加し、ブックマークを選択してその場所へ移動することができる Bookmarks ウィジェット   ウィジェットの組み合わせの例として、GeoNetブログのレイヤーを拡張して「Tile Map Service」のサービスを表示の記事において、LayerList、Expand、 Swipe のウィジェットを使用しています。記事では、「ポイント３：ウィジェットを活用」で触れています。 ここではすべては紹介できませんが、他のウィジェットについては、APIリファレンス内の Widget の Subclasses を参照することで確認できます。また、サンプルコードとしても提供していますので、ご参照ください。   4. ウィジェットの拡張 標準で提供しているウィジェットではなく、ユーザーのニーズに応じてカスタマイズが必要になってくるケースもあるかと思います。その場合も対応が可能で、ArcGIS API for JavaScript が標準で提供しているウィジェットを拡張することで実現できます。 ウィジェットの拡張については、ArcGIS for Developers 開発リソース集のウィジェット開発をご参照ください。   5. まとめ ArcGIS API for JavaScript が提供しているウィジェットを使用することで、機能を実装する工数を削減できたり、Web マッピングアプリケーションにも簡単に組み込むことができるため、開発全体の工数削減にも繋がります。また、既存ウィジェットを使用することで、他の機能実装に集中できるようになります。 さらに標準で提供しているウィジェットではなく、業務に特化したウィジェットを提供したい場合には、ウィジェットを拡張することで実現できます。   今回作成したサンプルは以下で動作を確認することも可能です。 Search ウィジェット、BasemapGallery ウィジェット：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/widget/widget.html   今回は標準的なウィジェットを紹介しましたが、次回以降は、汎用的なウィジェットを幾つか紹介していきたいと思います。そのひとつとして印刷ウィジェットについて紹介します。   6. 関連リンク はじめてのWebマッピングアプリケーション開発 1. はじめての Web マッピングアプリケーション開発：地図表示編 2. はじめてのWeb マッピングアプリケーション開発：レイヤー表示編 3. はじめての Web マッピングアプリケーション開発：レイヤーの可視化編 4. はじめての Web マッピングアプリケーション開発：ポップアップの設定編 5. はじめての Web マッピングアプリケーション開発：Web マップの作成・表示編 6. はじめてのWeb マッピングアプリケーション開発：グラフィック編 7. はじめてのWeb マッピングアプリケーション開発：クエリ編   ArcGIS API for JavaScript ArcGIS for Developer 開発リソース集 ... View more

Is there any difference in the rendering of the map when using mmpk file in 100.2 and 100.6? Is the following perception wrong? 100.2 displays map data in a range not displayed on the terminal screen (it develops the data on the memory). On the other hand, in 100.6, the range that is not displayed on the terminal screen is not it develops the data on the memory, so if you move the map, the map will be redrawn frequently, so it may be a jerky movement. ... View more

はじめに   　前回の記事では、IoT プラットフォームである SORACOM と ArcGIS Online を連携させる方法についてご紹介しました。具体的には、GPS  トラッカーから 3G 通信で SORACOM までデータを送信し、データ転送サービス 「SORACOM Beam」 から Amazon Web Service （AWS） にデータを転送後、さらに AWS Lambda で ArcGIS Online の REST API を叩いてデータを登録する、という流れです。 　上記方式の場合、データ連携が自動化され、リアルタイムにデータが追加されていく点で優れていますが、AWS の設定やコーディングが必要なため、実装のハードルが高いかもしれません。 そこで今回は、データ連携の自動化までは出来ませんが、ArcGIS と SORACOM を活用して、ノンコーディングで簡単に IoT データを地図上で可視化する方法をご紹介します。IoT と位置情報の活用を検討されている企画担当者の方や営業担当者の方でも、まずは手軽に試してみることが可能です。     全体の概要   　今回は LPWA （消費電力を抑えた遠距離通信技術）の一つである Sigfox を利用して、デバイスで検知した温度のデータを送信し、データをダウンロードしてから地図上での可視化を試します。 　まずは、SORACOM が提供する Sigfox を利用した通信サービス、「SORACOM Air for Sigfox」 を利用し、デバイスで取得したデータを SORACOM プラットフォームまで送信します。次に、送信されたデータの簡易な可視化・蓄積・ダウンロード等が可能なサービス、「SORACOM Harvest」 を活用し、CSV 形式でデータをダウンロードします。最後に、Excel でデータを加工し、Excel のアドイン製品である ArcGIS Maps for Office を活用して Excel 上でそのまま地図上に可視化します。     事前準備   今回紹介する方法では、以下の準備が必要です。 SORACOM のアカウント Sens’it （温度検知のためのデバイス） ArcGIS Online の組織サイト（または Portal for ArcGIS） のレベル 2 指定ユーザー アカウント ArcGIS Maps for Office （地図上で可視化するための Excel のアドインソフト。弊社サポートサイトからダウンロードしてインストール） Microsoft Excel （ArcGIS Maps for Office の動作環境に合うもの）   SORACOM の提供する Sigfox を利用する通信サービスや、Sens’it の設定の詳細については、それぞれソラコム社の該当ウェブページやデバイスのセットアップページに詳しく説明されているのでご参照ください。 デバイスのセットアップが完了し、SORACOM までデータが送信されたことが確認できたら、次は SORACOM Harvest からデータをダウンロードします。     SORACOM Harvest からデータをダウンロード   SORACOM Harvest を利用することで、センサーで取得したデータを収集・蓄積し、簡易な可視化や、データのダウンロード等ができます。 SORACOM のコンソールにログイン後、左上の 「Menu」 アイコンをクリックし、「Sigfox デバイス管理」 を選択します。                                   データを可視化したいデバイスの ID にチェックを入れ、「操作」 から 「データを確認」 を選択します。                     グラフが表示されるので、その下の 「データ」 タブから 「ダウンロード」 を選択し、CSV 形式で任意のディレクトリにダウンロードします。                                           データに緯度・経度を付与する   　Sens’it では位置情報は取得できない（※）ため、事前にセンサーを設置した場所の緯度経度を定義しておき、センサーの ID と紐づけて付与します。 まずはダウンロードした CSV ファイルを Excel で開きましょう。次に、新しいシートを開き、シート名を 「DeviceLocation」 と名付けます。名前をつけたら、デバイス ID とそのデバイスに紐づく緯度経度の表を作成します。 ※ Sigfox Geolocation オプションサービスを利用するとデバイスの位置情報が数 km 程度の精度で取得できるようですが、SORACOM Air for Sigfox は Geolocation オプションには対応していないようです。   デバイス ID は SORACOM のコンソールからコピペしましょう。緯度経度は ArcGIS Online の Web マップを開き、計測ツールから「位置」を選択した後、任意の場所をクリックすると緯度経度を調べることができます。今回は ESRIジャパンの東京以外のオフィスに Sens’it を設置したことにしました（※）。 ※ Sigfox 通信のカバレッジは Sigfox の Web サイトで確認してください。   表を作成したら元のシートに戻り、「lat」 列、「lng」 列に以下の関数を入力し、一番下までコピーします。既に入っている値は無視して構いません。   lat   = VLOOKUP (B2, DeviceLocation!$A$2:$C$501, 2, FALSE) lng  = VLOOKUP (B2, DeviceLocation!$A$2:$C$501, 3, FALSE)                                             　処理の内容としては、vlookup 関数で「__resourceId」 （デバイス ID） 列の値を参照し、事前に作成した表のデバイス ID 列を検索して、紐付いている緯度、経度の値を返しています。緯度・経度がきちんと入力されたら Excel ファイルとして保存しておきましょう。 　以上でデータの準備が終わりました。次は ArcGIS Maps for Office でデータを地図上に可視化します。     ArcGIS Maps for Office   　ArcGIS Maps for Office をインストールすると Excel に ArcGIS Maps というタブが作成され、ArcGIS へサインインできるようになります。                                   　サインインしたら「マップの追加」をクリックし、位置情報から「座標」を選択後、経度と緯度の入力されている列を指定します。 その後、可視化したいデータの列を選択し、続いてどのような表現で可視化するかを選択します。今回は温度の格納されている TempC 列を選択し、シンボルのサイズで温度の高低を表現することにしました。 　これだけで、簡単に IoT データを地図上で可視化できてしまいます。さらに各地点のデータ数の密度をヒートマップで表現したり、クラスタリングでまとめたりすることも可能です。                                   ArcGIS では豊富な背景地図も用意しています。例えばデザイン性を重視した地図を作成するのであれば、ダークグレイの背景地図を選択することも可能です。                                   Web上に共有してWebアプリを作成   　今回は詳細について触れませんが、基本的な地図のデザイン等が決まったら、作成した地図を ArcGIS プラットフォーム Web 上で共有することも可能です。ArcGIS では Web アプリ作成用のテンプレートも豊富に用意しているので、共有されたデータや地図を使って Web アプリもノンコーディングで作れます。下記の Web アプリではデバイスで取得された温度と湿度の平均値をグラフで可視化するウィジェットと、最大値・最低値などをサマリーとして表示するウィジェットを配置しました。                               まとめ   本格的な IoT システムの構築は簡単にはできませんが、ArcGIS と SORACOM を組み合わせることで、ノンコーディングで IoT データを地図上で可視化することができました。豊富なAPI や SDK で自由にカスタマイズできるところも ArcGIS の魅力ですが、こうして簡単に IoT データの可視化や分析ができる強みも持っています。コーディングが苦手な方はもちろん、開発者の方にも、いきなりシステムを組み上げるのではなく、まずはスモールスタートで試してみたい場合におすすめです。 　IoT のデータを地図上で表示・分析したいといったニーズは、非常に増えてきており、ArcGIS と IoT を用いたビジネスの事例や活用例を、弊社 Web サイトに掲載しています。また、SORACOM と ArcGIS の連携については、7月12日に開催されるセミナー 「ここまでできる！ArcGIS で実現する IoT×GIS システム連携」 でも詳しくご紹介する予定です。興味のある方は是非ご参加ください。   ■関連リンク ArcGIS ArcGIS Maps for Office SORACOM SORACOM Air for Sigfox SORACOM Harvest ... View more

はじめに   各種のセンサー機器から取得したデータをリアルタイムに地図に表示したい、また、ダッシュボードなどで加工された様々なセンサーデータをグラフィカルに表示したいといったニーズが、ここ数年の「IoT（モノのインターネット）」の流行りと共に爆発的に増えていることと思います。 このようなデータは、弊社製品の ArcGIS プラットフォームを活用することで簡単に Web 上で可視化することができます。   そこで今回は、GPSトラッカーという、GPS と 3G 通信を使用して位置情報をトラッキングする端末を使用して、トラッキング情報を ArcGIS Online のダッシュボードを利用して可視化しました。 ※ ArcGIS Online は、マップを作成、利用、管理するポータル環境を提供するクラウド GIS です。      　　　　　　　　　　　　　　　　　　　　　ArcGIS Online に構築したダッシュボード（GPS トラッカー軌跡の解析）   ArcGIS Online 上で作成したダッシュボードは、「GIS コミュニティフォーラム 2018 TR313J ダッシュボード （GPS トラッカー奇跡の解析）」から実際に操作することができます。   トラッキング情報のデータのやり取りは、IoT プラットフォームの SORACOM を使用しています。その SORACOM  プラットフォームに送信したトラッキングデータを地図に可視化するため、ArcGIS と連携する仕組みを構築してみました。   本記事では、その仕組みの具体的な中身を紹介します。   SORACOM を採用した理由   IoT をはじめるにあたり、よくある課題として、デバイスとの通信を行うための通信インフラやセキュリティ、通信サービスの費用といったことがあると思います。その解決策として、特に SORACOM では、通信のセキュリティが強固で、かつ通信費用が安いというのが魅力的でした。また、多くの便利な関連サービスが用意されており、ArcGIS プラットフォームとの連携を比較的簡単に行うことができました。そういったところが、IoT の通信プラットフォームとして SORACOM が多くの顧客を獲得している理由でしょう。     連携の仕組み   ArcGIS との連携では、SORACOM Beam というサービスを使用しています。SORACOM Beam からのデータを直接 AWS 上のサービスを利用して処理し、処理したデータを ArcGIS に登録しています。 ※ SORACOM Beam は SORACOM Air の SIM を使用したデバイスからのデータ・アップロード時にクラウド側でデータ処理を行うためのプロキシーサービスです。     SORACOM Beam から AWS との接続は、「SORACOM Beam を使用して AWS と接続する」を参考にしました。   具体的なデータの流れ   GPS トラッカーから TCP で送信されたデータは、SORACOM Beam により 受信され、デバイスに固有のデータを付与した上で、Amazon API Gateway に TLS 暗号化されたセキュアな状態で送信されます。 次に Amazon API Gateway は受け取ったデータを加工し、デバイス固有の情報をデータに含めた上で、AWS Lambda の Python コードを実行します。 AWS Lambda で実行されたコードは、受け取ったデータを ArcGIS Online に登録します。   AWS Lambda で実行する Python コードでは、ArcGIS の REST API のフィーチャ サービスを使用してデータを登録しています。ArcGIS では REST API の仕様が公開されており、それを使用することで、他のプラットフォームとの連携をシームレスに行うことができます。REST API 以外にも ArcGIS API for JavaScript や ArcGIS API for Python などの API を使用するという選択肢もありましたが、外部の API を使用するには、ZIP 化してアップロードするなどの手続きが必要となるため、今回は、データ登録だけでしたので、REST API を直打ちにしました。   今後、空間検索などのより複雑な処理を実行する場合は、ArcGIS API for Python などの使用を検討していきたいと思います。   あらかじめ ArcGIS Online で使用する GPS トラッカー用のフィーチャ サービスを作成し、フィーチャ サービスの REST エンドポイントを使用してデータ登録を行っています。   次のコードは GPS トラッカーからのデータ（位置情報・属性情報）をフィーチャ サービスの REST エンドポイントに登録している部分です。 //　GPS トラッカー用のフィーチャ サービスのエンドポイント AGOL_applyEdits = r"https://utility.arcgis.com/usrsvcs/servers/46a76439b3a64b119bf85cdc8cc5ac51/rest/services/GCF2018_ArcGISxSORACOM/FeatureServer/0/applyEdits" : : #>> 送信処理 ############################# def sendData(geometry_dic, attributes_dic): # 測地系設定：固定 (WGS 1984 で設定) spatialReference_dic = {} spatialReference_dic["latestWkid"] = 4326 spatialReference_dic["wkid"] = 4326 geometry_dic["spatialReference"] = spatialReference_dic # パラメータ作成 devData_dic = {} devData_dic["geometry"]=geometry_dic devData_dic["attributes"]=attributes_dic # Featureに追加する return AddFeature(devData_dic) def AddFeature(devData_dic): # 属性データの辞書を JSON に変換 json_str = json.dumps(devData_dic) # 属性 JSON を URL エンコード import urllib.parse json_q = urllib.parse.quote(json_str) # 送信パラメータを構築 sendData = "adds=" + json_q + "&f=pjson" # 送信 (POST) headers = {"Content-Type" : "application/x-www-form-urlencoded", "referer" : referer} req = urllib.request.Request(AGOL_applyEdits, headers=headers, data=sendData.encode('utf-8')) with urllib.request.urlopen(req) as response: response_body = response.read().decode("utf-8") json_dict = json.loads(response_body) return json_dict‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   データの登録には、フィーチャ サービスの Apply Edits (Feature Service/Layer) を使用して、POST でリクエストしています。パラメータとしては、adds と f を使用しています。adds はデータの追加用のパラメータで、「geometry」 と 「attributes」 の配列を JSON 化したものを設定しています。f は応答形式で pjson (Pretty JSON) と設定しています。   まとめ   SORACOM を利用することで、GPS トラッカーからデータを受け取る部分は簡単に構築することができました。なお、SORACOM にはこれ以外にも多くの連携用の機能やサービスがあります。   本記事で紹介した内容や他の連携パターンを踏まえて、7 月 12 日に開催のセミナー「ここまでできる！ArcGIS で実現する IoT×GIS システム連携」でもより詳細な情報をお伝えする予定です。是非お誘いあわせの上、奮ってご参加ください。   ■関連リンク ArcGIS ArcGIS Online ArcGIS REST API SORACOM SORACOM Beam ... View more

はじめに この記事は、「Pro SDK を使用した ArcGIS Pro の拡張」シリーズの第３弾です。 本シリーズでは、ArcGIS Pro SDK (以下、Pro SDK) を使用した ArcGIS Pro の拡張方法をご紹介しています。 前回の記事では、ArcGIS Pro の開発環境の構築方法についてご紹介しました。 今回は、Pro SDK のアドインプロジェクトの構成についてご紹介します 第 1 弾：ArcGIS Pro SDK とは？ 第 2 弾：環境構築 第 3 弾：アドインプロジェクトの構成（本記事） 第 4 弾：アドインの開発 第 5 弾：管理構成画面のカスタマイズ Config.damlファイルとは？ はじめに、アドインプロジェクトの構成を理解する上で重要な Config.daml ファイルについて説明します。 Visual Studio で ArcGIS Pro のアドインプロジェクトを作成すると、そのプロジェクトには「Config.daml」という名称のファイルが含まれています。 この Config.daml ファイルは ArcGIS Pro のカスタマイズにおいて不可欠なもので、XML 言語をベースとしており、daml という拡張子名は【Desktop Application Markup Language】の頭文字から取られています。 ArcGIS Pro の変更、拡張はすべてこのファイルに宣言する必要があります。宣言することによって既存の ArcGIS Pro のコントロールに対しての追加、編集、削除を行うこともできます。   アドインプロジェクトの構成について それではここから、開発を行う際の基本的な構成について説明します。 第１弾のブログでも少し触れましたが、Pro SDK は MVVM モデルを考慮した設計になっています。 基本的な構成は以下のような図になります。 上記の図では、Config.daml ファイルに Pro UI の要素を定義して、定義した要素を .NET クラスで作成しています。 それぞれのファイルについて次のことを主に定義します。   Config.daml：ArcGIS Pro をカスタマイズする UI の要素を定義します（タブ・グループ・ボタンなど）。 MyViewModels.cs：View とのデータの受け渡しやボタンなどを押下したときの処理を実装します。 MyView.xaml：ドックパネルやポップアップなどの UI を実装します。 ※上記で定義した以外でも .NET の基本設計・挙動に従って開発することが可能です。   基本的にはこのような構成でアドインプログラムを実装していきます。 また、.NET クラスで作成する Pro UI の要素については多くのテンプレートが提供されています。   図４：Pro SDK で提供されているアドインモジュールのテンプレート群 実際に Visual Studio でアドインプロジェクトを作成し、デバッグすると ArcGIS Pro では次のように表示されます。 上記の画像は一例ですが、リボン上にアドインのタブが追加され、ドックパネルを呼び出すボタンが定義されており、ボタンを押下することでドックパネルを画面に表示します。 非同期処理 最後に、ArcGIS Pro のアドインアプリケーションを作成する際の注意点についてご説明します。 ArcGIS Pro はマルチスレッド 64 ビットアプリケーションで様々な処理を同時実行します。 コンフリクトを避けるため、Pro SDK を使用した処理は QueuedTask.Run() メソッドでキューに登録する必要があります。 登録した処理は ArcGIS Pro のプロセスが適切なタイミングで実行します。 また、意識的に Async / Await を使用して非同期実行することもできます。   QueuedTask.Run() の呼び出し例 Task t = QueuedTask.Run(() => { // 呼び出す SDK のメソッド } Async / Await の実行例 private async Task<IGPResut> ExecuteGP(string tool, IReadOnlyList<string> parameters) { IGPResult result = await Geoprocessing.ExecuteToolAsync(tool, parameters, flags: GPExcuteToolFlags.None); return result; }‍‍‍‍‍‍‍‍‍‍   これでアドインプロジェクトの構成の説明は終わりです。次回は、この構成を踏まえた上で Pro SDK での簡単なアドイン開発についてご紹介します。 関連リンク ArcGIS Pro SDK ArcGIS Developers 開発リソース集 ArcGIS Pro SDK サンプル集（GitHub） API リファレンス チュートリアル ... View more