index.html

<html>
<head>
<title>おーぷん２ちゃんねるコテハン解析班</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<!--チャート-->
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var mykey = '1Yynlwa-JmTU9Pz0RHduFlLnueb3KKjwAs0JYOau2mao';//スプレッドシートのユニークキー
  var mygid = '680537795';//シートのユニークキー
  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheet/ccc?key=' + mykey + '&usp=drive_web&gid=' + mygid + '#'
    );
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  var chart = new google.visualization.ColumnChart(document.getElementById('mycolumn'));
  var options = {
    width: 800,
    height: 600,
    hAxis:{title: '日付'},
    vAxis:{title: '件数', minValue: 0}
  }
  chart.draw(data,options);
}
</script>


<!--テーブル-->
<script type="text/javascript">
google.load("visualization", '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
 var mykey = '1Yynlwa-JmTU9Pz0RHduFlLnueb3KKjwAs0JYOau2mao';//スプレッドシートのユニークキー
 var mygid = '586845420';//シートのユニークキー
 var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheet/ccc?key=' + mykey + '&usp=drive_web&gid=' + mygid + '#' );
  query.send(handleQueryResponse_t);
}

function handleQueryResponse_t(response_t) {
  if (response_t.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data_t = response_t.getDataTable();
  var table = new google.visualization.Table(document.getElementById('mytable'));
  var options = {
    width: 800,
    height: 300,
    showRowNumber:true
  }
  table.draw(data_t,options);
}
</script>
</head>

<body>

<div>
<h1 align='center'>おーぷん２ちゃんねるのニュー速VIPに<br>
  毎日どんなコテが書込みしているのか<br>
Webスクレイピングして<br>
調べているページです</h1>
  <h3 align='right'>作った人：<font color = 'darkgreen'>Awn◆Awn//////E</font> (<a href = "http://twitter.com/Awn_tw">@Awn_tw</a>)</h3>
</div>

<hr>

<h2>サイト概要</h2>
<li>おーぷん２ちゃんねるのニュー速VIPに毎日どんなコテが書込みしているのかを調べるためのサイトです。</li>
<li>情報はトリガーがこけなければ毎日深夜２時ぐらいに更新されます。⇒<a href="trigger.html">トリガー実行状況確認表</a></li>
<li>稼働開始日は2015/03/06です。</li>
<li>ただのジョークサイトです。</li>
<li>何らかの理由でErrorになるかもしれん。。すまん。。</li>

<hr>

<div >
  <h2>日毎のコテの数(件数)</h2>
  <div id='mycolumn' align='center'></div>
</div>

<div>
  <h2>日毎のコテ</h2>
  <div id='mytable' align='center'></div>
</div>

<div>
  <h2>処理概要図</h2>
  <p>だいたい下記の図のかんじです。</p>
  <img src = 'http://i.imgur.com/AhKWucx.png'>
</div>

</body>
</html>