説明
Japan Clickable Map は、ただの日本地図をサイトの導線に変えるプラグインです。表示する都道府県を選び、色とリンク先を設定する——という手順で WordPress の管理画面からマップを作り、ショートコードまたはブロックで投稿・固定ページ・カスタム投稿タイプのどこにでも設置できます。
マップはサーバー側でインライン SVG として出力されます。外部の地図サービスも API キーも、読み込む JavaScript ライブラリもありません。フロントに読み込まれるのは、地方のポップアップを実際に使ったときの小さなスクリプトだけです。
マップを作る
- 表示モード — 47 都道府県すべて (
full) を表示するか、選んだ県だけ (range) を表示するかを選べます。県の組み合わせは自由です。 - Detail level — choose between
low,low-smooth,midandhighoutline
accuracy, so you can trade file size for coastline detail.low-smoothkeeps the
simplifiedlowoutline but joins its points with curves for a softer coastline. - はめ込み表示 — 沖縄・北方領土・小笠原諸島は、地図の枠を引き伸ばすのではなく、枠内の決まった位置に配置されます。
- 区切り (全国表示) — 県ごとにクリック領域を分けるか、地方単位でまとめるかを選べます。地方は標準 8 地方のほか、マップごとに独自エリアを定義できます。
- 地方クリック時の挙動 — 地方から URL へ直接リンクするか、その地方に含まれるリンク先を並べたポップアップを開くか (ホバー / クリック) を選べます。
- 配色 — マップ全体の規定色を決め、県ごとに上書きできます。
- リンク — 県ごと・地方ごとにリンクを設定できます。リンクのない県はクリックできず、カーソルも変わりません。
- リンク先の指定 — URL を直接入力するほか、サイト内を検索して投稿・固定ページ・カスタム投稿タイプ・タクソノミーの語句から選べます。パーマリンクが変わってもリンクは切れません。
- 名称の表示 — 都道府県名・地方名を地図に重ねて描画し、
aria-labelとしてスクリーンリーダーにも渡します。名称は県ごとに上書きできます。 - 色プリセット — よく使う色を保存して、どのマップからでも呼び出せます。
- プレビュー — 編集画面を離れずに、モーダルで仕上がりを確認できます。
マップを設置する
ショートコード:
[plg_jcm_map id="123"]
Optional attributes: level (low / low-smooth / mid / high) to override
the detail level saved on the map, and class to add your own CSS class.
または クリッカブル地図 (Clickable Map of Japan) ブロックを挿入し、表示するマップを選びます。ブロックはマップの ID だけを保存してサーバー側で描画するため、マップを編集すれば埋め込んだすべての場所に反映されます。
都道府県マップは、件数無制限
ここまでの機能はすべて無料版で使え、都道府県マップは何件でも作成できます。有料版が追加するのは、精度の異なる地図——市区町村単位のマップです。クリックできる領域が都道府県ではなく市・町・区になり、それらを県境をまたいでグループ化できます。
地図データ
同梱の SVG マップ (assets/svg/) は、国土交通省が公開する 国土数値情報 (行政区域データ N03) をもとに作成しています (データ基準日: 2024 年 1 月 1 日)。
- 出典: https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v3_1.html
- 利用規約: https://nlftp.mlit.go.jp/ksj/other/agreement_01.html — 政府標準利用規約 (第 2.0 版)。CC BY 4.0 と互換性があり、出典を明記すれば改変・再配布・商用利用が認められています。
元データに加えた処理: 行政区域ポリゴンを都道府県の輪郭に統合、Web メルカトル (EPSG:3857) への再投影、沖縄のはめ込み配置への移動、頂点の簡略化、SVG への変換、識別用属性の付与。詳細は assets/svg/japan/README.md を参照してください。
この地図を掲載する場合は、出典をページ内の見える場所に明記してください (フッターやキャプションなどで構いません):
「国土数値情報（行政区域データ）」（国土交通省）
(https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v3_1.html) を加工して作成
スクリーンショット
ブロック
このプラグインは1個のブロックを提供します。
- Clickable Map of Japan Place a prefecture map (a clickable map of Japan) that you set up under Clickable Maps.
インストール
- プラグインを
/wp-content/plugins/japan-clickable-map/にアップロードするか、ダッシュボードの プラグイン 新規追加 からインストールします。 - プラグイン 画面で有効化します。
- クリッカブル地図 (Clickable Maps) 新規追加 を開き、都道府県・配色・リンクを設定して公開します。
- Insert the Clickable Map of Japan block and pick your map from the list,
or place the shortcode
[plg_jcm_map id="123"]by hand —123is the map ID, which is thepost=value in the address bar while you edit that map.
ブロックをソースからビルドする
block/build/ のエディター用スクリプトは @wordpress/scripts でコンパイルしています。圧縮前のソースは block/src/ に同梱しています。ビルドし直すには:
npm install && npm run build:block
FAQ
-
Does the map need an API key or an external service?
-
いいえ。地図はプラグインに同梱された SVG ファイルで、お使いのサーバー上で描画されます。第三者への通信は行わず、プラグインから外部への HTTP リクエストは一切発生しません。
-
Can I show only part of Japan?
-
はい。表示モードを
rangeにして、表示したい都道府県を選んでください。選んだ県だけが描画され、viewBox もその範囲に合わせて調整されます。 -
Can a click open a category or a specific post?
-
はい。URL を直接入力する代わりに、サイト内を検索して投稿・固定ページ・カスタム投稿タイプ・タクソノミーの語句を選べます。リンクは描画時に解決されるため、パーマリンクが変わっても切れません。
-
Are the maps accessible?
-
クリックできる領域は実際のリンクで、都道府県名・地方名を
aria-labelとして持ちます。リンクのない県は不活性で、フォーカスも当たりません。 -
スマートフォンで地図の幅が広すぎます。
-
SVG は親要素の幅に合わせて拡大縮小します。ショートコードを任意の要素で囲むか、
class属性でクラスを付けてテーマの CSS でサイズを指定してください。 -
What happens to my maps if I uninstall the plugin?
-
既定では何も削除されません。きれいに消したい場合は、プラグインを削除する前に設定画面で アンインストール時にこのプラグインのデータをすべて削除する (Delete all data for this plugin on uninstall) を有効にしてください。
-
What does the paid edition add?
-
市区町村単位のマップです。クリックできる領域が都道府県ではなく市・町・区になり、それらを県境をまたいでグループ化できます。
評価
このプラグインにはレビューがありません。
貢献者と開発者
変更履歴
1.0.1
- Fixed: parts of the admin UI were shown in Japanese regardless of the site
language. The preview button and modal, the region popover close button, the
selected-prefecture counter, the unassigned list and the color preset controls
are now translatable. - Fixed: the prefecture counter next to each region heading was blank on
non-Japanese sites. - Fixed: the selected-prefecture counter switched language as soon as you ticked
a checkbox, because the initial value and the live update came from different
places. - Changed:
Plugin URInow points at the English documentation. - Docs: corrected the installation steps (there is no shortcode to copy on the
edit screen — the map ID is thepost=value in the edit screen URL) and the
list of detail levels (low-smoothwas missing).
1.0.0
- 初回リリース。