jQueryの日本地図プラグインから、WordPressでもっと楽に乗り換える

jQueryで動く日本地図プラグインを使って、都道府県をクリックしたら別ページに飛ぶ地図を作っている人は多いと思います。動くものは作れる。ただWordPressで運用していると、「色やリンクを変えるたびにコードを触るのが地味につらい」と感じる場面が出てきます。コードを自分で管理し続けられて要件が都道府県の単純リンクだけなら、jQuery系のままで十分です。逆に、非エンジニアが更新する、市区町村まで見せたい、更新が頻繁、といった場合は、管理画面だけで完結する地図プラグインに移したほうが運用は楽になります。

ここでは両者の違いを公平に並べて、どちらを選ぶかの判断軸を整理します。

目次

jQueryの日本地図プラグインで「できること」と、その前提

jQueryの日本地図プラグインは、ライブラリを読み込んで、都道府県ごとに色やリンクを設定すれば、クリックできる日本地図がブラウザ上に出来上がります。無料で使えるものが多く、ファイルも軽い。何より、コードを書ける人にとっては自由度が高いのが強みです。挙動を細かくいじりたい、独自のイベントを足したい、というニーズには素直に応えてくれます。

ただ前提があります。多くの場合、地図の見た目やリンクは、テーマやテンプレートにJavaScriptとHTMLを書いて管理することになります。県ごとの色やリンク先は設定オブジェクトとしてコード側に持つので、変更のたびにそのコードを開いて直す流れです。対応している粒度も都道府県中心のものが多く、市区町村まで細かく塗り分けたい場合は自分でデータを用意する必要が出てきます。

このあたりは製品によって作りが違うので一律には言えませんが、「コードで地図を持つ」という性格は共通しています。最初の1枚を作るぶんには問題になりません。問題になりやすいのは、その後です。

運用で効いてくるのは「コードを開かずに直せるか」

差がはっきり出るのは、公開した後の変更です。「対応エリアが増えたので色を足したい」「キャンペーンページにリンクを張り替えたい」。こういう更新が、コードを触らずにできるかどうかで運用の重さが変わります。

クリックできる日本地図プラグイン Japan Clickable Map は、ここを管理画面側に寄せています。県や市区町村の色とリンクは、管理画面のフォームから設定するので、テンプレートを開く必要がありません。リンクはURL直入力のほか、サイト内の固定ページや投稿、カテゴリーを検索してIDで参照できるので、後からパーマリンクを変えてもリンク切れになりにくい。地図そのものはインラインのSVGとして生成され、フロントのJavaScriptは依存ライブラリなしのvanillaで動きます。jQueryを読み込む必要がありません。

粒度の面でも幅があります。47都道府県だけでなく、約1,900件の市区町村まで扱えて、政令市の区も個別の単位になっています。複数の市町村を1つの塊としてまとめ、凡例(例:緑=対応エリア、灰=対象外)を付けて見せることもできます。配送エリアや施工エリアのように「県より細かいが市単位で決まっている」見せ方は、jQuery系では自前のデータ作りになりがちなところです。

設置もWordPressに自然に乗ります。マップを保存するとIDが振られるので、固定ページや投稿に次の1行を貼るだけです。

[jcm_map id="マップID"]

id には自分が作ったマップのIDを入れます。ショートコードが苦手なら、ブロックエディタで「クリッカブル地図」ブロックを追加して一覧から選ぶだけでも置けます。都道府県マップと市区町村マップは同じショートコードとブロックで扱えます。

どちらを選ぶか

迷ったときの分かれ目は、わりとはっきりしています。

jQuery系で十分なのは、自分でコードを書けて、無料で済ませたいケースです。要件が「都道府県を押したら県別ページに飛ぶ」程度の単純なリンクで、更新もたまにしか発生しないなら、わざわざ別の仕組みに移す理由は薄い。コードに手を入れられる人が1人いれば、それで回ります。乗り換えが常に正解というわけではありません。

プラグインのほうが楽なのは、運用する人がコードを書かない場合です。担当者が変わる、外注せずに社内で更新したい、地図の更新が頻繁、市区町村まで見せたい、凡例で対応状況を示したい。このあたりに当てはまるなら、管理画面だけで完結する仕組みのほうが後がラクです。とくに「更新のたびにエンジニアに依頼する」状態は、回数が増えると地味にコストになります。

判断軸を一言でいえば、「誰が、どのくらいの頻度で、どの粒度まで」地図を直すかです。ここが軽いほどjQuery系で足り、重いほどプラグイン側に分があります。

正直な前提

Japan Clickable Map は有料の製品です。jQuery系プラグインの「無料・軽量・自分で書ける」という強みと、そのまま天秤にかかります。コストをかけずに自分で管理できる人にとっては、無料で柔軟なjQuery系がそのまま合理的な選択です。

逆に、コードのメンテナンスから離れたい、非エンジニアでも更新できる体制にしたい場合は、管理画面で完結することの価値が効いてきます。地図を載せたページには出典表記(国土数値情報の加工である旨)を自分で入れる必要がある点だけ、最初に押さえておくと安心です。

自分の運用がどちら寄りかを一度整理したうえで、機能や設定の細かさは 製品ページで確認できます。

目次