jquery.xdomainajax.jsを使ったRSS Feedの埋め込み [plug-in] [jQuery]

2016/08に公開

クロスドメインのhtmlファイルなどを抽出できるjquery.xdomainajax.jsを使ってRSS Feedを埋め込む方法をご紹介します。
ここでは割愛しますが、このようなプラグインを使わずにphpなどを使って実現する方法もありますので、興味がありましたら調べてみてください。

jquery.xdomainajax.jsはjqueryのプラグインなので、jQueryライブラリが読み込まれていることが前提です。

ちなみに以前はGoogle Feed APIを紹介しておりましたが、 2016/09/29に終了するそうです(参考:Google Feed API 提供終了のお知らせ - Google Developers Japan)。
2016/08現在は表示されていると思いますが、いずれ表示されなくなると思われますので早めの対処をお勧めします。


sample

"ねとらぼ"のフィード

    サンプルとしてITmediaねとらぼ」のフィードを表示しています。


    html

    <ul id="rss"></ul>
    

    ※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

    RSSフィードを表示させる親タグをhtmlに設置します。タグはulに限りません。適当なid名やclass名をつけておくと処理しやすいと思います。
    cssについては、適宜設定してください。


    js

    $(document).ready(function(){
        $.ajax({
            url: 'RSSフィードのURL',
            dataType: 'xml',
            type: 'GET',
            success: function(res) {
                var xmlText = res['responseText'];
                var xmlDoc = $.parseXML(xmlText);
                console.log(res);
                var listdata='';
                var c = 0;
                $(xmlDoc).find('item').each(function(){
                    var text=$(this).text();
                    var url=$(this).attr('about');
                    var date=$(this).find('date').text();
                    text=text.substring(0,text.indexOf('http'));
                    listdata+='
  • '+text+''+date+'
  • '; c++; if(c>=5) return false; //5件まで表示 }); $('#rss').html(listdata); } }); });

    ※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

    1. 2行目(および24行目):ajaxを利用するので$.ajax()を記述。
    2. 3行目:RSSフィードのURLを設定
    3. 4〜5行目はお約束
    4. 6〜22行目:ちゃんとデータが取得できたときの処理
    5. 7〜8行目:データをxmlに変換
    6. 10行目:htmlに加工したデータを格納するための変数
    7. 11行目:フィードの件数をカウントするための変数(全件表示する場合は不要)
    8. 12〜20行目:データをhtmlに加工するための処理。xmlのitemタグ(RSSフィードによってentryだったりいろいろ)を見つけてきて処理を繰り返す。
    9. 13〜15行目:itemタグ(RSSフィードによってに違う)ごとにjQueryで取得したデータを変数に格納する(item内のタグもRSSフィードによってちがうので適宜書き換える)
    10. 16行目:サンプルで使ったRSSフィードの場合、記事タイトルがタグで囲まれておらず、表示したくない文字列とともにitemに直に記述されているため、不要な文字列を削除
    11. 17行目:htmlタグを付加して変数listdataに格納
    12. 18〜19行目:格納したフィードの件数をカウントして、上限(このサンプルでは5件)を越えたら繰り返しを抜ける(全件表示をしたいときは不要)
    13. 21行目:htmlソース内のid[rss]に変数listdataの中身を表示
    • クロスドメインやスクレイピング、ajaxやYQL(SQL)、xml(、json、api)といった用語や使い方の解説は割愛します。必要であればgoogle先生に訊いてみてください。
    • フィードの形式によってはうまく読み込めないことがあるかもしれません。
    • YQLに依存するので、Google Feed APIのようにサービス提供が終了したりすると、表示しなくなります。
    • このようなプラグインを使わなくても、自動でコードを吐き出してくれて、そのコードをコピペするだけでフィードをwebページに貼り付けることができるサービスもあります(ただし、商用利用は何らかの制限があったりするので、業務で使用する際は特に利用規約をきちんと確認しましょう)。

    戻る

    Top