インタラクティブマッププラグインの使い方

インタラクティブマッププラグインの使い方 †

ゲームのマップ画像に自由にピンを置いて、Googleマップのように拡大・縮小・ドラッグ操作ができるインタラクティブマップを作れるプラグインです。
PC・スマートフォンの両方に対応しています。

はじめに：こんなことができます †

• マップ画像を拡大・縮小して閲覧できます
• マップ上にピンを置いて、クリックするとタイトルや説明文をポップアップ表示できます
• ピンにカスタムアイコン（鉱石・町・魔物など）を設定して、ひと目で種類がわかるようにできます
• カテゴリごとにフィルターで表示/非表示を切り替えられます
• ピンの名前で検索してジャンプできます
• 「名称 ON/OFF」ボタンで全ピンの名前を一括表示/非表示できます
• 文章中にピンへのリンクを埋め込み、クリックするとマップ上の該当ピンにジャンプできます（詳しくはこちら）

3ステップで始める †

まずは最小限の手順で動くマップを作ってみましょう。

ステップ1：マップ画像をアップロードする †

使いたいマップ画像を、プラグインを設置するページに直接アップロードしてください。
（他のページにアップロードした画像は使えません）

画像のポイント

• 画像は高解像度であるほど良いです（拡大してもきれいに見えます）
• 必ずしも高解像度である必要はありませんが、目安としては以下をご確認ください。
  • ワールドマップなどの広大なマップ(2000px〜4000px以上)
  • 地域マップなどの中規模マップ (1000px～)
  • ダンジョン、洞窟などの小規模マップ (600px～)

※Wikiにアップロードできる画像の容量は、1ファイルにつき1024KBまでです。この制限では、2000～3000px程度の高解像度画像をそのままアップすることが困難です。そこで今回、WebP形式の画像をアップロードできるようにしました。インタラクティブマップではWebP画像の表示に対応しています。WebP形式であれば、3000pxを超える画像でも1000KB以下に抑えられる場合が多いため、マップ画像はぜひWebP形式でのアップロードをおすすめします。

ステップ2：ページにプラグインを書く †

ページの編集画面を開いて、以下のように書きます。

#interactivemap(アップロードした画像のファイル名,900,600){{
pin,250,130,ここにタイトルを書く,ここに説明文を書く
}}

900 は横幅、600 は縦幅（ピクセル）です。PC表示時の最大サイズで、スマートフォンでは自動的に画面幅に合わせて縮小されます。

ステップ3：座標を調べてピンを増やす †

ページを保存すると、マップが表示されます。
ピンの座標を調べるには以下のようにします。

1. マップ右上の 📍ボタン をクリックして座標表示モードをONにする
2. マップ上でマウスを動かすと、右下に X:250 Y:130 のように座標が表示される
3. ピンを置きたい場所の座標をメモする
4. ページの編集画面に戻り、pin行を追加する

#interactivemap(map_world.png,900,600){{
pin,250,130,宝箱A,レアアイテムが入っている
pin,500,300,ボス部屋,HP5000のドラゴンがいる
pin,100,450,セーブポイント,回復も可能
}}

これだけで基本的なインタラクティブマップは完成です！
ここから先は、カスタムアイコンやフィルターなどの応用機能の説明です。

カテゴリとカスタムアイコン †

ピンを種類ごとに分類したい場合は category行 を使います。

カテゴリの基本 †

pin行の前にcategory行を書いて、ピンの末尾にカテゴリ名を指定します。

#interactivemap(map_world.png,900,600){{
category,鉱石,#e74c3c
category,町,#3498db
category,魔物,#e67e22
pin,190,137,金鉱石,レア鉱石が採れる,鉱石
pin,500,300,始まりの町,セーブ可能,町
pin,350,200,ゴブリン,HP5000,魔物
}}

category行の書き方は以下の通りです。

category,カテゴリ名,色

カスタムアイコンの設定 †

カテゴリごとに専用のアイコン画像を表示させることができます。
デフォルトの地図ピンの代わりに、鉱石アイコンや町アイコンなどに変更できます。

準備

1. アイコン画像を 透過PNG で作成する（推奨: 32〜48pxの正方形）
2. 「img」という名前のページにアイコン画像をアップロードする

設定
category行の4番目にアイコンのファイル名を追加します。

category,鉱石,#e74c3c,icon_ore.png
category,町,#3498db,icon_town.png

※アイコンを指定していないカテゴリは、色指定のデフォルトピン（地図ピン型）で表示されます。
※マップを拡大してもアイコンのサイズは常に一定です（Googleマップと同じ仕様）。

ピンIDとインラインリンク †

ピンにpinid（ピンID）を付けると、Wiki本文中からそのピンへのリンクを作れるようになります。
攻略文を読みながらリンクをクリックするだけで、マップ上の場所をピンポイントで確認できる強力な機能です。

pinidの付け方 †

pin行の末尾に pinid=好きな名前 を追加します。
名前には半角英数字とアンダースコア（_）が使えます。

pin,702,199,[[金鉱石]],レアアイテム,鉱石,pinid=ore
pin,508,419,[[始まりの町]],セーブ可能,町,pinid=firsttown1
pin,350,200,[[ゴブリン]],HP5000,魔物,pinid=goblin10

カテゴリを指定していないピンにもpinidを付けることができます。

pin,992,191,セーブポイント,回復も可能,pinid=save1

※pinidを付けなくても問題なく動作します（インラインリンクの対象にならないだけです）。
※pinidはページ内で重複しないようにしてください。

文章中にリンクを埋め込む（インラインリンク） †

以下の書き方で、Wiki本文中にマップのピンへのリンクを作れます。

&interactivemap(pinid=ピンID,表示テキスト);

記述例

まずはじめに、&interactivemap(pinid=ore,この地点);に行って、鉱石を掘ろう。
そしてそのまま回り込み&interactivemap(pinid=firsttown1,この地点);の「始まりの町」に向かおう。
&interactivemap(pinid=nakama1,仲間になるシンシアの位置);を村人から教えてくれる。

表示結果

まずはじめに、この地点に行って、鉱石を掘ろう。
そしてそのまま回り込みこの地点の「始まりの町」に向かおう。
仲間になるシンシアの位置を村人から教えてくれる。

↑文章中に、カテゴリのアイコン付きのリンクが表示されます。
リンクをクリックすると、ページ内のマップまで自動スクロールし、該当するピンにフォーカスしてポップアップが表示されます。

pinidとインラインリンクの記述例 †

#interactivemap(ゲームマップ.webp,900,600){{
category,鉱石,#e74c3c,icon_ore.png
category,町,#3498db,icon_town.png
category,魔物,#e67e22,icon_monster.png
pin,702,199,[[金鉱石]],&color(red){レア!};&br;''必ず入手しておこう'',鉱石,pinid=ore
pin,508,419,[[始まりの町]],セーブと回復が可能,町,pinid=firsttown1
pin,350,200,[[ゴブリン]],HP5000&br;&color(red){''要注意''};,魔物,pinid=goblin10
pin,524,129,仲間との出会い,シンシアが仲間になる,pinid=nakama1
}}

■攻略チャート

まずはじめに、&interactivemap(pinid=ore,この地点);に行って鉱石を掘ろう。
採掘が終わったら&interactivemap(pinid=firsttown1,始まりの町);に戻ってアイテムを売却しよう。
町の北東にいるNPCに話しかけると、&interactivemap(pinid=nakama1,シンシアの居場所);を教えてもらえる。
道中で&interactivemap(pinid=goblin10,ゴブリン);が出現するので注意。

▼実際の見え方

■攻略チャート

まずはじめに、この地点に行って鉱石を掘ろう。
採掘が終わったら始まりの町に戻ってアイテムを売却しよう。
町の北東にいるNPCに話しかけると、シンシアの居場所を教えてもらえる。
道中でゴブリンが出現するので注意。

このように、攻略文を読みながらリンクをクリックするだけでマップ上の正確な位置を確認でき、攻略文とマップが一体になった使いやすい攻略ページを作ることができます。

マップの操作方法 †

マップの移動 †

ピンのポップアップ †

ピンをクリック（タップ）すると、タイトルと説明文がポップアップで表示されます。
ポップアップの「×」ボタン、またはマップの何もない場所をクリックすると閉じます。

ボタン一覧 †

右上のボタン

左下のボタン

フィルター機能 †

カテゴリを1つ以上定義している場合、左下に 🔍ボタン が表示されます。

1. 🔍ボタンを押すとフィルターパネルが開く
2. カテゴリ名を押すと、そのカテゴリのピンの表示/非表示が切り替わる
3. 「すべてON」で全表示、「すべてOFF」で全非表示
4. もう一度🔍ボタンか「×」でパネルを閉じる

カスタムアイコンを設定している場合、フィルターパネルにもアイコンが表示されるので、どのアイコンがどのカテゴリかひと目でわかります。

検索機能 †

マップ左上の「ピンを検索...」をクリックすると、全てのピンのタイトルが一覧で表示されます。
キーワードを入力すると、一致するピンに絞り込まれます。
検索結果をクリックすると、そのピンの場所にマップが自動で移動し、ポップアップが開きます。

説明文で使える装飾記法 †

ピンのタイトルと説明文では、以下のPukiWiki記法が使えます。

一覧 †

記述例 †

pin,190,137,[[金鉱石]],&color(red){レア!};&br;''必ず入手しておこう'',鉱石

この場合、ポップアップには以下のように表示されます。

• タイトル「金鉱石」がWiki内リンクとして表示
• 説明文の「レア!」が赤文字で表示
• 改行されて「必ず入手しておこう」が太字で表示

記述リファレンス †

プラグイン全体の構文をまとめます。

マップ本体（ブロック型） †

#interactivemap(マップ画像ファイル名,横幅,縦幅){{
category,カテゴリ名,色
category,カテゴリ名,色,アイコン画像ファイル名
pin,X座標,Y座標,タイトル
pin,X座標,Y座標,タイトル,説明文
pin,X座標,Y座標,タイトル,説明文,カテゴリ名
pin,X座標,Y座標,タイトル,説明文,カテゴリ名,pinid=ID名
pin,X座標,Y座標,タイトル,説明文,pinid=ID名
}}

pin行の引数 †

category行の引数 †

インラインリンク（インライン型） †

&interactivemap(pinid=ID名,表示テキスト);

総合的な記述例 †

カテゴリ・カスタムアイコン・各種装飾記法・pinid・インラインリンクをすべて活用した例です。

#interactivemap(ゲームマップ.webp,900,600){{
category,鉱石,#e74c3c,icon_ore.png
category,町,#3498db,icon_town.png
category,魔物,#e67e22,icon_monster.png
category,宝箱,#f1c40f,icon_chest.png
category,出会いイベント,#000000
pin,702,199,[[金鉱石]],&color(red){レア!};&br;''必ず入手しておこう'',鉱石,pinid=ore2
pin,508,419,[[始まりの町]],セーブと回復が可能&br;[[ショップ一覧はこちら>ショップ]],町,pinid=firsttown2
pin,945,549,[[ゴブリン]],HP5000&br;&color(red){''要注意''};,魔物,pinid=goblin2
pin,154,430,宝箱A,レアアイテム「伝説の剣」が入っている,宝箱,pinid=treasure2
pin,992,191,セーブポイント,回復も可能,pinid=save2
pin,524,129,仲間との出会い,シンシアが仲間になる,出会いイベント,pinid=nakama2
}}

■攻略チャート

冒険はまず&interactivemap(pinid=ore2,鉱石の採掘ポイント);から始まる。
金鉱石を入手したら&interactivemap(pinid=firsttown2,始まりの町);に持ち帰ろう。
町の西にある&interactivemap(pinid=treasure2,宝箱);から「伝説の剣」を入手できる。
&interactivemap(pinid=save2,セーブポイント);で必ずセーブしてから
&interactivemap(pinid=goblin2,ゴブリン);に挑もう。HPが5000あるので準備を怠らないこと。
ゴブリン撃破後、&interactivemap(pinid=nakama2,シンシアとの出会いの場所);でシンシアが仲間になる。

▼実際の見え方

■攻略チャート

冒険はまず鉱石の採掘ポイントから始まる。
金鉱石を入手したら始まりの町に持ち帰ろう。
町の西にある宝箱から「伝説の剣」を入手できる。
セーブポイントで必ずセーブしてから
ゴブリンに挑もう。HPが5000あるので準備を怠らないこと。
ゴブリン撃破後、シンシアとの出会いの場所でシンシアが仲間になる。

よくある質問 †

Q. ピンが1つしか表示されません †

各行の先頭に余計なスペースが入っていないか確認してください。
また、各項目はカンマ（,）で正しく区切られている必要があります。

Q. カスタムアイコンが表示されません †

以下を確認してください。

• アイコン画像が 「img」ページ にアップロードされているか
• ファイル名が完全に一致しているか（大文字・小文字は区別されます）
• 画像が背景透過PNGであるか

Q. マップ画像が表示されません †

マップ画像は プラグインを設置するページ自体に アップロードする必要があります。
他のページの添付ファイルを指定しても表示されません。

Q. インラインリンクをクリックしてもマップにジャンプしません †

以下を確認してください。

• マップ側のpin行に pinid=ID名 が正しく書かれているか
• インラインリンクの pinid= の値がマップ側と完全に一致しているか（大文字・小文字は区別されます）
• pinidに使える文字は 半角英数字とアンダースコア（_）のみ です

Q. 座標表示がスマートフォンで使えません †

座標表示モードはPC版のマウス操作専用の機能です。
スマートフォンでは座標を取得できないため、座標の確認はPCで行ってください。

Q. Leafletなどの外部ライブラリは使用していますか？ †

使用していません。外部ライブラリに依存しない独自実装です。
CDN障害やライブラリのバージョン変更の影響を受けず、PHPのみで完結するため、
導入・アップデートが容易な設計としています。

サポート †

本プラグインはゲームブック株式会社が開発・提供するPukiWiki向け拡張プラグインです。
不具合報告・改善要望につきましてはwikiru.jp運営までお問い合わせください。

バージョン履歴 †

Last-modified: 2026-02-23 (月) 14:34:00

Site admin: wikiru.jp運営チーム

wikiru.jp 利用規約
運営会社

PukiWiki 1.5.2 © 2001-2024 . Powered by PHP 7.4.33. HTML convert time: 0.037 sec.