作業メモ

PruneCluster をインターネット非接続環境で使用するためのローカル化手順と判断経緯

0. 目的

• server22-1_v3.go を インターネットに一切接続できない環境で動作させる。

• Leaflet / PruneCluster を含むすべての外部ライブラリを ローカルファイルのみで構成する。

• 後続の混乱を防ぐため、**ディレクトリ構造はフラット（サブディレクトリを掘らない）**ことを原則とする。

1. 事前調査：外部依存の洗い出し

HTML テンプレート内で、以下の外部リソースを使用していることを確認。

• Leaflet

  • leaflet.js

  • leaflet.css

• PruneCluster

  • PruneCluster.js

  • examples.css

いずれも CDN または外部サーバ参照であり、オフライン環境では使用不可。

2. 手法①：外部ライブラリのローカルダウンロード

2.1 方針

• まずは 外部 URL をそのままローカルファイルに置き換える。

• server22-1_v3.go と 同一ディレクトリにすべて配置する。

2.2 実施手順（ダウンロード）

3. 手法②：Go サーバから静的ファイルを配信

3.1 方針

• Go 標準の http.FileServer を用い、ローカルファイルを配信する。

• ディレクトリは掘らず、カレントディレクトリをそのまま公開。

3.2 実施手順（Go 側）

4. 手法③：HTML 側の参照をローカルに変更

4.1 実施手順（HTML 修正）

5. 発生した問題

• マーカーは表示される

• JavaScript エラーは出ない

• しかし以下の PruneCluster 特有の挙動が消失

  • アイコンがスムーズに流れない

  • クラスタが円形の塊にならず、人数も表示されない

→ JS は動作しているが、PruneCluster の視覚的特徴が無効化されている状態

6. 原因調査

6.1 仮説

• PruneCluster のクラスタ表現は DivIcon + CSS に強く依存する。

• JavaScript ではなく CSS の欠落を疑う。

6.2 調査結果

examples.css の先頭に以下を確認。

• examples.css は単体で完結しておらず、
  別ファイル LeafletStyleSheet.css に依存している。

• 相対パス ../dist/ は、フラット構成では必ず 404 となる。

• この CSS が読み込まれないと、

  • クラスタ円形装飾

  • 人数表示

  • サイズ別スタイル

  • トランジション
    がすべて無効になる。

7. 手法④（最終方針）：examples.css を単体完結させる（方法A）

7.1 方針

• dist/ ディレクトリは作らない。

• @import による依存を廃止し、
  LeafletStyleSheet.css の中身を examples.css に統合する。

8. 実施手順（方法A：完全手順）

8.1 一時的に補助 CSS を取得

8.2 examples.css をバックアップ

8.3 @import 行を除去

8.4 CSS を結合（単体完結化）

8.5 一時ファイル削除

9. 結果

• examples.css 単体で PruneCluster に必要な全スタイルを包含。

• ディレクトリ構造はフラットのまま。

• 以下の構成で完全オフライン動作を確認。

• PruneCluster の

  • スムーズなアイコン移動

  • クラスタの塊表示

  • 人数表示
    がすべて復活。

10. 教訓・注意点

• PruneCluster が「動くが挙動がおかしい」場合、
  JavaScript より先に CSS の依存関係を疑う。

• demo / examples 系 CSS は 単体で完結していないことが多い。

• 完全オフライン化では、

  • @import

  • url(...)
    を必ず grep で洗い出す。

このメモは、
再現手順書・README・引き継ぎ資料としてそのまま使用可能なレベルで記載しています。