Google APIs Hack-a-thon #1 に参加してきた

Google Chart Tools — Google Developersと Make the Web Faster — Google Developers と Spreadsheets Gadgets と Google Docs のフォームを使って，Spreadsheets を DB とした，簡単なメッセージ投稿アプリを作成していました．

Google Docs のフォームで，メッセージ投稿用のフォームを作成する．
投稿されたメッセージの保存先の Spreadsheet で Gadgets: Table を作り，データソース URL を取得する．
投稿された内容を表示する HTML を作成する．
表示内容は，Spreadsheet の内容を取得して，JavaScript（jQuery）で動的に作成する．

Gadgets: Table（データソース URL 取得のために作成）

表示内容（一定時間ごとに，更新される）

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1.3.2");
      google.load('visualization', '1');
    </script>
    <script type="text/javascript">
      var exec = function() {
        var handleResponse  = function (response) {
          var div = $("#entries");
          div.children().remove();
          var data = response.getDataTable();
          for (var row = data.getNumberOfRows() - 1; row >= 0; row--) {
            for (var col = 0; col < data.getNumberOfColumns(); col++) {
              var datum = data.getFormattedValue(row, col);
              switch(col) {
                case 0:
                  var datetime = $("<div>").attr("class", "datetime")
                                           .text(datum);
                  break;
                case 1:
                  var title = $("<div>").attr("class", "title")
                                        .append($("<strong>").text(datum));
                  break;
                case 2:
                  var description = $("<pre>").attr("class", "description")
                                              .text(datum);
                  break;
                default:
                  alert("error");
                  break;
              }
            }
            div.append($("<p>").append(datetime)
                               .append(title)
                               .append(description));
            div.append("<hr />");
          }
        };
        var query = new google.visualization.Query(data_source_url);
        var sql = "select *";
        query.setQuery(sql);
        query.send(handleResponse);
        query.setRefreshInterval(30);
      };
      $(document).ready(exec);
    </script>
  </head>
  <body>
    <p>
      <a href=form_url target="_blank">投稿ページ</a>
    </p>
    <hr />
    <div id="entries">
    </div>
  </body>
</html>