DEV Community: Hidenori FUJIMURA

UN Smart Maps Group ポータブルウェブの進捗まとめ 2025-09

Hidenori FUJIMURA — Mon, 08 Sep 2025 22:47:40 +0000

1. はじめに

UN Smart Maps Groupでは、大規模な地理空間データ、特に点群データを含む数百GB規模のクラウドネイティブデータの効率的な配信方法について研究を進めてきました。特にPMTiles形式のデータをホスティングするための最適な方法を模索し、様々な技術的アプローチを検証してきました。

1.1 研究の背景と目的

ファイルシステム上のファイルをウェブサーバで提供する方式のシンプルな静的ホスティングでは、ファイルサイズ大きい場合のストレージ容量の拡張が困難であり、ウェブサーバの設定によってはセキュリティリスクが高くなる可能性があり、また大規模データセットの配信に最適化するための技術についての敷居が高いという問題がありました。これらの課題を解決するため、我々はオブジェクトストレージ、分散ストレージ、そして改めてCDNなどの技術を検証することにより、個人や小規模グループでも大規模な地理空間データを効率的に配信できる方法を開発することを目指しました。技術検証の過程では、実用性と持続可能性を重視し、複数のアプローチを段階的に評価してきました。

1.2 ポータブルウェブのコンセプト

ポータブルウェブとは、「誰もが大規模なデータをウェブ上で簡単に共有できる」という理念に基づいた概念です。従来のウェブインフラストラクチャは大規模組織向けに設計されており、個人や小規模グループが数百GBに及ぶデータセットを効率的に配信することは技術的・経済的障壁がありました。

ポータブルウェブのコンセプトでは、以下の要素を重視しています：

低コストでの実現可能性: 個人や小規模組織でも維持可能な経済性
技術的アクセシビリティ: 専門的なITインフラの知識がなくても導入・運用可能
高い安定性: メンテナンスの手間を最小化し、長期運用を可能に
スケーラビリティ: 数百GBから数TBに及ぶデータセットにも対応可能
ウェブ標準準拠: ウェブ標準を最大限活用することによる相互運用性の確保

このコンセプトは特に地理空間データのような大規模かつ構造化されたデータセットの共有に有効であり、信頼できる地理空間情報の自由な流通に大きく貢献するものです。

2. 検証した技術とその結果

2.1 Minio によるオブジェクトストレージの検証

結果と知見:
最初に検証したMinioは、S3互換のAPIを提供するため初期導入が比較的容易でした。しかし、Raspberry Pi 4B を複数台用いたクラスターの実運用テストを進めた結果、特に巨大ファイルの投入時などに高負荷となり、パフォーマンスが不安定になることが明らかになりました。また、オブジェクトストレージという特性上、ファイルシステムに直置きする場合と比べ、予想以上にCPUリソースとIO帯域を消費することがわかりました。これらの問題から、計算機資源が限られている場合のスケーラビリティに課題が残り、個人や小規模グループによる運用には適さないと判断せざるを得ませんでした。

2.2 IPFS Kubo による分散ストレージの検証

結果と知見:
次に検証したIPFS Kuboは、P2P分散ストレージという概念自体は非常に魅力的でしたが、実運用を想定した検証ではいくつかの課題が明らかになりました。ホスティングパフォーマンスが安定しないこと、効果的な分散ネットワークの構築が現実的には困難であること、そして大規模データセットのピンニングに関する問題が明確になりました。これらの結果から、IPFS Kuboは現時点では地理空間大規模データの配信に最適なソリューションとは言えないという結論に達しました。

2.3 x-24b プロトタイプの開発と検証

使用技術:
x-24bプロトタイプでは、より現実的な選択として、Cloudflared (Cloudflare Tunnel)、Martin (PMTiles配信用サーバー)、そしてCaddy (高性能Webサーバー)を組み合わせたアーキテクチャを採用しました。これらの技術を、USB 接続した SSD を持つ Raspberry Pi 4B に実装した x-24b インスタンスが tunnel.optgeo.org です。

結果と知見:
x-24bプロトタイプでは、商用サービス(Cloudflare)への依存があるものの、高いパフォーマンスを安定的に実現することができました。約1ヶ月の自宅環境での運用テストを通じて、システムが高い安定性を持ち、メンテナンス負荷が少ない形での運用が可能であることを確認しました。CloudflareのCDNを活用することで、高速配信も実現できたのだと思います。これらの検証結果から、x-24bプロトタイプが現時点では最も効果的なソリューションであると考えています。

3. x-24b プロトタイプの詳細

3.1 アーキテクチャ概要

[PMTilesデータ] → [Martin] → [Caddy] → [Cloudflared] → [Cloudflare CDN] → [エンドユーザー]

3.2 コンポーネントの役割

x-24bプロトタイプを構成する各コンポーネントは、それぞれ重要な役割を担っています。Martinは、PMTiles形式に対応したタイルサーバーとして、データの効率的な配信を担当します。Caddyはリバースプロキシとして機能し、多少のキャッシュ、Martin を介さないスタティックファイルホスティングなどを提供します。Cloudflaredは、ローカル環境とCloudflare間のセキュアなトンネルを確立する役割を果たし、Cloudflare CDNがグローバルでの高速配信と追加のセキュリティ機能を提供します。

3.3 x-24bの主な利点

x-24bプロトタイプの最大の強みは、CDNによる世界中での高速アクセスの実現にあります。また、Cloudflareが提供する様々なセキュリティ機能を活用することで、データの安全性も確保されています。1ヶ月以上の連続運用でも問題なく動作するという安定性に加え、個人レベルでも維持可能な運用コストという経済性も大きな利点です。具体的には、Cloudflare Tunnel が無償提供してくれる範囲内で、UN Smart Maps Group における技術検証作業には十分な転送量を提供してくれています。さらに、数百GBの大規模データセットにも対応できる拡張性を持ち合わせており、様々な規模のプロジェクトに適用可能です。

4. 使用技術の詳細

4.1 Minio

概要: Minioは、Amazon S3互換のAPIを提供するオープンソースのオブジェクトストレージサーバーです。高性能で軽量に設計されており、クラウドネイティブアプリケーションやDevOpsのユースケースに適しています。

ライセンス: GNU Affero General Public License v3.0 (AGPLv3)

公式ウェブサイト: https://min.io/

4.2 IPFS Kubo

概要: Kuboは、InterPlanetary File System (IPFS)の主要な実装です。IPFSは、コンテンツアドレス可能な分散型ファイルシステムで、データを永続的に保存し、重複を排除し、効率的に配信することを目的としています。

ライセンス: デュアルライセンス (MIT License および Apache License 2.0)

公式ウェブサイト: https://docs.ipfs.tech/install/command-line/

4.3 Martin

概要: Martinは、PMTilesフォーマット向けに最適化されたタイルサーバーです。地理空間データ、特にベクトルタイルやラスタータイルの効率的な配信に特化しており、PMTilesファイルから直接タイルを提供します。

ライセンス: BSD 3-Clause License

公式ウェブサイト: https://github.com/maplibre/martin

4.4 Caddy

概要: Caddyは、現代的で使いやすいウェブサーバーで、自動HTTPSや多様な機能を持ちながらも設定が簡単なことが特徴です。リバースプロキシ、ロードバランシング、静的ファイル配信などの機能を提供します。

ライセンス: Apache License 2.0

公式ウェブサイト: https://caddyserver.com/

4.5 cloudflared

概要: cloudflaredは、Cloudflare Tunnelのクライアントソフトウェアです。インターネット上に公開されたIPアドレスを持たないローカルのウェブサーバーやサービスを、安全にインターネットに公開するためのツールです。

ライセンス: Apache License 2.0

公式ウェブサイト: https://github.com/cloudflare/cloudflared

5. 今後の展望とFOIL4G構想

5.1 x-24bの意義

x-24bプロトタイプの成功により、個人や小規模グループでも大規模地理空間データを効率的に配信できる可能性が示されました。これはスマート地図の世界に新たな可能性をもたらし、信頼できる地理空間情報の自由な流通の重要な一歩となります。従来は大規模な組織や継続的な予算を確保されたプロジェクトでしか実現できなかったことが、より小規模な主体でも可能になるという点で、信頼できる地理空間情報の自由な流通に大きく貢献するものと考えています。

5.2 FOIL4G（Free and Open Information Library for Geospatial）構想

x-24bの成功を足がかりに、私たちはFOIL4G構想をさらに推進していきます。この構想では、地理空間データの自由な共有と活用を促進するオープンデータの理念を中心に据えています。複数の個人・組織によるデータホスティングの連携による分散型ホスティングネットワークの構築や、PMTilesなど標準化されたデータフォーマットの採用を進めていきます。そして何より、地理空間情報に関心を持つ幅広いコミュニティの参加によるコミュニティドリブンな発展を目指しています。

6. まとめ

UN Smart Maps Group は、大規模地理空間情報の効率的な配信という課題に対し、複数の技術検証を経て、x-24bプロトタイプという実用的なソリューションを開発しました。これにより、個人や小規模グループでも数百GB規模の地理空間データを安定的かつ高速に配信することが可能になりました。

この成果は、FOIL4G構想の実現に向けた重要な一歩であり、地理空間情報のより広範な共有と活用を促進することで、スマート地図の世界を次の段階へと進める足がかりとなります。今後も継続的な改善と拡張を行いながら、信頼できる地理空間情報の自由な流通に貢献していきたいと考えています。

Martin で遠隔の PMTiles をホストする

Hidenori FUJIMURA — Sun, 31 Aug 2025 12:50:04 +0000

背景

@smellman が https://dev.smellman.org/static/overture-2025-08-20 で Overture Maps ベースの 6 つの PMTiles ファイルをホストしています。

行なったこと

x-24b で上記を遠隔の PMTiles ファイルとしてホストしてみました。tile.json アクセスポイントは次の通りとなります。

今後行いたいこと

上記のアクセスポイントをうまく使ってウェブ地図を作るのを Copilot にでもやらせてみたいと思っています。

Create an AP with Network Manager

Hidenori FUJIMURA — Sat, 12 Oct 2024 05:10:26 +0000

sudo nmcli dev wifi hotspot ifname [wlan0] ssid [smartmapsportable] band bg password [smartmapsportable]

style.json from Apple Pkl #3

Hidenori FUJIMURA — Sat, 02 Mar 2024 01:49:40 +0000

Now we have the first running demo at https://observablehq.com/d/3df96ac1c9d36daa.

We also have a GitHub repository: https://github.com/hfu/pkl-test

style.json from Apple Pkl #2

Hidenori FUJIMURA — Wed, 28 Feb 2024 12:20:09 +0000

Started to generate style.json...

`1.pkl`

// my first attempt to generate style.json from a pkl file.

version = 8
center { -122.42 37.80 }
zoom = 10.42
sources = import("sources.pkl")
sprite = "https://tile.openstreetmap.jp/styles/maptiler-toner-en/sprite"
glyphs = "https://tile.openstreetmap.jp/fonts/{fontstack}/{range}.pbf"
layers = new Listing {
    import("background.pkl")
}

`sources.pkl`

module sources

openmaptiles {
    type = "vector"
    url = "https://tile.openstreetmap.jp/data/planet.json"
}

`background.pkl`

module background

id = "background"
paint { background_color = "#fff" }

`Makefile`

use_color: 
    pkl eval -f json use_color.pkl
1: 
    pkl eval -f json 1.pkl

Result

% make 1
pkl eval -f json 1.pkl
{
  "version": 8,
  "center": [
    -122.42,
    37.8
  ],
  "zoom": 10.42,
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://tile.openstreetmap.jp/data/planet.json"
    }
  },
  "sprite": "https://tile.openstreetmap.jp/styles/maptiler-toner-en/sprite",
  "glyphs": "https://tile.openstreetmap.jp/fonts/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "background",
      "paint": {
        "background_color": "#fff"
      }
    },
    {
      "id": "cde"
    }
  ]
}
hfu@smart pkl-test % make 1
pkl eval -f json 1.pkl
{
hfu@smart pkl-test % make 1
pkl eval -f json 1.pkl
{
  "version": 8,
  "center": [
    -122.42,
    37.8
  ],
  "zoom": 10.42,
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://tile.openstreetmap.jp/data/planet.json"
    }
  },
  "sprite": "https://tile.openstreetmap.jp/styles/maptiler-toner-en/sprite",
  "glyphs": "https://tile.openstreetmap.jp/fonts/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "background",
      "paint": {
        "background_color": "#fff"
      }
    }
  ]
}

Repository

https://github.com/hfu/pkl-test

style.json from Apple Pkl #1

Hidenori FUJIMURA — Tue, 27 Feb 2024 11:09:49 +0000

I am trying to generate style.json for MapLibre GL JS or Mapbox GL JS. This is the first attempt.

Check how module works

`colors.pkl`

module colors

red { "rgb" 255 0 0 }
green { "rgb" 0 255 0 }
blue { "rgb" 0 0 255 }

`use_color.pkl`

import "colors.pkl"

the_color = colors.blue

`Makefile`

use_color: 
    pkl eval -f json use_color.pkl

Result

{
  "the_color": [
    "rgb",
    0,
    0,
    255
  ]
}

Ok.

How to use MapLibre GL JS with 3D Tiles (pnts)

Hidenori FUJIMURA — Mon, 17 Apr 2023 21:02:57 +0000

Here is the code.

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<script src="https://unpkg.com/@loaders.gl/3d-tiles@^2.3.0/dist/dist.min.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet"></link>
<style>
#cesiumContainer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; 
  overflow: hidden; padding: 0; font-family: sans-serif; }
html { height: 100%; }
body { padding: 0; margin: 0; overflow: hidden; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
  container: document.body,
  style: 'https://optgeo.github.io/optbv-intl/optbv-intl-dev.json',
  hash: true,
  attributionControl: false
})

const searchParams = new URLSearchParams(window.location.search)
let url = searchParams.get('tileset') || 'https://d21pj9gigeop84.cloudfront.net/data/point-cloud/lp-2022/22302_kawazu-cho/tileset.json'

map.on('load', () => {
  const { MapboxLayer, Tile3DLayer } = deck

  const layer = new MapboxLayer({
    id: '3d',
    type: Tile3DLayer,
    pointSize: 1.6,
    data: url,
    loader: Tiles3DLoader
  })
  map.addLayer(layer)
})
</script>
</body>
</html>

How to consume 3D Tiles (pnts) with Cesium

Hidenori FUJIMURA — Sun, 16 Apr 2023 11:51:14 +0000

I am developing a site to consume 3D Tiles of PNTS (Point Cloud Tiles) with Cesium. Here is the code.

<html>
<head>
<meta charset="UTF-8">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.102/Build/Cesium/Cesium.js"></script>
<script src="https://frogcat.github.io/cesium-hash/cesium-hash.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.102/Build/Cesium/Widgets/widgets.css" rel="stylesheet"></link>
<style>
#cesiumContainer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; 
  overflow: hidden; padding: 0; font-family: sans-serif; }
html { height: 100%; }
body { padding: 0; margin: 0; overflow: hidden; height: 100%; }
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE"
const viewer = new Cesium.Viewer("cesiumContainer", {
  animation: false,
  homeButton: false,
  navigationHelpButton: false,
  sceneModePicker: false,
  timeline: false
})
viewer.scene.imageryLayers.addImageryProvider(imageProvider)
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2023-03-21T12:00")
viewer.scene.globe.depthTestAgainstTerrain = true

const searchParams = new URLSearchParams(window.location.search)
let url = searchParams.get('tileset') || 'https://d21pj9gigeop84.cloudfront.net/data/point-cloud/lp-2022/22302_kawazu-cho/tileset.json'

const tileset = new Cesium.Cesium3DTileset({
  url: url,
})
tileset.maximumScreenSpaceError = 16
tileset.style = new Cesium.Cesium3DTileStyle({pointSize: 3});
tileset.pointCloudShading.attenuation = false
tileset.pointCloudShading.geometricErrorScale = 1
viewer.scene.primitives.add(tileset)

viewer.camera.moveEnd.addEventListener(() => {
  location.hash = Cesium.Hash.encode(viewer)
})

const credit = new Cesium.Credit('Virtual Shizuoka and/or 東京都デジタルツイン実現プロジェクト')
viewer.scene.frameState.creditDisplay.addDefaultCredit(credit)

if (Cesium.Hash.decode(location.hash) == null) {
  tileset.readyPromise.then(function () {
    viewer.zoomTo(
      tileset, 
      new Cesium.HeadingPitchRange(
        0.0, -0.5, 
        tileset.boundingSphere.radius / 4)
    )
    location.hash = Cesium.Hash.encode(viewer)
  })
} else {
  Cesium.Hash(viewer)
}
</script>
</body>
</html>

Serve OS Open ZoomStack (2022-12) through PMTiles

Hidenori FUJIMURA — Sun, 08 Jan 2023 10:51:13 +0000

Step 1: Download MBTiles

curl -o zoomstack.mbtiles -L -C - "https://api.os.uk/downloads/v1/products/OpenZoomstack/downloads?area=GB&format=Vector+Tiles&subformat=%28MBTiles%29&redirect"

Step 2: Convert MBTiles to PMTiles by go-pmtiles

pmtiles convert zoomstack.mbtiles zoomstack.pmtiles

zoomstack.mbtiles was 2.6GB and zoomstack.pmtiles was 2.4GB.

Step 3: Upload PMTiles file to a server.

I have uploaded it to https://x.optgeo.org/zoomstack.pmtiles. You can specify this URL at https://protomaps.github.io/PMTiles/ to see the view like the following. (Hint: Great Britain is around 50N in latitude and 0E in longitude.)

Step 4: Create a demo site.

https://x.optgeo.org/zoomstack/

Attribution

Cover image: https://www.metmuseum.org/art/collection/search/266439

postmaps.js: maxDataZoom

Hidenori FUJIMURA — Sun, 12 Jun 2022 01:14:49 +0000

postmaps.js でオーバーズームを正しく効かせるために、ベクトルタイル側の maxzoom を知らせるためには、maxDataZoom を設定すれば良いことがわかりました。

デモサイト

情報源

ソースコードを GitHub で検索して見つけました。検索文字列は 14 です。protomaps のサービスが maxzoom を 14 にしていると知っていたからです。

    let maxDataZoom = o.maxDataZoom || 14;

https://github.com/protomaps/protomaps.js/blob/c30bec880a7228ae53de9f5c88f9c789579f7f71/src/view.ts#L228

動的なスタイル設定

protomaps.js では、width や color に (z, f) を引数とする関数を渡せるので、それを使って色々ためしています。

道路の太さをランダムで設定

{
  dataLayer: 'road',
  symbolizer: new protomaps.LineSymbolizer({
    color: 'gray',
    width: (z, f) => {
      return Math.random() * 4
    }
  })
},

https://github.com/optgeo/proton/blob/main/docs/index.html#L50-L58

ポリゴンの塗色をランダムで設定

{
  dataLayer: 'building',
  symbolizer: new protomaps.PolygonSymbolizer({
    fill: (z, f) => {
      return ['yellow', 'blue'][Math.floor(Math.random() * 2)]
    }
  })
}

https://github.com/optgeo/proton/blob/main/docs/index.html#L59-L66

謝辞・出典

protomaps.js をオープンソースで開発している皆様に敬意と共感を持っています。

地理院地図 Vector タイルのドキュメントは https://github.com/gsi-cyberjapan/gsimaps-vector-experiment にあります。

UNVT活動

Hidenori FUJIMURA — Fri, 17 Sep 2021 21:26:38 +0000

自然発生的に「UNVT 活動」という用語が職場で生まれつつあります。日本の教育現場の伝統「部活動」に近いニュアンスを感じます。島崎藤村の詩に「天地はまさに奮闘と鋭意と活動との舞台なり」という表現があるそうです。私もアクティビストを名乗れる兆しかと面白く感じると共に「活動を展開する」という観点から UNVT を見直してみようと思います。あなたはどう考えますか。

dev.to をどのように使えば良いか

Hidenori FUJIMURA — Sun, 10 Jan 2021 23:01:13 +0000

YouTube に上がっている dev.to(gether) - The State of the Web を視聴すると、少しアイディアが広がるかもしれない。

dev.to をどのように使えばよいか、という話と、私がそもそも何をしたいかという話を切り分けて考える必要がある。

DEV Community: Hidenori FUJIMURA

UN Smart Maps Group ポータブルウェブの進捗まとめ 2025-09

1. はじめに

1.1 研究の背景と目的

1.2 ポータブルウェブのコンセプト

2. 検証した技術とその結果

2.1 Minio によるオブジェクトストレージの検証

2.2 IPFS Kubo による分散ストレージの検証

2.3 x-24b プロトタイプの開発と検証

3. x-24b プロトタイプの詳細

3.1 アーキテクチャ概要

3.2 コンポーネントの役割

3.3 x-24bの主な利点

4. 使用技術の詳細

4.1 Minio

4.2 IPFS Kubo

4.3 Martin

4.4 Caddy

4.5 cloudflared

5. 今後の展望とFOIL4G構想

5.1 x-24bの意義

5.2 FOIL4G（Free and Open Information Library for Geospatial）構想

6. まとめ

Martin で遠隔の PMTiles をホストする

背景

行なったこと

今後行いたいこと

Create an AP with Network Manager

style.json from Apple Pkl #3

style.json from Apple Pkl #2

1.pkl

sources.pkl

background.pkl

Makefile

Result

Repository

style.json from Apple Pkl #1

Check how module works

colors.pkl

use_color.pkl

Makefile

Result

See also

How to use MapLibre GL JS with 3D Tiles (pnts)

How to consume 3D Tiles (pnts) with Cesium

See Also

Serve OS Open ZoomStack (2022-12) through PMTiles

Step 1: Download MBTiles

Step 2: Convert MBTiles to PMTiles by go-pmtiles

Step 3: Upload PMTiles file to a server.

Step 4: Create a demo site.

Attribution

postmaps.js: maxDataZoom

情報源

動的なスタイル設定

道路の太さをランダムで設定

ポリゴンの塗色をランダムで設定

謝辞・出典

UNVT活動

dev.to をどのように使えば良いか

`1.pkl`

`sources.pkl`

`background.pkl`

`Makefile`

`colors.pkl`

`use_color.pkl`

`Makefile`