質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • jQuery

    7091questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    539questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jqueryのJapanMap設置について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 744

orange_drop

score 17

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

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

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

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

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

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

■検索エンジン対策 - 共通 - 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>

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/03/31 12:50

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

    キャンセル

  • orange_drop

    2017/03/31 14:16

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

    キャンセル

回答 2

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/03 15:50

    ご確認頂きまして、ありがとうございます!

    外部サーバーのパスも確認してみても表示されなかったのですが、
    地域設定以降のタグをheadではなく、<div>と同じ個所に記入することで
    きちんと表示されました。

    noconflict の件も、調べているうちにこれかな……?と思うぐらいで記載していました。

    いつも丁寧に教えて頂き、ありがとうございます!!

    キャンセル

checkベストアンサー

0

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/31 17:40

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

    代理店を日本地図で表したいな、と考えていたのですが、
    難しそうですね。ありがとうございました!

    キャンセル

  • 2017/03/31 17:44 編集

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

    キャンセル

  • 2017/04/03 13:54

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

    しかし、いきなり低評価にされるとは思わなかった..Oh、No~~~

    キャンセル

  • 2017/04/03 15:03

    To: Yousuckさん
    script要素が許可されている以上、「裏技」とは言えないと思いますよ。scriptで出来る作業を限定する条項も見たことがありませんし。(あったら教えてください)

    マイナス評価にした理由は「HTML5に対応していない」ことがスクリプトの動かない原因ではないからです。(実施動きましたよ)「対応していなければ、表示されないのが正しい挙動」という部分が間違っていると感じたためです。

    今後このページに訪れたユーザーに誤解を与える恐れが有ると思い、指摘の上マイナスを付けました。
    具体的に書けばよかったですね、すみません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • jQuery

    7091questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    539questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。