BLOG スタッフブログ

【Google Feed API廃止に対応する】PHPとJavascriptでFeedを取得する方法。

Category | Blog
Tag | / / /
/ 6,165views

こんにちは、制作の奥田です。
2015年12月2日に事件は起きました。

Google Feed Apiが突然廃止され、Google Feed Apiを使用してアメブロなどのFeedを取得していたサイトで軒並み403アラートを表示する事態に陥りました。
弊社でも幾つかアメブロのFeedを取得しているサイトが存在していたので対応に追われました。
今回はPHPを使った取得方法と、PHPが使えない場合のJSONPを使った取得方法をご紹介いたします。

Table of contents

  1. PHPによるFeedの取得
  2. APIにしてJSONPでのFeedの取得

PHPによるFeedの取得

これはいろいろなサイトで説明されていますが、アメブロのFeedの例をご紹介します。
まず、simplexml_load_file()という関数を使いFeedをオブジェクトとして取得します。
アメブロのFeedにはタイトルが「PR:」から始まる広告が入っているのでそれを除外し、ループで回しリストに代入します。
最後に出力するという流れです。
以下のソースの[アメブロID]の箇所を変更し、rss.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 .= '<time datetime="' . $item->pubDate . '">' . $date . '</time>';
                $output .= '<a href="'. $item->link .'" target="_blank">' . $item->title . '</a>';
                $output .= '</li>';
                $i++;
            }
        }
        
    }
}

echo '<ul>'. $output . '</ul>';

あとは取得したいページでAjaxで取得するだけです。
取得したい箇所にdiv#feed要素を追記し、Ajaxで取得します。
(jQueryは必須です。)

<div id="feed"></div>
;(function($){
  $(function(){
    $.get('rss.php',function(data){
      $('#feed').html(data);
    })
  })
})(jQuery);

これで表示はできるはずですので、CSSでスタイリングしてあげるだけです。

APIにしてJSONPでのFeedの取得

ただ、PHPが動かないサーバーでの対応やsimplexml_load_file()が使えないサーバーが存在するので上記の方法ではうまくいかない場合があります。
そんな場合はPHPが使えるサーバーでJSONで出力し、それをJSONPで取得します。
※以下のサンプルはPHPが使えるサーバーが他に有る場合に可能です。
以下のファイルをapiとしてPHPが動くサーバーに設置します。

<?php
date_default_timezone_set('Asia/Tokyo');

$url = (isset($_GET['url'])) ? $_GET['url'] : NULL;
$callback = (isset($_GET['callback'])) ? $_GET['callback'] : 'callback';
$output = array();
$i = 0;
if(isset($_GET['url'])){
     $max = (preg_match('/^\d$/',$_GET['max'])) ? $_GET['max'] : 5;
}

if(!empty($url)){
     $rss =  simplexml_load_file($url);
     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 );
                    $link = (string) $item->link;
                    $pubDate = (string) $item->pubDate;
                    $output[$i] = array(
                         'title' => $item->title ,
                         'link' => $link,
                         'pubDate' => $pubDate,
                         'date' => $date,
                    );
                    $i++;
               }
          }
          
     }        
}
header( 'Content-Type: text/javascript; charset=utf-8' );
echo $callback . "(" . json_encode($output). ")";

取得したいサイトで同じく要素を追記し、以下のスクリプトを書くだけです。

<div id="feed"></div>
<script type="text/JavaScript">
;(function($){
  $(function(){
    var api = "APIを設置したURL";
    var url = "http://feedblog.ameba.jp/rss/ameblo/[アメブロID]/rss20.xml";
    var max = 5;
    var callback = 'callback';
    $.ajax({
            url:  api + '?url=' + url + '&max=' + max  + '&callback=' + callback,
            dataType:"jsonp",
            success:function(data){
                var html = '<ul>';
                for(var i in data){
                    html += '<li><time datetime="' +  data[i].pubDate + '">' +  data[i].date + '</time><a href="' +  data[i].link + '" target="_blank">' +  data[i].title + '</a></li>';
                }
                html += '</ul>';
                $('#feed').html(html);
            }
        });
   
  });
})(jQuery);
</script>

後は同じくCSSでスタイリングしてあげるだけです。

Category | Blog
Tag | / / /
Author | Mineo Okuda / 6,165views

Company information

〒651-0087
神戸市中央区御幸通 8-1-6 神戸国際会館 22F

Contact us

WEBに関するお問い合わせは
078-570-5755 (10:00 - 18:00)