Memo

複数のRSSなどのxmlファイルを静的なHTMLに表示させる方法(2014.8.20追記)

RSSなどのxmlファイルを静的なHTMLに表示させる方法あれこれへ定期的に「複数の場合はどうしたらいいですか?」と質問をいただくので、記事にしておきます。
一応サンプルもつくったんですが、複数となるとちょっとコツがいりますね(そら質問がよくくるわけだ…)

1年以上前の記事です。情報が古くなっている可能性があります。
現在Google Feed APIが使えなくなっています。

複数のXMLファイルをまとめて読み込み、それぞれ表示する

1つの読み込み用関数で、複数のブログ記事をそれぞれ表示させる方法です。

feedを読み込む部分を関数化し、読み込むファイルが増えたらその分読み込んで出力を繰り返す、という感じです。
スクリプトを短くしたりしたい場合に使えると思います。

サンプル1

/* 2014.08.20 追記 */

それぞれ違うIDに表示させたい場合

それぞれ違うIDを付与して表示させたい場合、

多次元連想配列でFeedとIDを指定し、それぞれ読み込んで出力、を繰り返す感じになります。
サンプルも作ったので、1と1-2をそれぞれ見比べてみてくださいね。

サンプルその1-2

/* 追記ここまで */

複数のXMLファイルをまとめて日付順に表示する

よく質問されるのがこのパターンでした。
実際にサンプル作ってみると、意外とややこしかったです。

一度それぞれのXMLファイルのデータを取得し、日付順にソート → ソートしたデータを設定した数だけ表示、という感じです。
XMLファイルのデータを一度表記できるように展開してからだと上手くソートが出来ませんでした。
こちらの記事を参考に書いてます。
JavaScriptの多次元連想配列はむずかしいですね…(多次元連想配列自体がややこしい…)

サンプル2

サンプル2の方はそのままコピペして、上部のURLや出力箇所のID等に設定を変更すれば使えると思います。

参考)
Google AJAX Feed API で複数のブログからフィードを取得して、しかも日付順に並び替えるコード – くらげだらけ

なにか不具合等ありましたらご連絡ください。

POSTED COMMENT

  1. saya より:

    いつもお世話になっております。
    こちらのjavascriptを参考に、外部のRSSを日付順に並び替え表示させていただいております。
    その中で一つ、日付順に表示しているはずなのに更新ボタンを押してしまうと、日付の並びがバラバラになってしまうのです。
    また、更新ボタンを押し続けると表示件数を設定してるにもかかわらず増減してしまいます。(8件表示にしているにもかかわらず、更新してしまうと3件表示になるのです)

    こちらに提示されているサンプルの方でも試させていただいたのですが、似たような現象が起こりました。
    もしなにか原因等わかりましたら、ご教授頂けますと幸いです。
    よろしくお願いいたします。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください