YUI2.6.0とPHPでマッシュアップしてみる。

Ajax YUI PHP Mashup XHR XML

YUIのConnection ManagerのExampleにある「Retrieving a Yahoo! Weather RSS Feed」のサンプルは、「Yahoo! Weather RSS feed」からRSSのフィードをとってくるサンプル。
ソースを追ってみると、Exampleをおいているサーバーのweather.phpというプログラムを呼んでいる。
どんなものか分からないので、東京の天気だけ取ってくるものを適当に作ってみることにする。

「Yahoo! Weather RSS feed」を読むと、気温も華氏ではなく、摂氏でとれるようなので、そのようにする。

PHP（開発機に入っているWindows版の5.2.6）から、fopenでサイトを開くので、php.iniの

allow_url_open=ON

とする（このパラメータはセキュリティー上、OFFが推奨されていたとは思う）。

まず、初期画面は以下のようにする。

「東京の天気」ボタンを押すと、PHPから「Yahoo! Weather RSS feed」の東京のページを読みこみでレスポンスする。

RSSフィードもXMLのなので、responseXMLで受け取れば、普通のXMLとして扱える。

以下にJavascriptを含む全文を掲載する。
ボタンのClickイベントで、XMLHttpRequestが発火するようにしたが、loadイベントかなにかに引っ掛ければ、画面の部品として使えるかもしれない。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css">
body {
	margin:0;
	padding:0;
}

#weatherModule {
	width: 350px;
	hight: 650px;
	padding: 10px;
    background-color: #6D739A;
    color: white;
	border: 1px solid green;
	
}

</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js" >
</script> 
<script type="text/javascript" src="scripts/yui/connection/connection-min.js" >
</script> 

<script type="text/javascript">
	
function successHandler(o){

	var root = o.responseXML;

	var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue;
	var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
	var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue;

	YAHOO.util.Dom.get('weatherModule').innerHTML = 
           "<p>" + oTitle + "</p>" + "<p>" + oDateTime + 
           "</p>" + descriptionNode;

}

function failureHandler(o){

	YAHOO.util.Dom.get('weatherModule').innerHTML = 
                                o.status + " " + o.statusText;
}

function getModule(){
	var entryPoint = 'ajax_yui_connection_Mashup.php';
	var sUrl = entryPoint;

	var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, 
			{ 
				success:successHandler, 
				failure:failureHandler
			}
	);
};

</script>
</HEAD>
<BODY>
<div id="weatherModule">
<p>
「東京の天気」のボタン選んで押してください。<br/>
東京の今日の天気を取得して、戻ってきます。
</p>
<input type="button" value="東京の天気" onClick="getModule()">
</div>
</BODY>
</HTML>

PHPでパースするという手もあると思うが、要素の取り出しは、上のhtml中のJavascriptで行っている。
以下のPHPは、「Yahoo! Weather RSS feed」の東京のページを読みこみでレスポンスするだけのものである。

<?php
/* ajaxサンプル。
	      
		author	; t.odaka
		date	; 2008/11/02
*/

header("Content-Type:text/xml");

// p=JAXX0085: 東京、u=c: 摂氏での気温
$url="http://xml.weather.yahoo.com/forecastrss?p=JAXX0085&u=c";

// fopenで読み込む。
// php.iniのallow_url_open=ONが必要。
$feed='';
if($fp = fopen($url,"r")){
	$fp = fopen($url,"r");
	while( ! feof( $fp ) ){
		$wk = fgets( $fp, 9182 );
		$feed=$feed.$wk;
	}	
	fclose($fp);
}

// 結果の返却
echo $feed;

?>