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

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

ただいまの
回答率

90.51%

  • jQuery

    8133questions

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

  • RSS

    166questions

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

jQueryでRSSの本文全文を表示する方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,896

grasshopaTW

score 9

これまで静的なwebサイトにwordpressの投稿記事をGoogle Feed APIで表示させていたのですが、
jQueryでのRSS表示に切り替えたいと思っています。
他サイトのコードを参考にさせていただいてほぼ表示できたのですが、本文を、画像を含めた全文表示する方法がわからず、
ご教授よろしくお願いいたします。

※フィードの取得はGoogle Feed APIの時は、「content」でよかったと思うのですが、
下のコードでは本文を表示してくれません。
(代わりに「description」にすると抜粋文は読み込んでくれます。)

※また、今もサイトではGoogle Feed APIがちゃんと機能して表示されていますが
やはり近いうちに突然読み込めなくなるのでしょうか?

<script type="text/JavaScript" src="../../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
    var setURL = 'http://example.com/blog/feed'; 
    var setNUM = 10; 
    var setID = 'feed3'; 
    xmlLoad(setURL,setID,setNUM);
});
function xmlLoad(_xmlUrl,_id,_num){
    DD = new Date();HH = DD.getHours();MM = DD.getMinutes();SS = DD.getSeconds();
    var xmlUrl = _xmlUrl+"?"+HH+MM+SS; 
    var main = this;
    $.ajax({
    url: xmlUrl,
    type: 'GET',
    dataType: 'xml',
    timeout: 10000,
    error: function(){
        _msg = 'error';
        xmlOpen(_msg,_id,_num);
    },
    success: function(_xml){
        main.xml = _xml;
        _msg = 'load';
        xmlOpen(_msg,_id,_num);
    }
    });
    return;
}
var xmlOpen = function(_msg,_id,_num){
    var main = this;
    var html = '';
    var ID = _id;
    var Num = _num;
    if(_msg == 'load'){
        xml = main.xml;
        var channelData = $(xml).find('channel')[0];
        $(channelData).find('item').each(function(i){
            if(i < Num){
            postTitle = $(this).find('title').text();
            postLink = $(this).find('link').text();
            postContent = $(this).find('content').text();    

            publishedDate = $(this).find('pubDate').text();
            var pubDD = new Date(publishedDate);
            yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
            mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
            var postDate = yy +'.'+ mm +'.'+ dd;

            var postCategory = '';
            $(this).find('category').each(function(i){
                category = $(this).text();
                if(i <= 0){
                    postCategory += category;
                }else{
                    postCategory += ',' + category;
                }           
            });


        html += '<li><h3><a href="' + postLink + '">' + postTitle + '</a></h3>' + postDate + '<br/>' + postContent + '</li>';
            }
        });     
        }else{
        html += '<li>通信fエラー</li>';
      }
    $("#"+ID).html(html);
  }
</script>

---(追記)------------

「content:encoded」の部分のようですが、取得表示する方のコードにそのまま書き込んでもやはり表示できませんでした。

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" version="2.0">
<channel>
<title>Diary</title>
<atom:link href="http://example.com/blog/feed" rel="self" type="application/rss+xml"/>
<link>http://example.com/blog</link>
<description>by example</description>
<lastBuildDate>Sun, 09 Oct 2016 03:09:03 +0000</lastBuildDate>
<generator>http://wordpress.org/?v=2.8.6</generator>
<language>ja</language>
<sy:updatePeriod>hourly</sy:updatePeriod>
<sy:updateFrequency>1</sy:updateFrequency>
<item>
<title>Diary_投稿テスト</title>
<link>http://example.com/blog/archives/6</link>
<comments>http://example.com/blog/archives/6#comments</comments>
<pubDate>Thu, 24 Dec 2009 16:52:17 +0000</pubDate>
<dc:creator>example</dc:creator>
<category>
<![CDATA[ no category ]]>
</category>
<guid isPermaLink="false">http://example.com/blog/?p=6</guid>
<description>
<![CDATA[ Diary_投稿テストの 本文と、 写真です。 ]]>
</description>
<content:encoded>
<![CDATA[
<p><span style="color: #000000;">Diary_投稿テストの</span></p> <p><span style="color: #000000;">本文と、</span></p> <div style="word-break: break-all; width: 883.828px; overflow: hidden; font-size: 14.4px;"><span style="color: #000000;"><br style="word-break: break-all;" /><img class="alignnone size-large wp-image-12" title="DSC00000" src="http://example.com/blog/wp-content/uploads/2009/12/DSC00000-500x332.jpg" alt="DSC00000" width="500" height="332" /></span></div> <div style="word-break: break-all; width: 883.828px; overflow: hidden; font-size: 14.4px;">写真です。</div>
]]>
</content:encoded>
<wfw:commentRss>http://example.com/blog/archives/6/feed</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
</channel>
</rss>

---(追記)------------

「content:encoded」の'encoded'のみにすると全文表示されました。
どうも有難うございました!

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/10/09 02:17

    例示用ドメインはご自身で所有されていない限りexample.comを利用してください。

    キャンセル

回答 1

checkベストアンサー

+1

※フィードの取得はGoogle Feed APIの時は、「content」でよかったと思うのですが、
下のコードでは本文を表示してくれません。
(代わりに「description」にすると抜粋文は読み込んでくれます。)

RSSには複数規格があり、また配信元によって実装が違う場合があるので、RSSファイルをダウンロードし、どの位置にどの項目があるかを確認されるのが良いと思います。

※また、今もサイトではGoogle Feed APIがちゃんと機能して表示されていますが
やはり近いうちに突然読み込めなくなるのでしょうか? 

その可能性が高いと思います。Webマスターツールに登録しているサイトにGoogle Feed APIを使用していたのですが、先月APIが終了するというメールが届きました。今までこういった対応をGoogleから受けたことが無いので、今回は終わるんだろうな、と思っています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/09 04:15 編集

    RSSファイルとはこちらでしょうか?
    TitleやTimeというのは見当たりますが、どこを見ればよいですか?

    <script type="text/javascript" src="//rss.tc/feed/RssReader.aspx?url=http%3a%2f%2fexample.com%2fblog%2ffeed&displayRow=10&dispTitle=1&dispTime=0&id=20161009040654&target=_top&sbm=0&skin=LightBlue"></script><div style="font-size: 75%; text-align: right; line-height:200%;">Powered by <a href="http://berss.com/&quot; target="_top"><img src="//rss.tc/images/rsstcicon.gif" alt="RSSリスティング" style="border:0; width:80px; height:15px;vertical-align: middle;" /></a></div>

    キャンセル

  • 2016/10/09 10:39

    http://example.com/blog/feed のソースです。

    キャンセル

  • 2016/10/09 12:24 編集

    すみませんでした。有難うございます。
    下記のコードであっていますか?

    「content:encoded」を取得表示する方のコードにそのまま書き込んでもやはり表示できませんでした。

    This XML file does not appear to have any style information associated with it. The document tree is shown below.

    <rss xmlns:content="http://purl.org/rss/1.0/modules/content/&quot; xmlns:wfw="http://wellformedweb.org/CommentAPI/&quot; xmlns:dc="http://purl.org/dc/elements/1.1/&quot; xmlns:atom="http://www.w3.org/2005/Atom&quot; xmlns:sy="http://purl.org/rss/1.0/modules/syndication/&quot; xmlns:slash="http://purl.org/rss/1.0/modules/slash/&quot; version="2.0">
    <channel>
    <title>Shop Diary</title>
    <atom:link href="http://example.com/blog/feed&quot; rel="self" type="application/rss+xml"/>
    <link>http://example.com/blog&lt;/link&gt;
    <description>by example</description>
    <lastBuildDate>Sun, 09 Oct 2016 03:09:03 +0000</lastBuildDate>
    <generator>http://wordpress.org/?v=2.8.6&lt;/generator&gt;
    <language>ja</language>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <item>
    <title>Shop Diary_投稿テスト</title>
    <link>http://example.com/blog/archives/6&lt;/link&gt;
    <comments>http://example.com/blog/archives/6#comments&lt;/comments&gt;
    <pubDate>Thu, 24 Dec 2009 16:52:17 +0000</pubDate>
    <dc:creator>example</dc:creator>
    <category>
    <![CDATA[ no category ]]>
    </category>
    <guid isPermaLink="false">http://example.com/blog/?p=6&lt;/guid&gt;
    <description>
    <![CDATA[ Shop Diary_投稿テストの 本文と、 写真です。 ]]>
    </description>
    <content:encoded>
    <![CDATA[
    <p><span style="color: #000000;">Shop Diary_投稿テストの</span></p> <p><span style="color: #000000;">本文と、</span></p> <div style="word-break: break-all; width: 883.828px; overflow: hidden; font-size: 14.4px;"><span style="color: #000000;"><br style="word-break: break-all;" /><img class="alignnone size-large wp-image-12" title="DSC00000" src="http://example.com/blog/wp-content/uploads/2009/12/DSC00000-500x332.jpg&quot; alt="DSC00000" width="500" height="332" /></span></div> <div style="word-break: break-all; width: 883.828px; overflow: hidden; font-size: 14.4px;">写真です。</div>
    ]]>
    </content:encoded>
    <wfw:commentRss>http://example.com/blog/archives/6/feed&lt;/wfw:commentRss&gt;
    <slash:comments>0</slash:comments>
    </item>
    </channel>
    </rss>

    キャンセル

  • 2016/10/09 12:26

    コメント欄ではなく質問文に追記していただけませんか?

    キャンセル

同じタグがついた質問を見る

  • jQuery

    8133questions

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

  • RSS

    166questions

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