天気予報RSSをsimplexml_load_fileでパースしwordpress上で表示させる

萩原賢二のコーディングストック > プログラミング > 天気予報RSSをsimplexml_load_fileでパースする。

2019.09.4

天気予報RSSをsimplexml_load_fileでパースする。

地方を選択してください。選択された地方の本日の天気の情報のRSSを取得し表示されます。

地方の選択はjQueryUI wigets 「selectmenu」を使用を使用しています。
選択されたエリアに対応するRSSをAjaxを経由でRSSを取得しています。
php側ではRSSをパースは「simplexml_load_file()」で展開します。
天気RSSの取得はYahoo!天気・災害から取得します。

地方の選択はjQueryUI wigets 「selectmenu」を使用

// jQueryソース
jQuery(function($) {
	$('.flmenu').selectmenu(
	{
		change: function( event, ui ){
			var r = $('option:selected').val();
			$.ajax({
		        type: 'POST',
		        url: ajaxurl,
		        data: {
		          'action' : 'view_sitename',
		          'prg' : "rssWether",
		          'area': r,
		        },
		        success: function( response ){
			        
					$("#areaWether").html( response );
		        },
		        // Ajaxリクエストが失敗した時発動
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					
					$("#xmlparse").html("error" );
				},
		    });
		},
    });
    
});

// jQueryソース

jQuery(function($) {

$('.flmenu').selectmenu(

{

change: function( event, ui ){

var r = $('option:selected').val();

$.ajax({

type: 'POST',

url: ajaxurl,

data: {

'action' : 'view_sitename',

'prg' : "rssWether",

'area': r,

success: function( response ){

$("#areaWether").html( response );

// Ajaxリクエストが失敗した時発動

error: function(XMLHttpRequest, textStatus, errorThrown) {

$("#xmlparse").html("error" );

});

サーバー側 PHPソースコード

// サーバー側 PHPソースコード
date_default_timezone_set('Asia/Tokyo');
// 取得したいRSSのURLを設定
$url = "https://rss-weather.yahoo.co.jp/rss/days/". $_REQUEST["area"] .".xml";
// simplexml_load_file()でRSSをパースしてオブジェクトを取得します。
if( $rss = simplexml_load_file( $url ) ){
	foreach( $rss->channel->item as $item ){
	    // 一件づつ取得して表示します。
	    if( strpos($item->title,' PR') === false ) {    
		$date = date( 'Y年m月d日', strtotime( $item->pubDate ) );　 // 日付をY年m月d日に変換
		echo "<div class=\"rsscontainer\">\n",
		    "<div class=\"rssimg\"><img src=\"",$item->image->url,"\"></div>\n",
		     "<div class=\"rssdetail\">",
		    $date,"<br>",
		    $item->title,
		    "</div>\n",
		    "</div>";
		}			
	}
}

// サーバー側 PHPソースコード

date_default_timezone_set('Asia/Tokyo');

// 取得したいRSSのURLを設定

$url = "https://rss-weather.yahoo.co.jp/rss/days/". $_REQUEST["area"] .".xml";

// simplexml_load_file()でRSSをパースしてオブジェクトを取得します。

if( $rss = simplexml_load_file( $url ) ){

foreach( $rss->channel->item as $item ){

// 一件づつ取得して表示します。

if( strpos($item->title,' PR') === false ) {

$date = date( 'Y年m月d日', strtotime( $item->pubDate ) );　 // 日付をY年m月d日に変換

echo "<div class=\"rsscontainer\">\n",

"<div class=\"rssimg\"><img src=\"",$item->image->url,"\"></div>\n",

"<div class=\"rssdetail\">",

$date,"<br>",

$item->title,

"</div>\n",

"</div>";

}

CSS 天気情報ごとに FlexBoxでレイアウトしています。

// CSS
.rsscontainer {
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  border: 1px dashed #555;
  display: flex;
  align-items: center;
  line-height: 1.5em;
}
.rssimg {
 padding-left: 10px;
}
.rssdetail {
  margin-left: 20px;
}