質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
RSS

RSS(Really Simple Syndication)はブログのエントリやニュースの見出し、標準のフォーマットの音声やビデオなどを発行するために使われるウェブフィードのフォーマットの集合体です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

6020閲覧

jqueryでRSSを取得してくる方法

ry_xxx

総合スコア19

RSS

RSS(Really Simple Syndication)はブログのエントリやニュースの見出し、標準のフォーマットの音声やビデオなどを発行するために使われるウェブフィードのフォーマットの集合体です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/02/16 07:20

編集2017/02/16 08:13

###前提・実現したいこと
googleAPIのサービスが終了したため、jqueryでRSSを取得してこようとしているのですが、
やり方がよく分かりません。

ネットに落ちている方法でやっているのですが中々うまくいかず困っています。
サイトはwpでできています。が、wpを入れていないサイトも崩れているところがありますのでphpを関与せずに表示させたいと思っております

###発生している問題・エラーメッセージ
jqueryを入れても動きません・・・

エラーメッセージ

###該当のソースコード

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.1.1.min.js"></script> <script type="text/javascript"><!-- $(function(){ // Set URL var maxFeed = 10; var urls = [ 'http://fukuoka-roudoukyoku.jsite.mhlw.go.jp/rss/fukuoka-roudoukyoku-news.xml', 'http://fukuoka-roudoukyoku.jsite.mhlw.go.jp/rss/fukuoka-roudoukyoku-event.xml' ]; // Get RSS var arrFeed = new Array(); var cntFeed = 0; for ( var urlCnt = 0; urlCnt < urls.length; urlCnt++ ){ $.ajax({ url : urls[urlCnt], dataType : 'xml', success : function(xml) { // Get Feed $(xml).find('item').each(function(){ var title = $(this).find('title').text(); var link = $(this).find('link').text(); var date = $(this).find('pubDate').text(); // Date Format date = getFormatDate(date); // Set Array arrCnt = arrFeed.length; arrFeed[arrCnt] = new Array(); arrFeed[arrCnt]['date'] = date; arrFeed[arrCnt]['feed'] = '<dl><dt><a href="' + link + '">' + date + '</a></dt><dd><a href="' + link + '">' + title + '</a></dd></dl>'; }); cntFeed++; exeDispFeed(); }, error : function() { // Error //$('#disp_area').append('<p>Not Read Feed</p>'); cntFeed++; } }); } // Feed Disp Function var exeDispFeed = function(){ // Feed Disp if (cntFeed >= urls.length) { // Sort arrFeed.sort(function(a, b) { return (a.date > b.date) ? -1 : 1; }); // Disp for ( var feedCnt = 0; feedCnt < arrFeed.length; feedCnt++ ){ if (maxFeed <= feedCnt) { return; } $('#disp_area').append(arrFeed[feedCnt]['feed']); } } }; // Day Format var getFormatDate = function(date){ var getDate = new Date(date); var year = getDate.getFullYear(); var month = getDate.getMonth() + 1; month = ('0' + month).slice(-2); var day = getDate.getDate(); day = ('0' + day).slice(-2); var dispDate = year + '/' + month + '/' + day + '/'; return dispDate; }; }); --></script>

表示させたいところにiDを入れています。
<dl id="disp_area">
</dl>

###試したこと
フッターphpに書いています。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/02/16 08:06

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、エラーは出ていませんか?デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error
kei344

2017/02/16 08:12

バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
kei344

2017/02/16 08:13

また、取得するRSSは同じドメインのものでしょうか。
ry_xxx

2017/02/16 08:16

rssのドメインが.jpで、表示サイトが.comになります・・
guest

回答1

0

ベストアンサー

サーバのドメインが違う場合、HTTP レスポンスヘッダをRSSのあるサーバ側で設定しないとデータの取得が出来ません。

【HTTP アクセス制御 (CORS) - HTTP | MDN】
https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control

それが出来るならあとはRSSを読んで表示するだけです。

【Google Feed APIを使わずXMLHttpRequestでクロスドメインのRSSを取得する方法 まとめ |】
http://dwm.me/archives/4787

上記記事のように中継サーバを使う方法もありますが、それなら最初からサーバでRSSを読む方法に書き換えるのが良いです。

【【jQuery + PHP】クロスドメイン対応版:Google Feed API の代替案を紹介します。 - ONZE】
http://on-ze.com/archives/5062

【「Google Feed API」の代替として「rss-php」でRSSやAtomフィードを取得・表示する – lesson me】
http://www.lesson5.info/?p=392

wpを入れていないサイトも崩れているところがありますので

上記がどういう意味かがわからないのですが、WordPressで読んでしまうのが一番手早いとは思います。

【【WordPress】外部サイトのRSS情報を取得して表示させる方法。 - ONZE】
http://on-ze.com/archives/2636

【WordPressで外部サイトのfeedを取得する@WordPress - ショウジンブログ】
http://blog.showzine.co/entry/magpie-rss-wordpress

【wordpressでRSSフィードを取得して表示する方法 – いつか誰かの役に立つかもしれないweb制作屋の備忘録】
http://blog.raizzenet.com/how-to-retrieve-rss-feeds-in-wordpress/

投稿2017/02/16 20:29

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ry_xxx

2017/02/17 01:05

御回答ありがとうございます。 参考にさせていただきます。 wpを入れていないサイトも崩れているところがありますのでという意味は、 ここで質問したサイト以外のWordpressを導入していない静的なサイトもあるのでという意味になります。 静的なサイトでも取得させる方法はありますでしょうか?
kei344

2017/02/17 07:42

ドメインが同じならJavaScriptで可能ですが、違うならPHPなどサーバサイドが必要になると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問