bata's log

フロントエンド系のTipsとかメモ

PHPでRSSを取得しJavaScriptで表示する

PHP JavaScript

RSSを取得してサイト内に表示する時、普通のリスト表示くらいなら全部PHPでやってしまえば良いのですが、インタラクティブな表現とかをする時はJavaScriptで書き出したほうが利用しやすいです。

PHP

<?php
    $RSS = "http://front-end.hatenablog.jp/feed";
    $XML = simplexml_load_file ($RSS);
    $JSON = json_encode($XML);
?>

RSSを取得して、json_encode を使ってPHPの配列をJSON形式に変換します。

Javascript

var json = <?php echo($JSON); ?>;
var data = json.entry;
$.each(data,function(i){
    document.write(data[i].title + '<br />');
    document.write(data[i].link['@attributes'].href + '<br />');
    document.write(data[i].updated + '<br /><br />');
});

PHPで生成したJSON形式のデータを変数に格納します。
JSONの構造に合わせて取り出したい要素を指定すればOKです。

全体

<?php
    $RSS = "http://front-end.hatenablog.jp/feed";
    $XML = simplexml_load_file ($RSS);
    $JSON = json_encode($XML);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="inc/js/library/jquery-1.10.2.min.js"></script>
</head>

<script type="text/javascript">
   var json = <?php echo($JSON); ?>;
   var data = json.entry;
   $.each(data,function(i){
       document.write(data[i].title + '<br />');
       document.write(data[i].link['@attributes'].href + '<br />');
       document.write(data[i].updated + '<br /><br />');
   });
</script>
<body>
</body>
</html>