技術開発部の松村です。
今日はPHPでRSS解析したものををJavascriptのタグで読み込んで表示させる、というのをやってみたいと思います。
よくブログパーツとしてあるようなものを想像して頂いたらよいかと思います。
今回は、PEARのXML_RSSを使ってXMLを解析しています。
よって、
# pear install -a XML_RSS
というふうにインストールしてください。XM_PARSERが入っていない場合は、こちらもインストールをする必要があるようです。
以下のようなJavascriptで表示させます。
<script type="text/javascript">
<!--
var url = 'http://www.example.com/rss_parse.php?url=http://q.hatena.ne.jp/list/computer?mode=rss';
document.write("<scr" + "ipt type=\"text\/javascript\" src=\"" + url + "\"><\/scr" + "ipt>");
// -->
</script>
次に実際にRSSを解析して、表示させるPHPのソースです。
RSSを解析し、その中からランダムな記事を取ってくるようにしています。
Javacriptで読ませるURLが非常にダサいんですが、一応いろいろなサイトのRSSを取ってこれるので、この方法にしました。（確認はあまりしていませんが。。。）
<?php
require_once("XML/RSS.php");
// $_GETの引数が２つ以上のときは、その引数も付けてあげる
if(count($_GET) > 1 ) {
foreach($_GET as $key => $val) {
if(empty($rssUrl)) {
$rssUrl = $val;
} else {
$rssUrl .= "&" . $key . "=" . $val;
}
}
} else {
$rssUrl = $_GET['url'];
}
//RSSファイルへのURIをコンストラクタの引数に渡す
$rss =& new XML_RSS($rssUrl);
// RSSファイルをパースする
$rss->parse();
// RSSの説明情報取得
$arrChannelInfo = $rss->getChannelInfo();
$big_title = mb_convert_encoding(ereg_replace("\n", "", $arrChannelInfo['title']), mb_internal_encoding(), 'auto');
// getItemsメソッドを使用して全item要素を取得し、表示する
$arrItems = $rss->getItems();
$count = count($arrItems);
// ランダムな値を取得
$i = rand(0, $count-1);
// リンクURL
$link = $arrItems[$i]['link'];
// タイトル
$title = $arrItems[$i]['title'];
//エスケープ処理
$title = ereg_replace("\"", "\\\"", $title);
$title = ereg_replace("'", "\\'", $title);
$title = mb_convert_encoding(ereg_replace("\n", "", $title), mb_internal_encoding(), 'auto');
// 空の場合は注意書きを代入
if(!empty($arrItems[$i]['description'])) {
$description = $arrItems[$i]['description'];
//エスケープ処理
$description = ereg_replace("\"", "\\\"", $description);
$description = ereg_replace("'", "\\'", $description);
$description = mb_convert_encoding(ereg_replace("\n", "", $description), mb_internal_encoding(), 'auto');
} else {
$description = "詳細情報登録なし！！";
}
// 実際に表示される
$disp = "<div id=\\\"rss_body\\\"><ul id=\\\"in_rss_body\\\"><li id=\\\"big_title\\\">" . $big_title . "</li><li id=\\\"title\\\"><a href='" . $link . "' target=\\\"_blank\\\"><span>" . $title . "</span></a></li></ul></div>";
?>
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"rss.css\">");
document.write("<?print($disp);?>");
document.write("<div id=\"popup\"><p><? print($description);?></p></div>");
document.write("<scr" + "ipt type=\"text\/javascript\" src=\"popup.js\"><\/scr" + "ipt>");
下記は、詳細内容をPOPUPで表示させるJavascriptのファイル、popup.jsです。
init_popup();
function init_popup() {
if(!document.createAttribute) return;
var div = document.getElementById("popup");
var span = document.getElementsByTagName("SPAN");
setHandler(span[0], div);
}
function setHandler(elem, div) {
elem.onmouseover = function(evt) {
if(!evt) evt = window.event;
div.style.left = (evt.clientX + 4) + "px";
div.style.top = (evt.clientY + 4) + "px";
div.style.display = "block";
}
elem.onmouseout = function(evt) {
div.style.display = "none";
}
}
最後にCSSのファイルのrss.cssです。
文字だけというのも悲しいので、CSSを知らないなりにちょっとしたデザインも入れてみました。
また、POPUPで出てくるウィンドウを半透明にしています。
div#rss_body{
width: 140;
background-color: black;
}
ul#in_rss_body{
padding:9px;
margin:1px;
width: 120;
background-color: white;
}
li#big_title {
margin:1px;
list-style-type: none;
list-style-position:outside;
font-size: 12px;
width: 120;
left: 0;
}
li#title {
list-style-type: none;
font-size: 13px;
width: 120px;
left: 0;
}
div#popup {
position:absolute; left: 0; top: 0;
font-size: 10px;
width: 300px; height:100px;
display: none;
filter:alpha(opacity=75); /*IE*/
-moz-opacity:0.75; /*FireFox*/
background-image: url(back.gif);
padding: 8px;
}
これが実際どういうふうに表示されるかは、本当に申し訳ありませんが、自分のサーバでやって頂けると幸いです。
セキュリティ上どうしても自社サーバに置くことができませんでした。
リロードすると、ランダムに取ってきていることがわかったりします。
余談ですが、IEとFireFoxで表示のされ方が違うようですね。
あと、たまにPOPUP文字列がはみ出すことがあります。
Javascriptでがんばって制御しようと思ったのですが、無理でした。。。
]]>
インストールされたらさっそく試してみましょう。
Developタブを押すとエディタ上で開発が行えます。
開発する場合はFirebugがあった方が良いです。
require'rubygems'