• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 自作プラグイン/custommap へ行く。
  • 1 (2026-03-09 (月) 17:10:44)
  • 2 (2026-03-09 (月) 17:47:50)
  • 3 (2026-03-10 (火) 00:29:18)
  • 4 (2026-03-10 (火) 23:18:01)
  • 5 (2026-03-11 (水) 17:50:35)
  • 6 (2026-03-12 (木) 06:29:34)
  • 7 (2026-03-13 (金) 21:06:12)

カテゴリ：プラグイン 自作 追加 未公開

インタラクティブマップ作成プラグイン

タイル画像を使用したインタラクティブマップを表示し、指定した位置にカスタムマーカーを設置できるプラグイン。ゲームの攻略マップなど、カスタム画像上に任意のマーカーを配置できる。

プラグインの特徴

• 🗺 タイルベースマップ — ズームレベル対応のタイル画像表示
• 📌 カスタムマーカー — アイコンの種類や背景ピンの色をカスタマイズ可能
• 🔍 洗練されたUI — ズームコントロール、タブ形式のドロワーメニュー、各種ツール
• 📺 全画面モード — マップをブラウザ画面いっぱいに広げて表示可能（Escキーで解除）
• 📱 レスポンシブ・タッチ対応 — PC・モバイル（ピンチズーム・スワイプ）に両対応
• 🌙 ダークモード — PukiWikiのダークテーマ設定と自動同期
• 🏷 ラベル常時表示 — ズームレベルに関わらず全マーカーのラベルを常に表示可能
• 🔍 マーカー検索 — 大量のマーカーから名前や説明で目的のものを素早く検索
• 🔗 マーカー共有リンク — マーカーのURLやIDのコピー、マーカーへのリンク設置が可能
• 📋 座標コピー — マップ上をクリックして ||x|y||| 形式（プラグインの引数と同じ形式）で座標をクリップボードにコピー
• 💾 状態の保存 — フィルターや表示設定をブラウザ（LocalStorage）に保存し、再訪時も維持
• 🛠 デバッグ機能 — 座標確認、原点軸描画、マーカー座標表示など、マップ作成を支援するツール

動作環境

• PukiWiki 1.5.4 以降
• PHP 8.2 以降
• モダンブラウザ（ES2022対応）

ダウンロード

プラグイン設定

設定ページは :config/plugin/custommap/{設定名} に作成する。

各種設定項目

• -dirと-attachはどちらか一方のみ指定可能。
• どちらの指定もない場合は、-attach:{設定ページ名} と同じ動作をする。
• -dirで指定した場合は、image/{dir}内の画像がタイル画像として使用される。
  • 例えば-dir:mapを指定した場合、image/map/{z}/{x}/{y}.{ext}の形式で画像が配置されている必要がある。
    ディレクトリ構造例

    image/
    └── map/                  (← -dir で指定した名前)
         ├── 0/               (← Z座標/ズームレベル)
         │    └── 0/         (← X座標)
         │         └── 0.png (← Y座標)
         └── 1/
              ├── 0/
              │    ├── 0.png
              │    └── 1.png
              └── 1/
                   ├── 0.png
                   └── 1.png

• -attach::config/plugin/custommap/mapで指定した場合は、:config/plugin/custommap/mapに添付された{z}_{x}_{y}.{ext}の形式の画像がタイル画像として使用される。
  添付ファイル例

  :config/plugin/custommap/map
   ├── 0_0_0.png
   ├── 0_0_1.png
   ├── 0_1_0.png
   ├── 0_1_1.png
   ├── 1_0_0.png
   ├── 1_0_1.png
   ├── 1_1_0.png
   └── 1_1_1.png

マーカー定義

設定ページ内にテーブル形式でマーカーの定義を記述する。

|マーカー名|アイコン画像|カテゴリ|マーカー色|サイズ|デフォルトラベル|デフォルト説明|

※ ヘッダー行（末尾h）やスタイル行（末尾c）は自動的に無視される。

使用方法

ブロック型でインタラクティブマップを設置する。

#custommap(設定名 [, class=追加クラス]){{
|マーカー名#ID|X座標|Y座標|ラベル|説明|
|マーカー名|X座標|Y座標|||
}}

※ IDは任意で設定可能。省略した場合は自動生成される。

インライン型では、マーカーへのリンクを設置できる。

&custommap(ID){リンクテキスト};

引数一覧

ブロック型で使える引数。

使用例

実際の表示はこのページを参照。

以下はプラグインや設定ページの書き方の例になる。

#custommap(swamp){{
|宝箱|120.000|-1245.000|宝箱(中)|・片手剣 1個&br;回復薬 1個|
|敵|122.000|-1246.000|スライム||
|拠点|-100.000|-100.000|||
}}

-dir:swamp
-tileSize:256x256
-mapSize:540000,540000
-origin:270000,270000
-invertY:true
-center:270000,270000
-zoom:0

|宝箱|./marker/chest.png|オブジェクト|#FFCC00|32x32|||
|敵|./marker/enemy.png|脅威|#FF3333|32x32|スライム||
|拠点|./marker/home.png|ロケーション|#3333FF|48x48|||

技術的メモ

• マップの描画やインタラクション機能はTypeScriptで自作しており、外部ライブラリは使用していない。
• WebGLによるインスタンス描画をメインエンジンとして採用。数万個のマーカーが存在する場合でも、GPU頂点シェーダー側で座標計算（マップ座標→ビューポート座標）を行うことで、マップ移動時のCPU負荷を最小限に抑え、スムーズな描画を実現。
• WebGLが利用できない環境向けに、Canvas2Dによる高速なフォールバックも維持。
• PHP側では設定ページの解析、JSONへのデータ変換、初期HTML構造の出力のみを行う。
• フィルター状態やテーマ設定などはLocalStorage（custommap_state_*）に保存される。
• ゲームのマップを作成することを前提にしているので、Y軸は下方向に増加（UE座標系）し、座標(0,0)をマップの中心に配置するようにしている。

コメント