自作プラグイン/custommap の履歴(No.2)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
自作プラグイン/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)

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

custommap.inc.php
製作者	kanateko
バージョン	1.4.1
動作確認	PukiWiki 1.5.4 - 1.5.4
最終更新	2026-03-09

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

プラグインの特徴

🗺 タイルベースマップ — ズームレベル対応のタイル画像表示
📌 カスタムマーカー — アイコンの種類や背景ピンの色をカスタマイズ可能
🔍 洗練されたUI — 画面上のズームコントロールUI、タブ形式（マーカー/設定）のドロワーメニュー
📱 レスポンシブ・タッチ対応 — PC・モバイル（ピンチズーム・スワイプ）に両対応
🌙 ダークモード — PukiWikiのダークテーマ設定と自動同期
🏷 ラベル常時表示 — ズームレベルに関わらず全マーカーのラベルを常に表示可能
🔍 マーカー検索 — 大量のマーカーから名前や説明で目的のものを素役早く検索
💾 状態の保存 — フィルターやテーマの設定をブラウザ（LocalStorage）に保存し、再訪時も維持
🖼 複数のタイルソース — ディレクトリ指定・添付ファイル指定に対応
🛠 デバッグ機能 — 座標確認や原点軸描画など、マップ作成を支援するツールを「設定」タブに集約

動作環境

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

ダウンロード

このプラグインは現在公開されていません。

日付	バージョン	備考
2026-03-09	1.4.1	状態の永続化 (LocalStorage) への対応カテゴリトグル動作の改善
2026-03-09	1.4.0	データ読み込み方式の刷新（非同期ロード）パフォーマンスの更なる向上
2026-03-07	1.3.2	ドロワーUIの刷新（タブ形式化）ラベル常時表示機能の追加デバッグ項目の整理
	1.3.1	ズームボタンの無効化処理ズーム時の点滅軽減
	1.3.0	Canvas描画によるパフォーマンスの劇的改善大量マーカー表示の最適化
	1.2.1	テーマ切り替えUIの改善ドロワー内アイコンの修正
2026-03-06	1.2.0	マーカー機能の拡張 (SVGピン対応など) ドロワーUI・デバッグモードの改善
2026-03-05	1.1.0	スムーズなズーム遷移ズームコントロールUIの追加
2026-03-04	1.0.0	初版作成

プラグイン設定

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

各種設定項目

設定ページ内のオプション
-dir	string	なし	ディレクトリモードでのタイル画像ディレクトリ名
-attach	string	なし	添付ファイルモードでの読み込み元ページ名
-tileSize	string	'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	初期ズームレベル

マーカー定義

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

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

列	必須	説明
マーカー名	✅	プラグイン記述で使用する識別名
アイコン画像		添付ファイルのパスまたは相対パス。省略時は表示なし
カテゴリ		フィルターでのグループ名。省略時は「その他」
マーカー色		SVGピンアイコンの背景色 (例: `#FF5A3C` や `red`)。省略時は■`#2B3344`
サイズ		アイコンの表示サイズ (`WxH` または単一数値)。省略時は`20x20`
デフォルトラベル		プラグイン記述で省略された場合に使われるラベル。省略時はマーカー名を使用
デフォルト説明		プラグイン記述で省略された場合に使われる説明 (PukiWiki構文使用可)

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

使用方法

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

引数一覧

引数名	説明	例
`設定名`	設定ページ名 (`:config/plugin/custommap/`以降)	`#custommap(swamp)`
`class=`	wrapperに追加するCSSクラス名（複数指定可）	`class=wide-map dark-border`

使用例

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

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

基本構成

#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

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

技術的メモ

マップの描画やインタラクション機能はTypeScriptで自作しており、外部ライブラリは使用していない。
ES2022の機能を利用し、Canvasによる高速な描画をベースにタイル読み込み・ズーム・パン処理を実装。
マーカー描画を完全にCanvasに移行し、数千個のマーカーでもLayout Thrashingを抑え、高速なヒット判定(ハッシュカラー方式)を実現。
スマホなどでのタッチ操作を考慮し、Pointer Eventsによるマルチタッチ（ピンチズーム・スワイプ）にネイティブ対応。
PHP側では設定ページの解析、JSONへのデータ変換、初期HTML構造の出力のみを行う。
フィルター状態やテーマ設定などは LocalStorage（custommap_state_*）に保存される。
ゲームのマップを作成することを前提にしているので、Y軸は下方向に増加（UE座標系）し、座標(0,0)をマップの中心に配置するようにしている。

Loading comments…