#author("2026-03-13T21:06:12+09:00","default:kanateko","kanateko")
#author("2026-03-14T01:37:59+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加,未公開);
#ref(custommap.webp,center,wrap,500x)
#contentsx
* インタラクティブマップ作成プラグイン [#summary]
#infobox(plugin,except=ライセンス){{
name = custommap
ver = 1.8.3
ver = 1.8.4
pukiwiki = 1.5.4
update = 2026-03-13
update = 2026-03-14
}}
タイル画像を使用したインタラクティブマップを表示し、指定した位置にカスタムマーカーを設置できるプラグイン。ゲームの攻略マップなど、カスタム画像上に任意のマーカーを配置できる。
* プラグインの特徴 [#features]
- 🗺 ''タイルベースマップ''：ズームレベル対応のタイル画像表示
- 📌 ''カスタムマーカー''：アイコンの種類や背景ピンの色をカスタマイズ可能
- 🔍 ''洗練されたUI''：ズームコントロール、タブ形式のドロワーメニュー、各種ツール
- 📺 ''全画面モード''：マップをブラウザ画面いっぱいに広げて表示可能（Escキーで解除）
- 📱 ''レスポンシブ・タッチ対応''：PC・モバイル（ピンチズーム・スワイプ）に両対応
- 🌙 ''ダークモード''：PukiWikiのダークテーマ設定と自動同期
- 🏷 ''ラベル常時表示''：ズームレベルに関わらず全マーカーのラベルを常に表示可能
- 🔍 ''マーカー検索''：大量のマーカーから名前や説明で目的のものを素早く検索
- 🔗 ''マーカー共有リンク''：マーカーのURLやIDのコピー、マーカーへのリンク設置が可能
- 📋 ''座標コピー''：マップ上をクリックして `||x|y|||` 形式（プラグインの引数と同じ形式）で座標をクリップボードにコピー
- 💾 ''状態の保存''：フィルターや表示設定をブラウザ（LocalStorage）に保存し、再訪時も維持
- 🛠 ''デバッグ機能''：座標確認、原点軸描画、マーカー座標表示など、マップ作成を支援するツール
* 動作環境 [#requirements]
- PukiWiki 1.5.4 以降
- PHP 8.2 以降
- モダンブラウザ（ES2022対応）
#clear
* ダウンロード [#download]
#box(caution,width=400px){{{
このプラグインは現在公開されていません。
}}}
|~日付|~バージョン|~備考|h
|CENTER:120|CENTER:60|590|c
|2026-03-14|1.8.4|#ul(ドロワーのアイコン拡大と表示順序の調整)|
|2026-03-13|1.8.3|#ul(マーカーフォーカス時のズーム挙動改善,マーカー非表示時の残存バグ修正,すべて非表示状態の保存失敗を修正)|
|2026-03-12|1.8.2|#ul(常時ラベル表示時のレンダリングを修正)|
|~|1.8.1|#ul(重複スタイルの挿入防止,同位置マーカー展開時のホバー挙動修正,ズームUI非表示時のツール位置調整,フルスクリーンボタンのアイコン動的切り替え,ドロワー閉じるボタンのSVG化)|
|2026-03-11|1.8.0|#ul(全画面モードの実装,ツール表示設定のリファクタリング（一括制御に対応）,読み込み中オーバーレイ（ローダー）の追加)|
|~|1.7.0|#ul(レンダリングの最適化による大幅なパフォーマンス向上)|
|2026-03-10|1.6.1|#ul(同座標マーカーの展開表示機能の実装,マーカー画像未指定時の描画改善 (白丸表示),マーカーフォーカス時の自動スクロールとツールチップ解消)|
|~|1.6.0|#ul(マーカー共有リンク機能の実装 (URLコピー・インラインリンク・固定ID対応),マーカーホバーアニメーションの平滑化)|
|~|1.5.1|#ul(ドロワー内設定のアコーディオン化,座標取得ボタンのダークモード対応修正,設定UIの操作性改善,座標取得時の情報更新改善,表示制御・操作干渉の修正)|
|2026-03-09|1.5.0|#ul(座標コピー機能の追加,ズームUIの表示設定機能の追加,デバッグモード時のマーカー座標表示を追加)|
|~|1.4.1|#ul(状態の永続化 (LocalStorage) への対応,カテゴリトグル動作の改善)|
|~|1.4.0|#ul(データ読み込み方式の刷新（非同期ロード）,パフォーマンスの更なる向上)|
|2026-03-07|1.3.2|#ul(ドロワーUIの刷新（タブ形式化）,ラベル常時表示機能の追加,デバッグ項目の整理)|
|~|1.3.1|#ul(ズームボタンの無効化処理,ズーム時の点滅軽減)|
|~|1.3.0|#ul(Canvas描画によるパフォーマンスの劇的改善,大量マーカー表示の最適化)|
|~|1.2.1|#ul(テーマ切り替えUIの改善,ドロワー内アイコンの修正)|
|2026-03-06|1.2.0|#ul(マーカー機能の拡張 (SVGピン対応など),ドロワーUI・デバッグモードの改善)|
|2026-03-05|1.1.0|#ul(スムーズなズーム遷移,ズームコントロールUIの追加)|
|2026-03-04|1.0.0|#ul(初版作成)|
//* セットアップ [#setup]
//+ 最新のファイルをダウンロードする。
//+ ダウンロードした「`custommap.inc.php`」を `plugin/` ディレクトリに配置する。
//+ 必要に応じて `pukiwiki.ini.php` を編集してマルチラインプラグインを許可する。（※PukiWikiの設定による）
* プラグイン設定 [#setting]
設定ページは `:config/plugin/custommap/{設定名}` に作成する。
** 各種設定項目 [#options]
#style(word-break:break-all;,class=table_compact){{{
#tableif(^(true|false)$=COLOR(#463dcb),"'(\d+x\d+|\d+(,\d+)?)'=COLOR(#cb643d)"){{
|>|>|>|BGCOLOR(--color-key):COLOR(white):~設定ページ内のオプション|
|-dir|string|なし|ディレクトリモードでのタイル画像ディレクトリ名|
|-attach|string|なし|添付ファイルモードでの読み込み元ページ名|
|-tileSize|string|'256x256'|各タイル画像のピクセルサイズ。`256`の場合は`256x256`と同じ意味|
|-imageSize|string|自動計算|初期表示の全体画像のサイズ。省略時はtileSize×tileCount|
|-mapSize|string|自動計算|座標系のサイズ|
|-origin|string|'0,0'|座標 (0,0) の位置。デフォルトでは画像の中心が (0,0)|
|-invertY|bool|true|true: Y軸が下方向に増加（UE座標系）|
|-center|string|origin|初期表示の中心座標|
|-zoom|int|0|初期ズームレベル|
}}
}}}
- `-dir`と`-attach`はどちらか一方のみ指定可能。
- どちらの指定もない場合は、`-attach:{設定ページ名}` と同じ動作をする。
- `-dir`で指定した場合は、`image/{dir}`内の画像がタイル画像として使用される。
-- 例えば`-dir:map`を指定した場合、`image/map/{z}/{x}/{y}.{ext}`の形式で画像が配置されている必要がある。
#expand(ディレクトリ構造例){{
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}`の形式の画像がタイル画像として使用される。
#expand(添付ファイル例){{
: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
}}
** マーカー定義 [#markerdef]
設定ページ内にテーブル形式でマーカーの定義を記述する。
|マーカー名|アイコン画像|カテゴリ|マーカー色|サイズ|デフォルトラベル|デフォルト説明|
|~列|~必須|~説明|h
|160|CENTER:50|550|c
|マーカー名|✅|プラグイン記述で使用する識別名|
|アイコン画像||添付ファイルのパスまたは相対パス。省略時は表示なし|
|カテゴリ||フィルターでのグループ名。省略時は「その他」|
|マーカー色||SVGピンアイコンの背景色 (例: `#FF5A3C` や `red`)。省略時は&color(#2b3344){■};`#2B3344`|
|サイズ||アイコンの表示サイズ (`WxH` または単一数値)。省略時は`20x20`|
|デフォルトラベル||プラグイン記述で省略された場合に使われるラベル。省略時はマーカー名を使用|
|デフォルト説明||プラグイン記述で省略された場合に使われる説明 (PukiWiki構文使用可)|
※ ヘッダー行（末尾`h`）やスタイル行（末尾`c`）は自動的に無視される。
* 使用方法 [#usage]
ブロック型でインタラクティブマップを設置する。
#custommap(設定名 [, class=追加クラス]){{
|マーカー名#ID|X座標|Y座標|ラベル|説明|
|マーカー名|X座標|Y座標|||
}}
※ IDは任意で設定可能。省略した場合は自動生成される。
インライン型では、マーカーへのリンクを設置できる。
&custommap(ID){リンクテキスト};
** 引数一覧 [#args]
ブロック型で使える引数。
|~引数名|~説明|~例|h
|150|250|150|c
|`設定名`|設定ページ名 (`:config/plugin/custommap/`以降)|`#custommap(swamp)`|
|`class=`|wrapperに追加するCSSクラス名（複数指定可）|`class=wide-map dark-border`|
* 使用例 [#example]
以下はデモ用に適当に作ったマップデータになる。タイル画像はズーム2段階分用意してある。
本格的な使い方が見たい場合は[[このページ>https://jpngamerswiki.com/starrupture/?485a96cf6e#list]]を参照。
マーカーへのリンク → &custommap(65f0701b){展開表示デモ};
#custommap(example){{
|洞窟|0|0|||
|廃墟|0|0|||
|居住地|0|0|||
|オベリスク|0|0|||
|敵|0|0|展開表示|同一座標にあるマーカーを展開表示できます。|
|廃墟#id_0_0|-47.953|267.133|廃墟（重要ポイント）|ここには貴重な物資があるらしい。|
|廃墟#special_0|2719.965|4371.838|特殊な廃墟|周囲をよく探索してみよう。|
|廃墟|4647.295|1602.872|||
|廃墟|2077.554|905.830|||
|廃墟|-134.972|1395.259|||
|廃墟|-2791.392|-4905.411|||
|廃墟|2900.968|1840.008|||
|廃墟|-1286.789|3328.182|||
|廃墟|-3971.504|1445.938|||
|廃墟|2372.835|3575.958|||
|廃墟|-2957.915|-4815.803||ランダムな説明文のデモです。&br;改行も可能です。|
|廃墟|-3515.031|-2858.900|||
|廃墟|130.387|2622.933|||
|廃墟|479.023|-4898.032|||
|廃墟|-4340.743|-1149.066|||
|廃墟|2849.153|2550.620|||
|廃墟|-13.165|4918.542|||
|廃墟|-3886.366|-2023.895|||
|廃墟|3619.482|-2886.342|||
|廃墟|-4809.191|-1521.919|||
|廃墟|-718.175|-2562.582||ランダムな説明文のデモです。&br;改行も可能です。|
|廃墟|-2958.353|4637.936|||
|廃墟|-4137.682|1524.322|||
|廃墟|923.840|1730.072|||
|廃墟|-1926.802|-4967.961|||
|廃墟|1803.328|1248.756|||
|廃墟|-4848.021|-2134.410|||
|廃墟|4323.638|-2678.618|||
|廃墟|-2540.978|-1466.354|||
|廃墟|-4470.938|-4379.098|||
|洞窟#id_1_0|-1521.400|2350.815|洞窟（重要ポイント）|ここには貴重な物資があるらしい。|
|洞窟#special_1|2519.149|-3840.141|特殊な洞窟|周囲をよく探索してみよう。|
|洞窟|-3962.738|1131.596|||
|洞窟|-1220.019|2100.482|||
|洞窟|-1149.571|310.225|||
|洞窟|3715.948|2745.916|||
|洞窟|-3067.374|-4147.507|||
|洞窟|-719.305|-217.940|||
|洞窟|-3702.078|1678.921|||
|洞窟|-3389.810|2290.824|||
|洞窟|-1993.480|-4191.415||ランダムな説明文のデモです。&br;改行も可能です。|
|洞窟|4091.969|-2259.462|||
|洞窟|-2459.838|102.391|||
|洞窟|-732.416|3035.064|||
|洞窟|-3737.567|3201.226|||
|洞窟|957.486|-3513.003|||
|洞窟|2469.819|2773.405|||
|洞窟|4794.237|2361.041|||
|洞窟|333.795|3869.285|||
|洞窟|2442.173|-2845.504|||
|洞窟|-2320.855|-1787.152||ランダムな説明文のデモです。&br;改行も可能です。|
|洞窟|191.789|-2147.024|||
|洞窟|3985.664|-4085.334|||
|洞窟|-366.289|-1098.930|||
|洞窟|-1865.825|-3312.392|||
|洞窟|1222.651|153.079|||
|洞窟|-1342.988|2544.446|||
|洞窟|-893.072|-2087.047|||
|洞窟|4579.779|1712.551|||
|洞窟|2154.214|3453.997|||
|敵#id_2_0|2987.626|1133.121|敵（重要ポイント）|ここには貴重な物資があるらしい。|
|敵#special_2|-3356.699|-4086.298|特殊な敵|周囲をよく探索してみよう。|
|敵|311.367|-818.249|||
|敵|-1115.730|-1881.337|||
|敵|-363.135|-3634.891|||
|敵|1135.680|1344.289|||
|敵|-1940.848|-158.918|||
|敵|1108.913|2038.001|||
|敵|-2245.684|-4521.335|||
|敵|-2149.550|-2153.090|||
|敵|962.247|-2668.800||ランダムな説明文のデモです。&br;改行も可能です。|
|敵|4721.878|4170.944|||
|敵|3446.274|-3276.529|||
|敵|-218.823|1297.259|||
|敵|4596.750|2409.050|||
|敵|-2003.577|1548.429|||
|敵|-4285.421|4451.088|||
|敵|-767.937|-1841.204|||
|敵|2869.918|1752.880|||
|敵|2660.751|-65.625|||
|敵|-4356.532|-3603.150||ランダムな説明文のデモです。&br;改行も可能です。|
|敵|3183.709|-4652.163|||
|敵|3975.654|4061.241|||
|敵|4472.948|751.844|||
|敵|-1353.661|1899.694|||
|敵|-430.679|-4043.521|||
|敵|-1567.195|-3525.674|||
|敵|-1885.305|4045.457|||
|敵|2066.697|-584.370|||
|敵|-3353.493|2966.918|||
|居住地#id_3_0|4885.910|3375.723|居住地（重要ポイント）|ここには貴重な物資があるらしい。|
|居住地#special_3|2363.511|-1571.773|特殊な居住地|周囲をよく探索してみよう。|
|居住地|-1773.715|-1105.338|||
|居住地|3739.799|3024.386|||
|居住地|4608.559|105.683|||
|居住地|-3315.095|-1712.960|||
|居住地|-2413.771|-1996.095|||
|居住地|-1416.502|-2732.023|||
|居住地|-4923.427|-1948.654|||
|居住地|-2427.051|-3264.108|||
|居住地|-4688.456|-3867.062||ランダムな説明文のデモです。&br;改行も可能です。|
|居住地|-3725.292|4985.314|||
|居住地|935.326|2501.630|||
|居住地|-568.384|-646.033|||
|居住地|-2739.482|4002.657|||
|居住地|1243.172|1359.938|||
|居住地|2426.670|2127.045|||
|居住地|-514.935|-3275.446|||
|居住地|-3079.813|-4211.901|||
|居住地|4848.832|4571.083|||
|居住地|767.463|1486.325||ランダムな説明文のデモです。&br;改行も可能です。|
|居住地|1949.624|4736.117|||
|居住地|-3573.620|2742.282|||
|居住地|-3755.071|-3534.215|||
|居住地|1563.475|-4584.303|||
|居住地|-1271.364|-759.675|||
|居住地|628.974|-4249.886|||
|居住地|3716.419|-3579.536|||
|居住地|1759.633|-696.023|||
|居住地|-2169.084|-4678.314|||
|オベリスク#id_4_0|3391.619|-1801.869|オベリスク（重要ポイント）|ここには貴重な物資があるらしい。|
|オベリスク#special_4|677.326|2184.136|特殊なオベリスク|周囲をよく探索してみよう。|
|オベリスク|1621.417|4546.884|||
|オベリスク|-1094.428|-3194.386|||
|オベリスク|3905.909|4358.748|||
|オベリスク|442.410|2791.180|||
|オベリスク|-1931.323|4468.669|||
|オベリスク|4860.179|-535.372|||
|オベリスク|-4519.414|-753.108|||
|オベリスク|4953.974|-149.114|||
|オベリスク|-2879.439|3404.586||ランダムな説明文のデモです。&br;改行も可能です。|
|オベリスク|2729.565|-732.334|||
|オベリスク|-262.076|3214.236|||
|オベリスク|3872.600|1665.926|||
|オベリスク|-4516.860|2685.094|||
|オベリスク|-1765.781|4453.004|||
|オベリスク|4728.474|1180.762|||
|オベリスク|4940.363|3145.511|||
|オベリスク|-2619.638|2024.063|||
|オベリスク|-4379.248|3960.618|||
|オベリスク|1966.600|3814.438||ランダムな説明文のデモです。&br;改行も可能です。|
|オベリスク|1421.604|-2260.646|||
|オベリスク|-4030.412|53.059|||
|オベリスク|215.011|3697.116|||
|オベリスク|1776.174|536.906|||
|オベリスク|-2123.103|1293.834|||
|オベリスク|1753.564|2776.927|||
|オベリスク|721.709|-3957.746|||
|オベリスク|3162.257|2675.415|||
|オベリスク|1772.812|-83.772|||
}}
* 技術的メモ [#tech]
- マップの描画やインタラクション機能はTypeScriptで自作しており、外部ライブラリは使用していない。
- WebGLによるインスタンス描画をメインエンジンとして採用。数万個のマーカーが存在する場合でも、GPU頂点シェーダー側で座標計算（マップ座標→ビューポート座標）を行うことで、マップ移動時のCPU負荷を最小限に抑え、スムーズな描画を実現。
- WebGLが利用できない環境向けに、Canvas2Dによる高速なフォールバックも維持。
- PHP側では設定ページの解析、JSONへのデータ変換、初期HTML構造の出力のみを行う。
- フィルター状態やテーマ設定などは`LocalStorage`（`custommap_state_*`）に保存される。
- ゲームのマップを作成することを前提にしているので、Y軸は下方向に増加（UE座標系）し、座標(0,0)をマップの中心に配置するようにしている。
* コメント [#comment]
#mcomment
