実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jfeed/jquery.jfeed.js"></script>
<script type="text/javascript">
$(function(){
$.getFeed({
//今日の地震情報
url: "/content/lib/jquery/jfeed/proxy.php?url=http://tenki.jp/component/static_api/rss/earthquake/recent_entries_by_day.xml",
success:function(xml){
$("#jishin h2").html(xml.title);
if(xml.items.length<1){
$("#jishin ol").html("<li>情報がありません。</li>");
}else{
$("#jishin").append("powered by <a href='"+xml.image.link+"'>"+xml.image.title+"</a>");
$(xml.items).each(function(i, item){
var _link=item.link;
var _title=item.title;
var _desc=item.description;
var _pubdate=dateParse(item.updated);
$("#jishin ol").append("<li>■<span>"+_pubdate+"</span> <a href='"+_link+"'>"+_title+"</a> "+_desc+"</li>");
});
}
}
});
$.getFeed({
//津波情報
url: "/content/lib/jquery/jfeed/proxy.php?url=http://tenki.jp/component/static_api/rss/tsunami/entry.xml",
success:function(xml){
$("#tsunami h2").html(xml.title);
if(xml.items.length<1){
$("#tsunami ol").html("<li>情報がありません。</li>");
}else{
$("#tsunami").append("powered by <a href='"+xml.image.link+"'>"+xml.image.title+"</a>");
$(xml.items).each(function(i, item){
var _link=item.link;
var _title=item.title;
var _desc=item.description;
var _pubdate=dateParse(item.updated);
$("#tsunami ol").append("<li>■<span>"+_pubdate+"</span> <a href='"+_link+"'>"+_title+"</a><br>"+_desc+"</li>");
});
}
}
});
$.getFeed({
//全国の火山情報
url: "/content/lib/jquery/jfeed/proxy.php?url=http://tenki.jp/component/static_api/rss/volcano/recent_entries.xml",
success:function(xml){
$("#kazan h2").html(xml.title);
if(xml.items.length<1){
$("#kazan ol").html("<li>情報がありません。</li>");
}else{
$("#kazan").append("powered by <a href='"+xml.image.link+"'>"+xml.image.title+"</a>");
$(xml.items).each(function(i, item){
var _link=item.link;
var _title=item.title;
var _desc=item.description;
var _pubdate=dateParse(item.updated);
$("#kazan ol").append("<li>■<span>"+_pubdate+"</span> <a href='"+_link+"'>"+_title+"</a><br>"+_desc+"</li>");
});
}
}
});
});
/* 日付のフォーマット */
function dateParse(dateStr){
var dateObject=new Date(dateStr);
var y=dateObject.getFullYear(); // 年
var m=dateObject.getMonth()+1; // 月
var d=dateObject.getDate(); // 日
var hour = dateObject.getHours(); // 時
var min = dateObject.getMinutes(); // 分
if (m < 10) { m ="0"+m; }
if (d < 10) { d ="0"+d; }
if (hour < 10) { hour ="0"+hour; }
if (min < 10) { min ="0"+min; }
return y+"年"+m+"月"+d+"日 "+hour+":"+min;
}
</script>
<style type="text/css">
.feed {
background-color:#fff;
margin:0; padding:15px;
border:2px solid #999;
width:600px; height:300px;
overflow:auto;
}
.feed_title {
background-color:#999;
padding:2px 10px;
color:#fff;
font-weight:bold;
}
ol {
list-style:none;
margin:0; padding:0;
}
li {
list-style:none;
margin:0 0 5px 0; padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://tenki.jp/webservice/rss/'>tenki RSS - tenki.jp</a>、<a href='http://hovinne.com/articles/jfeed-jquery-rss-atom-feed-parser-plugin'>jFeed</a></p>
<p>▼tenki.jp βで提供されている地震、津波、火山情報のRSS（XMLファイル）を読み込んで表示します。</p>
<!-- CODE -->
<div id="jishin">
<h2></h2>
<ol></ol>
</div>
<div id="tsunami">
<h2></h2>
<ol></ol>
</div>
<div id="kazan">
<h2></h2>
<ol></ol>
</div>
<!-- CODE / -->
</div>
</body>
</html>