© 2025 JWS

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

  • JavaScript
  • PHP

目次

  1. JavaScript のみでは簡単に他サイトの RSS を表示できない
  2. php でアメブロ RSS を取得して、ループで取り出す
  3. JavaScript で php の情報を受け取って表示
  4. まとめ

アメブロの 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 でリンクさせてあげると楽でいいです。

Share

Blogs