jqueryのJapanMap設置について

カラーミーショップというサービスで、
「jQuery プラグイン Japan Map」を使用したいと考えています。
調べてみて設置したのですが、何も表示されない状態です。

■ダウンロードサイト
https://takemaru-hirai.github.io/japan-map/

（こちらで質問させて頂くのは違うような気もするのですが、
専用の掲示板が3月中旬で終了してしまっているため、申し訳ありません。）

カラーミー自体 <head>にあたる部分が、
おそらく下記の部分になると思いますので、下記のように入力しています。
「検索エンジン対策－共通－ headタグ内フリースペース設定－ PCショップ用の設定」

↓こちらは、カラーミーで使用しているjqueryバージョンが異なる場合も
あるため、入れています。ただ外しても入力しても表示はされません。

//////////

//////////

■検索エンジン対策－共通－ headタグ内フリースペース設定－ PCショップ用の設定

<script type="text/javascript">
	$.noConflict();
</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="http://www.●外部サーバー●/public_html/js/jquery.japan-map.min.js"></script>

<script type="text/javascript">
$(function(){
    //地域を設定
    //{"code":[地域のコード], "name": [地域の名前], "color":[地域につける色], "hoverColor":[地域をマウスでホバーしたときの色], "prefectures":[地域に含まれる都道府県のコード]}
    var areas = [
        {"code": 1 , "name":"北海道地方", "color":"#ca93ea", "hoverColor":"#e0b1fb", "prefectures":[1]},
        {"code": 2 , "name":"東北地方",   "color":"#a7a5ea", "hoverColor":"#d6d4fd", "prefectures":[2,3,4,5,6,7]},
        {"code": 3 , "name":"関東地方",   "color":"#84b0f6", "hoverColor":"#c1d8fd", "prefectures":[8,9,10,11,12,13,14]},
        {"code": 4 , "name":"北陸・甲信越地方",   "color":"#52d49c", "hoverColor":"#93ecc5", "prefectures":[15,16,17,18,19,20]},
        {"code": 4 , "name":"東海地方",   "color":"#77e18e", "hoverColor":"#aff9bf", "prefectures":[21,22,23,24]},
        {"code": 6 , "name":"近畿地方",   "color":"#f2db7b", "hoverColor":"#f6e8ac", "prefectures":[25,26,27,28,29,30]},
        {"code": 7 , "name":"中国地方",   "color":"#f9ca6c", "hoverColor":"#ffe5b0", "prefectures":[31,32,33,34,35]},
        {"code": 8 , "name":"四国地方",   "color":"#fbad8b", "hoverColor":"#ffd7c5", "prefectures":[36,37,38,39]},
        {"code": 9 , "name":"九州地方",   "color":"#f7a6a6", "hoverColor":"#ffcece", "prefectures":[40,41,42,43,44,45,46]},
        {"code":10 , "name":"沖縄地方",   "color":"#ea89c4", "hoverColor":"#fdcae9", "prefectures":[47]}
    ];

    $("#map").japanMap(
        {
            areas  : areas, //上で設定したエリアの情報
            selection : "prefecture", //選ぶことができる範囲(県→prefecture、エリア→area)
            borderLineWidth: 0.25, //線の幅
            drawsBoxLine : false, //canvasを線で囲む場合はtrue
            movesIslands : true, //南西諸島を左上に移動させるときはtrue、移動させないときはfalse
            showsAreaName : true, //エリア名を表示しない場合はfalse
            width: 800, //canvasのwidth。別途heightも指定可。
            backgroundColor: "#ffffff", //canvasの背景色
            font : "MS Mincho", //地図に表示する文字のフォント
            fontSize : 12, //地図に表示する文字のサイズ
            fontColor : "areaColor", //地図に表示する文字の色。"areaColor"でエリアの色に合わせる
            fontShadowColor : "black", //地図に表示する文字の影の色
        }
    );
});
</script>

■フリーページ

<div id="map"></div>

お手数をお掛けして申し訳ありませんが、
ご確認頂けますと嬉しいです。

kei344

2017/03/31 03:50

プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）また、エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

orange_drop

2017/03/31 05:16

ダウンロードしたサイトURLを貼り付けました。ツールで確認してみましたが、特にエラーは出ていないようです…

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

回答2件

書かれているコードで、カラーミーで表示できました。
「外部サーバー」のパスを確認してみてください。

また、$.noConflict(); は書かれている使い方では意味がありません。$ をもともと別のライブラリが使用していた場合に、それに影響が出ないようにするのが $.noConflict(); です。jQueryを上書きするためのものではありません。（そのまま上書きしても多分そこまで大きな問題にはならないと思います）

投稿2017/03/31 09:09

kei344

総合スコア69400

orange_drop

2017/04/03 06:50

ご確認頂きまして、ありがとうございます！外部サーバーのパスも確認してみても表示されなかったのですが、地域設定以降のタグをheadではなく、＜div＞と同じ個所に記入することできちんと表示されました。 noconflict　の件も、調べているうちにこれかな……？と思うぐらいで記載していました。いつも丁寧に教えて頂き、ありがとうございます！！

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

ベストアンサー

カラーミーのPC版は、HTML5に対応していないのではないでしょうか。
こちらのプラグインはcanvasで表示させる仕様となってますので、
対応していなければ、表示されないのが正しい挙動だと思います。
スマホ版はHTML5にも対応しているみたいですので、実装されたページを
スマホで確認してみて、パスが合っているかどうか確認されてはいかがでしょうか。
下記の「カラーミーショップのデメリット」をご覧ください。

https://www.visualart.jp/net-shop-tool/

投稿2017/03/31 06:47

編集2017/04/03 04:45

Yousuck

総合スコア349

orange_drop

2017/03/31 08:40

ご確認頂き、ありがとうございます。 HTML5に対応していない…そういうことだったのですね。制限がいくつかあるというのは見た記憶はあったのですが、基本的な部分が抜けていました。代理店を日本地図で表したいな、と考えていたのですが、難しそうですね。ありがとうございました！

kei344

2017/03/31 08:45 編集

To: Yousuckさん canvasタグの入力を管理画面からすることは禁止されていると思いますが、JavaScriptで動的に生成されることを抑止はしていないと思いますよ。

Yousuck

2017/04/03 04:54

To: kei344さんあなたが仰っていることは、サポート外の裏技です。うまく行けば「良かったね」的なレベルです。基本的にはサポートされていないので、私が言っていることは間違っていないのではないかと思います。ただ、「スマホで確認してみては..」の件は、私の真意としましては「パスが合っているかどうか確認してみては」の意味でしたが、言葉足らずでしたので追記させていただきました。しかし、いきなり低評価にされるとは思わなかった..Oh、No～～～

kei344

2017/04/03 06:03

To: Yousuckさん script要素が許可されている以上、「裏技」とは言えないと思いますよ。scriptで出来る作業を限定する条項も見たことがありませんし。（あったら教えてください）マイナス評価にした理由は「HTML5に対応していない」ことがスクリプトの動かない原因ではないからです。（実施動きましたよ）「対応していなければ、表示されないのが正しい挙動」という部分が間違っていると感じたためです。今後このページに訪れたユーザーに誤解を与える恐れが有ると思い、指摘の上マイナスを付けました。具体的に書けばよかったですね、すみません。

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

あなたの回答