DOC
|
この記事は「はじめての Web マッピングアプリケーション開発」のシリーズ記事として、はじめて地図アプリ開発を行う方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れを連載しています。 第 3 回目となる今回は、前回追加した愛知県の地価公示レイヤーにレンダラーを適用し、地価公示レイヤーの属性値をもとに様々な地図表現を行う方法をご紹介します。 前回の記事と同様にソースコードは ESRIジャパンの Github で公開しています(※2021年12月追記:”ファイル名.html” が2018年時のサンプル、”ファイル名_2021.html” が2021年に書き換えしたサンプルです)ので、ぜひご覧ください。Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。 レイヤーの可視化 前回の記事では、地図に地理院タイル、全国市区町村界、愛知県の地価公示レイヤーを追加し、表示 / 非表示を切り替えるところを中心にご紹介しました。そして、下図のようなアプリケーションが完成しました。 この地図では、地価公示の標準地が「どこにあるか」が地図上に表現されています。今回使用した地価公示レイヤーは各標準地の地価や用途地域の属性値を持っており、シンボルの大きさや色を変更することでこれらの属性値を地図上に可視化することができます。 クライアント側でシンボルの大きさや色を変更するためには、シンボルの設定と、レンダラーの作成・適用が必要です。 シンボルの概要 「シンボル」は、塗りつぶしの色や輪郭線の幅、透明度などグラフィックの外観を定義します。ArcGIS API for JavaScript では多くのシンボルが用意されています。 可視化に使用できるシンボルはポリゴン・ポリライン・ポリゴンといったジオメトリ タイプによって異なり、2D マップで使用できるシンボル タイプとジオメトリ タイプの関係については次の表をご覧ください。 ジオメトリ タイプ シンボル タイプ ポイント SimpleMarkerSymbol, PictureMarkerSymbol, TextSymbol ポリライン SimpleLineSymbol, TextSymbol ポリゴン SimpleFillSymbol, PictureFillSymbol, SimpleMarkerSymbol, TextSymbol レンダラーの概要 「レンダラー」はレイヤー内のグラフィックスに使用される一連のシンボルを定義します。レンダラーを使用することで、レイヤーが持つ特定の属性に基づいてフィーチャを色やサイズの異なるシンボルで可視化することができます。 ArcGIS API 4.7 for JavaScript で用意されているレンダラーは、以下の 3 種類です。 単一レンダラー(SimpleRenderer):レイヤー内の全てのフィーチャを1つのシンボルでレンダリングします。 個別値分類レンダラー(UniqueValueRenderer):レイヤーの文字列属性に基づいて各フィーチャをレンダリングします。 数値分類レンダラー(ClassBreaksRenderer):レイヤーの数値属性に基づいて各フィーチャをレンダリングします。 ※2021年12月追記:API のバージョン 4.8 以降でヒートマップ レンダラー(HeatmapRenderer)、4.11 以降で点密度 レンダラー(DotDensityRenderer)、4.13 以降で辞書 レンダラー(DictionaryRenderer) などが追加されています。また、ほとんどの地図の可視化は、以下のカテゴリーのいずれかに分類されます。 可視化のタイプ レンダラー 位置情報のみ 単一レンダラー(SimpleRenderer), ヒートマップレンダラー(HeatmapRenderer) 個別値分類 個別値分類レンダラー(UniqueValueRenderer) 数値分類 数値分類レンダラー(ClassBreaksRenderer) 連続カラー/サイズ 可視化変数(visualVariables)を使った単一レンダラー (SimpleRenderer)または個別値分類レンダラー(UniqueValueRenderer) 多変量 可視化変数(visualVariables)を使った単一レンダラー (SimpleRenderer)または個別値分類レンダラー(UniqueValueRenderer) それでは、3 種類のレンダラーを使用して前回追加した愛知県の地価公示レイヤーを可視化してみましょう! レンダラーを適用する手順は大きく分けて次の 3 ステップです。 表示するシンボルを定義する シンボル定義を使用したレンダラーを定義する レイヤーにレンダラーを適用する ※どのレンダラーを使用しても上記の手順は変わりませんが、それぞれに指定するタイプやプロパティの値があります。 単一レンダラーで可視化してみよう まず最も基本的な「単一レンダラー」を使用します。ここでは、すべてのフィーチャを青い丸で表現した地図を作成するコードをご紹介します。 ※レイヤーを追加するまでのステップはシリーズ第 1 回目、シリーズ第 2 回目の記事にてすでにご紹介しているため、本記事では省略します。 1. シンボルを作成する 地価公示レイヤーの可視化に使用するシンボルを作成します。単一レンダラーではすべてのフィーチャを同じシンボルで描画するため、シンボルを 1 つ用意します。 シンボルには、以下のプロパティが含まれます。 type:シンボルのタイプを定義します。 size:シンボルの大きさを定義します。単位を指定しない場合は、ポイントが使用されます。 color:シンボルの色を定義します。カラー名や、RGB 値、RGBA 値を使用することができます。 outline:シンボルのアウトラインを定義します。 //地価公示レイヤーのシンボルを定義
const chikakojiLyrSymbol = {
type: "simple-marker",
size: 8,
color: "#0000ff",
outline: {
color: "white",
width: 1
}
}; 2. レンダラーを作成する レンダラーを作成し、手順 1 で作成したシンボルを symbol プロパティに渡します。 type:使用するレンダラーのタイプを定義します。単一レンダラーの場合は ”simple” と定義します。 symbol:使用するシンボルを定義します。ここでは、上で作成したシンボル「chikakojiLyrSymbol」を渡します。 //レンダラーを定義
const renderer = {
type: "simple",
//上で作成したシンボルを渡す
symbol: chikakojiLyrSymbol,
}; 3. レイヤーにレンダラーを適用する 地価公示レイヤーの renderer プロパティに、手順 2 で作成したレンダラー「renderer」を渡します。 //FeatureLayer:愛知県 地価公示:オープンデータ
const chikakojiLyr = new FeatureLayer({
url: "http://services3.arcgis.com/iH4Iz7CEdh5xTJYb/arcgis/rest/services/Aichi_ken_Chikakoji_H25/FeatureServer",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer
}); ※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。 // FeatureLayer:公示地価(国土数値情報 調査時点:令和3年1月1日): Living Atlas
const chikakojiLyr = new FeatureLayer({
url: "https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/LandPrice/FeatureServer/0",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer,
// 2021にデータを変更したことに伴いレイヤーが愛知県のみとなるようフィルタ定義を追加
definitionExpression: "L01_021 LIKE '23%'"
}); これで、単一レンダラーを使用した可視化の手順は完了です。完成した地図を見てみましょう。 完成した地図からは、地価公示の標準地がどこにあるかがわかります。 個別値分類レンダラーで可視化してみよう 次は「個別値分類レンダラー」を使用して、用途地域情報を格納している「用途」フィールドの属性値を個別値分類で可視化してみましょう! 個別値分類とは、レイヤーの特定のフィールドを使用し、フィールドの各属性値(個別値)にシンボルを割り当てて分類する方法です。ここでは、用途フィールドの住宅地、商業地域、工業地域という 3 つの個別値にそれぞれ異なるシンボルを割り当て、それ以外の値は「その他」に分類した地図を作成するコードをご紹介します。 1. シンボルを作成する それぞれの個別値に割り当てるシンボルを作成します。各個別値を異なる色で表現するためシンボルの color プロパティに個別値ごとに使用する色を設定します。 //住宅地のシンボルを定義
const residenceSym = {
type: "simple-marker",
color: "#ED5151",
size: 7,
outline: {
color: "#999999",
width: 1
}
};
//商業地域のシンボルを定義
const commercialAreaSym = {
type: "simple-marker",
color: "#149ECE",
size: 7,
outline: {
color: "#999999",
width: 1
}
};
//工業地域のシンボルを定義
const industorialZoneaSym = {
type: "simple-marker",
color: "#A7C636",
size: 7,
outline: {
color: "#999999",
width: 1
}
};
//その他のシンボルを定義
const otherSym = {
type: "simple-marker",
color: "#AAAAAA",
size: 7,
outline: {
color: "#999999",
width: 1
}
};
2. レンダラーを作成する レンダラーの uniqueValueInfos プロパティで各属性値と手順 1 で作成したシンボルを紐づけます。 type:レンダラーの種類を定義します。個別値分類レンダラーを使用する際は "unique-value" にします。 field:個別値分類に使用するフィールドを定義します。 defaultSymbol:その他のシンボルを定義します。 uniqueValueInfos:各個別値と上で作成したシンボルとの関連付けを行います。 value:各個別値を定義します。 symbol:シンボルを定義します。 //レンダラーを定義
const renderer = {
type: "unique-value",
field: "用途",
defaultSymbol: otherSym,
defaultLabel: "その他",
//それぞれの値で使用するシンボルを割り当てる
uniqueValueInfos: [{
value: "住宅地",
symbol: residenceSym,
},{
value: "商業地",
symbol: commercialAreaSym,
},{
value: "工業地",
symbol: industorialZoneaSym,
}]
}; ※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。 //レンダラーを定義
const renderer = {
type: "unique-value",
field: "L01_001", //標準値コード
defaultSymbol: otherSym,
defaultLabel: "その他",
//それぞれの値で使用するシンボルを割り当てる
// "codedValues"はjsonで確認
// https://services.arcgis.com/wlVTGRSYTzAbjjiC/ArcGIS/rest/services/LandPrice/FeatureServer/0?f=pjson
// "000" : "住宅地" ,
// "003" : "宅地見込地" ,
// "005" : "商業地" ,
// "007" : "準工業地" ,
// "009" : "工業地" ,
// "010" : "市街化調整区域内の現況宅地" ,
// "013" : "市街化調整区域内の現況林地" ,
uniqueValueInfos: [{
value: "000", //000:住宅地
symbol: residenceSym,
label: "住宅地"
},{
value: "005", //005:商業地
symbol: commercialAreaSym,
label: "商業地"
},{
value: "009", //009:工業地
symbol: industorialZoneaSym,
label: "工業地"
}]
}; 3. レイヤーにレンダラーを適用する 上で作成したレンダラーを地価公示レイヤーに適用します。 //FeatureLayer:愛知県 地価公示:オープンデータ
const chikakojiLyr = new FeatureLayer({
url: "http://services3.arcgis.com/iH4Iz7CEdh5xTJYb/arcgis/rest/services/Aichi_ken_Chikakoji_H25/FeatureServer",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer
}); ※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。 // FeatureLayer:公示地価(国土数値情報 調査時点:令和3年1月1日): Living Atlas
const chikakojiLyr = new FeatureLayer({
url: "https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/LandPrice/FeatureServer/0",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer,
// 2021にデータを変更したことに伴いレイヤーが愛知県のみとなるようフィルタ定義を追加
definitionExpression: "L01_021 LIKE '23%'"
}); これで、個別値分類レンダラーを使用した可視化の手順は完了です。作成した地図を見てみましょう。 作成した地図からは、名古屋市周辺に商業地が集中し、その周辺に住宅地が分布しているという傾向が見られます。 数値分類レンダラーで可視化してみよう 最後に「数値分類レンダラー」を使用して、数値分類による可視化を行います。数値分類による可視化とは、フィールドの値をいくつかのクラス ( 範囲 ) に分け、それぞれのクラスに対してシンボルを割り当てる手法です。ここでは、平成 26 年の地価データを示す「H26価格」フィールドをシンボルの大きさによって表現するコードをご紹介します。平成 26 年の地価公示価格を 3340 円~ 19,1000 円、191,001 円~ 820,000 円、820,001 円~ 2,640,000 円、2,640,001 円~ 8,850,000 円の 4 つのクラスに分類した地図を作成します。 1.シンボルを作成する それぞれのクラスで使用するシンボルを作成します。各クラスで使用するシンボルの大きさを size プロパティ に設定します。 //3340円-191000円の値のシンボルを定義
const sym1 ={
type: "simple-marker",
color: "#ff00ff",
size: 8,
outline: {
color: "#000000",
width: 0.5
}
};
//191001円-820000円の値のシンボルを定義
const sym2 = {
type: "simple-marker",
color: "#ff00ff",
size: 20,
outline: {
color: "#000000",
width: 0.5
}
};
//820001円-2640000円のシンボルを定義
const sym3 = {
type: "simple-marker",
color: "#ff00ff",
size: 30,
outline: {
color: "#000000",
width: 0.5
}
};
//2640001円-8850000円のシンボルを定義
const sym4={
type: "simple-marker",
color: "#ff00ff",
size: 40,
outline: {
color: "#000000",
width: 0.5
}
}; 2. レンダラーを作成する classBreakInfos プロパティで各クラスに含まれる数値の範囲を設定し、手順 2 で作成したシンボルとの紐付けを行います。 type:レンダラーの種類を定義します。クラス範囲レンダラーを使用する際は "class-breaks" にします。 field:使用するフィールドを定義します。 minValue:クラス範囲の最小値を定義します。 maxValue:クラス範囲の最大値を定義します。 symbol:使用するシンボルを定義します。 //レンダラーを定義
const renderer = {
type: "class-breaks",
field: "H26価格",
//クラス範囲を設定し、上で作成したシンボルをそれぞれに割り当てる
classBreakInfos: [{
minValue: 3340,
maxValue: 191000,
symbol: sym1
},
{
minValue: 191001,
maxValue: 820000,
symbol: sym2
},
{
minValue: 820001,
maxValue: 2640000,
symbol: sym3
},
{
minValue: 2640001,
maxValue: 8850000,
symbol: sym4
}
]
}; ※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。 //レンダラーを定義
const renderer = {
type: "class-breaks",
field: "L01_094", //令和3年
//クラス範囲を設定し、上で作成したシンボルをそれぞれに割り当てる
classBreakInfos: [{
minValue: 3340,
maxValue: 191000,
label: "3,340円~191,000円",
symbol: sym1
},
{
minValue: 191001,
maxValue: 820000,
label: "191,001円~820,000円",
symbol: sym2
},
{
minValue: 820001,
maxValue: 2640000,
label: "820,001円~2,640,000円",
symbol: sym3
},
{
minValue: 2640001,
maxValue: 8850000,
label: "2,640,001円~8,850,000円",
symbol: sym4
}
]
}; 3. レイヤーにレンダラーを適用する 上で作成したレンダラーを地価公示レイヤーに適用します。 //FeatureLayer:愛知県 地価公示:オープンデータ
const chikakojiLyr = new FeatureLayer({
url: "http://services3.arcgis.com/iH4Iz7CEdh5xTJYb/arcgis/rest/services/Aichi_ken_Chikakoji_H25/FeatureServer",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer,
opacity: 0.8
}); ※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。 // FeatureLayer:公示地価(国土数値情報 調査時点:令和3年1月1日): Living Atlas
const chikakojiLyr = new FeatureLayer({
url: "https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/LandPrice/FeatureServer/0",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer,
// 2021にデータを変更したことに伴いレイヤーが愛知県のみとなるようフィルタ定義を追加
definitionExpression: "L01_021 LIKE '23%'"
}); これで、数値分類レンダラーを使用した可視化の手順は完了です。作成した地図を見てみましょう。 作成した地図からは、名古屋市周辺に地価が特に高い地点が集中していることがわかります。 おわりに 本記事では、3 つのレンダラーを使用したシンボルの変更方法をご紹介しました。シンボルの変更ができるようになると、表現の幅が広がります。ぜひお手持ちのデータの可視化に挑戦してみてください! 今回作成したサンプルは以下で動作を確認できます。 単一 レンダラー:https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/SimpleRenderer.html 個別値分類 レンダラー:https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/UniqueValueRenderer.html 数値分類 レンダラー:https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/ClassBreakRenderer.html ※2021年12月追記:2021年12月以降は、以下で動作を確認できます。 単一 レンダラー:https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/SimpleRenderer_2021.html 個別値分類 レンダラー:https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/UniqueValueRenderer_2021.html 数値分類 レンダラー:https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/ClassBreakRenderer_2021.html 次回は、選択したフィーチャの属性情報をポップアップに表示する方法をご紹介します。 関連リンク ArcGIS API for JavaScript(ArcGIS for Developers)
... View more
07-24-2018
07:26 PM
|
1
|
0
|
3020
|
DOC
|
はじめに この記事は、「ArcGIS API for Python を使ってみよう」シリーズその③です。 当シリーズブログでは、ArcGIS API for Python(以下、Python API)の使い方をご紹介しています。 前回の記事では、Python API を用いた ArcGIS Online へのデータ作成方法をご紹介しました。今回は、ArcGIS Online 上に公開したデータを検索する方法をご紹介します。 アイテムの持つ情報から ArcGIS Online 上のアイテムを検索する Python API を使用すると ArcGIS Online 上にあるアイテムを様々な切り口から検索することができます。検索を行う際の基本コードは次の通りです。1 行目は検索を行うコード、2 行目は検索結果を表示させるコードです。 # 検索の基本コード
search_result = gis.content.search(query = "【クエリ構文を設定】")
# 検索結果を表示する
search_result アイテムを検索するためには、ContentManager クラスの search() メソッドを使用します。検索の条件にクエリ構文を設定することで検索を行うことができます。サポートされているクエリ 構文については、search reference をご覧ください (英語)。 今回は次のクエリ構文を使用します。 title:アイテムのタイトル uploaded:アイテムをアップロードした日付 tags:アイテムのタグ access:アイテムの共有レベル アイテム タイトルで検索 まずは、アイテムのタイトルで検索をしてみましょう。今回は、シリーズ②で ArcGIS Online に作成した、kanazawaParking というタイトルのフィーチャサービスを検索します。 アイテム タイトルで検索をする場合、クエリ構文に title を使用します。 # アイテム タイトル (kanazawaParking) で検索する
searched_featureservice = gis.content.search(query="title: kanazawaParking ")
searched_featureservice 検索結果は次のように配列で返されます。 検索にはワイルドカードも使用することができます。 # ワイルドカード(*) を使って検索する
searched_featureservice = gis.content.search(query = "title: kanazawa*")
searched_featureservice アイテムを ArcGIS Online にアップロードした日付で検索 アイテムを ArcGIS Online にアップロードした日付(作成日時)で検索してみましょう。クエリ構文に uploaded を使用し、期間を指定します。なお、ArcGIS 上での日付は Unix タイムで扱われているため、検索したい日付を Unix タイムに変換した上で、さらに 6 桁で 0 埋めして 19 桁にする必要があります。 以下では、指定日から現在時刻までの間にアップロードしたファイルを検索します。 # 現在時刻を Unix タイムに変換
# time モジュールを読み込む
import time
nowUnixtme = int(round(time.time() * 1000))
# 19 桁になるよう 0 埋め
nowUnixtme_padded = '%019d' % nowUnixtme # 指定した日を Unix タイムに変換
# datetime モジュールを読み込む
import datetime
tstr = '2018-03-15'
# 文字列を datetime に変換する
tdatetime = datetime.datetime.strptime(tstr, '%Y-%m-%d')
# datetime を Unix タイムに変換する
unixtime = tdatetime.timestamp()
miliUnixtime = unixtime *1000
# 19 桁になるよう 0 埋め
execUnixtme_padded = '%019d' % miliUnixtime
execUnixtme_padded 日付を Unix タイムに変換できたら、変換した Unix タイムをパラメータに指定して、検索してみましょう。 # アップロードした日付で検索
searched_date = gis.content.search(query="uploaded:["+ execUnixtme_padded+ " TO " + nowUnixtme_padded + "]")
searched_date アイテムをタグで検索 アイテムを ArcGIS Online にアップロードするときに付けたタグで検索してみましょう。付けたタグは、ArcGIS Online 上でアイテム詳細を表示して確認することができます。タグを設定することでアイテムをより検索しやすくなります。 クエリ構文に tag を指定します。 # タグで検索
searched_tag = gis.content.search(query= "tags:geodev_jp")
searched_tag アイテムを共有レベルで検索 ArcGIS Online のアイテムはそれぞれに共有レベルが設定され、デフォルトでは非公開が選択されています。アイテム共有の詳細については ArcGIS Online ヘルプをご覧ください。 アイテムの公開レベルをまとめて確認したいときに便利です。 共有レベルは次の 4 種類です。 private:非公開 org:組織サイトのメンバーに公開 public:全体に公開 shared:グループに公開 # 共有レベルで検索
searched_data = gis.content.search(query= "access:public")
searched_data 上記のコードでは、全体に公開しているアイテムを検索しています。 フォルダーを検索 ここまでは、アイテムの持つ情報をキーにアイテムを検索してきました。次は、ユーザーのフォルダーを検索します。 まずは自分が持っているフォルダーの一覧を取得してみましょう。結果は配列として返されます。 # フォルダーを検索する
searched_folderlist = user.folders
searched_folderlist では、結果として返ってきたフォルダー一覧の 1 つ目のフォルダーの中身を検索してみましょう。 # 1 つ目のフォルダーの中身を検索
user.items(folder = folderlist[0]) 検索するフォルダー名がわかっている場合は、文字列で直接フォルダー名を指定します。 # フォルダー名で検索
user.items(folder = "geodev_2018/03/15") おまけ:ArcGIS Online 全体で公開されているアイテムを検索 自分の組織外を検索するかどうかを決めるプロパティである outside_org を True にすると、他のユーザーが全体に公開しているアイテムを検索することができます。 # パブリックのアイテムを検索
searched_public = gis.content.search("title:境界線表示用 ", outside_org=True)
searched_public 今回ご紹介したコードは ESRIジャパン GitHub 上で公開しています。 ぜひ、みなさんもお試しください! 当シリーズ記事では、引き続き Python API でできることを紹介していきます。次回は、今回の記事で検索したアイテムを削除する方法をご紹介予定です。 関連リンク集 ArcGIS 関連ページ ・ArcGIS API for Python(ESRIジャパン製品ページ) ・ArcGIS for Developers(ESRIジャパン製品ページ) ・ArcGIS Online(ESRIジャパン製品ページ) ・ArcGIS for Developers 開発リソース集 ・ESRIジャパン オープンデータポータル ・ArcGIS API for Python(米国Esri ページ(英語)) シリーズブログ 関連ページ ・ArcGIS API for Python を使ってみよう:できることや使いどころ ・ArcGIS API for Python を使ってみよう ①:Jupyter Notebook で使うための環境構築 ・ArcGIS API for Python を使ってみよう:ArcGIS Pro からの環境構築 (ArcGIS Pro 2.1) ・ArcGIS API for Python を使ってみよう ②:ローカル端末から ArcGIS Online へデータを作成してみよう ・ArcGIS API for Python を使ってみよう ③:ArcGIS Online のアイテムを検索してみよう ・ArcGIS API for Python を使ってみよう ④:ArcGIS Online 上のアイテムを削除してみよう ・ArcGIS API for Python を使ってみよう ⑤:Web マップを作成してみよう ・ArcGIS API for Python を使ってみよう ⑥:解析ツールを使ってみよう ArcGIS 開発リソース集 ・ArcGIS for API for Pythonのコンセプト ・インストールガイド ・ArcGIS for API for Pythonのための基礎環境:conda入門
... View more
03-25-2018
06:21 PM
|
1
|
0
|
3414
|
DOC
|
2018 年 2 月 28 日(水)に第 13 回目となる GeoDev Meetup を開催しました。 GeoDev Meetup とは? 地理情報や地図・位置データを扱う(扱ってみたい)エンジニアやデザイナーの交流の場 ArcGIS を使ったデータ可視化・解析やアプリ開発をやってみる D3.js や Leaflet などのオープン ソースの技術と連携したいという方も大歓迎! という主旨で開催しています。 GeoDev Meetup は、新しい仲間に出会えることができる場や、もしくは、ArcGIS を利用することで新しいビジネスの創出や事業を開発するきっかけなどが生まれる場にすることができればと考えています。GIS を通じた大きなコミュニティが日本でももっと活発になるようにしていきたいと思います。 (過去の Meetup の様子は 開催レポート をご覧ください) Meetup #13 Python × 位置情報 ハンズオンの様子 今回はいつものもくもく会とはガラッと雰囲気を変えて、ハンズオンを開催しました!ハンズオンでは Jupyter Notebook と ArcGIS API for Python という Python ライブラリを使って、Jupyter Notebook 上に地図を表示させることと、ArcGIS Online で使用できる GIS 的な解析をみなさまに試していただきました。エンジニアの方、趣味で Python を楽しんでいらっしゃる方など、15 名の方々にご参加いただきました! ハンズオンの課題:東京都23区ごとの放置自転車数を解析しよう ArcGIS Open Data で公開している東京都内の放置自転車 (2015 年) のデータを使用して、東京 23 区内で最も放置自転車数が多い区を ArcGIS Online で解析します。 このデータは駅ごとに放置自転車の台数のデータを保持していますが、23 区外の駅のデータも含まれています。 解析結果は Python のグラフ表示ライブラリである matplotlib を用いて表示して、解析の途中で Jupyter Notebook に表示した地図は、そのまま ArcGIS Online の自分のコンテンツに Web マップとして保存します。 ハンズオンの内容をかいつまんでご紹介します。 Jupyter Notebook へ地図を表示 今回のハンズオンのメインの一つは、Jupyter Notebook 上への地図表示を体験することです! ArcGIS API for Python を使用することでとても簡単に Jupyter Notebook 上に地図を表示させることができます。 下記の地図では、ArcGIS Online のベースマップ上に、解析で使用する東京都内の放置自転車 (2015 年) のレイヤーと、東京都の境界レイヤーを重ねています。 ArcGIS Online を使って 23 区ごとの放置自転車数を解析 今回の解析では、エリア集計という解析を行いました。これは、ポリゴンの中にあるポイント(駅の場所と放置自転車数を保持した)の個数とポイントが持つ放置自転車数を合計させるというものです。 解析結果をグラフに表すと次のようになりました。弊社オフィスのある千代田区が一番放置自転車が多いという結果に! Web マップとして保存 最後に Jupyter Notebook 上に表示していた地図を Web マップとして ArcGIS Online にアップロードしてハンズオンは終了! 当日使用したノートブックは ESRIジャパン Github で公開していますので、興味のある方はぜひ挑戦してみてください! おわりに ご参加いただいたみなさま、ありがとうございました!初のハンズオン形式での開催となり、運営側も緊張しましたが、みなさまから「楽しかった」「また参加したい」というお声をいただくことができ、うれしい限りです。今後も新しいコンテンツを取り入れながら、より充実した Meetup を開催したいと思います!またみなさまにお会いできることを楽しみにしています! 関連リンク ArcGIS 関連ページ GeoDev Meetup 開催レポート ArcGIS for Developers ArcGIS for Developers 開発リソース集 ArcGIS Online ArcGIS Open Data ハンズオンで使用したデータ 東京都内の放置自転車数データ(CSV) 東京都の境界線データ
... View more
03-07-2018
10:20 PM
|
1
|
0
|
736
|
DOC
|
2017 年 12 月 7 日(木)に第 12 回目となる GeoDev Meetup を開催しました。 今回は GIS LT 大会ということで、参加者のみなさまには総勢 7 名による熱い LT をお聞きいただきました! GeoDev Meetup とは? 地理情報や地図・位置データを扱う(扱ってみたい)エンジニアやデザイナーの交流の場 ArcGIS を使ったデータ可視化・解析やアプリ開発をやってみる D3.js や Leaflet などのオープン ソースの技術と連携したいという方も大歓迎! ということを目指して開催しています。 GeoDev Meetup を、新しい仲間に出会えることができる場や、もしくは、ArcGIS を利用することで、新しいビジネスの創出や新しい事業を開発するきっかけなどが生まれる場にすることができればとも考えています。ArcGIS を通じた大きなコミュニティが日本でももっと活発になるようにしていきたいと思います。 (過去の Meetup の様子は 開催レポート をご覧ください) GIS LT 大会 毎回 Meetup では 2本程度 LT を行っているのですが、それをたくさん集めたら楽しそうだな、ということでいつものもくもく会とは違った形でこのような GIS LT 大会を開催するに至りました! 当日の LT の内容は次の通りです。 LT番号 タイトル 発表者 LT① ArcGIS Online を使って e-Stat のデータを可視化してみた! muraemon_ej LT② GIS初心者がこの半年でやったこと kikatatrio LT③ 映画「シン・ゴジラ」に出たあの地図を読み解く Kohsuke Hada LT④ ARKit を使って 3D モデルを AR で表示してみた yuki33 LT⑤ 位置情報を用いて映画や漫画を可視化する方法 Kazuya Kitahara LT⑥ Mable -「データに触れる」という体験を豊かなものに。 PEmugi LT⑦ 路線図を使ってオープンデータを可視化してみた HikaruMaruyama LT①:ArcGIS Online を使って e-Stat のデータを可視化してみた! muraemon_ej ESRIジャパン スタッフより、e-Stat からダウンロードしたデータの可視化について LT を行いました。詳細な手順は ブログ記事 にも書いていますのでご覧ください。ArcGIS では外部のサイトで提供されるオープン データももちろん使用することができますので、ぜひいろんなオープン データを可視化してみてください! LT②:GIS初心者がこの半年でやったことkikatatrio 今年の Meetup に 6 回も参加してくださった kikatatrio さん!GIS 初心者の目線で、つまずいたこと、難しかったことなどを交えながら Meetup のもくもくタイムで取り組んだことを発表してくださいました。kikatatrio さんが 試行錯誤を重ねて作成された Web アプリ は ArcGIS Online 上で公開されています!発表資料も こちら で公開されています。 LT③:映画「シン・ゴジラ」に出たあの地図を読み解く Kohsuke Hada 今回はなんと映画「シン・ゴジラ」を扱った LT が 2 本ありました! 1 本目は Kohsuke Hada さん! シン・ゴジラのワンシーンでチラッと映ったマップ上のグリッドコードが本当に現在地と合っているのか、を紐解いていくという、ゴジラ ファンだけではなく、地図好きな人にとってもたまらない LT でした!(なんと現在地と合っていないそうです!!)発表資料は SlideShare 上にアップされています。 LT④:ARKit を使って 3D モデルを AR で表示してみた yuki33 ESRIジャパンスタッフより ARKit を使用して 街並みの 3D モデルを AR で表示するアプリの作成方法のご紹介とデモをお見せしました。詳細は ブログ記事 にも書いていますのでご覧ください! LT⑤:位置情報を用いて映画や漫画を可視化する方法 Kazuya Kitahara Cesium.js を使用して シン・ゴジラの作中での移動ルートを可視化した GEOGRAPHIC of GODZILLA という Web アプリを作成された Kazuya Kitahara さん!Cesium.js を使った開発方法と開発秘話を発表してくださいました。このアプリを作るために、何度も映画館に通って、位置とアクションを調べたそうです。とても素敵なアプリですので、ぜひご覧ください。発表資料も Speaker Deck で公開されています! LT⑥:Mable -「データに触れる」という体験を豊かなものに。 PEmugi PEmugi さんが携わっている Mable (メーブル)の活動についてお話ししてくださいました。デザイン パターンや、インターフェースとして地図を新しい形で日常生活に取り入れることを目指し、地図をモチーフにしたおしゃれな小物を作るワークショップなどを開催されているそうです! LT⑦:路線図を使ってオープンデータを可視化してみた HikaruMaruyama 駅すぱあと路線図 を使って、駅から 500m 以内に存在する駐輪場の数を可視化されたことについてお話をしてくださいました。駅すぱあと路線図とは、信頼性の高い公共交通機関の路線情報を API で取得できる路線検索のWeb API です。私は「駅すぱあと」と言えば、電車の乗り換え検索のイメージがあったので、可視化にも使用できると聞いて驚きました。発表資料は Speaker Deck で公開されています。 Geodev Meetup 今年の振り返り LT 今回の GIS LT 大会では、ESRIジャパン スタッフより、GeoDev グループの今年 1 年の活動を振り返る LT も行いました。GeoDev グループの活動が始まったのは、ちょうど 1 年前の昨年 12 月で、RESAS ハッカソンの支援 を行ったことがきっかけでした!今年は RESAS データの可視化や、2D/3D データの可視化をテーマに 11 回の Meetup を開催し、のべ 130 人の方々にご参加いただきました。ご参加いただいたみなさま、ありがとうございました! GeoDev Meetup 来年の予定 LT 最後に ESRIジャパン スタッフより、来年以降の GeoDev グループの活動についての LT を行いました!来年度も、コラボ企画などみなさまに楽しんでいただける企画を行い、コミュニティの拡大を目指していきたいと思います!乞うご期待! おわりに ご参加いただいたみなさま、ありがとうございました! 熱い LT を聞き、参加者のみなさまも「GIS で何かやってみたい!」と思われたのではないでしょうか。来年も GeoDev Meetup を継続的に開催予定ですので、今回の LT 大会で得たヒントをもとに、ぜひ次回のもくもくタイムでもくもくしましょう! またみなさまにお会いできることを楽しみにしています! 関連リンク ArcGIS 関連ページ ・GeoDev Meetup 開催レポート ・ArcGIS for Developers ・ArcGIS for Developers 開発リソース集 ・ArcGIS Online ・ArcGIS Open Data
... View more
12-14-2017
01:48 AM
|
0
|
0
|
1019
|
DOC
|
2017 年 12 月 7 日に、GeoDev Meetup #12 GIS LT 大会を開催いたします!本記事では、その中身を先取りでご紹介します。 GeoDev Meetup #12 GIS LT 大会の概要 今回の Meetup は GIS LT 大会です!GeoDev Meetup では毎回、もくもくタイムをメインにゲストやスタッフが LT を行っていますが、今回は丸々全部が GIS や位置情報に関する LT タイムです。ゲストによる LT のほかに、ESRIジャパンスタッフによる LT、当日飛び込みでの LT など GIS に関する様々な LT を行う予定です。 お酒やソフトドリンク、ピザなどの軽食もご用意していますので、飲みながら地図や位置情報について熱く語りませんか?もちろん、初めての方も大歓迎です! GeoDev Meetup とは? 地理情報や地図・位置データを扱う(扱ってみたい)エンジニアやデザイナーの交流の場 ArcGIS を使ったデータ可視化・解析やアプリ開発をやってみる D3.js や Leaflet などのオープン ソースの技術と連携したいという方も大歓迎! ということを目指して開催しています。 前回までの GeoDev Meetup の雰囲気を見てみたいという方は 開催レポート をご覧ください! コンテンツ 当日のタイムテーブルです。 ※タイムテーブルは予告なく変更することがあります。あらかじめご了承ください。 時間 内容 18:30 開場 19:00 オープニング / 趣旨説明 19:05 Geodev Meetup 今年の振り返り 19:10 乾杯 → 自己紹介 19:20 LT①:ArcGIS Online を使って e-Stat のデータを可視化してみた! muraemon_ej 19:30 LT②:GIS初心者がこの半年でやったこと(仮) kikatatrio 19:40 LT③:映画「シン・ゴジラ」に出たあの地図を読み解く Kohsuke Hada 19:50 休憩・時間調整 20:00 LT④:ARKit を使って 3D モデルを AR で表示してみた yuki33 20:10 LT⑤:タイトル未定 Kazuya Kitahara 20:20 LT⑥:Mable -「データに触れる」という体験を豊かなものに。 PEmugi 20:30 LT⑦:路線図を使ってオープンデータを可視化してみた HikaruMaruyama 20:40 飛び込みLT① 20:45 飛び込みLT② 20:50 GeoDev Meetup 来年の予定 20:55 クロージング(記念撮影、アンケート) 21:00 撤収 ゲスト による LT タイムには、5 人の方がご登壇予定です。シン・ゴジラの話や、オープンデータを可視化した話などなど、熱い LT がそろっています。 飛び込み LT は当日募集しますので、我こそは!という方がいらっしゃいましたら、いつでもお声掛けください。内容は位置情報や地図に関するものなら何でも OK です!発表形式はパワーポイントのほか、ブログ記事などの画面をご用意していただくという形式でも結構です!なお、飛び込み LT をするかも!? という方は、ご自身の ノート PC をお持ちください。 ESRIジャパン スタッフによる LT では、e-Stat のデータを ArcGIS Online で可視化した話や、3D モデルを AR で表示した話などをご紹介します! 日時/会場 2017 年 12 月 7 日 (木) 19 時〜21 時(18 時 30 分受付開始) ESRIジャパン(株) 5F セミナールーム 東京都千代田区平河町 2-7-1(塩崎ビル) https://www.esrij.com/about/access/headquarters/ 参加登録 参加は connpass というサイトで受け付けています。GeoDev Meetup のページ にアクセスし、参加申し込みを行ってください。「connpass のアカウント持ってない・・・」 という方も大丈夫です!3 分ほどあればアカウントの作成と参加申し込みを完了させることができます。 おわりに GeoDev グループの皆様!今年 1 年ありがとうございました!ぜひ GeoDev Meetup #12 にご参加いただき、みんなで今年 1 年を振り返りましょう。 「GeoDev Meetup に参加してみたいけど…もくもくタイムに何をすればいいかわからない」という方!今回 LT を聞いて「こんなことやってみたいな」とアイディアを膨らませていただいて、次回の GeoDev Meetup のもくもくタイムでもくもく作業する、というのはいかがでしょうか! スタッフ一同、皆様のご参加をお待ちしております。
... View more
12-03-2017
08:51 PM
|
0
|
0
|
697
|
DOC
|
2017 年 11 月 9 日(木)に、第 11 回目となる GeoDev Meetup を開催しました。 今回は 3D GIS をテーマとし、参加者のみなさまには 3D でのデータ可視化に挑戦していただきました! GeoDev Meetup とは? 地理情報や地図・位置データを扱う(扱ってみたい)エンジニアやデザイナーの交流の場 ArcGIS を使ったデータ可視化・解析やアプリ開発をやってみる D3.js や Leaflet などのオープン ソースの技術と連携したいという方も大歓迎! ということを目指して開催しています。 GeoDev Meetup を、新しい仲間に出会えることができる場や、もしくは、ArcGIS を利用することで、新しいビジネスの創出や新しい事業を開発するきっかけなどが生まれる場にすることができればとも考えています。ArcGIS を通じた大きなコミュニティが日本でももっと活発になるようにしていきたいと思います。 (過去の Meetup の様子は 開催レポート をご覧ください) 3D GIS とは 位置情報に基づいて表現できるデータに高さの要素を加えて立体的に表現することで、より直感的に情報を把握できる可視化表現です。 3D GIS ではシンボルを単に 3D で描画するだけではなく、例えばポイントが持つ属性情に応じて任意の値を 3D シンボルで表現することができます。 実演 : ArcGIS を使って 2Dのデータを 3D で可視化してみよう Meetup では、毎回色々な形でのデータ可視化手順を紹介しています。今回は、ArcGIS Online に組み込まれたシーン ビューアーという Web アプリを使って、高さの情報を持たない 2D のデータを 3D で可視化する手順についてご紹介しました。今回使用したデータは避難所のポイント データで、階数の属性値をもとにシンボルの高さを立ち上げました。 「2D のデータを 3D で可視化するのって難しいんじゃないの?」とお考えの方もいらっしゃるかもしれませんが、決してそんなことはありません!ArcGIS Online では 2D での可視化と同じように簡単に行えます。 3D マップを作成する方法については、ESRIジャパン開発リソース集 でもご紹介していますので、ご覧ください。 もくもくタイム もくもくタイムは皆さんが思い思いに作業をする時間です。 弊社社員に「こんなことやってみたいけどできる?」などと質問していただいてもいいですし、「作業に集中したい!」という方は、ひたすらもくもくと作業していただいて構いません。 3D をテーマにした GeoDev Meetup は今回が初めてだったので、参加者のみなさんも「まずはいろいろ試してみよう!」と ArcGIS Online で試行錯誤しながら 3D マップを作成されている様子でした。3D マップを作成する以外にも、ArcGIS API for JavaScript でできる表現を様々試してみて、なにができるのかを確認する方もいました。 3D 表現の仕方はまさに十人十色で、ポイントの情報を球体で表現されている方がいたり、後ろからこっそり覗いて「おおお!そういう表現の仕方もあるのか!」と楽しませていただきました! LT タイム! three.js で作成したグラフィックスを ArcGIS の 3D 地図上に表示してみる 最後に弊社社員が、手軽に 3D コンテンツを制作できる JavaScript ライブラリである three.js とArcGIS との連携について LT をしました。three.js で作成した 3D シンボルを ArcGIS API for JavaScript に読み込み、Web アプリで使用しています。 上の画像の Web アプリがスクリーンに表示されて地球の上を ISS(国際宇宙ステーション)が移動する様子が見えると、会場内からは「おおお~!」という感嘆の声が上がりました。頑張って作りこむとこのようなシンボルを使ったアプリを作成することも可能です! 成果発表会 Meetup では毎回、もくもくタイムで取組んだ成果を数名に披露していただく場を設けています!今回はお2人が成果を披露してくださいました。 オープンストリートマップのデータをダウンロードして ArcGIS で可視化しました!(KKida) Overpass Turbo というサイトでオープンストリートマップから永田町周辺のデータを取得して ArcGIS Online で可視化!さらに飲食店のデータも追加し、3D で表現されていました。 栃木県の病院の病床数を 3D で可視化しました!(motonobu_taniguchi) GeoDev Meetup #9 に引き続き、2回目の成果 LT ありがとうございます! 栃木県内の病院の病床数を 3D で可視化されました!このように 2D のデータが持つ属性データを 3D で可視化すると、パッと見てすぐに状況が把握できます。これぞ、まさに 3D の醍醐味ですね!作成した 3D マップは「栃木の病院」というタイトルで、Web AppBuilder for ArcGIS からアプリにして誰でも見ることができるように公開しました!(※予告なく公開を終了する場合があります) おわりに ご参加いただいたみなさま、ありがとうございました! 3D での可視化はいかがでしたか?3D で可視化することの可能性や楽しさを実感していただけたのではないかと思います。 今後も GeoDev Meetup を継続的に開催予定です。可視化は初めて…という方も弊社社員が手厚くサポートしますので、お気軽に Meetup にいらしてくださいね。「そういえばしばらく参加していないなあ…」という方のご参加もお待ちしております! ちなみに、12月の Meetup では忘年会を計画しています。またみなさまにお会いできることを楽しみにしています! 関連リンク GeoDev Meetup 開催レポート ArcGIS for Developers ArcGIS for Developers 開発リソース集 ArcGIS Online ArcGIS Open Data
... View more
11-12-2017
11:53 PM
|
1
|
0
|
733
|
DOC
|
ArcGIS でデータの可視化に挑戦してみたいとお考えの皆様、「どんな形式のデータを使えるのかわからない」「可視化するデータを無償で手に入れたい」などとお悩みではありせんか? 本記事では、無償でデータを提供している e-Stat(政府統計の総合窓口)から統計データを入手し、ArcGIS Online で可視化する方法をご紹介します! ArcGIS Online はマップの作成・共有・利用を、いつでもどこでも行える環境を提供するクラウド GIS です。 本記事では、GIS ソフトウェアで標準的に用いられるデータフォーマットである「シェープファイル」を使用しますが、緯度経度や住所などの位置情報を持った CSV 形式のようなデータも、変換処理を行うことで地図上に可視化することができます。 ArcGIS Online で扱えるデータについては ArcGIS Online ヘルプをご覧ください。 データの入手の前に、簡単にシェープファイルの概要についてご紹介します。 シェープファイルとは シェープファイルは GIS データ フォーマットの1つで、図形情報と属性情報を持つデータ形式です。ArcGIS だけでなく、多くの GIS ソフトウェアで利用されており、さまざまな機関からシェープファイル形式でデータが提供、販売されています。 シェープファイルは、拡張子が異なる複数のファイルから構成されています。 例えば、後ほど使用する e-Stat からダウンロードした国勢調査のシェープファイルをエクスプローラーで見てみると、次の画像のように4つの異なる拡張子のファイルが存在しています。この国勢調査のデータを地図上で表示させるには、4 種類のファイルすべてが必要です。 シェープファイルを構成する主なファイルは以下です。 .shp:図形情報を格納するファイル .shx:図形のインデックス情報を格納するファイル .dbf:図形の属性情報を格納するテーブル .prj :座標系定義情報を格納するファイル シェープファイルの詳細については GIS 基礎解説をご覧ください。 それでは、e-Stat から地図上に可視化するデータをダウンロードしてみましょう。 e-Stat とは e-Stat とは、各府省が公表する統計データをまとめた、政府統計のポータル サイトです。各府省が公表している統計表は Excel・CSV・PDF 形式だけではなく、シェープファイル形式でもダウンロードできます! 最初にもご紹介した通り、ArcGIS Online では CSV 形式のデータを読み込むことも可能ですが、シェープファイルに比べて必要となる設定の数が多いため、シェープファイル形式を使用する方がより簡単に可視化の作業が行えます。 e-Stat からシェープファイル形式でダウンロードできるデータは、現時点では以下の5つです。 国勢調査 経済センサス-基礎調査 経済センサス-活動調査 事業所・企業統計調査 農林業センサス それぞれのデータは市区町村単位で提供され、ほとんどのデータが複数年度分提供されています。 e-Stat からデータをダウンロード それでは、平成27年度(2015年)の国勢調査データをダウンロードしてみましょう! 手順 e-Stat にアクセスします。 「地図や図表で見る」内の「地図で見る統計(統計 GIS)」をクリックします。 「データダウンロード」をクリックします。 調査名のプルダウン メニューから、「国勢調査」を選択します。 左側の Step1 で「平成 27 年度国勢調査(小地域)2015/10/01」を選択します。 右側の Step2 で「男女別人口総数及び世帯総数」にチェックを入れます。 [統計表各種データダウンロードへ]をクリックします。 Step3 でダウンロードしたい地域を選択します。今回は東京都練馬区を選択し、[検索]をクリックします。 Step4 に表示された境界データの中から、「世界測地系平面直角座標系・Shape 形式」の「練馬区(213KB)」をクリックし、ダウンロードします。 「世界測地系平面直角座標系・Shape 形式」の「定義書」をクリックし、同様にダウンロードします。 ダウンロードしたデータの中身を定義書で確認してみましょう! 定義書にはダウンロードしたデータについての説明が書かれています。ArcGIS Online で可視化する際、属性テーブルのフィールド名には、定義書の「フィールド名」の部分が表示されますが、「N_KEN」「HCODE」などと記載されており、内容を連想しにくいのではないでしょうか。定義書の「項目内容」から、各フィールドの内容をしっかりと確認しておきましょう。 ダウンロードしたデータを可視化してみた 最後に、上のステップでダウンロードしたシェープファイルのデータを ArcGIS Online で可視化してみました! 上の地図は、ダウンロードしたシェープファイルを地図上に追加して人口と世帯数を可視化したものです。シンボルが大きいほど人口が多く、シンボルの色が濃いほど世帯数が多いことを表しています。 「シンボルのサイズが小さく色が濃い場所は、一人暮らしの住民が多いのかな?」などと推測したり、「やっぱり駅の近くは人口が多いなあ」などと実感したりできますね! 可視化の手順は以下の通りです。 ArcGIS Online にサイン インします。 コンテンツ ページの左上にある[アイテムの追加]のプルダウン メニューから「コンピューター上」を選択します。 国勢調査データ(Zip ファイル)を選択、タグを追加し、[アイテムの追加]をクリックします。 [マップ ビューアーで開く]をクリックすると、マップ ビューアーが起動します。 「①表示する属性を選択」のプルダウン メニューから「SETAI」を選択します。 [+ 属性の追加]をクリックし、プルダウン メニューから「JINKO」を選択します。 「②描画スタイルの選択」で「色とサイズ」が選択されていることを確認し、[完了]をクリックします。 手順は以上です。 おわりに 今回は e-Stat のデータのダウンロードと、その可視化に挑戦してみました! 統計データを文字だけで見てもピンとこないかもしれませんが、このように可視化した地図を見るといろいろな考えが浮かぶのではないでしょうか。 ぜひ皆さんもオリジナルのテーマで e-Stat のデータを可視化し、思いを巡らせてみてください!
... View more
10-20-2017
03:15 AM
|
1
|
0
|
3373
|
DOC
|
私は今年 4 月に ESRIジャパン株式会社へ入社したばかりのアプリ開発初心者です。その私が Web アプリ開発の初めの一歩である「開発環境の構築」に取り組んでみました!本記事が「これから Web アプリ開発を始めるぞ!」という初心者の方の参考になれば幸いです。 自己紹介 2017 年 4 月に入社し、ArcGIS の開発者製品を担当しているグループの一員になりました。学生時代にはほんのすこし Python を勉強しましたが、ほぼ開発初心者です。現在、地図アプリ開発を行うためにプログラミングや Web アプリの基礎を勉強しているところです。まだまだ分からないことだらけですが、一日でも早く開発のプロになれるよう頑張ります! Web アプリとは? アプリには、大きく分けて 2 つの種類があります。1 つ目は Web ブラウザー上で動作し、Web ブラウザーを用いて利用する「Web アプリ」です。2 つ目は PC やスマホなどの端末にインストールして使用する「ネイティブアプリ」です。私が Web アプリ開発の勉強中ということもあり、本記事では Web アプリ開発にフォーカスします! Web アプリは OS に依存せずに動作するため、スマートフォンやパソコンなどのプラットフォームごとにアプリを開発する手間が不要になるという開発者側のメリットに加え、利用者側にも端末にアプリをインストールする手間が不要というメリットがあります。 Web アプリ開発には何が必要? Web アプリ開発をスタートするためにまず準備するものは以下の2つです。 テキストエディター Web ブラウザー なお、私は Windows マシンを開発に使用していますので、本記事も Windows をお使いの方向けの構成になっています。また、開発言語は JavaScript です。 準備1:テキストエディター プログラミングといえば…上の画像のような、黒い背景にコードが書かれたものを連想しませんか? このようなコードを入力するソフトが「テキストエディター」です。 無償で利用できるテキストエディターには 「Visual Studio Code」「Sublime Text」「Atom」 等があります。 これらのテキストエディターは各製品の HP から簡単にインストールすることができます。 私は軽量・高速だといわれている Visual Studio Code を使うことにしました! ちなみに、Windows にデフォルトで入っているメモ帳もテキストエディターとして使用できると聞き、メモ帳でもコードを書いてみましたが、コードが色分けされないため少し見づらく、プログラミングには不向きでした。 何かひとつ、プログラミングに適したテキストエディターをインストールされることをお勧めします! Visual Studio Code のインストール では Visual Studio Code をインストールしてみましょう! 手順 Visual Studio Code のダウンロードページ にアクセスします。 Windows のボタンをクリックするとエクスプローラーが立ち上がります。(Windows の 32 ビットと 64 ビット用のインストーラーがダウンロードできます。私は 64 ビット版 Windows のマシンを使用しているので、64 ビット用のインストーラーをダウンロードします) 保存先を指定して保存します。 保存したファイルをダブルクリックすると、インストーラーが起動します。 [次へ(N)] をクリックします。 ライセンスの同意文書を読み、[同意する(A)] をクリックします。 Visual Studio Code のインストール先を指定し、[次へ(N)] をクリックします。 (デフォルトのままでも構いません) スタートメニューに表示されるプログラムグループの名前を設定し、[次へ(N)] をクリックします。 (デフォルトのままでも構いません) 追加タスクを選択し、[次へ(N)] をクリックします。 (デフォルトのままでも構いません) [インストール(N)] をクリックするとインストールが開始されます。 Visual Studio Code のセットアップ ウィザードの完了画面が表示されるとインストールは完了です。「Visual Studio Code を実行する」 にチェックが入っていることを確認し、[完了] をクリックします。 自動的に Visual Studio Code が起動します。 デフォルトの Visual Studio Code の画面構成は、以下の画像の通りです。 メニュー バー:「ファイル」「編集」などのメニューが表示される エディター:コードを書く部分 アクティビティ バー:検索やデバッグ、ソース管理等のビューを開くことができる ステータス バー:編集中のコードの情報が表示される 準備2:Web ブラウザー Web アプリは Web ブラウザー上で実行するため、 Web ブラウザーが必須です。 私は普段から使い慣れている Google Chrome を使うことにしました!(Google Chrome は Google Chrome のダウンロードページ よりダウンロードできます) 特別な設定を行う必要はありません。普段使っている Web ブラウザーをそのまま使用することができます。 簡単な Web ページの作成 早速、用意した開発環境を使用して Web ブラウザーに「Hello World」と表示される簡単な Web ページを作ってみました! 手順 Visual Studio Code を起動します。 メニュー バーの [ファイル(F)] をクリックし、[新規ファイル(N)] を選択します。 ステータス バー右端のスマイル マークの隣の [プレーンテキスト] をクリックし、言語モードを HTML に変更します。 エディターに以下の HTML と JavaScript で構成されたコードを書きます。コードは基本的にたった一文字間違えただけでも動かないのでご注意ください! メニュー バーの [ファイル(F)] をクリックし、[名前を付けて保存(A)] を選択、ファイルを HTML 形式で保存します。 エクスプローラーから保存したファイルをダブルクリックして Web ブラウザーで開くと、以下のような画面になります。 Hello World が表示されない場合は、コードにタイプミスなどがあると考えられます。もう一度コードを見直してみてみましょう!ちなみに私は、「”」や「;」が抜けるミスをよくしてしまいます…。 おわりに 以上で基本的な開発環境の構築は完了です。これで Web アプリ開発を始める準備はできました。インターネット上で「JavaScript サンプル」などと検索するとサンプルコードがたくさん出てきますので、いろいろな Web アプリの作成にチャレンジしてみてください!
... View more
09-19-2017
06:35 PM
|
1
|
0
|
7392
|
DOC
|
2017 年 7 月 19 日(水)に 第 8 回目となる GeoDev Meetup を開催しました! 前回に引き続き、ArcGIS で作成した地図をアプリに組み込んでみることを主なテーマとしてチャレンジしました。 GeoDev Meetup とは? 地理情報や地図・位置データを扱う(扱ってみたい)エンジニアやデザイナーの交流の場 ArcGIS を使ったデータ可視化・解析やアプリ開発をやってみる D3.js や Leaflet などのオープン ソースの技術と連携したいという方も大歓迎! という趣旨で開催しています。 GeoDev Meetup を、新しい仲間に出会えることができる場や、もしくは、ArcGIS を利用することで、新しいビジネスの創出や新しい事業を開発するきっかけなどが生まれる場にすることができればとも考えています。ArcGIS を通じた大きなコミュニティが日本でももっと活発になるようにしていきたいと思います。 (過去の Meetup の様子はこちら→ 第 7 回 第 6 回 ) もくもくタイム もくもくタイムは皆さんが思い思いに作業をする時間です。 「作業に集中したい!」という方はひたすらもくもくと作業して構いませんし、弊社スタッフに「こんなことやってみたいけどできる?」などと質問することもできます。 今回のもくもくタイムでは、弊社スタッフがネイティブアプリや Web マップの作成をお手伝いしたり、完成に向けて集中して作業していらっしゃる方がいたり、とてもいい雰囲気でした。 継続して Meetup に参加されているリピーターの方々は「前回可視化したデータを使って、今日はアプリを作るぞ!」「前回よりデータ数を増やしてストーリーマップを作るぞ!」と着々とステップアップされている様子で、主催者としてうれしい限りでした! ストーリーマップを作成しよう Meetup 参加者のみなさんがもくもくタイムに取り組まれるテーマとして大人気の ストーリーマップ について、ここでも少しご紹介します! ストーリーマップは ArcGIS Online および Portal for ArcGIS で簡単に作成・利用できる、地図とさまざまなコンテンツ(テキスト、画像、動画)を組み合わせた Web アプリケーションです。 ArcGIS プラットフォームで作成した Web マップ から、[ Web アプリの作成 ] をクリックし、テンプレートを選択するだけでストーリーマップのベースが簡単に出来上がります! もちろん、好みに応じてデザインなどを変更することもできます! 詳細設定については かんたんストーリーマップ作成ガイド をご参照ください。 成果発表会 Meetup では毎回、もくもくタイムで取組んだ成果を披露していただく場を設けています!今回はお2人が発表してくださいました。 Xamarin を使用し、Android アプリを作成しました! ArcGIS Runtime SDK for .NET で Xamarin を使ってAndroid アプリを作成されました。Xamarin を使って地図を表示することに興味を持ち、今回の Meetup に参加してくださったそうです! Meetup には Xamarin 大好きな弊社社員も参加しておりますので、今後も Xamarin を使用した地図アプリ開発にご興味のある方のご参加をお待ちしております! ストーリーマップで亀戸の焼肉屋マップを作成しました! 上でご紹介したストーリーマップ作成テンプレートを利用して、亀戸の焼肉屋マップを作成されました!見ているだけでお腹が空いてきますね。 前回は亀戸の七福神マップの作成に挑戦され、今回はさらにデータ数を倍に増やしこの焼肉屋マップ作成に挑戦されたとのことです! LT タイム! Kotlin で地図アプリを作ってみた 最後に弊社スタッフが、ArcGIS Runtime SDK for Android を使用した Kotlin による地図アプリ開発についての LT を行いました。Kotlin は Android 開発の言語として新しくサポートされた言語です。Android (Java) と完全な互換性があるので、Android 用のライブラリでも Kotlin で使用することができます。タップした地図の上に緯度経度の情報を設定して吹き出しを表示するだけの簡単なアプリですが、内容など詳しくは Kotlin で地図アプリを作ってみた をご覧ください。 おわりに ご参加いただいたみなさん、ありがとうございました! Web アプリの作成やネイティブアプリの作成など、それぞれやりたいことに挑戦されていて、すごく良い雰囲気で Meetup を開催できたのではないかと思います。 今後も GeoDev Meetup を継続的に開催予定です。可視化は初めて…という方も弊社スタッフが手厚くサポートしますので、お気軽に Meetup にいらしてくださいね。 「そういえばしばらく参加していないなあ…」という方のご参加もお待ちしております! またみなさまにお会いできることを楽しみにしています! 関連リンク GeoDev Meetup 開催レポート ・GeoDev Meetup – RESAS API ハッカソン予習・復習会 開催レポート ・GeoDev Meetup – RESAS データ可視化・解析もくもく会 開催レポート ・GeoDev Meetup #4 - 地図データ可視化・アプリ作成もくもく会開催レポート ・GeoDev Meetup #5 - 地図データ可視化・アプリ作成もくもく会開催レポート ・GeoDev Meetup #6 - 地図データ可視化・アプリ作成もくもく会開催レポート ・GeoDev Meetup #7 - 地図データ可視化・アプリ作成もくもく会開催レポート ESRIジャパン RESAS 関連ブログ ・ArcGIS を使って RESAS API データをビジュアライズしてみよう! ・大解剖!ハッカソン最優秀賞作品 「Tsuredatsu」 From RESAS x Japan Hackathon ~地域の連鎖をデザインしよう!~ ArcGIS 関連ページ ・ArcGIS for Developers ・ArcGIS for Developers 開発リソース集 ・ArcGIS Online ・ArcGIS Open Data 以上。
... View more
07-27-2017
05:24 PM
|
1
|
0
|
751
|
Title | Kudos | Posted |
---|---|---|
1 | 07-24-2018 07:26 PM | |
1 | 03-25-2018 06:21 PM | |
1 | 03-07-2018 10:20 PM | |
1 | 11-12-2017 11:53 PM | |
1 | 10-20-2017 03:15 AM |
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:24 AM
|