Ajaxを利用したこっくりさんです。質問をすると、どこかの誰かがページを見ていてマークを動かしてくれます（多分）。誰も見ていないと動きません。座標値をサーバーにドラッグ後に送信していますが、排他制御なしなので珍現象が起こるかもしれません。そこは、こっくりさんなので霊がやったということで（汗）
（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Ajaxこっくりさん</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
limitX = 500;
limitY = 700;
dragObj = new Object();
dragObj.dragFlag = false; // ドラッグ中かどうかのフラグ変数
dragObj.targetObj = null // ドラッグ対象オブジェクト情報
// ドラッグ開始処理
dragObj.dragStart = function (event)
{
dragObj.dragFlag = true;
dragObj.targetObj = $(eleName);
dragObj.offsetX = mouseX - parseInt(dragObj.targetObj.style.left);
dragObj.offsetY = mouseY - parseInt(dragObj.targetObj.style.top);
return false;
}
dragObj.dragEnd = function() // ドラッグ終了処理
{
dragObj.dragFlag = false;
var sURL = "point.rb?x="+dragObj.targetObj.style.left+"&y="+dragObj.targetObj.style.top;
new Ajax.Request(sURL, { method: "get"});
}
dragObj.dragProc = function(event) // ドラッグ中の処理
{
mouseX = Event.pointerX(event);
mouseY = Event.pointerY(event);
if (!dragObj.dragFlag) return;
if (mouseX > limitX) mouseX = limitX;
if (mouseY > limitY) mouseY = limitY;
dragObj.targetObj.style.left = mouseX - dragObj.offsetX;
dragObj.targetObj.style.top = mouseY - dragObj.offsetY;
return false;
}
// 質問をサーバーに保存
function dataSave()
{
var textData = document.ajaxForm.request.value;
var sURL = "save.rb?request="+encodeURI(textData)+"&cache="+(new Date()).getTime();
new Ajax.Request(sURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var REbr = new RegExp(String.fromCharCode(10),"g");
var str = httpObj.responseText;
$("result").innerHTML = str.replace(REbr,"<br>");
}
// マーカーの座標を設定
function setMarkXY(httpObj)
{
if (dragObj.dragFlag) return;
var str = httpObj.responseText;
var x = str.split(",")[0];
var y = str.split(",")[1];
if ((x == "") || (y == "")) return;
$(eleName).style.left = str.split(",")[0];
$(eleName).style.top = str.split(",")[1];
}
// リロードして最新データを読み込む
function dataReload()
{
var sURL = "data.txt?"+(new Date()).getTime();
new Ajax.Request(sURL, { method: "get", onComplete: displayData });
var sURL = "point.txt?"+(new Date()).getTime();
new Ajax.Request(sURL, { method: "get", onComplete: setMarkXY });
setTimeout("dataReload()",1000);
}
// ドラッグ可能にする
window.onload = function()
{
eleName = "mark";
$(eleName).onmousedown = dragObj.dragStart;
$(eleName).onmouseup = dragObj.dragEnd;
$(eleName).style.left = "200px";
$(eleName).style.top = "300px";
Event.observe(window.document, "mousemove", dragObj.dragProc, false);
dataReload();
}
// --></script>
</head>
<body>
<h1>Ajaxこっくりさん</h1>
<p>どこかの誰かが動かすと反応します。誰も動かさないと何とも・・・</p>
<form method="get" name="ajaxForm" onsubmit="dataSave();return false;">
聞きたい事は？<input type="text" name="request" value="宝くじに当たりますか？" size="30"><br>
<input type="submit" value="聞いてみる"><br>
</form>
<div id="mark">●</div>
<div id="result"></div>
</body>
</html>
【save.rb】
#!/usr/bin/ruby
bom = "\xef\xbb\xbf"
require "cgi-lib"
input = CGI.new
inputdata = input["request"]
result = inputdata+ "\n"
fh = open("data.txt", "r")
5.times {
txt = fh.gets
if txt == nil then
break
end
result = result + txt
}
fh.close
fh = open("data.txt", "w")
result = result.gsub(/</,"<")
result = result.gsub(/>/,">")
fh.print bom
fh.print result
fh.close
print "Content-type: text/html\n\n"
print bom
print result
【point.rb】
#!/usr/bin/ruby
require "cgi-lib"
input = CGI.new
mx = input["x"]
my = input["y"]
result = mx+","+my+ "\n"
fh = open("point.txt", "w")
fh.print result
fh.close
[
目次へ]
(2006.3.6)