Data URI scheme でjsonとか

# Data URI scheme でjsonとか

Data URI scheme が意外と柔軟だった。

`Chromium 43.0.2357.130 Ubuntu 14.04 (64-bit)` で試した。
chromeでもたぶん大丈夫。

jsonはこちらのを使わせてもらいました。
https://gist.github.com/kobaatsu/a7a179ad0490c43f4d6d#file-json


```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <script type="text/javascript">

window.addEventListener("DOMContentLoaded", function() {
  var prefectures = 
[
  {
    "label": "北海道",
    "slug": "hokkaido"
  },
  {
    "label": "青森県",
    "slug": "aomori"
  },
  {
    "label": "岩手県",
    "slug": "iwate"
  },
  {
    "label": "宮城県",
    "slug": "miyagi"
  },
  {
    "label": "秋田県",
    "slug": "akita"
  },
  {
    "label": "山形県",
    "slug": "yamagata"
  },
  {
    "label": "福島県",
    "slug": "fukushima"
  },
  {
    "label": "茨城県",
    "slug": "ibaraki"
  },
  {
    "label": "栃木県",
    "slug": "tochigi"
  },
  {
    "label": "群馬県",
    "slug": "gunma"
  },
  {
    "label": "埼玉県",
    "slug": "saitama"
  },
  {
    "label": "千葉県",
    "slug": "chiba"
  },
  {
    "label": "東京都",
    "slug": "tokyo"
  },
  {
    "label": "神奈川県",
    "slug": "kanagawa"
  },
  {
    "label": "新潟県",
    "slug": "nigata"
  },
  {
    "label": "富山県",
    "slug": "toyama"
  },
  {
    "label": "石川県",
    "slug": "ishikawa"
  },
  {
    "label": "福井県",
    "slug": "fukui"
  },
  {
    "label": "山梨県",
    "slug": "yamanashi"
  },
  {
    "label": "長野県",
    "slug": "nagano"
  },
  {
    "label": "岐阜県",
    "slug": "gifu"
  },
  {
    "label": "静岡県",
    "slug": "shizuoka"
  },
  {
    "label": "愛知県",
    "slug": "aichi"
  },
  {
    "label": "三重県",
    "slug": "mie"
  },
  {
    "label": "滋賀県",
    "slug": "shiga"
  },
  {
    "label": "京都府",
    "slug": "kyoto"
  },
  {
    "label": "大阪府",
    "slug": "osaka"
  },
  {
    "label": "兵庫県",
    "slug": "hyogo"
  },
  {
    "label": "奈良県",
    "slug": "nara"
  },
  {
    "label": "和歌山県",
    "slug": "wakayama"
  },
  {
    "label": "鳥取県",
    "slug": "tottori"
  },
  {
    "label": "島根県",
    "slug": "shimane"
  },
  {
    "label": "岡山県",
    "slug": "okayama"
  },
  {
    "label": "広島県",
    "slug": "hiroshima"
  },
  {
    "label": "山口県",
    "slug": "yamaguchi"
  },
  {
    "label": "徳島県",
    "slug": "tokushima"
  },
  {
    "label": "香川県",
    "slug": "kagawa"
  },
  {
    "label": "愛媛県",
    "slug": "ehime"
  },
  {
    "label": "高知県",
    "slug": "kochi"
  },
  {
    "label": "福岡県",
    "slug": "fukuoka"
  },
  {
    "label": "佐賀県",
    "slug": "saga"
  },
  {
    "label": "長崎県",
    "slug": "nagasaki"
  },
  {
    "label": "熊本県",
    "slug": "kumamoto"
  },
  {
    "label": "大分県",
    "slug": "oita"
  },
  {
    "label": "宮崎県",
    "slug": "miyazaki"
  },
  {
    "label": "鹿児島県",
    "slug": "kagoshima"
  },
  {
    "label": "沖縄県",
    "slug": "okinawa"
  }
];

  (function() {
    var hoge = document.getElementById("hoge");
    hoge.onclick = function() {
      window.open("data:application/json;charset=utf-8;," + JSON.stringify(prefectures));
      return false;
    };
  })();

  (function() {
    var hoge2 = document.getElementById("hoge2");
    var str = "<table border='1'>";
    str += "<tr>";
    str += "<th>label</th>";
    str += "<th>slug</th>";
    str += "</tr>";
    for(var i in prefectures) {
      var l = prefectures[i];
      str += "<tr>";
      str += "<td>";
      str += l.label;
      str += "</td>";
      str += "<td>";
      str += l.slug;
      str += "</td>";
      str += "</tr>";
    }
    str += "</table>";
    hoge2.onclick = function() {
      window.open("data:text/html;charset=utf-8;," + str);
      return false;
    };
  })();

  (function() {
    var hoge3 = document.getElementById("hoge3");
    var str = '<?xml version="1.0" encoding="UTF-8" ?>';
    str += '<prefectures>';
    for(var i in prefectures) {
      var l = prefectures[i];
      str += '<prefecture>';
      str += '<label>';
      str += l.label;
      str += '</label>';
      str += '<slug>';
      str += l.slug;
      str += '</slug>';
      str += '</prefecture>';
    }
    str += "</prefectures>";
    hoge3.onclick = function() {
      window.open("data:text/xml;charset=utf-8;," + str);
      return false;
    };
  })();

});

  </script>
</head>

<body>

  <ul>
    <li>
      <a id="hoge" href="#">json</a>
    </li>
    <li>
      <a id="hoge2" href="#">html</a>
    </li>
    <li>
      <a id="hoge3" href="#">xml</a>
    </li>
  </ul>

</body>
</html>
```