クロスドメインを突破してRSS(XML)を取得して表示 | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

クロスドメインを突破してRSS(XML)を取得して表示する必要があったので対応したときのメモ。

あるサイト姉妹サイトのRSS（xml）を拾って記事一覧を表示させたかったのですが、ドメインが別だったため、いきなりクロスドメインの壁にぶち当たってしまいました...。
最初、jquery.xdomainajax.jsというライブラリで対応しようとしたのですが、xmlデータを取得できたものの、どうやっても生成できなかったのでこの方法は諦めざるを得ませんでした。

結局下記のサイトを参照して無事xmlを取得して生成できたのでメモしておこうと思います。

クロスドメインの制約回避

ドメインに中継用のPHPを用意。

<?php
    if(isset($_GET["url"])) readfile($_GET["url"]);
  ?>

読み込み用のjQueryを用意
urlencode.netでエンコードできるので、例えば「http://560days.com/atom.xml」をUTF-8でエンコードすると「http%3A%2F%2F560days.com%2Fatom.xml」となるので、これをurlに設定。

$(function() {
      $.ajax({
        type: 'GET',
        url:'/ajax.php?url=エンコードしたファイル名',
      //【例】url:'/ajax.php?url=http%3A%2F%2F560days.com%2Fatom.xml',
      dataType: 'xml',
      success: function(xml) {
        $(xml).find("entry").each(function(i){
          if ( i >=5  ) {	//表示件数の設定　満たしたら処理を抜ける
            return false; 
          }
          
          /* 記事タイトル */
          var item_title=$(this).find("title").text();
          /*リンク*/
          var item_link=$(this).find("link").text();
          /* HTML生成 */
          if(item_title!="") $("<li></li>").html("<a href='"+item_link+"'>"+item_title+"</a>").appendTo("ul.entry-list");
        });
      },
        fail: function() {
      }
    });
  });

上記jQueryにクラス「entry-list」に生成した要素を追加するように書いているので、対応するためのHTMLを書きます。

<h3>エントリー一覧</h3>
    <ul class="entry-list"></ul>

無事rssを取得してエントリー一覧を表示することができました。