チュートリアル - 版の履歴

Admin: /* WebApp Layer編 */

2026-01-27T14:30:51Z

WebApp Layer編

Admin: /* ウェブサービス結合編 */

2025-11-06T00:58:24Z

ウェブサービス結合編

Admin: /* あらすじ */

2025-07-07T09:43:31Z

あらすじ

Admin: /* あらすじ */

2025-07-07T09:43:17Z

あらすじ

Admin: /* 独自ホストにsvgmapAppLayersをコピーして利用 */

2025-07-07T09:41:44Z

独自ホストにsvgmapAppLayersをコピーして利用

Admin: /* 解説 */

2025-07-07T09:41:07Z

解説

2025年7月7日 (月) 09:40にAdminによる

2025-07-07T09:40:34Z

Admin: /* チュートリアル1 海岸線地図表示 */

2025-07-07T09:38:18Z

チュートリアル1 海岸線地図表示

Admin: /* svgmapAppLayers GitHub Pagesの利用 */

2025-07-07T09:37:55Z

svgmapAppLayers GitHub Pagesの利用

Admin: /* 独自ホストにsvgmapAppLayersをコピーして利用 */

2025-07-07T09:37:42Z

独自ホストにsvgmapAppLayersをコピーして利用

@@ 183行目: / 183行目: @@
 = WebApp Layer編 =
-SVGMapでは、レイヤーとして 単純な静的SVGMapコンテンツだけでなく、レイヤーにウェブアプリケーションを紐付けることでレイヤーのSVGMapコンテンツ(のDOM)をjavaScriptコードで動的に制御・変更できる[[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer機構]]を用いることができるという特徴があります。([https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3 Web Applicationとは])
+SVGMapでは、レイヤーとして 単純な静的SVGMapコンテンツだけでなく、レイヤーにウェブアプリケーションを紐付けることでレイヤーのSVGMapコンテンツ(のDOM)をjavaScriptコードで動的に制御・変更できる[[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer機構 (Layers as Web Apps : LaWA)]]を用いることができるという特徴があります。([https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3 Web Applicationとは])
 この機構は他のレイヤーには基本的に影響を与えないため（[https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%97%E3%82%BB%E3%83%AB%E5%8C%96 カプセル化]）、アプリケーションの[https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%91%E3%82%B2%E3%83%86%E3%82%A3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0 スパゲッティ化]を抑制できます。

@@ 328行目: / 328行目: @@
 それでも動的なサービスの結合が必要なことは多くあるため、ここではその方法を既存の公開ウェブサービスを利用したwebAppレイヤーとして実装してみます。（依ってこのチュートリアルでは動的なサービスの利用に留まり、動的なサービス側を構築することには踏み込みません。[https://ja.wikipedia.org/wiki/GeoServer GeoServer], [https://ja.wikipedia.org/wiki/MapServer MapServer], [https://gis-ops.com/postgrest-postgis-api-tutorial-geospatial-api-in-5-minutes/ PostgREST + PostGIS ] 等はその実装に利用できるでしょう。SVGMap.orgでも [https://github.com/svgmap/redisSvgMap redisSvgMap]という 高性能な動的サービスを構築するためのコードを公開しています。）
-サービスを個々のレイヤーとして接続すること、そして個々のレイヤーはカプセル化されたアプリケーション([[解説書#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|Layers as WebApps]])として構成される（疎結合である）ことから、このパターンは地図に適用した[https://learn.microsoft.com/ja-jp/dotnet/architecture/microservices/architect-microservice-container-applications/microservice-based-composite-ui-shape-layout コンポジットUI]タイプの[https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 マイクロサービス]の一種といえるでしょう。
+サービスを個々のレイヤーとして接続すること、そして個々のレイヤーはカプセル化されたアプリケーション([[解説書#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|Layers as WebApps]])として構成される（疎結合である）ことから、このパターンは地図に適用した[https://en.wikipedia.org/wiki/Micro_frontend マイクロフロントエンド]（もしくは[https://learn.microsoft.com/ja-jp/dotnet/architecture/microservices/architect-microservice-container-applications/microservice-based-composite-ui-shape-layout コンポジットUI]）タイプの[https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 マイクロサービス]の一種といえるでしょう。
 == クロスオリジンアクセス==

← 古い版		2025年7月7日 (月) 09:43時点における版
442行目:		442行目:
	* 自身が運営しているホストに内容をコピーする		* 自身が運営しているホストに内容をコピーする
	* Container.svgを編集し、掲載したいレイヤーを選択する		* Container.svgを編集し、掲載したいレイヤーを選択する
		+	* 必要に応じてプロキシーを構築する

@@ 425行目: / 425行目: @@
 ** クロスオリジンアクセスプロキシの設定が必要なレイヤーは、data-cross-origin-proxy-requiredアトリビュートが付いています
 ** [https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html コンテナsvg生成支援webApp]を使うと簡単にContainer.svgを生成できます
 ==独自ホストにsvgmapAppLayersをコピーして利用==

@@ 431行目: / 431行目: @@
 *実際の動作は[https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayersClone/ghAppLayers_clone.html こちら]をクリック
 **(このサンプルでは、国交省道路交通情報のレイヤー群と、CSVオーサリングツールレイヤー、basemapsのみを使用しています)
 ===解説===

@@ 334行目: / 334行目: @@
 ===解説===
-'''[[クロスオリジンアクセス|こちらに情報を掲載]]'''しましたので参照ください。
+*'''[[クロスオリジンアクセス|こちらに情報を掲載]]'''しましたので参照ください。
 == チュートリアル12 WMSの利用==

@@ 55行目: / 55行目: @@
 チュートリアル1の内容に空港のPOI([https://ja.wikipedia.org/wiki/Point_of_interest Point of interest])を表示するチュートリアルです。
-実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html こちら]をクリック。
+*実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html こちら]をクリック。
 ===解説===
@@ 78行目: / 78行目: @@
 チュートリアル2aの内容に対して、POI(空港)と海岸線地図を別ファイルに分け、レイヤリング表示するチュートリアルです。
-実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html こちら]をクリック。
+*実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html こちら]をクリック。
 ===解説===
@@ 98行目: / 98行目: @@
 チュートリアル2bの内容に対して、背景地図にOpenStreetMapを使用し、より実用的なページを作ってみます。
-実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html こちら]をクリック。
+*実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html こちら]をクリック。
 ===解説===
@@ 115行目: / 115行目: @@
 チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。
-実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html こちら]をクリック。
+*実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html こちら]をクリック。
 ===解説===
@@ 149行目: / 149行目: @@
 前章ではすでに作成済みのタイルを用いていましたが、ここでは[https://github.com/svgmap/svgMapTools svgMapTools]を用いて、shapefileからタイルデータを作成し表示してみます。
-実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html こちら]をクリック。
+*実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html こちら]をクリック。
 ===解説===
@@ 165行目: / 165行目: @@
 チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。
-実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html こちら]をクリック。
+*実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html こちら]をクリック。
 ===解説===
@@ 195行目: / 195行目: @@
 [https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames OpenStreetMapのタイルピラミッド]を用いて、伸縮・スクロールに応じ適切な地図を表示([https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics) Level of Detail])するレイヤーを、SVGMapの[[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer機構]]によって構成するチュートリアルです。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5/tutorial5.html こちら]をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5/tutorial5.html こちら]をクリック。
@@ 217行目: / 217行目: @@
 webAppで非同期読み込みにより[https://ja.wikipedia.org/wiki/GeoJSON GeoJSONデータ]を読み込み、SVGMapフレームワークのライブラリを使ってSVGMapコンテンツのDOMに変換し表示するチュートリアルです。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geojson1.html geojson1.html] をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geojson1.html geojson1.html] をクリック。
 ===解説===
@@ 233行目: / 233行目: @@
 webAppで非同期読み込みによりタイル分割されたCSVのPointジオメトリファイルを読み込み、SVGMapフレームワークのライブラリを使ってSVGMapコンテンツのDOMに変換し表示するチュートリアルです。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/tiling1/tiling1.html tiling1.html] をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/tiling1/tiling1.html tiling1.html] をクリック。
 ===解説===
@@ 252行目: / 252行目: @@
 webAppで非同期読み込みにより、2次元配列形式のメッシュデータ（グリッドデータ、ラスターデータなどとも呼ばれます）のCSVファイルを読み込み、SVGMapコンテンツのDOMに変換し表示するチュートリアルです。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh1/mesh1.html mesh1.html] をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh1/mesh1.html mesh1.html] をクリック。
 ===解説===
@@ 271行目: / 271行目: @@
 可視化に用いるサンプルデータは統計局が公開する[https://www.stat.go.jp/data/mesh/m_itiran.html 3次メッシュの自治体コード]データです。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2.html mesh2.html] をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2.html mesh2.html] をクリック。
 ===解説===
@@ 287行目: / 287行目: @@
 チュートリアル9の内容に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしています。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/mesh2b.html mesh2b.html] をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/mesh2b.html mesh2b.html] をクリック。
 ===解説===
@@ 299行目: / 299行目: @@
 メッシュデータ（グリッドデータ）は[[チュートリアル8#Raster|ラスターデータとも呼ばれる]]ように、Webコンテンツとして使われるビットイメージデータとほぼ同等です。そこでメッシュデータを動的にビットイメージコンテンツ(PNG形式)化し地図画面上に表示するWebAppを構築してみます。性能面でのメリットがあります。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3.html mesh3.html] をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3.html mesh3.html] をクリック。
 ===解説===
@@ 313行目: / 313行目: @@
 [[チュートリアル10]]をベースに、地図上で位置を指定して、その場所のジオイド高を計算・表示する対話型アプリを構築します。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html mesh3b.html] をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html mesh3b.html] をクリック。
 ===解説===
@@ 343行目: / 343行目: @@
 まずは伸縮スクロールとは関係なく、地図コンテンツを単に表示させてみます。これは[[チュートリアル4]]と行っていることは基本的に同じです。WMSのスペックに従ってURLのクエリパートを設定するだけです。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms1.html wms1.html] をクリック。（Note: WMSが地図を生成配信するまでに少々時間がかかります）
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms1.html wms1.html] をクリック。]
 ===解説===
@@ 356行目: / 357行目: @@
 [[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer機構]]を用いれば、ウェブサービスに接続し表示領域に応じた地図コンテンツを動的に表示することができます。チュートリアル12と同じ[https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/ GEBCO Web Service]を使ってみます。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html wms2.html] をクリック。（Note: WMSが地図を生成配信するまでに少々時間がかかります）
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html wms2.html] をクリック。
 ===解説===
@@ 374行目: / 376行目: @@
 動的なサービスと接続してはいますが、基本的には[[#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON|チュートリアル6]]との違いはありません。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson2/geojson2.html geojson2.html] をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson2/geojson2.html geojson2.html] をクリック。
 ===解説===
@@ 393行目: / 395行目: @@
 ここではNatural Resources Canadaが提供している、[https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249 Geoname Service API](カナダの地名データサービス)を結合してみます。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/vectorService1.html vectorService1.html] をクリック。（Note: サービスがデータを生成配信するまでに少々時間がかかります）
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/vectorService1.html vectorService1.html] をクリック。
 ===解説===

@@ 30行目: / 30行目: @@
 最初に日本の海岸線を表示するチュートリアルです。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html こちら]をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html こちら]をクリック。
 ===解説===

@@ 411行目: / 411行目: @@
 [https://github.com/svgmap/svgmapAppLayers svgmapAppLayers] GitHubリポジトリは、[https://docs.github.com/ja/pages/getting-started-with-github-pages/what-is-github-pages GitHub Pages]のセットアップがなされています。そのためいくつかのレイヤーはGitHub Pagesで公開されたURLをリンクするだけで利用することができます。
-実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers_wpxy.html ghAppLayers_wpxy.html] をクリック。
+*実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers_wpxy.html ghAppLayers_wpxy.html] をクリック。
 ===解説===