12月だしジェイソンをした - コミュ障だから明日が僕らをよんだって返事もろくにしなかった

前回までのあらすじ

近未来、200人以上を殺害したジェイソンは研究所に収容されていた。尋問の最中自力で脱出したジェイソンは、一人の女性科学者ローワンに冷凍状態にされる。それから約400年後、荒廃した地球にやってきた調査隊は、冷凍状態のジェイソンを宇宙船に連れていき……

はい、そんな話ではなく前回のJSON記事の続きです。因みに上述のあらすじは映画「JASON X」のあらすじです。

前回のJSONファイルを外部から取ってこようと思った

jsonファイルも直接スクリプト内に書いていくと長ったらしくなってきて、下のように嫌気がさしてくるので外部から読み込む方法を考えてました。

以下、前回のjsonファイル＋α。こうやってどんどん追加していくと見辛い。

{
    "universe": [
        "ファンタジー",
        "スチームパンク",
        "SF",
        "ハイファンタジー",
        "ローファンタジー",
        "メルヘン"
    ],
    "place": [
        "東洋",
        "西洋",
        "異国風",
        "中国風",
        "エスニック",
        "西部劇",
        "カントリー",
        "ハワイアン"
    ],
    "era": [
        "現代",
        "中世",
        "近未来",
        "未来",
        "原始時代",
        "人類滅亡後"
    ]
}

というわけで、jQueryのgetJSON()でなんとかなるっぽいのでやってみた。
で、早速コードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<h3>以下の設定で小説を書いてみよう</h3>
<ul>
  <li id="universe"></li>
  <li id="place"></li>
  <li id="era"></li>
</ul>
  <script   src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script>
  // jsonの読込
  $(function(){
    $.getJSON("./***.json", function(data){
      var uni = document.getElementById("universe");
      var pla = document.getElementById("place");
      var era = document.getElementById("era");

      uni.innerHTML = '世界観:　'+ data.universe[Math.floor(Math.random()*data.universe.length)]
      pla.innerHTML = '場所:　　'+ data.universe[Math.floor(Math.random()*data.universe.length)]
      era.innerHTML = '時代:　　'+ data.universe[Math.floor(Math.random()*data.universe.length)]
    });
  });

  </script>
</body>
</html>

このgetJSONクロームのローカルで確認しようとすると以下のようエラーを出して怒られる。

jquery-1.12.4.min.js:4 XMLHttpRequest cannot load file:///C:***.json.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

セキュリティ上この方法はダメよダメダメとのことらしい。

なのでとりあえずローカルサーバを用意。
f:id:andron:20161101223844p:plain
ああ、やっと確認できた。