MemoRSSなどのxmlファイルを静的なHTMLに表示させる方法あれこれ(2018.08.08追記)あけましておめでとうございました。本年もよろしくお願いいたします。去年後半、xmlを読み込んでは切ったり貼ったりする仕事が相次いでました。勉強になったので、サンプルや注意点、参考URLなどをまとめておきます。本当にメモ書きのようなものなので、JS部分のみ抜粋してます。詳しい書き方はサンプルのソース見てくださると助かります。APIが廃止されたため、このページで公開されている方法の一部は使用できません。現在はPHPを使う必要がありますのでご注意ください。使うPHPを使う同一サーバのXMLファイルを読み込むjQueryを使うその他xmlをjsで扱う場合に注意することなど外部サーバのXMLファイルを読み込む「ア○ーバブログの更新情報をサイトに載せたい!」なんて時に使えます。使うシンプルにデータ取得→HTMLに表示はこんな感じでできます。タグ内にある情報を全て表示してしまうので、CSS等での調整が必要だと思います。**/サンプル2がIE8以下で動いていないという指摘を受けまして、色々調べてみました。上記コードの20〜37行目を以下のように修正するとIE8以下でも問題なく動作するようです。}サンプル2-1(IE8以下対応のサンプルです)IE8以下はどうやら<![CDATA[~]]>で囲まれていないHTMLタグの書かれた要素の中身を取得する場合、$(xmlDoc).find(‘item’).eachを使って参照しようとすると上手く参照出来ないようです。古い記事ですがこちらにあるように、thisを使った参照の仕方だと上手くいかないみたいです。最初のサンプルではdescription以外はきちんと取得出来ていたので、RSS側のdescriptionが<![CDATA[~]]>で囲まれていないとノードの取得が上手くできない、もしくはタグとして認識してしまうのかもしれないな、と。**/自分で書くのが面倒!よくわからない!場合はプラグインで。これ系のプラグインは色々有りますが、色々試した中では「zRssfeed」がカスタマイズしやすくて便利でした。APIを使わないで、外部サーバのXMLファイルを読みに行く為のPHPを設置する方法もあります。feed2jsというのがあるんですが、これがサクッとできて一番お手軽ですね。php側で表示数や日付などを設定できます。表示するHTMLには吐き出されたscriptタグを書くだけ。CSSの設定がちょっと面倒なうえ、php側の設定画面が英語なのでちょっと難しいです。Feed(フィード)を表示する同一サーバのXMLファイルを読み込むjQueryを使うjqueryには便利なajax関数があるので、そちらを使って読み込んだりします。いう感じで「:」の前に「\\」を追加することで取得出来ます。xml内にある<dc:creator>などの要素の取得については、2014.11.05追記をご確認ください。いうタグがあった場合。いう指定で取得出来ます。jQueryを使わない使わないでやる方法を色々と試してみたんですが、ブラウザによって読み込みの仕様が違うため、難しくて断念しましたorzjQueryさまさまですね...。APIを使って取得する、という方法になるのでしょうか。その他xmlをjsで扱う場合に注意することなどローカルでxmlを参照する場合、表示するhtmlより下位の階層にあることセキュリティ的な問題で、ローカルで参照する場合は下階層に無ければ参照できません。Chromeはローカルでxmlを参照することができないできるようにする方法ももちろんありますが、セキュリティの問題もありますので、自己責任でお願いします。「xmlを更新しても更新されない!」場合はキャッシュを読んでしまってる可能性があります。xmlファイルの末尾にタイムスタンプのクエリなどを追加しておくと回避できます。「jsでおかしい部分はないのに、うまく読み込めない!」場合はxmlファイル自体がパースエラーを起こしている場合もあります。xmlファイルは「&」をそのまま書いているとエラーになります。「&amp;」にしておきましょう。パースエラーかどうかはxmlファイルをfirefoxなどのブラウザで読み込むことで確認できます。xmlに記載したタグを表示したいxmlの表示したい部分を<![CDATA[~]]>で囲むと幸せになれます。文字化けする時はJSや読み込むXML、表示するHTMLの文字コードをチェック結構それが原因だったりします。Keyを取得します」とあるんですが、どうやら不要のようです?(ちょっと曖昧)サンプルではソースを見ていただければ分かる通り使ってはいませんが、動いてはいます。不要になったようです。Keyは要らない、という記述はみつけましたが。工事中ある日突然必要になる可能性もなきにしもあらず。Foundで上手く探せないですね。こちらは引き続き探しておきたいと思います。keys.」必要としないようです。*/こんなもんでしょうか。去年このブログを開設したけど、そんなに書かなくなってしまい。原因を考えて、webだけにくくってるからかなーと思い至ったので、それ以外のことも書いていきたいなーと思います。いいつつ、webの記事で始まりましたが、気にしないでください。*/複数のURLを指定する場合についてよくご質問をいただくので、記事にしました。・複数のRSSなどのxmlファイルを静的なHTMLに表示させる方法どうぞご参考までに。*/<dc:creator>などの要素を、$(xml).find(‘dc\\:creator’)で取得できていたのですが、Chromeで取得できなくなっていたので対策についての追記です。this).text();で取得できます。this)[1].textContent;で取得できました。xml内の「comments」という文字列を含むタグから探して参照しているので、xmlの内容によっては[1]の部分は数字が変わります。IEやfirefoxの場合はこれまでと同じ$(xml).find('dc\\:creator')で取得できます。ブラウザで取得方法をかえるので、ブラウザ判定を追加してこんな感じでできます。this)[1].textContent;//コメント数取得}そういえば、SuefaceRTのIEはMSIEで判別されませんでした。16:52いつも参考にさせていただいています。質問なのですが、サンプル2がIE8以下で動かないのはなぜでしょうか。確認していただけると助かります。12:30お返事だいぶ遅くなってすみません。対策を追記しましたので、ご確認ください。20:11仕事でウェブサイト作るのに大変参考になりました。ありがとうございます。見ると他にもいろいろ役に立つ記事があるのでブックマークします。育児頑張ってください。12:31ありがとうございます。参考にしていただけたら幸いです。19:07いつもお世話になっています。使った外部RSSを読み込む方法をいつも使用させていただいております。今回、複数のRSSを別のDIVに表示させたいと考えております。そこでスクリプトごとコピーし何度か書き換えを試みたのですが、どうしてもうまくいきません。恐れ入りますが、方法がございましたらお教えいただきたく存じます。お忙しい中お手数おかけいたしますが、よろしくお願いいたします。01:28こんにちわ。返信が遅くなってスミマセン。以下の記事など参考になるかもしれません。12:49ブログのRSSを抜き出し、別ページに更新情報として出すものを探してました。あったのですが、どうもかゆいところに手がとどかに、、しかし、ここへきて、これが最適だと思いました!まだ、テストしているところですが、ひとつ質問あります。12:31toshikiさま初めまして。ご質問のブログの本文の文字数を調整したい、ということですが、このスクリプトで出来ることは「RSSに記載されている物を、形を整えて表示する」ということだけなんですね。RSS側でdescriptionを全文配信していれば、全文を表示することができますし、文字数をsubstr()などで制限して表示することもできます。RSS側で100文字までしか配信していない場合は、100文字までしか表示出来ません。RSS側で調整するか、JavaScriptで制限するか、のどちらかになるかと思います。その辺りはお好みになると思いますので、お好きな方法で設定してみてください。15:17初めまして。質問させていただきます。20:55返信が遅くなりました。複数のURLを指定する場合はまた違う書き方をしなければいけません。コメント欄では長くなってしまうので、記事にしました。複数のRSSなどのxmlファイルを静的なHTMLに表示させる方法こちらをご参考ください。20:19こんばんわ勉強させてもらっています。ありがとうございます。さんに聞いたほうが良いと思い。書かせてもらいました。10:03toshikiさんコメントありがとうございます。以下の記事で複数のfeedをそれぞれ表示させる方法について書きましたので、ご参考ください。Koutsukiさん早速、ありがとうございます。試しにさっそくしてみると、うまくできました。そこで、下記の2点について、疑問点がでてきました。試したたり、ググってみては試しでもうまくいかなかったです。1)ここにも書いてあるキャッシュの件です。更新と表示のタイムラグですね。複数のRSSなどのxmlファイルを静的なHTMLに表示させる方法のとき、どうも挿入場所がわるいのか、うまくできません。//キャッシュ対策のクエリを付与を挿入しています。表示させるときの設定をおしえていただければと思います。すいません、あと2つ教えていただければと、、、よろしくお願いいたします。01:44tosikiさんすみません、帰省でPCのない生活をしていたので、返信が遅くなりました。google.feeds.Feed(rssUrl);とすることで解決できます。i++)にすることで解決できると思います。result.feed.entries.lengthで取得できた記事の数を返します。こちらのサンプルで上記部分を修正しているので、参考にしてください。18:07いえいえ、とんでもないです。今回も、ありがとうございます。若干、修正して、みごとに完成しました。ほとんど、素人で、見比べながら色々やって、なんとかできました〜。