jqueryでブログのフィードを表示する(IEも見れるよ)

Pocket
[`evernote` not found]

あまり一般的でないネタだと思いますが、ここ数日大変はまったので情報をシェアします。
ブログなのどのRSS情報を読み込む時に、rssフィードなどを読み込んで表示させます。

その方法については、僕も記事にしたことがあったのですが、
[js]callback関数を使ってみた

今回はjGfeed.jsでは対応できずに、jQueryの.ajaxを使って処理を行わないといけない案件でした。

なにがしたかったかというと、rss.xmlを読み込んで記事のタイトルと、記事をまるまる(htmlソースも含め)再現したかったのです。

こんな感じ>>DEMO

前述のjGfeedですと、読み込める要素がGoogle Feed APIに依存してしまうというデメリットがあります。
タイトルなどは拾えますが、記事を完全に再現することはできないのです。

[追記]
うそのようです・・・Google Feed APIでもhtmlタグ付きのエントリーを拾えそうです。えっと、ここまで書いてあれなので、その辺の検証は後日しようと思います。ごめんなさい。
[追記ここまで]

そうなると、.ajaxなどでxmlをパースする必要がでてきますので、xmlを展開して、html要素を生成しなければなりません。

で、ここまではそれほど問題がないのですが、今回のキモとなるのが “content:encoded”という要素。ここに取り出したいタグ付きの記事本文が入っているんですけど、なかなか拾えないんです・・・特にIEでorz

ちなみに、rss.xmlはこんな感じです。一つの記事のものを抜粋しましたが、中段付近にあるのが今回拾いたいcontent:encoded要素です。

<item>
		<title>『BE ソーシャル!』出版記念斉藤徹氏講演会 in 長野</title>
		<link>http://meusonho41.com/blog/20121003_besocia/</link>
		<comments>http://meusonho41.com/blog/20121003_besocia/#comments</comments>
		<pubDate>Wed, 03 Oct 2012 13:33:51 +0000</pubDate>
		<dc:creator>4_1</dc:creator>
				<category><!&#91;CDATA&#91;イベント&#93;&#93;></category>

		<guid isPermaLink="false">http://meusonho41.com/blog/?p=187</guid>
		<description><!&#91;CDATA&#91;長野ソーシャルシフトの会が主催で、斉藤さんの講演会が決定しました。 ただただ楽しみで仕方ありません。 もちろん...  <a href="http://meusonho41.com/blog/20121003_besocia/" title="Read 『BE ソーシャル!』出版記念斉藤徹氏講演会 in 長野">Read more &#187;</a>&#93;&#93;></description>
			<content:encoded><!&#91;CDATA&#91;<p>長野ソーシャルシフトの会が主催で、斉藤さんの講演会が決定しました。<br />
ただただ楽しみで仕方ありません。<br />
もちろん、僕も参加させて頂きます。(もしかしたら裏方になるかもしれませんが)</p>
<p>参加申し込みは本日より先着35名となっておりますので、どうぞお早めに。</p>
<h4 class="subTitle"><span>開催概要</span></h4>
<p>●日時<br />
2012年12月7日(金) <br />
開場19:00<br />
開演 19:15<br />
終了 21:15<br />
※時間配分は予定です。</p>
<p>●会場<br />
長野市 生涯学習センター (TOiGO) 第1学習室<br />
〒380-0834 長野市大字鶴賀問御所町1271-3 TOiGO WEST 3F<br />
Tel:026-233-8080 / Fax:026-233-8081<br />
<a href="http://www.toigo.co.jp/access/">http://www.toigo.co.jp/access/</a></p>
<p>●参加費、定員<br />
2,000 円(35名:先着順)</p>
<p>●チラシPDFのダウンロード<br />
<a href="https://docs.google.com/open?id=0B_irC-xm0Wf2N2FiLTNDZ3d6SDQ">https://docs.google.com/open?id=0B_irC-xm0Wf2N2FiLTNDZ3d6SDQ</a></p>
<p>●申し込みフォーム<br />
<a href="http://kokucheese.com/event/index/55651/">http://kokucheese.com/event/index/55651/</a></p>
<p>詳しい情報などは長野ソーシャルシフトの会FaceBookページをご覧ください。<br />
<a href="http://www.facebook.com/naganosocialshift">http://www.facebook.com/naganosocialshift</a></p>
&#93;&#93;></content:encoded>
			<wfw:commentRss>http://meusonho41.com/blog/20121003_besocia/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>

IE以外の環境であれば、.find(“encoded”)と書けば拾えるんですけど、どうも協調性がない子がいまして。
退避策は、ググると色々でてきます。問題となるのが「:」なのでそれをエスケープする方法として、
.find(‘[nodeName=”content:encoded”]’).text()
とか
.find(‘content\\:encoded’)
とか

どれもできませんでした(涙)
この時点で、なんどIEを爆破してやろうと考えたことか・・・もちろんそんなことできませんけど。

で、たまたま見つけた方法がこれ

$(xml).find("item").children().each(function() {
   if ($(this)[0].tagName == "content:encoded") {
      contentItem = $(this).text();
    }
});

xmlを読み込んで、itemタグの子要素をぐるぐる回して、そのなかに “content:encoded”というタグがあったら、その中身をcontentItemという変数に代入すると。大変まどろっこしい方法ですが、これで、IE7以上でも表示されるようになりました。(ネイティブなIE6環境が手元になかったので確認できていないだけです)

.ajaxでXMLを読み込む場合、クロスドメインの問題などもありますのであまり実用性はありませんが、blog+スタティックなhtmlでのサイト構築時など同一ドメイン内であれば利用も可能ですし、今後xmlに限らす、jsonとかも含め、動的にhtml要素を生成する機会も増えてくると思うので、こういったテクニックは思えておきたいですね。

いや、しっかし、これは本当にはまった・・・

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。