この章ではフォト蔵を利用してみます。ただし、2006年3月1日現在、フォト蔵のAPIはβ版であるため、ここでは深入りせず変更がないと思われるものだけ説明します。β版なので改良されるはずですが、現時点でフォト蔵のAPIをAjaxで利用する場合には注意が必要です。Ajaxにおいては
フォト蔵が出力するXMLはトラブルを引き起こすようなものになっています。多分、正式版では修正されるでしょう。
また、APIは以下のURLで参照することができます。
http://photozou.jp/basic/api
それでは、フォト蔵のAPIを使ってみましょう。その前にフォト蔵のIDを持っていない人は
フォト蔵へアクセスしIDを取得します。取得したID（メールアドレス）とパスワードがないとフォト蔵が用意したAPIを利用することができません。というのも、これまで説明してきたサイトと異なりBASIC認証（パスワード制限）が必要なためです。
HTTP通信を行うXMLHttpRequest()は、BASIC認証を行うことができます。しかし、それは同一ドメインに限られるため今回のような別サイトのAPIを利用する場合には使えません。そこで、curlを利用します。curlは-uオプションを指定するとBASIC認証を処理し、データを取得することができます。IDとパスワードは-uの後に記述し、:（コロン）で区切ります。
curl -u ユーザーID:パスワード URL
IDとパスワードをcurlの引数に指定すればBASIC認証をクリアしてフォト蔵へのアクセスが可能になります。フォト蔵には認証チェックのためのAPIが用意されています。それはnop (Non Operation)でURLは
http://photozou.jp/api/nopになります。以下のサンプルはフォームに入力されたIDとパスワードを送信し、その結果(XML)を画面に表示するものです。（サンプルを
実行する）
●curl.rb
#!/usr/local/bin/ruby
require "cgi-lib"
input = CGI.new
uID = input["userID"]
uPW = input["userPW"]
fh = open("| curl -u "+uID+":"+uPW+" http://photozou.jp/api/nop")
print "Content-type: text/xml\n\n"
while !fh.eof
print fh.gets
end
fh.close
●サンプルHTML
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>フォト蔵を利用する：フォト蔵へのアクセス</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function accessTest()
{
userID = $("uID").value;
userPW = $("uPW").value;
sURL = "curl.rb?userID="+userID+"&userPW="+userPW;
new Ajax.Request(sURL, { method: 'get', onComplete: displayData });
}
function displayData(httpObj)
{
$("result").innerText = httpObj.responseText;
$("result").textContent = httpObj.responseText;
}
// --></script>
</head>
<body>
<h1>フォト蔵での認証テスト</h1>
<form>
ユーザーID:<input type="text" value="" id="uID" size="30"><br>
パスワード:<input type="text" value="" id="uPW" size="30"><br>
<input type="button" value="認証テスト" onClick="accessTest()"><br>
</form>
<div id="result"></div>
</body>
</html>
他のAPIを利用してみましょう。とりあえず、グループを取得してみます。グループの取得は
http://photozou.jp/api/user_groupです。パラメータはありません。結果はXMLで返されます。（実際のサンプルを
実行する）
●curl.rb
#!/usr/local/bin/ruby
require "cgi-lib"
input = CGI.new
uID = input["userID"]
uPW = input["userPW"]
fh = open("| curl -u "+uID+":"+uPW+" http://photozou.jp/api/user_group")
print "Content-type: text/xml\n\n"
print "\xef\xbb\xbf"
while !fh.eof
print fh.gets
end
fh.close
●サンプルHTML
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>フォト蔵を利用する：ユーザーグループを取得</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function accessTest()
{
userID = encodeURI($("uID").value);
userPW = encodeURI($("uPW").value);
sURL = "curl.rb?userID="+userID+"&userPW="+userPW;
new Ajax.Request(sURL, { method: 'get', onComplete: displayData });
}
function displayData(httpObj)
{
$("result").innerText = httpObj.responseText;
$("result").textContent = httpObj.responseText;
}
// --></script>
</head>
<body>
<h1>ユーザーグループを取得</h1>
<form>
ユーザーID:<input type="text" value="" id="uID" size="30"><br>
パスワード:<input type="text" value="" id="uPW" size="30"><br>
<input type="button" value="ユーザーグループを取得" onClick="accessTest()"><br>
</form>
<div id="result"></div>
</body>
</html>
得られたXMLから必要なデータを抽出し表示させてみます。フォト蔵β版のXMLではノードをたどるとブラウザごとにノード位置が異なるため処理が面倒になります（フォト蔵β版が返すXMLの、まずい点はこの処理を行うところで発生します。正式版では修正されるとは思います）。そこで、getElementByTagName()で必要なタグに直接アクセスしノード値を得るようにします（タグ名によってはgetElementsByTagName()ではSafari 2が、うまく動作しなくなるため、英文字のみで構成される方が安全）。
以下のサンプルではグループの数だけグループIDを表示し、その横にグループ名を表示します。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>フォト蔵を利用する：ユーザーグループ名とIDを表示</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function accessTest()
{
userID = encodeURI($("uID").value);
userPW = encodeURI($("uPW").value);
sURL = "curl.rb?userID="+userID+"&userPW="+userPW;
new Ajax.Request(sURL, { method: 'get', onComplete: displayData });
}
function displayData(httpObj)
{
XML = httpObj.responseXML;
grpTag = XML.getElementsByTagName("user_group");
if (grpTag.length < 1)
{
$("result").innerHTML = "認証エラーです";
}else{
txt = "";
for (var i=0; i<grpTag.length; i++)
{
gID = grpTag[i].getElementsByTagName("group_id")[0].firstChild.nodeValue;
gName = grpTag[i].getElementsByTagName("name")[0].firstChild.nodeValue;
txt += gID + " : "+gName + "<br>";
}
$("result").innerHTML = txt;
}
}
// --></script>
</head>
<body>
<h1>ユーザーグループ名とIDを表示</h1>
<form>
ユーザーID:<input type="text" value="" id="uID" size="30"><br>
パスワード:<input type="text" value="" id="uPW" size="30"><br>
<input type="button" value="ユーザーグループ名とIDを表示" onClick="accessTest()"><br>
</form>
<div id="result"></div>
</body>
</html>
[
目次へ]
(2006.3.1)