google feed API遂に廃止か？！

サポート部の山本です。

先週大きなニュースがありました。

google feed APIが動かなくなっているということです。。。

正確には、廃止したのかはわかりませんが以前にも一旦廃止され、その後復旧するということがありました。
復旧するかもしれないという可能性に懸けるのも一つですが
この際別の方法で実装するのが良いかと思います。

ということで今回は代替方法をご案内します！

HTMLとJSを使い実装していきます。
コピペしていただくだけで、ブログなどのフィードを表示させられます。
wordpressのアイキャッチに設定している画像も出せます。

以下実装方法をご案内します。

表示させる条件として、サイトとブログなどのドメインが同じであることと
Wordpressをお使いいただいていることがございますので、ご注意ください。

別のドメインや複数表示させる方法は、別の機会で書こうと思います。

ステップ1：head内の記述

記事を表示させたいページのhead内に以下のコードを記述します。
※下記の「フィードのURL」にはブログのRSSフィードのURLを入れてください。

<!-- ニュースRSSフィード取得 -->
<script type="text/javascript">
$(function() {
    var setURL = 'フィードのURL'; //feedのURL
    var setNUM = 8; //表示件数
    var setID = 'feed'; //表示させる箇所のID
    xmlLoad(setURL,setID,setNUM);
});
function xmlLoad(_xmlUrl,_id,_num){
    DD = new Date();HH = DD.getHours();MM = DD.getMinutes();SS = DD.getSeconds();
    var xmlUrl = _xmlUrl+"?"+HH+MM+SS;  //キャッシュ対策のクエリを付与
    var main = this;
    $.ajax({
    url: xmlUrl,
    type: 'GET',
    dataType: 'xml',
    timeout: 10000,
    error: function(){
        _msg = 'error';
        xmlOpen(_msg,_id,_num);
    },
    success: function(_xml){
        main.xml = _xml;
        _msg = 'load';
        xmlOpen(_msg,_id,_num);
    }
    });
    return;
}
var xmlOpen = function(_msg,_id,_num){
    var main = this;
    var html = '';
    var ID = _id;
    var Num = _num;
    var userAgent = window.navigator.userAgent.toLowerCase();
    if(_msg == 'load'){
        xml = main.xml;
        var channelData = $(xml).find('channel')[0];
        $(channelData).find('item').each(function(i){
            if(i < Num){
            postTitle = $(this).find('title').text();//記事タイトル取得
            postLink = $(this).find('link').text();  //記事リンク取得
            //日付の取得
            publishedDate = $(this).find('pubDate').text();
            var pdate = new Date(publishedDate); //Dateクラス
            var pyear = pdate.getFullYear();   //年
            var pmonth = pdate.getMonth() + 1; //月
            var pday = pdate.getDate();        //日
            //日付を2桁表示に変更
            if (pyear < 2000) pyear += 1900;
            if (pmonth < 10) {pmonth = "0" + pmonth;}
            if (pday < 10) {pday = "0" + pday;}
            var postDate = pyear + "." + pmonth + "." + pday + " ";
            //サムネイル画像の取得
            var description = $(this).find('description')[0].firstChild.nodeValue;
            var thumbnails = description.match(/<img[^>]+>/gi);
            thumbnail = thumbnails[0];
            //html生成
html += '<li class="rss-thumbnail">';
html += '<p><a href="' + postLink + '">' + thumbnail + '</a></p>';
html += '<div class="meta">';
html += '<span class="date">' + postDate + '</span>';
html += '<div class="tit"><a href="' + postLink + '">';
html += '<span>' + postTitle + '</span>';
html += '</a></div>';
html += '</div>';
html += '</li>';
            }
        });     
    }else{
        //エラー時の表示
        html += '<li>通信エラー</li>';
    }
    $("#"+ID).html(html);
}
</script>
<style>.rss-thumbnail .date{display:none;}</style>

ステップ2：HTMLの記述

ページ上のRSSを表示させたい場所（body内）に以下を記述します。

<ul id="feed"></ul>

終わりに

以上で完了です。

今後も便利な機能を提供してくれることにgoogleには期待したいですが
今回のように、サービスが廃止されることもあります。

ブログなどを提供されている方にとって
記事の表示はかなり重要です。

弊社も柔軟に対応して、ご案内していければと思います。