コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

きっと何者にもなれない僕だから

12月だしジェイソンをした

前回までのあらすじ

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

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


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

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

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

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

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

<!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
ああ、やっと確認できた。

感想とか

前回記事同様、やっていることはランダムで世界観と場所と時代が表示されるだけの内容です。
jsonファイルで管理するようになったので、これからどんどん設定を拡張できるようになったよ。


作るにあたってgetJSONで出したい結果が表示されなくて色々調べることになってしまった。Ajaxめ……

あとdocument.write()の部分をinnerHTMLに書き換えてます。
外部ファイル読み込むときは全体に上書きかかっちゃうし、そもそもHTML5で推奨されてないしね。