jQuery Japanmapを使用して各都道府県の個別ページを表示させたいと考えています。

サイトに日本地図の表示は一通り出来ました。地図をクリックした時の各都道府県のアラート表示も問題なく出来ましたが、都道府県の個別ページ作成で止まってしまいました。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
    <title>Japan Map - 県名別のページを表示する</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/japanmap/jquery.japan-map.min.js"></script>
    <script>
        $(function(){
            $("#map-container").japanMap({
                width: 830,
                onSelect : function(data){
                window.location.href = 'pref' + data.code + '.html';
                }
            });
        });
    </script>
</head>
<body>
<div id="map-container" style="width:1200px;"></div>
</body>
</html>

上記の記述に対して、個別のページをどの様に設置をすれば良いのか分かりません。具体的にご教授願えたら嬉しいです。

行動規範の内容に同意します

回答1件

ベストアンサー

'pref' + data.code + '.html';

これだとpref??.htmlというページを都道府県の数の分、作ることになります。
個別ページとはいえ、何かない限り同じようなレイアウトになるかと思いますので、
'pref_detail.html?code=' + data.code
という風に遷移させてQueryStringとしてcodeを取得してその都道府県の情報を再度取得、表示処理を書かれてはいかがでしょうか？
こうすることで1つのファイルで動的にページが切り替わるようにできるはずです。

サンプルコード

js
1var preflinklist = {
2    "1":"/hokkaido/",
3    "2":"/aomori/"
4};
5$(function(){
6    $("#map-container").japanMap({
7        width: 830,
8        onSelect : function(data){
9            if (data.code in preflinklist) {
10              console.log(preflinklist[data.code]);
11              location.href = preflinklist[data.code];
12            }
13        }
14    });
15});

簡易解説。
「都道府県コード」と「遷移先」のリンクのリストを設置しました。北海道と青森だけ。
一応、都道府県コードは決まっているものがあるので正確にリンクは作っていただきたいのですが、
これを利用するとどのようなリンク先になっても対応可能です。
リンクは実際に作られたページのURLにしてください。
つまり、「どのようなページを作っても対応ができます」というのが回答です。

リンク配列を作るのが面倒であれば都道府県コードが入れられるような機能があれば容易ですが、
WordPressでURLをコントロールできる書き方があるかどうかまでは私の方では環境がないためすぐに確認はできません。

投稿2018/09/28 23:54

編集2018/09/30 12:17

m.ts10806

総合スコア80852

Naka7

2018/09/30 10:43

回答をありがとうございます。大変、申し訳ありませんがこちらの意図が正確に伝わっていない様です。色々と調べているのですが、個別ページの設置の仕方が分かっておりません。例えば提案をされた1つのファイルでcodeを取得する場合、都道府県情報をどの場所に何と記載をすれば表示がされるのでしょうか？前提条件の事さえも分かっていない初心者ですので、質問の要点も掴めずにいます。もし、お時間を頂けたらお願い致します。

m.ts10806

2018/09/30 10:56

つまり回答の「QueryStringとしてcodeを取得してその都道府県の情報を再度取得、表示処理を書かれては」というところの実装イメージができていないということでよろしいですか？もう一点確認ですが、都道府県コードでその都道府県のみの情報取得はできますよね？

m.ts10806

2018/09/30 11:24

1つ確認ですが、「指定した都道府県の情報」は元々どのように取得してくるつもりでしたか？

Naka7

2018/09/30 11:34

返信、ありがとうございます。いいえ、都道府県コードでアラートの表示は出来たのですが、各都道府県の個別ページをどの様に設置すれば良いのか方法が分かりません。 onSelect : function(data){ alert(data.name); この上記の表記での表示は出来ました。この次のステップとして、各都道府県のページを表示する設置の仕方が分からずにいます。

m.ts10806

2018/09/30 11:38

聞き方が悪かったです・・。その個別ページには「何を」表示させるつもりでしたか？ console.log(data);とした上でクリック時にブラウザ開発ツールのコンソールを確認してみると分かりますがJapan Mapではあくまでコードと名前（日本名・英名）とcolorしか取得しないようですし、その他の情報はどこから取得するのでしょうか。

Naka7

2018/09/30 11:53

早い返信、ありがとうございます。各都道府県の情報はWordPressの投稿ページの情報とリンクさせる事が出来れば一番良いのですが、htmlのページを新たに作る必要があるのか設置の仕方が分かっておりません。ほとんどサイト等の知識が無い初心者と思って頂いた方が良いかと思います。色々と返信をして頂いて、ありがとうございます。

m.ts10806

2018/09/30 12:01

なるほど。「まだ作っていない」というところですね。あと、WordPressで運用されてましたか。でしたら「WordPress」タグを追加されたほうが良いかもしれません。「WordPress」はPHPで出来ていますが、私自身、PHPには多少自信はありますがWordPressはほとんど経験がないためわかりませんし、独自な仕様も多いです。ただ、WordPressでページを作るにも、静的htmlで作るのでも同じです。都道府県コードと個別ページへのリンクができればいいわけですし、とりあえずであれば配列を利用すればできます。簡単にサンプルコード書いてみますので、参考にしてみてください。

Naka7

2018/09/30 12:48

素早い回答と適切なアドバイスに感謝します。無事に思った通りの表示をする事が出来ました。色々と他にも調べてより良いサイトを目指したいと思います。本当に有難うございました。

m.ts10806

2018/09/30 12:51

解決につながったようで何よりです。

行動規範の内容に同意します