phpとJavaScriptでアメブロRSSをリアルタイムに表示

アメブロのRSSを表示させる際、JavaScriptのみでできるだろうと思っていたのですが、JavaScriptのみだと実装が難しく、ハマったのでまとめておきます。

JavaScriptのみでは簡単に他サイトのRSSを表示できない

先に結論を言うと、JavaScriptのみだとCORS(Cross-Origin Resource Sharing)の問題があって、他サイトのデータを取得してくることができません。。
別途サーバーを用意してCORSの問題をクリアしてあげることもできますが、結構難しく手間がかかります。

以前はGoogle Feed APIというサービスがあり、これを経由して取得すればOKだったのですが、廃止となりました。
代替案として、YQLというサービスもあったのですが、これも公式では廃止となってしまいました。

ということで、phpを使わざるを得ない流れになってます。

phpでアメブロRSSを取得して、ループで取り出す

アメブロRSSの情報をphpで取得し、最終的にJavaScriptで受け取っていきます。

アメブロのIDが必要になりますが、TOPページのURLから取得できます。
ameblo.jpの後に続く文字列がIDとなります。

https://ameblo.jp/[ここがID]/

実際に取得するphpは以下になります。

<?php 
    date_default_timezone_set('Asia/Tokyo');
    $url = "http://feedblog.ameba.jp/rss/ameblo/[アメブロID]/rss20.xml";
    $rss =  simplexml_load_file($url);
    $output = '';
    $i = 0;
    // 取得件数
    $max = 5;
    if($rss){
        foreach( $rss->channel->item as $item )
        {
            /**
            * タイトル
            * $item->title ;
            * リンク
            * $item->link ;
            * 更新日時のUNIX TIMESTAMP
            * $timestamp = strtotime( $item->pubDate ) ;
            * 詳細
            * $item->description;
             */
            if(!preg_match('/^PR:/',$item->title )){
                if($i < $max){
                    $timestamp = strtotime( $item->pubDate );
                    $date = date( 'Y.m.d',$timestamp );
                    $output .= '<li>';
                    $output .= '<a href="'. $item->link .'" target="_blank">';
                    $output .= '<span>' . $date . '</span>';
                    $output .= '<span>'.$item->title . '</a>';
                    $output .= '</li>';
                    $i++;
                }
            }

        }
    }

    echo '<ul class="newslist">'. $output . '</dl>';
?>

ul.newslistにliをループさせたものを入れ込んで、echoで出力させます。

以下のような感じで、dateの中身を変えてあげるとフォーマットが切り替わります。

• date('Y.m.d') ⇒ 2019.10.10
• date('Y年m月d日'); ⇒ 2019年10月10日

必要に応じて変えて使うと良いです。

参考

JavaScriptでphpの情報を受け取って表示

まずは、HTML上に受け取る箱を用意してあげます。

<div id="feed"></div>

そして、JavaScript（jQuery）のgetでphpにアクセスして受け取ったデータを入れ込みます。
先ほどのphpは、rss.phpとして保存しています。

$.get('./rss.php', function (data) {
  $('#feed').html(data);
})

JavaScriptの記述はめちゃくちゃ少なくて大丈夫です。
必要なデータはphpで取得してありますので。

まとめ

phpはあまり使いたくなかったのですが、これが一番楽な実装方法かと思います。
また、アメブロ以外のサービスでもRSSにさえアクセスできれば同様の処理で実装できるかと思います。

たまに「アメブロでブログをやっていて新しいホームページにリンクさせたい」という要望をいただくことがあります。
WordPressを用意してアメブロから引っ越ししてあげることもできますが、

• 予算が少ないので工数を抑えたい
• WordPressの使い方を覚えるのが大変
• 自サーバーがWordPress使えない
• DBがない

みたいな場合は、RSSでリンクさせてあげると楽でいいです。