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

作業メモ

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 実施手順（ダウンロード）

# Leaflet
curl -L -o leaflet.js https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js
curl -L -o leaflet.css https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css# PruneCluster
curl -L -o PruneCluster.js http://kobore.net/PruneCluster.js
curl -L -o examples.css http://kobore.net/examples.css

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

3.1 方針

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

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

3.2 実施手順（Go 側）

http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("."))))

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

4.1 実施手順（HTML 修正）

<link rel="stylesheet" href="/static/leaflet.css"/>
<link rel="stylesheet" href="/static/examples.css"/><script src="/static/leaflet.js"></script>
<script src="/static/PruneCluster.js"></script>

5. 発生した問題

  • マーカーは表示される

  • JavaScript エラーは出ない

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

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

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

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

6. 原因調査

6.1 仮説

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

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

6.2 調査結果

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

@import url(../dist/LeafletStyleSheet.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 を取得

curl -L -o LeafletStyleSheet.css http://kobore.net/dist/LeafletStyleSheet.css

8.2 examples.css をバックアップ

cp -p examples.css examples.css.bak

8.3 @import 行を除去

grep -v '^@import url(\.\./dist/LeafletStyleSheet\.css);' examples.css > examples.css.body

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

cat LeafletStyleSheet.css examples.css.body > examples.css

8.5 一時ファイル削除

rm -f LeafletStyleSheet.css examples.css.body

9. 結果

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

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

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

server22-1_v3.go
leaflet.js
leaflet.css
PruneCluster.js
examples.css

  • PruneCluster の

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

    • クラスタの塊表示

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

10. 教訓・注意点

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

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

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

    • @import

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

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

未分類

Posted by ebata