PHPのsimplexmlで複数のブログのRSSを読み込み新着順に表示する方法

PHPのsimplexmlを使って複数のブログのRSSを取得し、新着順に表示するRSSリーダーを作ってみました。またJavaScriptでCSSを切り替えられる「styleswitch.js」を使って背景を自分の好きな色に変更できるような設定ページも設けてみました。

ただ複数のRSSを読み込んでいるせいかページの読み込みが遅いです...。この点は改良したいと思います。

プレビュー

RSSリーダー

↓QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格：無料

ポイント

Q.simplexmlで複数のRSSを読み込むには？

A.RSSのURLを配列に入れ、その配列をsimplexmlの引数にします。

Q.文字列からHTMLタグを取り除くには？

A.「strip_tags」を使う
参考：PHP: strip_tags - Manual

Q.指定した幅で文字列を丸めるには？

A.「mb_strimwidth」を使う

<?php
mb_strimwidth(変数, 開始位置, 幅, "丸めた後にその文字列の最後に追加される文字列", "エンコーディング");
?>

参考：PHP: mb_strimwidth - Manual

Q.新着順にソートするには？

A.「arsort」を使う
参考：

CSSの切り替え「styleswitch.js」

Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)

↓設置の仕方などは下記の記事を参考にどうぞ
JavaScriptでCSSを切り替える「styleswitch.js」 - ウェブ学のすすめ

コード

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>RSSリーダー</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<link rel="stylesheet" href="css/blue.css">
<link rel="alternate stylesheet" title="green" href="css/green.css">
<link rel="alternate stylesheet" title="red" href="css/red.css">
<link rel="alternate stylesheet" title="aqua" href="css/aqua.css">
<link rel="alternate stylesheet" title="orange" href="css/orange.css">
<link rel="alternate stylesheet" title="black" href="css/black.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="js/styleswitch.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-theme="b">
<h1>最新ブログ記事</h1>
<a href="#page2" data-icon="gear" class="ui-btn-right" data-transition="slide">設定</a>
</div>
<div data-role="content">
<ul data-role="listview">
<?php
$rss_url = array(
'http://d.hatena.ne.jp/web-css-design/rss',
'http://d.hatena.ne.jp/css_design/rss',
'http://d.hatena.ne.jp/yachin29/rss',
'http://d.hatena.ne.jp/fatwebstudy/rss',
'http://d.hatena.ne.jp/hansolostar1810/rss',
'http://d.hatena.ne.jp/ponkan7/rss',
'http://d.hatena.ne.jp/soratomo0714/rss',
'http://d.hatena.ne.jp/befreegogo/rss',
'http://d.hatena.ne.jp/egz1984/rss',
'http://d.hatena.ne.jp/HONME/rss',
'http://d.hatena.ne.jp/epikhigh/rss',
'http://d.hatena.ne.jp/schipperke0614/rss',
'http://d.hatena.ne.jp/pao_tan/rss',
'http://d.hatena.ne.jp/fight_2012/rss',
'http://d.hatena.ne.jp/hayabusa08/rss',
'http://d.hatena.ne.jp/newbie2012/rss',
'http://d.hatena.ne.jp/millenny/rss',
'http://d.hatena.ne.jp/cinnamon39/rss',
'http://d.hatena.ne.jp/tsutsumi223/rss',
'http://d.hatena.ne.jp/x-dream56/rss',
'http://d.hatena.ne.jp/vinton/rss',
'http://d.hatena.ne.jp/tonewme/rss',
'http://d.hatena.ne.jp/bookmans/rss',
'http://d.hatena.ne.jp/sakamotosmile40/rss',
'http://d.hatena.ne.jp/puisto/rss',
'http://d.hatena.ne.jp/msnb125/rss',
'http://d.hatena.ne.jp/sk-usagi/rss',
'http://d.hatena.ne.jp/naoko83/rss');

foreach ($rss_url as $url) {
	$count = 0;
	$rss = simplexml_load_file("$url"); 
	$site_title =  $rss->channel->title;
	
	foreach ($rss->item as $item) {
		if ($count == 1) {
			break;
		}
		$count++;
		
		$link = $item ->link;
		$title = $item ->title;
		$content = $item ->description;
		$content = strip_tags($content);
		$content = mb_strimwidth($content, 0, 250, "...", "UTF-8");
		
		
		date_default_timezone_set('Asia/Tokyo');
		$dc = $item ->children('http://purl.org/dc/elements/1.1/');
		$day = date('Y/m/d H:i',strtotime($dc -> date));
		
		$key = date('YmdGHis', strtotime($dc -> date));
		
		
		$entryArr[$key] =  "<li><p class=\"ui-li-aside\">$day</p><a href=\"$link\" target=\"_blank\"><p>$site_title</p><h2>$title</h2><p>$content</p></a></li>\n";
		
	}
} 

arsort($entryArr);
   
foreach ($entryArr as $key=> $val) {
	echo  $val;
}
?>
</ul>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton </h4>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>設定</h1>
<a href="#index" data-icon="arrow-l" data-transition="slide" data-direction="reverse">戻る</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li id="blue"><a href="javascript:chooseStyle('none', 60)" checked="checked">Blue theme</a></li>
<li id="green"><a href="javascript:chooseStyle('green', 60)">Green theme</a></li>
<li id="red"><a href="javascript:chooseStyle('red', 60)">Red theme</a></li>
<li id="aqua"><a href="javascript:chooseStyle('aqua', 60)">Aqua theme</a></li>
<li id="orange"><a href="javascript:chooseStyle('orange', 60)">Orange theme</a></li>
<li id="black"><a href="javascript:chooseStyle('black', 60)">Black theme</a></li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 vinton </h4>
</div>
</div>
</body>
</html>

blue.css

@charset "utf-8";

.ui-li-heading, .ui-li-desc {
    white-space: normal;
}
.ui-li-desc {
	font-size:14px;
	line-height:1.4;
}
.ui-li-aside {
	margin: 10px 40px 0 0;
	width:100px;
	color:#0283D5;
	font-size:12px;
}

.ui-li .ui-btn-text a.ui-link-inherit {
	overflow:visible;
}
.ui-bar-b, .ui-bar-b input, .ui-bar-b select, .ui-bar-b textarea, .ui-bar-b button, .ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button {
	font-family:
	  "ヒラギノ角ゴ Pro W3", 
	  "Hiragino Kaku Gothic Pro", 
	  "メイリオ", 
	  Meiryo, 
	  Osaka, 
	  "ＭＳ Ｐゴシック", 
	  "MS PGothic",
	  sans-serif;
}
.ui-bar-a, .ui-bar-b {
	border: 1px solid #004CCC;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#007ECC),to(#004CCC));
	background-image: -webkit-linear-gradient(#007ECC,#004CCC);
	background-image: -moz-linear-gradient(#007ECC,#004CCC);
	background-image: -ms-linear-gradient(#007ECC,#004CCC);
	background-image: -o-linear-gradient(#007ECC,#004CCC);
	background-image: linear-gradient(#007ECC,#004CCC);
}

#blue {
	background-image: -webkit-gradient(linear,left top,left bottom,from(#007ECC),to(#004CCC));
	background-image: -webkit-linear-gradient(#007ECC,#004CCC);
	background-image: -moz-linear-gradient(#007ECC,#004CCC);
	background-image: -ms-linear-gradient(#007ECC,#004CCC);
	background-image: -o-linear-gradient(#007ECC,#004CCC);
	background-image: linear-gradient(#007ECC,#004CCC);
}
#green {
	background-image: -webkit-gradient(linear,left top,left bottom,from(#60C060),to(#56AC56));
	background-image: -webkit-linear-gradient(#60C060,#56AC56);
	background-image: -moz-linear-gradient(#60C060,#56AC56);
	background-image: -ms-linear-gradient(#60C060,#56AC56);
	background-image: -o-linear-gradient(#60C060,#56AC56);
	background-image: linear-gradient(#60C060,#56AC56);
}
#red {
	background-image: -webkit-gradient(linear,left top,left bottom,from(#E85A56),to(#C83F38));
	background-image: -webkit-linear-gradient(#E85A56,#C83F38);
	background-image: -moz-linear-gradient(#E85A56,#C83F38);
	background-image: -ms-linear-gradient(#E85A56,#C83F38);
	background-image: -o-linear-gradient(#E85A56,#C83F38);
	background-image: linear-gradient(#E85A56,#C83F38);
}
#aqua {
	background-image: -webkit-gradient(linear,left top,left bottom,from(#53B8D6),to(#369CBA));
	background-image: -webkit-linear-gradient(#53B8D6,#369CBA);
	background-image: -moz-linear-gradient(#53B8D6,#369CBA);
	background-image: -ms-linear-gradient(#53B8D6,#369CBA);
	background-image: -o-linear-gradient(#53B8D6,#369CBA);
	background-image: linear-gradient(#53B8D6,#369CBA);
}
#orange {
	background-image: -webkit-gradient(linear,left top,left bottom,from(#FBAF45),to(#F99A13));
	background-image: -webkit-linear-gradient(#FBAF45,#F99A13);
	background-image: -moz-linear-gradient(#FBAF45,#F99A13);
	background-image: -ms-linear-gradient(#FBAF45,#F99A13);
	background-image: -o-linear-gradient(#FBAF45,#F99A13);
	background-image: linear-gradient(#FBAF45,#F99A13);
}
#black {
	background-image: -webkit-gradient(linear,left top,left bottom,from(#303030),to(#252525));
	background-image: -webkit-linear-gradient(#303030,#252525);
	background-image: -moz-linear-gradient(#303030,#252525);
	background-image: -ms-linear-gradient(#303030,#252525);
	background-image: -o-linear-gradient(#303030,#252525);
	background-image: linear-gradient(#303030,#252525);
}
#blue .ui-link-inherit, #green .ui-link-inherit, #red .ui-link-inherit, #aqua .ui-link-inherit, #orange .ui-link-inherit, #black .ui-link-inherit{
	color:#fff;
	text-shadow:0 0 0 #000;
}

green.css

@charset "utf-8";

.ui-bar-a, .ui-bar-b {
	border: 1px solid #56AC56;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#60C060),to(#56AC56));
	background-image: -webkit-linear-gradient(#60C060,#56AC56);
	background-image: -moz-linear-gradient(#60C060,#56AC56);
	background-image: -ms-linear-gradient(#60C060,#56AC56);
	background-image: -o-linear-gradient(#60C060,#56AC56);
	background-image: linear-gradient(#60C060,#56AC56);
}

red.css

@charset "utf-8";

.ui-bar-a, .ui-bar-b {
	border: 1px solid #C83F38;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#E85A56),to(#C83F38));
	background-image: -webkit-linear-gradient(#E85A56,#C83F38);
	background-image: -moz-linear-gradient(#E85A56,#C83F38);
	background-image: -ms-linear-gradient(#E85A56,#C83F38);
	background-image: -o-linear-gradient(#E85A56,#C83F38);
	background-image: linear-gradient(#E85A56,#C83F38);
}

aqua.css

@charset "utf-8";

.ui-bar-a, .ui-bar-b {
	border: 1px solid #369CBA;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#53B8D6),to(#369CBA));
	background-image: -webkit-linear-gradient(#53B8D6,#369CBA);
	background-image: -moz-linear-gradient(#53B8D6,#369CBA);
	background-image: -ms-linear-gradient(#53B8D6,#369CBA);
	background-image: -o-linear-gradient(#53B8D6,#369CBA);
	background-image: linear-gradient(#53B8D6,#369CBA);
}

orange.css

@charset "utf-8";

.ui-bar-a, .ui-bar-b {
	border: 1px solid #F99A13;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#FBAF45),to(#F99A13));
	background-image: -webkit-linear-gradient(#FBAF45,#F99A13);
	background-image: -moz-linear-gradient(#FBAF45,#F99A13);
	background-image: -ms-linear-gradient(#FBAF45,#F99A13);
	background-image: -o-linear-gradient(#FBAF45,#F99A13);
	background-image: linear-gradient(#FBAF45,#F99A13);
}

black.css

@charset "utf-8";

.ui-bar-a, .ui-bar-b {
	border: 1px solid #252525;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#303030),to(#252525));
	background-image: -webkit-linear-gradient(#303030,#252525);
	background-image: -moz-linear-gradient(#303030,#252525);
	background-image: -ms-linear-gradient(#303030,#252525);
	background-image: -o-linear-gradient(#303030,#252525);
	background-image: linear-gradient(#303030,#252525);
}