Latest Contributions by AyakoSUZUKI

空間参照は、位置情報を扱う上でもっとも基本的で重要な要素のひとつですが、GIS をはじめるときに、最初にぶつかる大きな壁のひとつでもあるのではないでしょうか。 今回は、そんな空間参照について、アプリ開発の視点から解説します。 この記事では ArcGIS API for JavaScript を使用しますが、ほかの SDK でも空間参照に関する基本的な理解は同じです。 空間参照とは？ 位置情報を表す際に使用される緯度経度や XY 座標は、座標の原点となる地点や距離などを定めた基準をもとに求められます。この基準を座標系と呼びます。 空間参照は、座標がどの座標系を使用するのかを定義します。 座標系には、さまざまな種類があり、同じ座標でも、参照する座標系が違えば、まったく異なる地点を示すことがあります。座標が示す正しい地点を得るためには、空間参照を定義し、座標と座標系を紐づけることが必要です。 ArcGIS では、WKID と呼ばれる一意の ID で空間参照を定義します。例えば、日本でよく使用される平面直角座標系（JGD 2011）のうち、関東周辺で用いられる第９系の WKID は「6677」です。 また、空間参照においてよく耳にする EPSG は、European Petroleum Survey Group (EPSG) という団体によって定義された空間参照のコード体系で、さまざまな GIS に導入されています。WKID も EPSG をもとに作成されています。 GIS アプリの空間参照 では、アプリでは空間参照はどのように扱われるのでしょうか？ データの空間参照 位置情報には、通常、位置を表す座標とともに、その座標がどの空間参照を使用して表されているのかも定義されています。 API/SDK で使用する各サービスにも、サービスに含まれる位置情報が使用する空間参照が定義されています。 サービスの空間参照は、サービス ディレクトリで確認することができます。 以下のリンクは、Esri が提供する道路地図ベースマップのサービス ディレクトリです。 https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer SpatialReference パラメーターに、サービスに定義されている空間参照の WKID が表示されているのがわかります。 このサービスに定義されている WKID：102100 は WGS 1984 Web メルカトル（球体補正）というタイル サービスの配信に適した座標系を参照します。 サービスから作成したレイヤーの空間参照プロパティには、サービスが持つ空間参照が適用されます。 マップの空間参照 レイヤーに含まれる位置情報を投影するため、マップにも空間参照が定義されます。 マップの空間参照には、最初に読み込まれたレイヤーに定義されている空間参照が適用されます。 例えば、Esri が提供するベースマップを使用する場合、マップにはベースマップが使用する空間参照、WKID：102100が定義されます。 もし、ベースマップを使用せずに、サービスを読み込み、レイヤーとしてマップに追加するような場合は、マップの空間参照は読み込んだサービスに定義された空間参照になります。 さて、マップに空間参照が定義されるということは、マップと異なる空間参照を持つレイヤーはどうなるのでしょうか？ API/SDK は、マップに定義された空間参照と異なる空間参照を持つレイヤーを、動的に再投影します。 サンプル コードを見てみましょう。 マップは、Esri の提供する道路地図をベースマップとして使用しています。したがって、マップの空間参照にはベースマップの空間参照、すなわち WKID：102100 が適用されます。 続いて、マップ イメージ レイヤーを使用し、マップにアメリカのセンサス データを追加します。 このレイヤーの空間参照は、WKID：4269 で、NAD83 というアメリカで使用される座標系を参照しています。マップとは異なる空間参照を使用していますが、データは正しい位置に表示されます。 var map = new Map({   basemap: "streets" }); var view = new MapView({   container: "viewDiv",   map: map }); var layer = new MapImageLayer({   url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer" }); map.add(layer);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ このように、API/SDK は、レイヤーを動的に再投影することで、マップとは異なる空間参照を持つレイヤーの表示を実現します。 ただし、動的な再投影は、アプリのパフォーマンスに影響します。可能ならば、アプリで使用するデータの座標系をあらかじめ統一し、使用する空間参照を一種類にすることが望まれます。 ジオメトリの空間参照 これまで紹介した通り、マップと、サービスから作成されたレイヤーには、それぞれの空間参照が定義されます。 では、クライアント側で作成したジオメトリをマップに描画する場合、空間参照はどのように使用されるのでしょうか？ 平面直角座標系 第9系を使用して、x: -5995.3221、y: -35382.5003 という値で表される地点があります。この地点を先ほど作成したマップに描画してみましょう。 まず、上記の情報をもとに ポイントを作成します。 リファレンスを見ると、x プロパティに X 座標の値、y プロパティにY 座標の値が設定されているのがわかります。そして、spatialReference プロパティに空間参照が定義されています。 [空間参照とは？] でも触れましたが、平面直角座標系 第9系の WKID は「6677」です。spatialReference プロパティの wkid パラメーターに、座標が参照する空間参照を指定します。 各座標系の WKID は以下のリンクから確認できます。 投影座標系 地理座標系 Tips：座標系には、地点を、平面に投影して XY座標で表す投影座標系と、三次元の緯度経度で表す地理座標系があります。平面直角座標系は投影座標系に分類されます。詳しくは、座標系（GIS 基礎解説）をご参照ください。 var point = new Point({   x: -5995.3221,   y: -35382.5003,   spatialReference: {     wkid: 6677 } });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ さて、作成したポイントからグラフィックを作りマップに表示してみましょう。 var graphic = new Graphic({   geometry: point,   symbol: new SimpleMarkerSymbol({     color: [226, 119, 40],     outline: {       color: [255, 255, 255],       width: 2     }   }) }); view.graphics.add(graphic);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ あれ？おかしいですね。グラフィックが表示されません。 ジオメトリの空間参照 – 空間参照の変換 実は、マップに追加されたグラフィックやグラフィックス レイヤーには、レイヤーのような動的な再投影は行われません。 そのため、マップの空間参照と異なる空間参照を持つグラフィックはマップに表示されません。 作成したポイントをマップに表示するために、ポイントの空間参照を変換してみましょう。 さまざまなジオメトリ処理を行う GeometryService は、ジオメトリを新しい空間参照へ変換して投影するメソッドを提供しています。 パラメーターに、変換するジオメトリと、空間参照を設定します。今回は、マップの空間参照を使用するので、view.spatialReference の値を使用しています。 そして、メソッドを実行し、出力結果からグラフィックを作成します。 出力されたジオメトリの空間参照は、マップに定義されている空間参照と同じなので、マップ上にグラフィックが表示されます。 var geometryService = new GeometryService("GeometryService の URL"); var params = new ProjectParameters(); params.geometries = [point]; params.outSpatialReference = view.spatialReference; geometryService.project(params).then(function(results){   var point = results[0];   var graphic = new Graphic({     geometry: point,     symbol: new SimpleMarkerSymbol({       color: [226, 119, 40],       outline: {         color: [255, 255, 255],         width: 2       }     })   });   view.graphics.add(graphic); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 平面直角座標系 第9系を使用して、x: -5995.3221、y: -35382.5003 で表される地点がどこか、わかりましたか？ 東京駅付近にポイントが表示されれば、成功です。 アプリ開発における空間参照の基本的なことを紹介しましたが、GIS の基礎となる座標や座標系、空間参照は、学習範囲も広く、ここで説明しきれないこともあります。ぜひ、関連リンクもご活用ください。 関連リンク ArcGIS for Developers: https://developers.arcgis.com/ わかりやすい平面直角座標系 – 国土地理院：http://www.gsi.go.jp/sokuchikijun/jpc.html EPSG – International Association of Oil & Gas Producers：http://www.epsg.org/ 「Web メルカトル（ウェブメルカトル）」の由来と真相 – WINGFIELD since 1981：https://www.wingfield.gr.jp/blog/2016/02/17/p4294/ 座標系（GIS 基礎解説）：https://www.esrij.com/gis-guide/coordinate-and-spatial/coordinate-system/ ... View more

2017 年 8月 30 日（水）に 第 9 回目となる GeoDev Meetup を開催しましたので、その開催レポートをお届けします。 GeoDev Meetup とは？ 地理情報や地図・位置データを扱う（扱ってみたい）エンジニアやデザイナーの交流の場 ArcGIS を使ったデータ可視化・解析やアプリ開発をやってみる D3.js や Leaflet などのオープン ソースの技術と連携したいという方も大歓迎！ という趣旨で開催しています。 GeoDev Meetup は、新しい GIS 仲間に出会えることができる場や、もしくは、ArcGIS を利用することで、新しいビジネスの創出や新しい事業を開発するきっかけが生まれる場にすることができればと考えています。そして、ArcGIS を通じた大きなコミュニティが日本でももっと活発になるようにしていきたいと思います。過去の Meetup の様子はこんな感じでした！ もくもくタイム もくもくタイムでは、前回に引き続き、ArcGIS で作成した地図をアプリに組み込んでみることをメイン テーマとしてチャレンジしました。 アプリを作成すること自体はじめて！という方も、積極的に課題を持ち込んでどんどん作業を進めていかれるリピーターの方も、一緒に楽しくもくもくしました。 はじめて参加された方の中には、地図上にデータを可視化するだけでなく、解析機能を使用して、GIS ライクなことを実践されている方もいて、スタッフも興味津々で質問するという場面もありました。 成果発表会 GeoDev Meetup では毎回、もくもくタイムで取組んだ成果を披露していただく場を設けています。今回はお 2 人が発表してくださいました。 成果 #1： 幼稚園と病院のデータをマッピングし、解析を行いました！ ご自身のお仕事と関連したテーマの可視化に挑戦されていました。 さらに、可視化だけではなく直線距離の解析や到達圏解析にも挑戦されていました！ 成果 #2： RESAS データを可視化してみました！（@mmm_waka） スタッフも可視化に挑戦してみました。 RESAS が提供している外国人訪問者数データを使用し、2011 年と 2015 年のデータを比較して地図上に可視化しました。訪問者数が増加したところは濃い色になっています。 外国人訪問者には大阪・京都・東京、そして千葉が人気のようですね！ LT タイム 今回の LT は、Kohsuke_Hada さんに登壇頂き、無償でご利用いただける GIS ビューアーである「ArcGIS Earth」をテーマにトークして頂きました。 ArcGIS Earth は、様々なフォーマットのデータを直接読み込んで 3D マップとして表示することができる機能が実装されています。LT では、Collada という 3D フォーマットで提供されているフリーのガンダム像を ArcGIS Earth で読み込み、お台場に表示してみる一連の手順を紹介して頂きました。 また、もくもくタイムでは、ArcGIS Earth の API を触ってみたということで、そちらのお話を聞くこともできました。 LT の内容は Hada さんのブログで公開されていますので、ぜひご覧ください。 ガンダム ArcGIS Earth に立つ！ArcGIS Earth が Ver.1.5 にバージョンアップ – WINGFIELD since 1981 GeoDev Meetup の様子もブログに掲載してくださいました！ GeoDev Meetup で ArcGIS Earth API に挑戦 – WINGFIELD since 1981 Kohsuke_Hada さんは、普段から GIS を活用しており、技術的な話も多く、大変興味深い LT タイムになったのではないかと思います。 おわりに ご参加いただいたみなさま、ありがとうございました！ はじめましての方も、お久しぶりな方も、いろいろなバックグラウンドを持つ方に参加して頂き、楽しい時間を過ごすことができました。 次回開催の企画も進行中ですので、ぜひ、GeoDev Meetup へのご参加お待ちしています！ 関連リンク GeoDev Meetup 開催レポート GeoDev Meetup – RESAS API ハッカソン予習・復習会 開催レポート GeoDev Meetup 開催レポート – GeoNet ArcGIS 関連ページ ArcGIS for Developers 開発リソース集 ハッカソン向け資料集 ... View more

撮影した写真やビデオをほかのユーザーと簡単に共有できることで人気の Instagram ですが、遊びや旅行の記録として使用している方も多いのではないでしょうか。 Instagram には、どこで撮影した写真なのか、個々の投稿を地図に表示することはできますが、複数の投稿を地図に表示する機能がありません。 地図上で、撮影した場所を一目で見ることができたらいいのにと思っていたので、Instagram API と ArcGIS API for JavaScript を使い、投稿した写真が持つ位置情報を地図に表示する Web アプリを作成してみました。 作成したアプリは Esriジャパン GitHub に公開しています。 Instagram アカウントへのアクセス Instagram のアカウントへアクセスするためには、アプリを登録し、認証を行います。 登録、認証は Instagram API のページから行えます。 アプリの管理ページから新しいアプリを登録します。 今回は、クライアント側で認証を行うため [Disable implicit OAuth] オプションのチェックを外しました。 また、リダイレクト先に、アプリの URL を設定しています。 アプリを登録したら、Authentication を参考にして authorization URL へアクセスし、アクセストークンを取得できることを確認します。 メディアの取得 Instagram API のドキュメントを参考に、自分のアカウントからメディアを取得するエンドポイントを使って、メディアを取得してみます。 ArcGIS API for JavaScript には、サーバーへデータを送受信するための "esri/request" モジュールが提供されているので、このモジュールを使ってエンドポイントへリクエストを送ります。 まず、URL からアクセストークンを取得します。 authorization URL へアクセスすると、リダイレクト URL のフラグメント識別子にアクセストークンが付与されるので、location.hash を使いアクセストークンを取得します。 var token = location.hash.slice(1);‍‍ 取得したアクセストークンを付与して、エンドポイントへリクエストします。 // エンドポイント var url = "https://api.instagram.com/v1/users/self/media/recent/?" + token; // エンドポイントへリクエスト esriRequest(url, {    responseType: "json" }).then(function(response){    console.log(“response: ”, response); }).otherwise(function(err){    console.log(“err: ”, err); });‍‍‍‍‍‍‍‍‍‍‍ アプリを起動し、レスポンスを確かめてみたところ、クロスドメインのエラーが返ってきていました。 config モジュール（"esri/config"）を使用して、プロキシ経由でリクエストするよう設定します。 // プロキシの設定 esriConfig.request.proxyUrl = "プロキシ URL"; メディアの表示 プロキシの設定でメディアを取得することができたので、メディアを表示する地図を作成します。 地図の作成には、Map（"esri/Map"） と MapView（"esri/views/MapView"） を使用します。 Map 地図に含まれるデータを定義します。 今回は背景として地形図を設定しました。 MapView Map をどのように見せるのかを定義します。 MapView を表示する DOM 要素、MapView に表示させる Map オブジェクト、MapView の中心地点とズームレベルを設定します。 // Map の作成 var map = new Map({    basemap: "topo" }); // View の作成 var view = new MapView({    container: "viewDiv",    map: map,    center: [139.77, 35.68],    zoom: 5 }); 作成した地図にメディアを表示するため、グラフィック（"esri/Graphic"）を作成します。 グラフィックは、地図上に一時的な位置情報を表示するために使用されます。 今回は、以下の4つのパラメーターを設定し、グラフィックを作成しました。 ジオメトリ グラフィックの位置を定義します。 メディアが撮影された地点を作成するため、ポイント（"esri/geometry/Point"）を使用します。メディアには緯度経度の情報が含まれているので、ポイントの latitude/longitude パラメーターへそれぞれ渡します。 シンボル グラフィックの色や形などのスタイルを定義します。 画像を表示するマーカーシンボル（"esri/symbols/PictureMarkerSymbol"）を使い、赤色のピンを表示するよう設定します。 属性 グラフィックの属性を定義します。 取得したメディアに含まれる、ロケーション名、キャプション、「いいね」の数、画像のリンク、メディアのリンクを設定しています。 ポップアップ テンプレート（"esri/PopupTemplate"） グラフィックをクリックすると表示されるポップアップのコンテンツを定義します。 メディアに含まれる画像とキャプションを表示するよう定義し、元のメディアへ飛ぶリンクを追加しています。 // シンボルを作成 var symbol = new PictureMarkerSymbol({    //...... }); // ポップアップ テンプレートを作成 var popupTemplate = new PopupTemplate({    //...... }); // 取得したメディアに含まれる位置情報をもとに地図に表示 array.forEach(data, function(item){    // 位置情報を含む場合    if(item.location && item.type === "image"){       // 地点を作成       var point = new Point({          latitude: item.location.latitude,          longitude: item.location.longitude       });       // 属性を作成       var text = (item.caption) ? item.caption.text : null;       var attributes = {          name: item.location.name,          text: text,          likes: item.likes.count,          imageUrl: item.images.thumbnail.url,          link: item.link       }       // グラフィックを作成       var graphic = new Graphic({          geometry: point,          symbol: symbol,          attributes: attributes,          popupTemplate: popupTemplate       });       // グラフィックを地図に表示       view.graphics.add(graphic);    } }); これで、Instagram から投稿したメディアを取得し、メディアに含まれる地点が地図に表示されます。 また、地点をクリックすることで、ポップアップにメディアとキャプションを表示します。 ArcGIS API for JavaScript は、ArcGIS for Developers へのサインアップで、開発・評価の目的に限り無償で使用できます。 みなさんもぜひ、ご自身の Instagram アカウントでお試しください。 関連リンク ArcGIS API for JavaScript：https://developers.arcgis.com/javascript/ ArcGIS for Developers: https://developers.arcgis.com/ ... View more

I want to get center coordinate in each tile from basemap. I am using JS API and I can get origin, level, row and colum. So I think I can get center point by using math calculation. But I do not have any idea... I attached an image to show what I want to know. Any help would be great! ... View more

ArcGIS プラットフォームで使用するために開発された新しい式言語である「Arcade」は、シンプルなコーディングで演算や式の評価を行い、ビジュアライゼーションやラベリングなどを独自に定義することが可能です。 前編では、ArcGIS API for JavaScript で開発したアプリで Arcade を使ったビジュアライゼーションの方法をご紹介しました。後編では、ArcGIS プラットフォームにおける Arcade の共有についてご紹介します。   Arcade 式を共有してみよう！   これまで、クライアント側の演算を利用したデータの可視化は、独自の JavaScript 関数を使用することで実現してきました。しかし、独自関数を用いた可視化方法は、JavaScript 関数を組み込んだ Web アプリのみで使用され、他のアプリへ共有することはできませんでした。 Arcade は、ArcGIS プラットフォーム共通の式言語として開発されており、アプリごとの実装に頼ることなく、式を Web マップに保存することや、Web、デスクトップ、モバイル アプリで共有することが可能です。   それでは、前回も使用した、愛知県の地価調査を表示した Web マップをマップ ビューアーで開いてみましょう。 地価調査レイヤーには、前回と同じ Arcade 式を定義し、前年と比較した価格の上昇率と上昇率の正負を可視化しています。     では、この Web マップを ArcGIS API for JavaScript を使い Web アプリで読み込んでみます。   var webmap = new WebMap({ portalItem: { id: "cbadc1225df14e94bb13ef65e3011916" } }); var view = new MapView({ map: webmap, container: "viewDiv" });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   Web マップに定義された Arcade 式は、ArcGIS API for JavaScript によって実行され、レイヤーはマップ ビューアーで Arcade 式を設定したときと同じ表現でアプリ上に可視化されます。     同じように ArcGIS Pro で Web マップを表示してみましょう。 ArcGIS Pro でも、Web マップに保存された Arcade 式を実行して、同じ表現方法を用いてレイヤーを地図上に可視化することができます。     このように、Arcade は、Web アプリや ArcGIS Pro で実行することができ、Web マップに保存された Arcade 式を活用することで、どのアプリでも同じようにデータを表現することが可能です。 さらに、ArcGIS Online に登録したレイヤーのビジュアライゼーション タブを使うことで、レイヤーに直接 Arcade 式を保存することもできます。     ArcGIS API for JavaScript では、レイヤーのアイテム ID を使うことで、保存したビジュアライゼーションとともにレイヤーを読み込むことができます。   // アイテム ID を使いポータルからレイヤーを取得、表示する Layer.fromPortalItem({ portalItem: { id: "a69d73e946a54af0a0f610faa9ca9be7" } }).then(function(lyr){ map.add(lyr); })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   もちろん、ArcGIS Pro でも同じようにレイヤーに定義された Arcade 式を実行することができます。   このように、Arcade を使用することで、より簡単に、さまざまな表現方法を用いてデータを地図に可視化することができます。また、ArcGIS プラットフォーム共通の式言語として開発されているので、Web、デスクトップ、モバイルといったさまざまなアプリで共有可能です。   関連リンク   Web アプリで Arcade を使ってみよう！（前編） ArcGIS Arcade ArcGIS API for JavaScript Arcade ... View more

Arcade は、ArcGIS プラットフォームで使用するために開発された、新しい式言語です。 他の式言語と同様に、演算や式の評価を行うほか、記述した式を ArcGIS プラットフォームにおいて共有、実行することができます。   ArcGIS API for JavaScript ではバージョン 4.2 およびバージョン 3.19 から Arcade を使用できるようになりました。 本記事は、ArcGIS API for JavaScript で Arcade を使用する方法を前編と後編に分けてご紹介します。 前編では、Arcade を使ったビジュアライゼーションの基本をご説明し、後編では、ArcGIS プラットフォームでの Arcade の共有についてご紹介する予定です。   Arcade で式を定義してみよう！ では、さっそく、Arcade を使ったビジュアライゼーションの方法をご紹介します。 Arcade を Web アプリで使用するには、Arcade で式を定義し、定義した式を ArcGIS API for JavaScript で参照します。このセクションでは、Arcade 式を定義してみます。   以下のサンプルは、愛知県の地価価格を可視化しています。前年と比較して価格の変動が大きいほどシンボルは大きく、また、正の値を赤、負の値を青で表しています。 このサンプルでは2つの Arcade式を定義してデータを表現しています。それぞれの式を見てみましょう。   前年と比較した価格の上昇率を求める 上記のサンプルはこちらのデータから作成しました。 愛知県 地価調査（平成25年） https://www.arcgis.com/home/item.html?id=0de12c97862c4c8ba70bbeb61e0d6236#data 残念ながら、データソースには上昇率の情報は用意されていません。 そこで、Arcade を使い、各年の地価価格のフィールド値から、前年と比較した価格の上昇率を求める式を定義します。 <!--上昇率--> <script type="text/plain" id="land-price-rate"> // 価格データがないとき null を返す if(IsEmpty($feature.Ｈ２５価格) || IsEmpty($feature.Ｈ２６価格)){ return null; } // 上昇率を求める var rate = IIf($feature.Ｈ２５価格 > 0 && $feature.Ｈ２６価格 > 0, ($feature.Ｈ２６価格 / $feature.Ｈ２５価格 - 1) * 100, null); // 絶対値を求める var abs = Abs(rate); // 結果を返す return abs; </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   Arcade は、変数の宣言や論理演算、関数の記述など JavaScript と似た構文を持っています。 もちろん、Arcade 独自の構文も定義されています。また、複雑な演算を簡単に行うための関数も豊富に提供されています。詳細は、ArcGIS Arcade ドキュメント をご参照ください。 さらに、Arcade には、フィーチャ データへアクセスするためのグローバル変数、$feature が用意されており、簡単にフィーチャのフィールド値を参照することができます。 $feature.FIELD_NAME   上昇率の正負を分類する さて、もうひとつ、上昇率の正負を分類するための Arcade 式を用意しましょう。 上昇率が正の場合 "positive" を、0 の場合は 0 を、負の場合は "negative" を返すように式を書きます。 <!--正負--> <script type="text/plain" id="land-price-pn"> // 価格データがないとき null を返す if(IsEmpty($feature.Ｈ２５価格) || IsEmpty($feature.Ｈ２６価格)){ return null; } // 上昇率を求める var rate = IIf($feature.Ｈ２５価格 > 0 && $feature.Ｈ２６価格 > 0, ($feature.Ｈ２６価格 / $feature.Ｈ２５価格 - 1) * 100, null); // 正か負かを求める var uqv = When(rate > 0, "positive", rate < 0, "negative", rate == 0, 0, null); // 結果を返す return uqv; </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   式が script タグ内に記述されているのは、ArcGIS API for JavaScript が式を文字列として参照するためです。 シンプルな一行の式のときは、JavaScript コード内にダブルまたはシングルクォートを使い書くこともできます。式が複数行に渡るときは、上記のように、別途 script タグ内に記述することもできます。この場合、ブラウザーが JavaScript としてスクリプトを実行することがないように、MINE タイプを text/plain にしましょう。   Arcade を使ってみよう！ では、用意した Arcade を ArcGIS API for JavaScript から参照し、データを可視化してみましょう。 まず、document.getElementById() メソッドを利用し、script タグ内に記述した Arcade 式を変数へ代入します。 var rateArcade = document.getElementById("land-price-rate").text; var pnArcade = document.getElementById("land-price-pn").text;‍‍‍‍   続いて、レンダラーを作成します。 シンボルの色を正負の個別値（"positive"、0、"negative"）をもとに表現したいので個別値分類クラスを使います。上昇率を表すシンボルの大きさは、visualVariables オプションを使用し設定します。 var renderer = new UniqueValueRenderer({ // 正負 valueExpression: pnArcade, valueExpressionTitle: "正負", uniqueValueInfos: [{ value: "positive", symbol: createSymbol("#ED5151"), label: "正" }, { value: 0, symbol: createSymbol("#E38B4F"), label: "0" }, { value: "negative", symbol: createSymbol("#149ECE"), label: "負" }, { value: null, symbol: createSymbol("#AAAAAA"), label: "その他" }], // 上昇率 visualVariables: [{ type: "size", valueExpression: rateArcade, valueExpressionTitle: "上昇率", minDataValue: 0, maxDataValue: 12, valueUnit: "unknown", minSize: "8px", maxSize: "60px" }] }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 式は valueExpression オプションに渡します。 あとは、いつも個別値分類を行うのと同様に、各個別値のシンボルを定義したり、シンボルの大きさを設定したりするだけです。   このように、Arcade を活用することで、実行時に式を評価し、返ってきた値をもとにレンダリングすることができます。表現したいデータを持つ属性フィールドが無い場合でも、データソース自体を更新する必要がなく、複数のフィールドを組み合わせることで多様な表現が可能になりました。 さらに、Arcade が提供する豊富な関数を利用することで、複雑な演算も簡単に行うことができます。 関連リンク ArcGIS Arcade ArcGIS API for JavaScript Arcade ... View more

  ArcGIS API for JavaScript は Dojo Toolkit と呼ばれるオープンソースのライブラリをベースに開発されています。 本連載では、はじめて Dojo を使う方を対象に、Dojo の基本をご紹介しています。   前回は Dojo を使った DOM の基本的な利用方法についてご説明しました。 今回は前編では紹介しきれなかった Dojo が提供する DOM に関するモジュールをご紹介します。   DOM ノードの取得   前回、DOM ノードを取得する方法として "dojo/dom" モジュールをご紹介しました。 Dojo には、もうひとつ、"dojo/query" が DOM ノードを取得するモジュールとして提供されています。   "dojo/query" は CSS セレクタをもとに DOM ノードを取得し、NodeList と呼ばれる配列を生成します。NodeList には、特定の要素を取り出すなどの基本的な機能のほかに、スタイルの変更や属性の制御など、取得した DOM ノードを操作する機能を追加する、いくつかのモジュールが提供されています。   query(selector, context); selector：取得したい DOM ノードの CSS セレクタ context（オプション）：CSS セレクタの対象を制限するコンテキスト。DOM ノードまたは DOM ノードの ID を渡すと、渡された DOM ノードの子要素のみをクエリ対象とします   DOM ノードの操作   前編では、DOM ノードの作成、追加、削除などの基本的な操作を行うモジュールとして "dom/dom-construct" をご紹介しました。 Dojo では、"dojo/dom-construct" の他に、主に以下の 4 つのモジュールがDOM ノードの操作に使われます。   "dojo/dom-attr"：DOM ノードの属性に関するモジュールです。   domAttr.has(node, attr); 対象の DOM ノードが指定した属性を持っているか判定します。持っているときは true を返し、持っていないときは false を返します。 node：対象の DOM ノード / ID attr：対象の属性   domAttr.get(node, attr); 対象の DOM ノードの指定した属性の値を取得します。指定した属性がない場合は null を返します。 node：対象の DOM ノード / id attr：取得したい属性   domAttr.set(node, attr, value); 対象の DOM ノードの指定した属性に新しい値を設定します。 node：対象の DOM ノード / id attr：対象の属性 value：属性に設定したい値   domAttr.remove(node, attr); 対象の DOM ノードの指定した属性を削除します。 node：対象の DOM ノード / id attr：取得したい属性   domAttr.getNodeProp(node, attr); domAttr.get() と同様に、対象の DOM ノードの指定した属性の値を取得します。指定した属性がない場合は null を返します。 domAttr.get() は指定した属性にユーザーが明示的に値を設定していないとき null を返しますが、domAttr.getNodeProp() は指定した属性にユーザーが明示的に値を設定していないときは HTML が定めるデフォルトの値を取得します。 node：対象の DOM ノード / id attr：取得したい属性   "dojo/dom-prop"：DOM ノードのプロパティに関するモジュールです。   domProp.get(node, name); 対象の DOM ノードの指定したプロパティの値を取得します。 node：対象の DOM ノード / id name：取得したいプロパティ名   domProp.set(node, name, value); 対象の DOM ノードの指定したプロパティへ値を設定します。 node：対象の DOM ノード / id name：対象のプロパティ名 value：設定したい値   "dojo/dom-class"：DOM ノードの CSS クラスに関するモジュールです。   domClass.contains(node, class); 対象の DOM ノードに指定した CSS クラスが含まれているか判定します。含まれていたら true を返し、含まれていなかったら false を返します。 node：対象の DOM ノード / id class：対象の CSS クラス名   domClass.add(node, class); 対象の DOM ノードに CSS クラスを追加します。複数のクラスを追加することもできます。 node：対象の DOM ノード / id class：追加したい CSS クラス名   domClass.remove(node, class); 対象の DOM ノードの指定した CSS クラスを削除します。複数のクラスを削除することもできます。 node：対象の DOM ノード / id class：削除したい CSS クラス名。クラス名が指定されないときは、すべてのクラスが削除されます。   domClass.replace(node, addClass, removeClass); 対象の DOM ノードのクラスを置き換えます。 node：対象の DOM ノード / id addClass：追加したい CSS クラス名 removeClass：削除したい CSS クラス名   domClass.toggle(node, class, condition); 対象の DOM ノードに指定したクラスがないときは追加し、あるときは削除します。 node：対象の DOM ノード / id class：対象の CSS クラス名 condition（オプション）：true のときはクラスを追加し、false のときはクラスを削除します。値が設定されていない場合、DOM ノードに指定したクラスがあるときは削除し、ないときは追加します。   "dojo/dom-style"：DOM ノードのスタイルに関するモジュールです。   domStyle.getComputedStyle(node); レンダリングされた DOM ノードの現在の状態についての情報を得る、算出されたスタイルを取得します。 node：対象の DOM ノード / id   domStyle.get(); 対象の DOM ノードに適用されているスタイルを取得します。 node：対象の DOM ノード / id name：取得したいスタイル名   domStyle.set (node, name, value); 対象の DOM ノードに指定したスタイルを設定します。 node：対象の DOM ノード / id name：設定したいスタイル value：設定したいスタイルの値   では、サンプルを見てみましょう。ここでは、ArcGIS Online が配信している全国市区町村界のデータから任意の都道府県を検索し、属性情報を表示させています。 検索結果を表示する要素は、“dojo/dom-construct” を使用して、新しく作成しています。その際、市区町村ごとに異なるクラスを付与するようにしました。 そして、ボタン要素をクエリし、クリック イベントを結びつけます。イベントのコールバック関数には、各ボタンに対応するクラスをクエリして、ハイライトするよう定義したスタイルを持つクラスを追加するようにしています。 また、サンプルでは "dojo/NodeList-dom" というモジュールを使用しています。これは、クエリの基本的な機能のほかに、追加の機能を提供するモジュールのひとつです。このモジュールを読み込むことで、クエリの戻り値である NodeList から、今回ご紹介してきた “dojo/dom-*” と似た、DOM ノードを操作する機能を利用できるようになります。   ※ 画像をクリックするとソースコードを表示します。   このように Dojo には DOM ノードの操作を助けるいくつかのモジュールが用意されており、動的なページの変更をシンプルなコーディングで実現できます。   次回は Dojo が提供するイベントに関するモジュールについてご紹介する予定です。   関連リンク Dojo Toolkit ArcGIS API for JavaScript 「Dojo：きほんのき」シリーズ記事： Dojo：きほんのき①～モジュール システム（前編）～ Dojo：きほんのき②～モジュール システム（後編）～ Dojo：きほんのき③～DOM（前編）～ ... View more

  ArcGIS API for JavaScript は Dojo Toolkit と呼ばれるオープンソースのライブラリをベースに開発されています。 本連載では、はじめて Dojo を使う方を対象に、Dojo の基本をご紹介しています。   前回は Dojo が導入するモジュール システムについてご説明しました。 今回は、DOM（Document Object Model）を Dojo から利用する方法について、DOM ノードの取得や作成などの基本的な操作の流れとともにご紹介します。   DOM ノードを取得してみよう   普段、どのような方法で DOM を利用していますか？ 一般的な方法としては、document オブジェクトを使うことではないでしょうか。 あるいは jQuery を使っている方は $("#hoge") このような形がすぐに頭に思い浮かぶかもしれません。   Dojo の世界で DOM ノードを取得するためにもっとも簡単でよく使われる方法は "dojo/dom" モジュールの byId メソッドを使うことです。   dom.byId(id); id：取得したい DOM ノードの ID。渡した ID を持つ DOM ノードを返します。DOM ノードが見つからない場合は null を返します。   次のサンプルは、Web マップを参照し、地図に表示するアプリです。 Web マップにはさまざまな情報が含まれています。今回はWeb マップのタイトルを、dom.byId() を使い取得した DOM ノードに表示しています。   ※ 画像をクリックするとソースコードを表示します。   DOM ノードを作ってみよう   DOM を利用する上で、DOM ノードの取得とともによく使われるのは DOM ノードの作成ではないでしょうか？ document オブジェクトでは createElement メソッドが使用されますね。   Dojo で新しく DOM ノードを作成するには、"dojo/dom-construct" モジュールの create メソッドを使用します。 domConstruct.create() は DOM ノードの作成や配置などの一連の操作をシンプルにコーディングできるようデザインされています。   domConstruct.create(tag, attrs, refNode, pos); tag：作成したい要素の文字列（例："div"、"a"、"p"、"li"、"script"、"br"） attrs（オプション）：要素の属性のオブジェクト（例：{innerHTML: "こんにちは", color: "red"}、{href: "help.html", title: "ヘルプ", innerHTML: "ヘルプ"}） refNode（オプション）：作成した要素を配置する DOM ノードまたは DOM ノードの ID pos（オプション）：refNode 内の相対位置。有効な値は以下の通り（デフォルトの値は"last"） "after"：refNode の親要素の子要素として refNode の直後に配置する "before"：refNode の親要素の子要素として refNode の直前に配置する "first"：refNode の最初の子要素として配置する "last"：refNode の最後の子要素として配置する "only"：refNode のすべての子要素と置換する "replace"：refNode と置換する 数値：refNode の n 番目の子要素として置換する   では、先ほどと同じように Web マップを読み込み、タイトルを表示してみましょう。 先ほどは、infoPanel という ID を持つ DOM ノードを取得し、infoPanel 直下にタイトルを表示していました。 今回は新しく p 要素を作成し、infoPanel の最初の子要素として配置して、その中にタイトルを表示します。     "dojo/dom-construct" には、DOM ノードを作成するメソッドがもうひとつ用意されています。 HTML 文字列から DOM ノードを作成する、domConstruct.toDom() です。   domConstruct.toDom(frag, doc); frag：DOM ノードへ変換する HTML 文字列 doc（オプション）：DocumentFragment。デフォルトは dojo/_base/window::doc（現在の document オブジェクト）。   domConstruct.toDom() は domConstruct.create() と違い、作成した DOM ノードをドキュメント内に配置するための引数が用意されていません。 作成した DOM ノードを配置するには、次のセクションで紹介する domConstruct.place() を使います。   DOM ノードを配置してみよう   すでにある DOM ノードをドキュメントに配置するときに使用するのが、domConstruct.place() です。   domConstruct.place(node, refNode, pos); node：配置したい DOM ノードまたは DOM ノードの ID refNode：配置先の DOM ノードまたは DOM ノードの ID pos（オプション）：refNode 内の相対位置   次のサンプルは新たに作成した DOM ノードに Web マップの概要を表示しています。 DOM ノードの作成には、domConstruct.toDom() を使い HTML 文字列から新しい DOM ノードを作成しています。 そして、作成した DOM ノードを domConstruct.place() を使い配置します。       DOM ノードを削除してみよう   Dojo は DOM ノードを削除する２つのメソッドを dojo/dom-construct モジュールに用意しています。 domConstruct.destroy() は対象となる DOM ノード自体を削除し、domConstruct.empty() は対象となる DOM ノードに含まれる子要素を削除します。   domConstruct.destroy(node); node：削除したい DOM ノードまたは ID。渡した DOM ノードと DOM ノードに含まれるすべての子要素を削除します   domConstruct.empty(node); node：削除したい DOM ノードまたは ID。渡した DOM ノードに含まれるすべての子要素を削除します   次のサンプルは infoPanel 要素をクリックすると、infoPanel 要素と infoPanel 要素に含まれるすべての子要素を削除します。 ※ "dojo/on" はイベントハンドラのモジュールです。詳細は次々回にご説明する予定ですが、ここでは infoPanel 要素をクリックすると第 3 引数に渡されたコールバック関数を実行します。     Dojo のモジュールを使った DOM ノードの取得、作成、配置、削除と DOM を利用する基本的な操作方法をご説明しました。 もちろん、これらの操作は document オブジェクトが用意する各メソッドを使うことで実現可能です。 しかし、Dojo のモジュールを利用することで、シンプルな記述で DOM を簡単に利用できるほか、ブラウザーごとに異なる挙動を吸収することができます。   次回はここでは紹介しきれなかった Dojo が提供する DOM をサポートするモジュールをご説明したいと思います。   関連リンク Dojo Toolkit：https://dojotoolkit.org/ ArcGIS API for JavaScript：https://developers.arcgis.com/javascript/ 「Dojo：きほんのき」シリーズ記事： Dojo：きほんのき①～モジュール システム（前編）～：https://community.esri.com/docs/DOC-8981 Dojo：きほんのき②～モジュール システム（後編）～：https://community.esri.com/docs/DOC-8982 ... View more

  ArcGIS API for JavaScript は Dojo Toolkit と呼ばれるオープンソースのライブラリをベースに開発されています。 本連載では、はじめて Dojo を使う方を対象に、Dojo の基本をご紹介しています。 前回は Dojo が導入するモジュール システムについてご説明しました。今回は、実際に Dojo からモジュールを読み込んで使用してみます。   モジュールを使ってみよう   では、さっそく Dojo がどのようにモジュールを読み込み、使用するのかを見てみましょう。 次のコードはブラウザーに地図を表示するサンプルです。   <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>モジュールを使ってみよう</title> <!-- スタイルシートの読み込み --> <link rel="stylesheet" href="//js.arcgis.com/4.1/esri/css/main.css"> <style> html, body, #viewDiv { padding:0; margin:0; height:100%; width: 100%; } </style> <!-- ライブラリの読み込み --> <script src="//js.arcgis.com/4.1/"></script> <script> require([ // 読み込みたいモジュール ID "esri/Map", "esri/views/MapView", "dojo/domReady!" ], function( // 読み込まれたモジュールを渡す Map, MapView ){ // 処理 var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", map: map, center: [139.76, 35.68], zoom: 5 }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   前回、少し触れましたが、AMD ローダーはモジュールを読み込み・使用するための require 関数を定義しています。 require の第１引数に、読み込むモジュールの ID（モジュールのファイル名）を配列で渡し、第2引数に実行したい処理を記述したコールバック関数を設定します。 AMD ローダーはモジュールの読み込みが完了するとコールバック関数を実行します。   サンプルを見てみましょう。"esri/Map"、"esri/views/MapView"、"dojo/domReady!" の３つのモジュールを読み込んでいます。 "esri/Map" と "esri/views/MapView" は ArcGIS API for JavaScript が独自に定義した地図を作成・描画するためのモジュールです（独自モジュールの定義や利用方法については後で説明しますが、独自モジュールも AMD に従い記述するので Dojo が提供するモジュールと違いはありません）。 "dojo/domReady!" は DOM の生成前にコードが実行されることを防ぐ特殊なモジュールです。地図は viewDiv 要素に表示するため、"dojo/domReady!" を読み込み、ページ内の全ての要素の生成が終わるまで require に渡したコールバック関数を AMD ローダーが実行しないようにします。   読み込まれたモジュールはコールバック関数の引数に渡されます。 サンプルでは "esri/Map" モジュールを Map、"esri/views/MapView" モジュールを MapView という名前で渡しています。 ここで重要なのは、モジュールは第1引数で渡した配列の順に渡されるということです。したがって、引数に渡すモジュール名は自由に定義できますが、モジュール ID に基づいた名前を使うことが推奨されています。   最後に、コールバック関数内に処理を記述します。処理内で、読み込まれたモジュールを使用するには、コールバック関数の引数に渡されたモジュール名を参照します。   実際にサンプルを動かしてみましょう。どうですか、地図は表示されたでしょうか？ 開発者ツールからネットワークを見てみると、地図を表示するのに必要な最小限のモジュール（読み込んだモジュールとそれらが依存するモジュール）だけが読み込まれていることがわかります。     モジュールを作ってみよう   これでモジュールの使い方はバッチリですね。今度は独自のモジュールを作ってみましょう。 次のサンプルは「モジュールを使ってみよう」で作成したサンプルから、地図を作成する処理を抜き出し、独自のモジュールとして定義したものです。   define([ "esri/Map", "esri/views/MapView" ], function(Map, MapView){ return { createMap: function(){ var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", map: map, center: [139.76, 35.68], zoom: 5 }); } }; });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   モジュールを定義する define の形を覚えているでしょうか？ define(id?, dependencies?, factory); サンプルでは id は省略され、dependencies に依存モジュールとして "esri/Map" と "esri/views/MapView" の2つのモジュールが定義されています。 factory には、引数に依存モジュールとして読み込まれた Map と MapView が渡されています。 そして、地図を作成する処理を行う createMap メソッドを定義し、createMap メソッドを他のモジュールから呼び出せるようにオブジェクトとして戻り値を返すようにしています。   作ったモジュールを使ってみよう   では、作成した独自モジュールを使ってみましょう。 demo フォルダーを作り、作成したモジュールのファイル名を module.js として demo フォルダーに格納してください。 以下は module.js をモジュールとして読み込み使用するサンプルです。   <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>作ったモジュールを使ってみよう</title> <!-- スタイルシートの読み込み --> <link rel="stylesheet" href="//js.arcgis.com/4.1/esri/css/main.css"> <style> html, body, #viewDiv { padding:0; margin:0; height:100%; width: 100%; } </style> <script> // dojoConfig の設定 var dojoConfig = { async: true, packages: [{ name: "demo", location: location.pathname.replace(/\/[^/]*$/, '') + '/demo' }] }; </script> <!-- ライブラリの読み込み --> <script src="//js.arcgis.com/4.1/"></script> <script> require([ // 読み込みたいモジュール ID "demo/module", "dojo/domReady!" ], function( // 読み込まれたモジュールを渡す module ){ // 処理を記述 module.createMap(); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   モジュールの読み込み・使用には require 関数を使用するのでしたね。 独自に定義したモジュールも、Dojo にあらかじめ用意されているモジュールと同様、モジュール ID を渡せば AMD ローダーで読み込み、利用することができるようになります。 しかし、独自のモジュールを使う場合、AMD ローダーでモジュール ID を定義する（モジュールの名前や格納場所を設定する）必要があります。   サンプルを見てみましょう。Dojo（ArcGIS API for JavaScript）を読み込む前に dojoConfig というオブジェクトを生成しています。dojoConfig は AMD ローダーが参照する Dojo の構成を設定するオブジェクトです。 この dojoConfig オブジェクトの pakcages プロパティにモジュールを設定します（パッケージはモジュールを機能ごとにまとめたものです。例えば、ユーティリティに関連するモジュール群を utils というパッケージにまとめることができます）。 packages プロパティには以下のオプションが用意されています。 name：他のモジュールからパッケージを読み込むときに参照するパッケージ名 location：参照するパッケージの格納場所へのパス main：標準で読み込むモジュール名（オプション）   サンプルでは demo というパッケージ名を付け、パッケージのパスを \demo に設定しています。main は設定していません。 では、require を見てみましょう。"demo/module" がモジュール ID として渡されています。これは demoパッケージの module というモジュールを指定しています（demo フォルダーにある module というファイルを示しています）。 もし main オプションに module を設定していた場合、モジュール ID に "demo" を渡すだけで module を読み込むこともできます。   後は、コールバック関数に処理を記述するだけです。 module で定義した createMap メソッドを呼び出してみましょう。 これで独自に定義したモジュールを使って地図を表示することができます。   モジュール システムは、はじめて Dojo を使い始めるときに戸惑う原因のひとつかもしれません。 しかし、モジュール システムを用いることで、複雑なコードも簡単に管理でき、機能ごとに分かれているためメンテナンスも容易です。 モジュール システムを理解することで、Dojo を最大限に活かしたアプリ開発を行うことができます。   次回は JavaScript の基本的な操作である要素の取得や操作についてご紹介したいと思います。   関連リンク Dojo Toolkit：https://dojotoolkit.org/ ArcGIS API for JavaScript：https://developers.arcgis.com/javascript/ 「Dojo：きほんのき」シリーズ記事： Dojo：きほんのき①～モジュール システム（前編）～：https://community.esri.com/docs/DOC-8981 ... View more

  ArcGIS API for JavaScript は Dojo Toolkit と呼ばれるオープンソースのライブラリをベースに開発されています。 Dojo は、DOM（Document Object Model）の操作をサポートする機能や、Ajax 機能、ウィジェットと呼ばれる UI パッケージ、統一されたテーマなど、効率的にアプリ開発を進めるための非常に多くの機能を提供しています。 また、モジュール システムやクラスベースの継承システムを導入しており、Dojo が提供する様々な機能を簡単に使用したり、拡張したりできるようデザインされています。 このような Dojo の特徴はアプリ開発を行う上で役立ちますが、はじめて Dojo を使い始めるときには戸惑うことが多いかもしれません。 この連載では、はじめて Dojo を使う方を対象に、Dojo の基本をご紹介していきます。   第１回目となる今回は、Dojo の特徴のひとつであるモジュール システムについてご紹介します。   モジュール システムとは？   単純な Web アプリでは、すべての処理をひとつの JavaScript ファイルにまとめるだけで十分なことが多いです。 しかし、アプリの規模が大きくなるとコードの量も増えて、ひとつの JavaScript ファイルにすべてのコードを書くことは困難になってきます。 そんなとき、コードを機能ごとに分割して、複数の JavaScript ファイルとして管理する方法がとられることもあるでしょう。 ただし、それにより分割されたシンプルなコードの管理は簡単になるかもしれませんが、複数の JavaScript ファイルを読み込む際には、コード同士の依存性を考えて読み込む順番を決めなければなりません。   このような複雑になりがちな依存関係を整理するために用いられるのが JavaScript ファイルのモジュール化です。 モジュール（ファイル）を必要に応じて読み込むため、JavaScript ファイルの依存関係を気にする必要がありません。     Dojo とモジュール システム   モジュール化を実現する方法はいくつかありますが、Dojo は AMD（非同期モジュール定義）と呼ばれる形式で記述されたモジュールをサポートしています。 AMD は、モジュールと、そのモジュールが依存するモジュールを非同期で読み込む仕組みを定義する仕様のひとつです。 AMD でのモジュール読み込みは、遅延読み込みを実現し、Web ページの表示速度が向上するというメリットもあります。   AMD では define という関数を使ってモジュールを定義します。AMD でのモジュール定義方法は以下の通りです。 define(id?, dependencies?, factory); id：モジュールを識別するための ID。モジュール ID は通常、AMD ローダー（後述）により定義されるため、省略されます。 dependencies：モジュールが依存するモジュール ID の配列。依存モジュールがない場合は省略します。依存モジュールは factory が実行される前に読み込まれ、読み込まれたモジュールは factory の引数へ渡されます。 factory：モジュールをインスタンス化するために実行される関数、またはオブジェクト。dependencies に定義された依存モジュールの読み込みが完了すると実行されます。戻り値にオブジェクトを返した場合は、他のモジュールから呼び出すことができます。   AMD の仕様に従い定義されたモジュールを読み込み、使用するライブラリのことを AMD ローダーと呼びます。AMD ローダーは require という関数を使いモジュールを読み込み、使用するように定められています。Dojo も AMD ローダーのひとつです。   Dojo はこのような AMD の仕様に従い、モジュールを定義するための define、モジュールを読み込み、使用するための require という２つの関数を提供しています。 また、Dojo には AMD ローダーとしての役割のほかに、モジュールとして定義された様々な機能が用意されています。もちろん、それらのモジュールは define を使用しているので、require を使って読み込み、使用することができますし、define を使い独自のモジュールを定義することも可能です。   次回は Dojo がどのようにモジュールを使うのかをご紹介したいと思います。   関連リンク Dojo Toolkit：https://dojotoolkit.org/ AMD：https://github.com/amdjs/amdjs-api/wiki/AMD ArcGIS API for JavaScript：https://developers.arcgis.com/javascript/ ... View more

I am following documentation 'Using Bower for Custom Builds of the ArcGIS API for JavaScript' to understand how to create custom build. In the sample Esri provided, 4 dependencies are included in the include parameter as dependencies of esri/map in build.profile.js. layers: {     'dojo/dojo': {         boot: true,         customBase: true,         include: [             // include the app, set accordingly for your application             'app/main',             // dependencies of esri/map that will be requested if not included             'dojox/gfx/path',             'dojox/gfx/svg',             'dojox/gfx/shape',             'esri/dijit/Attribution'         ],         includeLocales: ['en-us']     } }, esri/map is a dependency of app/main. So, I do not think dependencies of esri/map is necessary to be included in the parameter when app/main is included. However, when I deleted dependencies of esri/map and created custom build, these 4 dependencies are dynamically loaded. Does anyone know why the dependencies of esri/map is required to be included in the parameter if I want to create one single js file? ... View more