GIS | デジタルアーカイブシステムの技術ブログ

Kepler.gl：大規模地理空間データを美しく可視化するオープンソースツール

はじめに地理空間データの可視化は、デジタルヒューマニティーズ（DH）の研究において重要な手法の一つです。歴史的な出来事の分布、文化遺産の所在地、人口動態の変遷など、空間的な情報を視覚的に表現することで、新たな知見を得ることができます。本記事では、Uber が開発したオープンソースの地理空間データ可視化ツール Kepler.gl を紹介します。 Kepler.gl とは Kepler.gl は、大規模な地理空間データセットを直感的かつ美しく可視化するために設計された Web ベースのツールです。2018 年に Uber のビジュアライゼーションチームによってオープンソースとして公開されました。MIT ライセンスで提供されており、誰でも自由に利用・改変が可能です。 WebGL を基盤とした描画エンジンにより、数百万ポイント規模のデータでもスムーズにレンダリングできる点が大きな特徴です。主な機能ヒートマップデータポイントの密度を色の濃淡で表現するヒートマップは、大量のデータの分布傾向を把握するのに適しています。例えば、歴史的な文書の発行地をヒートマップで表示することで、文化活動の集中地域を一目で確認できます。 3D マップ高さ方向を使ったデータ表現も可能です。地域ごとの数量データを 3D の柱として表示するヘキサゴンビンや、建物の高さを反映した 3D 地図を作成できます。時系列アニメーションタイムスタンプを持つデータをアニメーションとして再生できます。時間の経過に伴うデータの変化を動的に可視化することで、歴史的な事象の推移を直感的に理解できます。多様なレイヤータイプポイント、アーク（弧）、ライン、ポリゴンなど、多彩なレイヤータイプをサポートしています。移動経路や貿易ルートの可視化にはアークレイヤーが、地域区分の表示にはポリゴンレイヤーが適しています。対応データ形式 Kepler.gl は以下のデータ形式に対応しています。 CSV — 緯度・経度カラムを含む表形式データ GeoJSON — 地理空間データの標準フォーマット JSON — カスタムデータ形式ブラウザ上にファイルをドラッグ＆ドロップするだけで読み込めるため、プログラミングの知識がなくても利用を開始できます。 DH における活用例歴史地図の作成古地図のデータや歴史的イベントの発生地点をプロットし、時系列アニメーションで変遷を追うことができます。例えば、江戸時代の宿場町の分布や、近代化の過程での鉄道路線の拡大を可視化できます。文化遺産のマッピング博物館・図書館・文書館のコレクションに含まれる地理情報を可視化し、文化遺産の空間的な分布を分析できます。IIIF マニフェストに含まれるメタデータから座標を抽出し、Kepler.gl で表示するといったワークフローも考えられます。テキストマイニングとの連携テキストから抽出された地名を座標に変換（ジオコーディング）し、Kepler.gl で可視化することで、文学作品や歴史文書に登場する地名の空間的な関係を分析できます。導入方法 Kepler.gl はブラウザ上で直接利用できる Web アプリ版（kepler.gl）が提供されています。データのアップロードから可視化、設定の保存までをブラウザ内で完結できます。より高度な利用には、React コンポーネントとして自身のアプリケーションに組み込むことも可能です。npm パッケージとして提供されており、Jupyter Notebook 用のプラグインも存在します。 npm install kepler.gl まとめ Kepler.gl は、大規模な地理空間データを直感的に可視化できるパワフルなツールです。プログラミングの知識がなくてもブラウザ上で利用でき、CSV や GeoJSON を読み込むだけで美しいマップを作成できます。DH 研究における空間分析の入口として、ぜひ活用してみてください。 ...

2026年3月15日 · 1 分 · Nakamura

IIIF Georeference Viewer：地理参照コンテンツを地図上で可視化するツール

はじめにデジタルアーカイブや人文学研究の分野では、歴史地図や古写真などの資料を地理的な文脈の中で閲覧したいというニーズが増えています。IIIF（International Image Interoperability Framework）は画像の相互運用性を高めるための国際標準ですが、近年ではIIIF Georeference Extensionによって、IIIF画像に地理座標情報を付与できるようになりました。今回紹介する IIIF Georeference Viewer（iiif_geo）は、こうした地理参照付きIIIFコンテンツを対話的な地図上で可視化するためのWebアプリケーションです。 IIIF Georeference Extensionとは IIIF Georeference Extensionは、IIIFマニフェストやキャンバスに地理座標情報を埋め込むための仕様です。これにより、歴史地図などのIIIF画像を現代の地図上に正確に重ね合わせることが可能になります。従来、歴史地図のジオリファレンスにはGIS専用ソフトウェアが必要でしたが、この拡張仕様を活用することで、Webブラウザ上で手軽に地理参照コンテンツを閲覧・比較できるようになります。 IIIF Georeference Viewerの機能動的なURL読み込みクエリパラメータを使って、任意のIIIFマニフェストやGeoJSONファイルをURLから直接読み込むことができます。例えば以下のようなURLでデモを確認できます。デモサイト: https://nakamura196.github.io/iiif_geo/ 対応するデータ形式 IIIF Manifest — IIIF Presentation API 3.0のマニフェスト IIIF Canvas — 個別のキャンバスオブジェクト Linked Places Format — 歴史的な地名データの標準フォーマット GeoJSON — 広く使われている地理データフォーマットインタラクティブな地図表示 LeafletおよびMapLibre GLを使用した地図表示では、マーカーのクラスタリングによって大量のポイントデータも効率的に表示できます。ベースマップの切り替えも可能で、航空写真や地理院タイルなど複数の背景地図を選択できます。分割ペインレイアウト画面を分割して、左側に地図、右側にIIIF画像のディープズーム表示（OpenSeadragon）を配置するレイアウトに対応しています。歴史地図と現代地図を並べて比較する際に便利です。ディープズーム OpenSeadragonによる高解像度画像のディープズームに対応しています。巨大な歴史地図でも、細部まで拡大して閲覧することが可能です。多言語対応日本語と英語のバイリンガルUIを備えており、国際的な利用にも対応しています。技術スタック本ツールは以下の技術で構成されています。技術用途 Nuxt 4 / Vue 3 アプリケーションフレームワーク Leaflet 2Dタイル地図表示 MapLibre GL ベクタータイル地図表示 OpenSeadragon IIIF画像のディープズーム GitHub Pages ホスティング Nuxt 4の静的サイト生成（SSG）機能を利用してGitHub Pagesにデプロイしているため、サーバーサイドの運用コストが不要です。 ...

2026年3月14日 · 1 分 · Nakamura

MapLibre GL JS でカスタムマーカーがズーム時にずれる問題と GeoJSON レイヤーによる解決

はじめに MapLibre GL JS で地図上にカスタムマーカーを配置する際、maplibregl.Marker に独自の DOM 要素を渡す方法がよく使われる。件数バッジ付きの丸いマーカーなど、CSS で自由にスタイリングできる利点がある。しかし、この方法にはズーム・パン操作時にマーカーが地図の動きに遅れて追従するという問題がある。特にマーカー数が多い場合やモバイルデバイスでは顕著になり、ズームアウトすると本来陸上にあるべきマーカーが海上に表示されるような視覚的な不整合も起きる。本記事では、この問題の原因と、GeoJSON ソース + レイヤーを使った根本的な解決方法を解説する。問題の再現 DOM マーカーによる実装（問題あり） for (const point of dataPoints) { const el = document.createElement('div') Object.assign(el.style, { width: '32px', height: '32px', borderRadius: '50%', backgroundColor: point.color, border: '3px solid white', boxShadow: '0 2px 6px rgba(0,0,0,0.3)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', }) // 件数バッジ if (point.count > 1) { const badge = document.createElement('span') badge.style.color = 'white' badge.style.fontSize = '11px' badge.style.fontWeight = 'bold' badge.textContent = String(point.count) el.appendChild(badge) } new maplibregl.Marker({ element: el }) .setLngLat([point.lng, point.lat]) .addTo(map) } この実装では以下の問題が発生する。症状ズーム・パン時の遅延: マーカーが地図の動きに 1〜2 フレーム遅れて追従するズームアウト時の位置ずれ: 沿岸都市のマーカーが海上に表示されるパフォーマンス低下: マーカー数が増えると DOM の再配置コストが増大する原因 maplibregl.Marker は DOM 要素を CSS transform で配置する仕組みになっている。地図がズーム・パンされるたびに、各マーカーの CSS transform を再計算して更新する必要があり、これが WebGL キャンバスの描画と非同期で行われるため、視覚的なずれが生じる。 ...

2026年3月14日 · 3 分 · Nakamura

IIIF Georeference to XYZ Tiles

IIIF Georeference Extension JSONからXYZタイルを生成し、MapLibre GL JSで表示するツール。リポジトリ : https://github.com/nakamura196/iiif-georef-tiles GitHub Pages : https://nakamura196.github.io/iiif-georef-tiles/ 必要環境 Python 3.x GDAL (gdal_translate, gdalwarp, gdal2tiles.py) GDALのインストール # macOS (Homebrew) brew install gdal # Ubuntu/Debian sudo apt install gdal-bin python3-gdal 使用方法 python3 scripts/iiif_georef_to_tiles.py <IIIF_GEOREF_JSON_URL> 例 python3 scripts/iiif_georef_to_tiles.py https://nakamura196.github.io/iiif_geo/canvas.json オプションオプションデフォルト説明 --scale 0.25 画像の縮小率 --zoom 14-18 タイルのズームレベル範囲 --output-dir docs 出力ディレクトリ --name tiles タイルフォルダ名 --work-dir work 作業用ディレクトリ --keep-work - 作業用ファイルを削除しない処理の流れ IIIF Georeference JSON │ ▼ ┌───────────────────────┐ │ 1. JSONを取得 │ │ (URLからfetch) │ └───────────────────────┘ │ ▼ ┌───────────────────────┐ │ 2. 画像をダウンロード │ │ (IIIF Image API) │ └───────────────────────┘ │ ▼ ┌───────────────────────┐ │ 3. GCPを埋め込み │ │ (gdal_translate) │ └───────────────────────┘ │ ▼ ┌───────────────────────┐ │ 4. 座標変換 │ │ (gdalwarp) │ └───────────────────────┘ │ ▼ ┌───────────────────────┐ │ 5. タイル生成 │ │ (gdal2tiles.py) │ └───────────────────────┘ │ ▼ ┌───────────────────────┐ │ 6. HTMLビューア生成 │ │ (MapLibre GL JS) │ └───────────────────────┘ 変換結果元画像地理参照後出力ファイル docs/ ├── index.html # MapLibre GL JSビューア ├── source.json # 元のIIIF Georeference JSON └── tiles/ # XYZタイル ├── 14/ ├── 15/ ├── 16/ ├── 17/ └── 18/ ローカルで確認 cd docs && python3 -m http.server 8000 # http://localhost:8000/ を開く IIIF Georeference Extension IIIF Georeference Extensionは、IIIF画像に地理参照情報を付与するための拡張仕様です。 ...

2026年1月21日 · 更新: 2026年1月21日 · 2 分 · Nakamura

画像コレクション管理ツール技術アーキテクチャ解説

概要以下の記事で、IIIFの機能を簡単に試すことを目的とした「画像コレクション管理」ツールについて紹介しました。 https://zenn.dev/nakamura196/articles/7d6bb4cdc414c4 今回は、このツールの裏側で使われている技術について紹介します。はじめに画像コレクション管理ツールは、画像コレクションを国際標準規格であるIIIF（International Image Interoperability Framework）形式で管理・公開するためのWebアプリケーションです。本記事では、このツールの技術的な実装について、特にIIIF仕様の実装と地理空間情報の扱いに焦点を当てて解説します。技術スタックフロントエンド : Next.js 14 (App Router), React, TypeScript バックエンド : Next.js API Routes データストレージ : AWS S3互換オブジェクトストレージ（Cloudflare R2）認証 : NextAuth.js 地図表示 : Leaflet, MapLibre GL JS IIIF ビューア : Mirador 3, OpenSeadragon IIIF実装の詳細 1. IIIF Presentation API v2/v3の両方をサポート本ツールは、IIIF Presentation APIのバージョン2とバージョン3の両方に対応しています。これにより、様々なIIIFビューアとの互換性を確保しています。 v2とv3の主な違い // IIIF v2の構造 { "@context": "http://iiif.io/api/presentation/2/context.json", "@id": "https://example.com/manifest", "@type": "sc:Manifest", "label": "タイトル", "sequences": [{ "@type": "sc:Sequence", "canvases": [...] }] } // IIIF v3の構造 { "@context": "http://iiif.io/api/presentation/3/context.json", "id": "https://example.com/manifest", "type": "Manifest", "label": { "ja": ["タイトル"] }, "items": [...] // canvasの配列 } 2. マルチ言語対応 v3では、ラベルや説明文を言語別に管理できます： ...

2025年8月24日 · 更新: 2025年8月24日 · 3 分 · Nakamura

IIIF Georeference ViewerのMapLibre GL移行と機能改善

本記事はAIが作成し、人間が追記しました。概要 IIIF Georeference ViewerにおけるマップコンポーネントをLeafletからMapLibre GLへ移行し、複数の機能改善を実施しました。本記事では、実装した主要な機能とその技術的詳細について説明します。 https://nakamura196.github.io/iiif_geo/ 主要な改善点 1. 画像の自動回転機能 IIIF画像を地図上に正しい向きで表示するため、コントロールポイント（対応点）から自動的に回転角度を計算する機能を実装しました。機能概要画像座標と地理座標の対応点から、画像を北が上になるように回転させる角度を自動計算 2点間または3点以上の分布パターンから最適な回転角度を決定 URLパラメータによる回転角度の保存と復元実装のポイント // utils/calculateImageRotation.ts export function calculateImageRotation(features: Feature[]): RotationCalculationResult | null { // 最も離れた2点を見つける（より正確な角度計算のため） const validFeatures = features.filter((f) => f.properties?.resourceCoords && f.geometry?.coordinates ); // 画像座標系でのベクトルと地理座標系でのベクトルから回転角度を計算 const imgVector = { x: img2.x - img1.x, y: img2.y - img1.y }; const geoVector = { x: geo2.lng - geo1.lng, y: geo2.lat - geo1.lat }; // 北を基準とした角度の差を計算 const rotationDeg = geoAngleFromNorthDeg - imgAngleDeg; return normalizeAngle(rotationDeg); } UI実装自動回転ボタン（🔧アイコン）をOSDビューアーに配置 rotationパラメータが未指定の場合は自動的に回転角度を計算手動での角度調整用スライダーも提供 2. LeafletからMapLibre GLへの移行移行の背景パフォーマンス向上 : MapLibre GLはWebGLベースのレンダリングにより、大量のマーカー表示時のパフォーマンスが向上スムーズなアニメーション : 地図の移動やズーム時のアニメーションがより滑らかにベクタータイルのサポート : ラスタータイルに加えてベクタータイルの表示が可能実装のポイント import { Map, NavigationControl, Marker, Popup } from "maplibre-gl"; import "maplibre-gl/dist/maplibre-gl.css"; const mapInstance = ref<Map | null>(null); // MapLibre GL初期化 mapInstance.value = new Map({ container: mapContainer.value!, style: mapStyles.value[0].style, center: initialCenter, zoom: zoom_.value, attributionControl: false }); 3. 現在地表示機能ブラウザのGeolocation APIを使用して、ユーザーの現在地を地図上に表示する機能を実装しました。 ...

2025年8月20日 · 更新: 2025年8月20日 · 2 分 · Nakamura

IIIF georeference extensionの可視化ツールの改修

概要 IIIF georeference extensionの可視化ツールの改修を行いましたので備忘録です。以下で公開しているツールです。 https://github.com/nakamura196/iiif_geo 以下のように、現代地図と画像の並列表示機能を提供します。改修内容 IIIF georeference extensionに基づくデータ作成を支援するツールとして、Allmapsがあります。 https://allmaps.org/ 以下で使い方を紹介しています。今回の改修では、上記ツールで作成されるデータを読み込めるようにしました。 https://annotations.allmaps.org/images/2e1d3f991aad6cb4 以下が表示例です。 https://nakamura196.github.io/iiif_geo/ja?u=https://annotations.allmaps.org/images/2e1d3f991aad6cb4 まとめ IIIF georeference extensionの応用にあたり、参考になりましたら幸いです。

2025年3月19日 · 更新: 2025年3月19日 · 1 分 · Nakamura

Peripleoを試す

概要「Peripleo」を使う方法を調べましたので、備忘録です。「Peripleo」は以下のように説明されています。 Peripleo is a browser-based tool for the mapping of things related to place. https://github.com/britishlibrary/peripleo 今回は以下の記事で紹介した「れきちず」と組み合わせて、使用する方法について紹介します。成果物以下のURLでお試しいただけます。 https://nakamura196.github.io/peripleo/ リポジトリは以下です。 https://github.com/nakamura196/peripleo 本ブログでは、以下の『東京帝國大學本部構内及農學部建物鳥瞰圖』(東京大学農学生命科学図書館所蔵）をサンプルデータとして使用します。 https://iiif.dl.itc.u-tokyo.ac.jp/repo/s/agriculture/document/187cc82d-11e6-9912-9dd4-b4cca9b10970 背景以下の会議に参加し、「Peripleo」について教えていただきました。「Peripleo」を開発してくださっている関係者の皆様、会議を開催してくださった皆様、また使用方法を教えてくださったGethin Rees氏に感謝いたします。 http://codh.rois.ac.jp/conference/linked-pasts-10/ 基本的な使い方以下に記載があります。 https://github.com/britishlibrary/peripleo?tab=readme-ov-file#installation-guide 今回は、『東京帝國大學本部構内及農學部建物鳥瞰圖』のデータを利用するにあたり、カスタマイズした点について紹介します。データの準備以下のようなスプレッドシートを用意します。 https://docs.google.com/spreadsheets/d/1ZZJZL0K4cBOc0EgMHNV9NQ56C_fcZm0eceBg_OPmxe4/edit?usp=sharing 灰色のセルは不要な列です。データの準備ができたら、CSV形式でダウンロードします。 JSON形式への変換 Locolligoというツールを用いて、CSVのデータをJSON形式のデータに変換します。 https://github.com/docuracy/Locolligo まず、以下にアクセスします。 https://docuracy.github.io/Locolligo/ CSVファイルをアップロード後、「Assign CSV Columns」を押すと、以下が表示されます。予約語をCSVのヘッダーに使用しておくと、手動でマッピングする必要がないようでした。うまくマッピングされなかった場合には、手動で設定します。なお、予約語は以下で確認できました。 https://github.com/docuracy/Locolligo/blob/main/js/data-converter.js function assign(){ $('#assign').removeClass('throb'); var assignmentOptions = [ ['(ignore)'], ['@id','identifier|uuid|id|@id'], ['properties.title','title|name|label'], ['properties.%%%'], ['geometry.coordinates','coordinates|coords|OSGB'], ['geometry.coordinates[0]','longitude|long|lng|easting|westing|X'], ['geometry.coordinates[1]','latitude|lat|northing|southing|Y'], ['names[0].toponym','toponym'], ['links[0].type'], ['links[0].identifier'], ['depictions[0].@id'], ['depictions[0].title'], ['descriptions[0].@id'], ['descriptions[0].value'], ['types[0].identifier'], ['types[0].label'], ['{custom}'] ]; 結果をダウンロードすると、featuresに以下のようなアイテムが格納されたデータを取得できます。 ...

2024年12月13日 · 更新: 2024年12月13日 · 2 分 · Nakamura

「れきちず」を使ってみる

概要「れきちず」を使う方法を調べましたので、備忘録です。「れきちず」は以下のように説明されています。「れきちず」は、「現代風の地図デザイン」の歴史地図を閲覧できるサービスです。 https://rekichizu.jp/ 背景以下の会議に参加し、「れきちず」について教えていただきました。「れきちず」を開発してくださっている関係者の皆様、会議を開催してくださった皆様、また使用方法を教えてくださった北本朝展先生に感謝いたします。 http://codh.rois.ac.jp/conference/linked-pasts-10/ 以下のように、CODHのサービスでも導入されています。 http://codh.rois.ac.jp/news/ 2024-05-01 江戸マップ「れきちず」データセットを公開しました。また、edomi マップおよびedomi 災害に「れきちず」を導入し、現代デザインの歴史地図上で、edomiの歴史ビッグデータが閲覧できるようになりました。使用方法以下に、最低限の機能を実現するためのソースコードを格納しました。 https://github.com/nakamura196/rekichizu/blob/main/docs/index.html 以下でデモをご確認いただけます。 https://nakamura196.github.io/rekichizu/ 以下は地形とともに、富士山を表示した例です。なお、地形については、以下の点にご注意ください。江戸時代後期（1800〜1840年ごろ、文化・文政・天保年間）を想定した地図になります。関東・中部以外の地方についても順次拡大していく予定です。地形の3D表示については現在の地形を表示しています。そのため、当時とは異なる地域があります。 https://rekichizu.jp/ 参考ライブラリ本アプリケーションの構築にあたっては、Leafletではなく、MapLibre GL JSを使用します。 https://maplibre.org/maplibre-gl-js/docs/ 以下のサイトにおいて、MapLibre GL JSは、Mapboxのオープンソースフォーク版と説明されていました。 https://qiita.com/asahina820/items/66cd78a4462db86578a4 当初、Mapboxでの使用を前提に、アカウント登録やトークンの発行等を行いましたが、MapLibre GL JSを使用する場合は、このような手続きは不要でした。地形の有効化/無効化時にピッチを変更地形の有効化/無効化時にピッチを変更するにあたり、以下のような記述によって実現できました。 map.on("terrain", () => { const terrain = map.getTerrain(); const duration = 1000; // アニメーションの持続時間（ミリ秒） map.easeTo({ pitch: terrain ? 60 : 0, // 地形が有効になったときのピッチ duration, }); }); 当初、map.setPitch(60)などを使用していましたが、map.easeToを使用することにより、スムーズにピッチが変更されるようになりました。 ...

2024年12月9日 · 更新: 2024年12月9日 · 1 分 · Nakamura

【備忘録】Maplatの使い方

古地図ビューアライブラリであるMaplatを使用してみましたので、使い方の備忘録です。 https://github.com/code4history/Maplat 上記のGitHubリポジトリのほか、以下のQiitaの記事なども参考になります。 https://qiita.com/tags/maplat?page=1 MaplatEditorのダウンロード以下のページから、MaplatEditorの最新版をダウンロードします。 https://github.com/code4history/MaplatEditor/wiki データの作成インストールしたMaplatEditorを立ち上げ、「新規作成」ボタンを押します。必要なメタデータを入力します。以下の図に示す項目が必須項目です。次に「対応点編集」タブに移動して、以下に示すように、対応点を追加します。「データセット入出力」タブに移動して、「地図データエクスポート」ボタンを押します。以下のように、<id名>.zipというファイルを適当な場所に保存します。ダウンロードされたファイルを展開すると、以下に示すように、tmbs、tiles、mapsフォルダが格納されていることが確認できます。アプリを作成する（ソースコードを利用する）本記事では、ソースコードから利用する方法を説明します。npmコマンドが使用できる前提で話を進めます。サンプルパッケージなどを利用して、より簡単にアプリを作成する方法が以下にまとめられています。こちらも参考にしてください。 https://github.com/code4history/Maplat/wiki/How-to-set-up-Maplat-Application 準備適当なフォルダに移動して、以下に示すようなコマンドにより、ソースコードをダウンロードします。Maplatというフォルダが作成されます。 git clone https://github.com/code4history/Maplat.git 次に、以下のコマンドにより、ライブラリのインストールを行います。 cd Maplat npm install 次に、以下のコマンドにより、アプリケーションを立ち上げます。 npm run server 以下のURLでアプリケーションにアクセスすることができます。 http://localhost:8888/index.html アプリケーションの編集まず、tmbs、tiles、mapsフォルダに、先にエクスポートした中身をそれぞれコピーします。以下、mapsフォルダに追加した例を示します。そして、<Maplatのダウンロードパス>/apps/sample.jsonを編集します。具体的には、以下に示すように、sources項目に、作成した地図のid（ここでは0001）を追加します。その結果、以下のように、追加した画像がアプリケーションに表示されます。上記の入力値において、labelの値を変更することにより、アプリ上での表示名を変更することができます。また、<Maplatのダウンロードパス>/public/index.htmlを編集することにより、表示内容を変更することができます。一例として、以下に示すように、enableBorder: trueをoptionに追加してみます。その結果、以下の図に示すように、画面右下に「地図境界表示」アイコンが表示され、選択すると、地図の境界が表示されます。他にもさまざまな設定が可能です。設定内容については、以下が参考になります。 https://github.com/code4history/Maplat/wiki/How-to-set-up-Maplat-Application#4-appssamplejson%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95 以上でアプリケーションの編集は終了です。今回は、新しく地図画像を追加しただけでした。実際には、上記のリポジトリではじめから同梱されている地図画像情報の削除等を行い、公開に必要なものだけに整理する必要があります。参考以下は参考情報ですが、<Maplatのダウンロードパス>/src/index.jsの以下の行をコメントアウトなどすると、コンソール画面に表示される内容を軽減できます。 https://github.com/code4history/Maplat/blob/19618d23a3d80cbde7db753cd769a41575527dd4/src/index.js#L1590 ビルドアプリケーションの編集が完了したら、ビルドを行います。以下のコマンドを実行します。 npm run build その結果、distとdist_packedフォルダが更新されます。デプロイビルドした結果などをデプロイします。ここでは、AWSのS3にアップロードする方法を示します。 ...

2022年3月25日 · 更新: 2022年3月25日 · 1 分 · Nakamura