jqueryにてrssを取得して表示する方法

前へ 次へ
このQ&Aのポイント
  • 初心者でも簡単にjqueryを使ってrssを取得し、表示する方法について解説します。
  • 指定したURLのrssを取得して表示するコードを書いたのですが、特定の環境では正常に表示されない問題があります。解決策を教えてください。
  • ローカル環境でSafariを使用している場合には正常に表示されますが、サーバにアップすると表示されなくなります。どうすれば全環境で表示させることができるでしょうか？
回答を見る
  • ベストアンサー

jqueryにてrssを取得して表示

初心者です。 下記コードで指定した情報を得て表示させることができるのですが、url部分を書き換え、rssを見に行かせると表示されなくなります。 ただし、ローカルの環境(MacOSX)でsafariで表示させた時には表示されます。 （しかし、safariでもサーバにアップすると表示されません） どの環境でも表示させたいのですが、どうすればいいでしょうか？ どなたか詳しい方、ご教示ください。よろしくお願いいたします。 （一部ダミーの日本語に置き換えて説明しています） url: 'ファイル名.xml',　 →　表示OK 　 url: 'http://feedblog.ameba.jp/rss/ameblo/フォルダ名/rss20.xml', 　 →　ローカル環境でsafariのみOK ---ここから <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample3</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ url: 'ファイル名.xml', dataType: 'xml', success : function(data){ $("item",data).each(function(){ $("dl").append("<dt><a href='"+$("link",this).text()+"'>"+$("title",this).text()+"</a></dt><dd>"+$("description",this).text()+"</dd>"); }); } }); }); </script> </head> <body> <dl></dl> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

ローカル環境では、クロスドメインアクセスをチェックしないという ブラウザーもあります。 ※クロスドメインアクセスのセキュリティ制限は、もともと、なりすまし や誘導、ごまかし等で自分の意図しないサーバーに情報が送られるのを 阻止するためにあると聞いたような気がします。ローカルにあるページなら 他人がWeb経由でアクセスする事は出来ないので、クロスドメインアクセス制限 不要とゆう事じゃないでしょうか、昔はローカルであると偽装してクロスドメイ ンアクセス可能にさせる技もあったんですが、今のブラウザーだと無理です。

studioy_new
質問者

お礼

なるほど、そういう経緯があったのですね。何度もありがとうございます。大変勉強になりました。

その他の回答 (1)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

もろに、クロスドメインアクセス制限だと思うんですが．．． 　普通、自身のサイト（同一ドメイン）以外のファイルはAJAX（XMLHttpRequest)でアクセスする事は出来ません。 　（最新のブラウザーでは、通信先が対応してれば、リクエストヘッダーにAccess-Control 　　のパラメーターを付加して出来るらしいですが、そんなサイトはまだみかけません） （対策） となると、サーバー側のプログラムを組むとか、GoogleさんのAPIサービス使うとかしないとでけません。 （ご参考に） http://code.google.com/intl/ja/apis/feed/v1/index.html

studioy_new
質問者

お礼

非常に初歩的な質問に丁寧に答えて下さり、ありがとうございました。 なるほど、同一ドメイン以外はダメなのですね…。 でも、なぜローカル環境でsafariでは表示できたのでしょう？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • SafariでPHPソースがそのまま表示される

    Safariでindex.phpを開くとソースコードがそのまま表示されてしまいます。 拡張子をphpとしているだけでソース内にはphpスクリプトは記述しておりません。 なぜでしょうか？ ※ファイル名をindex.htmlに変えると正しく表示されます。 Windows 7 Home Premium 64bit Safari5.1.5 ソースコードのエンコーディング：utf-8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>テストtitle> </head> <body> <h1>テストページ</h1> </body> </html>

  • cssがIE6で適用されない理由は

    教則本を見てcss/xhtmlでサイトを作ったのですが、 （教則本がIE7以降対応だった為） safari firefoxd IE7では表示がうまくいくのですが、 IE6では全くcssが適用されないです。 少し調べたところこの辺の記述に問題があるのかなと思っています。 誰か教えて下さい。 ............................................................................... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jap" lang="jap" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> ....................................................................

    • ベストアンサー
    • HTML
  • ＲＳＳがＩＥ7で表示できません。

    ホームページを制作して日が浅い者なのですが、日記ブログのタイトルをRSSで読み込んで表示しようとしています。 Firefoxではちゃんと表示されるのですが、IE7開いてみると取得できず、白いままなのです。 <IFRAME>の中に表示させてるのですが、これが原因なのでしょうか？ 一人で解決できず、困っています。どうかご教授下さい。 宜しくお願いいたします。 ■<IFRAME>で読み込んでいるページのソースです↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>**********</title> <link rel="stylesheet" href="***************" type="text/css" media="screen" /> <style type="text/css"> <BODY style="overflow:hidden;"> <script language="JavaScript" src="http://rss.callbee.com/sjis_feed2js.php?src=http%3A%2F%2Fcross123.chicappa.jp%2Fblog%2F%3Fmode%3Drss&chan=n&num=3&desc=0&date=n&targ=y" type="text/javascript"></script> <noscript> <a　href="http://rss.callbee.com/sjis_feed2js.php?src=http%3A%2F%2Fcross123.chicappa.jp%2Fblog%2F%3Fmode%3Drss&chan=n&num=3&desc=0&date=n&targ=y&html=y">View RSS feed</a> </noscript> </BODY></HTML>

  • Shift_JISのことろをすべてsjisに

    しても大丈夫でしょうか？ たとえば以下のように書いて大丈夫でしょうか？ 本来どのように書くべきでしょうか？ <?xml version="1.0" encoding="sjis"?>のsjisと <meta http-equiv="content-type" content="application/xhtml+xml; charset=sjis"/> のsjisの2箇所です。 <?xml version="1.0" encoding="sjis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=sjis"/> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="content-script-type" content="text/javascript"/> <title>sjis</title> </head> <body> <p>これは文字化けのテストです</p> </body> </html>

    • ベストアンサー
    • HTML
  • firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。

    初めて書き込みで質問する段階の者です。 ヤフーオークション用ページをhtml内にcssを書いて作成しておりましたが、firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。（ファイルはローカルでデスクトッップに置いてあります。） 調べながらの作業で解決出来ず困っております。 書き方に問題があるはずですが、わかりませんでした。 （未チェックですが、恐らくIE関係も全滅だとは思います。） ひとまずsafariをクリアーできたらと思っておりますので ご存知の方、ご教授お願いします。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ヤフーオークションページ</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="css/import.css" media="all" /> <style type=" text/css"> </style> </head>

    • ベストアンサー
    • Mac
  • 下記のタグの中で必要ないのはありますか？

    (1)　<?xml version="1.0" encoding="UTF-8"?> (2)　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3)　<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4)　<head> (5)　<title>●●●●●●●●</title> (6)　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7)　<meta http-equiv="Content-Style-Type" content="text/css" /> (8)　<meta name="robots" content="INDEX,FOLLOW"> (9)　<meta name="description" content="●●●●●●●●"> (10)　<meta name="keywords" content="●●●●●●●●"> (11)　<meta name="content="●●●●●●●●" /> (12)　<meta http-equiv="Content-Script-Type" content="text/javascript"> (13)　<meta http-equiv="Content-Style-Type" content="text/css"> (14)　<link href="css/A1.css" rel="stylesheet" type="text/css" /> (15)　<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  • XHTML　meta属性　文字化け

    XHTMLを勉強しています。 以下のように記述して表示すると タイトルの部分が文字化けします。 何故でしょうか <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページの作り方</title> <meta name="description" content="初心者のためのホームページテスト" /> <meta name="keywords" content="ホームページ,作成,初心者" /> </head> <body> テスト </body> </html>

    • ベストアンサー
    • HTML
  • jqueryについて質問です。

    jqueryについて質問です。 過去こちらにお世話になりまして、一つの質問を解決していただきました。 しかしまた、わかったつもりになっていただけのようでして、再度問題が出てしまいました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="main.css"></link> <script type="text/javascript" src="accordian.pack.js" charset="UTF-8"></script> <script type="text/javascript" src="jquery-1.3.2.min.js" charset="UTF-8"></script> <script type="text/javascript" src="smartsticky.js" charset="UTF-8"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ 　　　　　new Accordian('basic-accordian',5,'header_highlight'); }); </script> このように記述しましたが、どちらも作動しないという状態になってしまいました。 smartsticky.jsが、元々は<SCRIPT>内に書かれていたものを、まとめて外部に出したような感じだとは思うのですが、それに対しての対処が思いつきません。見ての通りjQuery.noConflict();を使っても見たのですが、まるで効果なしです・・・ accordian.pack.jsとsmartsticky.jsをバッティングさせずに上手く同時に動かす手段はありますでしょうか？ ちなみにこのページのscript自体はこの記事をのものです。 組み込みもこの記事を参考に行っています。 http://solidstate.jp/ContentsDisplay/floatingBox/script_147.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html

  • JQuery の CrossSlideを設置したのですが IEでだけ表示できません。

    JQuery の CrossSlideを設置したのですが IEでだけ表示できません。 FireFoxでもSafariでも表示できています。 ブラウザのエラーでは 「メッセージ: 'plan[...].src' は Null またはオブジェクトではありません。」 とでています。 phpファイルに設置しているのですが、それが原因なのでしょうか? IEはバージョン8です。 javascriptがまったく分からない為、設置されている方のソースをそのままコピペで使用しているのですが... 原因が分かる方おられましたら、アドバイスおねがいします。 ソース -head- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>○○</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.cross-slide.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> -body- <script type="text/javascript"> $(function(){ $("#topimgbox").crossSlide({ sleep : 15, fade : 2 },[ { src : '1.jpg' }, { src : '2.jpg' }, ]); }); </script> <div id="topimgbox">Loading...</div> 設置されている方々のサンプルはIEで見ましたので、自分の設置の仕方が原因だと思うのですが...

  • jqueryとlightboxが一緒に動作しない

    jqueryとlightboxを1頁内に記述しているのですが、どちらか一方だけしか動作しません。 jqueryの記述の箇所とlightboxの記述の箇所を上下させると片方が動作し、片方が動作しないという具合です。 最後に設定した方が実行されるようです。どこを修正すればいいのかまったくわかりません。 両方動作させることはできませんか？ ソースコードは以下のようになっています。 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta name="Keywords" content="XXX,XXX" /> <meta name="Description" content="XXX,XXX" /> <title>XXXXXX</title> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="XXX.css" type="text/css" /> <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> <!--menu_headクラスを持つp要素にマウスオーバーされた時に、menu_bodyクラスを持つ要素をスライドする--> $(function() { 　　$("#menu_list p.menu_head").mouseover(function() { 　　　　$(this).css({backgroundImage:"url(img/left-side-a.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); 　　　　$(this).siblings(); 　　}); }); </script> <!-- コメント --> <link href="css/lightbox.css" type="text/css" rel="stylesheet" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <!-- コメント --> <style type="text/css"> /* */ }/* <![CDATA[ */ a img{border:0 none} /* ]]> */ </style> </head> 宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する