Ajaxを使って不特定多数で写真を共有することができます。原理は入力されたURLをサーバー側で保存するようにします。画像を表示する場合にはサーバー上にあるURLリストを保存したテキストファイルを読み込みimgタグのsrcプロパティに設定します。
以下のサンプルはURLを入力すると入力したURLを最大10まで保存し、その後でページ上に画像を表示します。CGI部分の赤字の部分が最大保存数になっています。ここを変更すれば好きな数だけURLを保存できます。変更する際にはページ上に表示される画像の数にも配慮する必要があります。
画像をサブウィンドウで表示するようにしていますが、同一ページ内に表示したい場合には、画像を表示するためのimgタグまたはdivタグを用意しておきます。imgタグの場合はsrcプロパティ、divタグの場合にはスタイルシートのbackgroundImageプロパティに画像のURLを設定します。（サンプルを
実行する）
●CGI (Ruby 1.8.4)
#!/usr/bin/ruby
print "Content-type: text/html\n\n"
require "cgi-lib"
input = CGI.new
inputdata = input["saveURL"]
result = inputdata+ "\n"
fh = open("imageURL.txt", "r")
10.times {
txt = fh.gets
if txt == nil then
break
end
result = result + txt
}
fh.close
fh = open("imageURL.txt", "w")
fh.print result
fh.close
print "\n"
●スクリプト
<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="xmlhttp.js"></script>
<script type="text/javascript"><!--
// 画像のURLを登録
function addURL()
{
var imageURL = $("siteURL").value;
httpObj = createXMLHttpRequest(registData);
if (httpObj)
{
httpObj.open("GET","photo.rb?saveURL="+imageURL,true);
httpObj.send(null);
}
}
// URL登録完了
function registData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = "保存しました";
getURL();
}else{
$("result").innerHTML = "保存中です...";
}
}
// 画像のURL (imageURL.txt) を取得
function getURL()
{
httpObj = createXMLHttpRequest(getImageURL);
if (httpObj)
{
httpObj.open("GET","imageURL.txt?cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
// 表示処理を呼び出す
function getImageURL()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
var LF = String.fromCharCode(10);
var List = httpObj.responseText.split(LF);
var n = List.length-1;
if (n > 10) n = 10;
for (var i=0; i<n; i++) $("img"+i).src = List[i];
$("result").innerHTML = "";
}else{
$("result").innerHTML = "読み込み中です...";
}
}
// 画像を開く
function openImage(sURL)
{
subWin = window.open(sURL,"img","width=480,height=360");
}
// --></script>
</head>
<body onload="getURL()">
<h1>写真共有 Ajax</h1>
<form method="get" name="ajaxForm" onsubmit="return false;">
<input type="text" value="http://www.openspc2.org/title.gif" id="siteURL" size="60"><br>
<input type="button" value="登録する" onClick="addURL()">
<input type="button" value="表示する" onClick="getURL()">
</form>
<div id="result"></div>
<img src="none.gif" class="photo" id="img0" onClick="openImage(this.src)">
<img src="none.gif" class="photo" id="img1" onClick="openImage(this.src)">
<img src="none.gif" class="photo" id="img2" onClick="openImage(this.src)">
<img src="none.gif" class="photo" id="img3" onClick="openImage(this.src)">
<img src="none.gif" class="photo" id="img4" onClick="openImage(this.src)"><br>
<img src="none.gif" class="photo" id="img5" onClick="openImage(this.src)">
<img src="none.gif" class="photo" id="img6" onClick="openImage(this.src)">
<img src="none.gif" class="photo" id="img7" onClick="openImage(this.src)">
<img src="none.gif" class="photo" id="img8" onClick="openImage(this.src)">
<img src="none.gif" class="photo" id="img9" onClick="openImage(this.src)">
<br>
<p>クリックするとサブウィンドウが表示され、登録された画像が表示されます。</p>
</body>
</html>
[
第12章 2:アマゾンを利用してISBNコード検索を行うへ]
[
目次へ]
(2006.2.1)