Google Spreadsheets Chat

Fake

2011-03-29 22:09:29

License: MIT License

Fork: 0

Fav: 5

View: 1258

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 41 lines
HTML 13 lines
CSS 3 lines

Google Spreadsheetsを使用した簡易チャット

発言はスプレッドシートのフォーム機能を使って、iframe経由でポスト
ログ表示は、Visualization APIのURLを直接叩いて取得
（Visualization APIでreqIdを操作する方法が分からかなかったので）

Google Spreadsheets Chat
jQuery v1.5.1

$(function () {
  $("#reload").click(reloadChatlog);
  $("#send").click(function () {
    var data = $("#txt").val();
    $("#txt").val("");
    $("#sendtext").val(data);
    $("#submitbutton").click();
  });
  $("#postframe").load(function () {
    $("#sendtext").val("");
    reloadChatlog();
  });
  reloadChatlog();
});

function renderChatlog(data) {
  $("script#jsonprequest").remove();
  $("#chatlog").empty();
  var table = data.table.rows;
  for (var i = 0, num = table.length; i < num; ++i) {
    var time = table[i].c[0].v;
    var txt = table[i].c[1].v;
    $("<li />").text(date2str(time) + " " + txt).appendTo("#chatlog");
  }

function date2str(date) {
    return (date.getMonth() + 1).toString() + "/" + date.getDate().toString() + " " + date.getHours().toString() + ":" + (((date.getMinutes() < 10) ? "0": "")+ date.getMinutes().toString());
  }
}

Google Spreadsheets Chat

Google Spreadsheetsを使用した簡易チャット発言はスプレッドシートのフォーム機能を使って、iframe経由でポストログ表示は、Visualization APIのURLを直接叩いて取得（Visualization APIでreqIdを操作する方法が分からかなかったので）$(function () { $("#reload").click(reloadChatlog); $("#send").click(function () { var data = $("#txt").val(); $("#txt").val(""); $("#sendtext").val(data); $("#submitbutton").click(); }); $("#postframe").load(function () { $("#sendtext").val(""); reloadChatlog(); }); reloadChatlog(); }); function reloadChatlog() { var param = { key: "0ArUyC7fgBs1KdG5QU1dNUDlTMVRXOXVDT3ZUU1FNeEE", pub: 1, gid: 0, tq: "SELECT A, B ORDER BY A DESC LIMIT 32", tqx: "responseHandler:renderChatlog;reqId:" + (new Date()).getTime().toString() }; $("<script />", {id: "jsonprequest", src: "https://spreadsheets.google.com/tq?" + $.param(param)}).appendTo("body"); } function renderChatlog(data) { $("script#jsonprequest").remove(); $("#chatlog").empty(); var table = data.table.rows; for (var i = 0, num = table.length; i < num; ++i) { var time = table[i].c[0].v; var txt = table[i].c[1].v; $("<li />").text(date2str(time) + " " + txt).appendTo("#chatlog"); } function date2str(date) { return (date.getMonth() + 1).toString() + "/" + date.getDate().toString() + " " + date.getHours().toString() + ":" + (((date.getMinutes() < 10) ? "0": "")+ date.getMinutes().toString()); } } <input type="text" id="txt" size="32" /> <button id="send">send</button> <button id="reload">reload</button> <ul id="chatlog"></ul> <iframe name="postform" width="0" height="0" class="hidden" id="postframe" src="about:blank"></iframe> <form action="https://spreadsheets.google.com/formResponse?formkey=dG5QU1dNUDlTMVRXOXVDT3ZUU1FNeEE6MQ&ifq" method="POST" id="chatform" target="postform"> <input type="hidden" name="entry.0.single" value="" id="sendtext"> <input type="hidden" name="pageNumber" value="0"> <input type="hidden" name="backupCache" value=""> <input type="submit" name="submit" value="Submit" id="submitbutton" class="hidden"> </form> .hidden { display: none; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/uiyM/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/Fake/gsheetchat" title="Google Spreadsheets Chat">Google Spreadsheets Chat - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code