説明
Japan Clickable Map は、ただの日本地図をサイトの導線に変えるプラグインです。表示する都道府県を選び、色とリンク先を設定する——という手順で WordPress の管理画面からマップを作り、ショートコードまたはブロックで投稿・固定ページ・カスタム投稿タイプのどこにでも設置できます。
マップはサーバー側でインライン SVG として出力されます。外部の地図サービスも API キーも、読み込む JavaScript ライブラリもありません。フロントに読み込まれるのは、地方のポップアップを実際に使ったときの小さなスクリプトだけです。
マップを作る
- 表示モード — 47 都道府県すべて (
full) を表示するか、選んだ県だけ (range) を表示するかを選べます。県の組み合わせは自由です。 - 地図の精細度 — 輪郭の精度を
low/low-smooth/mid/highから選べます。海岸線の細かさとファイルサイズを見比べて決められます。low-smoothはlowと同じ簡略化した輪郭を曲線でつないだもので、海岸線がなめらかになります。 - はめ込み表示 — 沖縄・北方領土・小笠原諸島は、地図の枠を引き伸ばすのではなく、枠内の決まった位置に配置されます。
- 区切り (全国表示) — 県ごとにクリック領域を分けるか、地方単位でまとめるかを選べます。地方は標準 8 地方のほか、マップごとに独自エリアを定義できます。
- 地方クリック時の挙動 — 地方から URL へ直接リンクするか、その地方に含まれるリンク先を並べたポップアップを開くか (ホバー / クリック) を選べます。
- 配色 — マップ全体の規定色を決め、県ごとに上書きできます。
- リンク — 県ごと・地方ごとにリンクを設定できます。リンクのない県はクリックできず、カーソルも変わりません。
- リンク先の指定 — URL を直接入力するほか、サイト内を検索して投稿・固定ページ・カスタム投稿タイプ・タクソノミーの語句から選べます。パーマリンクが変わってもリンクは切れません。
- 名称の表示 — 都道府県名・地方名を地図に重ねて描画し、
aria-labelとしてスクリーンリーダーにも渡します。名称は県ごとに上書きできます。 - 色プリセット — よく使う色を保存して、どのマップからでも呼び出せます。
- プレビュー — 編集画面を離れずに、モーダルで仕上がりを確認できます。
マップを設置する
ショートコード:
[plg_jcm_map id="123"]
任意の属性: level (low / low-smooth / mid / high) でマップに保存された精細度を上書きできます。class で独自の CSS クラスを追加できます。
または クリッカブル地図 (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) 新規追加 を開き、都道府県・配色・リンクを設定して公開します。
- クリッカブル地図 (Clickable Map of Japan) ブロックを挿入して一覧からマップを選ぶか、ショートコード
[plg_jcm_map id="123"]を直接書きます。123はマップ ID で、そのマップの編集画面のアドレスバーにあるpost=の値です。
ブロックをソースからビルドする
block/build/ のエディター用スクリプトは @wordpress/scripts でコンパイルしています。圧縮前のソースは block/src/ に同梱しています。ビルドし直すには:
npm install && npm run build:block
FAQ
-
API キーや外部サービスは必要ですか ?
-
いいえ。地図はプラグインに同梱された SVG ファイルで、お使いのサーバー上で描画されます。第三者への通信は行わず、プラグインから外部への HTTP リクエストは一切発生しません。
-
日本の一部だけを表示できますか ?
-
はい。表示モードを
rangeにして、表示したい都道府県を選んでください。選んだ県だけが描画され、viewBox もその範囲に合わせて調整されます。 -
クリック先にカテゴリーや特定の投稿を指定できますか ?
-
はい。URL を直接入力する代わりに、サイト内を検索して投稿・固定ページ・カスタム投稿タイプ・タクソノミーの語句を選べます。リンクは描画時に解決されるため、パーマリンクが変わっても切れません。
-
アクセシビリティには対応していますか ?
-
クリックできる領域は実際のリンクで、都道府県名・地方名を
aria-labelとして持ちます。リンクのない県は不活性で、フォーカスも当たりません。 -
スマートフォンで地図の幅が広すぎます。
-
SVG は親要素の幅に合わせて拡大縮小します。ショートコードを任意の要素で囲むか、
class属性でクラスを付けてテーマの CSS でサイズを指定してください。 -
プラグインを削除するとマップはどうなりますか ?
-
既定では何も削除されません。きれいに消したい場合は、プラグインを削除する前に設定画面で アンインストール時にこのプラグインのデータをすべて削除する (Delete all data for this plugin on uninstall) を有効にしてください。
-
有料版では何ができますか ?
-
市区町村単位のマップです。クリックできる領域が都道府県ではなく市・町・区になり、それらを県境をまたいでグループ化できます。
評価
このプラグインにはレビューがありません。
貢献者と開発者
変更履歴
1.0.1
- 修正: サイトの言語に関わらず管理画面の一部が日本語で表示されていました。プレビューのボタンとモーダル、地方ポップアップの閉じるボタン、選択件数の表示、未割当リスト、色プリセットの操作が翻訳されるようになりました。
- 修正: 地方の見出しの横に出る都道府県の件数が、日本語以外のサイトで空になっていました。
- 修正: 選択件数の表示が、チェックを入れた瞬間に言語が切り替わっていました。初期表示と更新後で別々の文字列を使っていたためです。
- 変更:
Plugin URIを英語ドキュメントに変更しました。 - ドキュメント: インストール手順 (編集画面にコピーできるショートコードは存在しません。マップ ID は編集画面 URL の
post=の値です) と精細度の一覧 (low-smoothが抜けていました) を修正しました。
1.0.0
- 初回リリース。