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

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の利用==

@@ 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] をクリック。
 ===解説===