爆速JSONPでWebAPIに動的なパラメータでリクエストする #JavaScript

爆速JSONPそのものは、固定のパラメータでしかWebAPIにリクエストできませんが、scriptタグ自体を動的に生成してしまえば、動的なパラメータでリクエストすることができます。

example.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>動的に爆速JSONPを使う</title>
</head>
<body>

<!-- 出力先 -->
<div id="bakusoku-jsonp-output"></div>

<!-- このJavaScriptは出力先のdivタグより後ろに記述してください -->
<script>
(function(){
  var company = prompt('電力消費量を調べます。どの電力会社を調べますか？\n(hokkaido/tohoku/tokyo/chubu/kansai/kyusyu) ');
  switch (company) { //エラーチェック
    case 'hokkaido': case 'tohoku': case 'tokyo':
    case 'chubu': case 'kansai': case 'kyusyu':
      break;

    default:
      alert('その電力会社は対応していません');
      return;
  }

  //ひたすら爆速JSONP用のscriptタグを作っていく
  var tag = document.createElement('script');
  tag.src = 'http://i.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1-min.js';
  tag.setAttribute('data-url', 'http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage');
  tag.setAttribute('data-p-output', 'json');
  tag.setAttribute('data-p-appid', 'YOUR_APPLICATION_ID'); //appidは自分のものを使ってね
  tag.setAttribute('data-p-area', company); //ここで動的要素を注入！
  tag.innerHTML = '現在の電力消費量は{{ElectricPowerUsage.Usage.$}}kWです。';

  //タグを挿入！
  document.getElementById('bakusoku-jsonp-output').appendChild(tag);
})();
</script>

</body>
</html>