jqueryを使いRSS出力の際titleが無い時

このQ&Aのポイント
  • 現在jqueryのjfeedを使ってフェイスブックのウォール情報をサイトに出力させようとしているのですが、フェイスブックの画像を投稿した際、記事自体にTitle要素がないために以下のコードだとタイトル自体が空欄になってしまいます。
  • その際の対処として、タイトルが無い場合「No Title」と出力したいのですがどうすればよいでしょうか?
  • コードにはフェイスブックのウォール情報のRSSフィードURLと、3件のフィードを取得して表示する部分があります。また、日付の表記を変換する関数も定義されています。
回答を見る
  • ベストアンサー

jqueryを使いRSS出力の際titleが無い時

現在jqueryのjfeedを使ってフェイスブックのウォール情報を サイトに出力させようとしているのですが、 フェイスブックの画像を投稿した際、記事自体にTitle要素がないために 以下のコードだとタイトル自体が空欄になってしまいます。 その際の対処として、タイトルが無い場合「No Title」と出力したいのですが どうすればよいでしょうか?? <コード> <script type="text/javascript" src="../js/jquery.jfeed.pack.js" charset="utf-8"></script> <script type="text/javascript"> jQuery(function() { jQuery.getFeed({ url: 'proxy.php?url=<RSSURL>)',success:onComplete}); function onComplete(feed) { var temp = '<ul>'; for(var i = 0; i < feed.items.length && i < 3; i++) { //数字は件数 var item = feed.items[i]; temp += '<li class="feedDate">'+changeDate(item.updated)+'</li>'; temp += '<li align="left" class="feedTitle">'; temp += '<a href="#" target="_blank">' + item.title + '</a>'; temp += '</li>'; } temp += '</ul>'; jQuery('#news').append(temp); } }); //日付表記を変換 function changeDate(str){ var myDate=new Date(str); var YYYY=myDate.getFullYear(); var MM=myDate.getMonth()+1; if(MM<10){MM="0"+MM;} var DD=myDate.getDate(); if(DD<10){DD="0"+DD;} var date=YYYY+'年'+MM+'月'+DD+'日'; return date; } //--> </script>

  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ちゃんと見てませんけど… item.titleが対象とするタイトルであるなら、空白だったらNo Titleに置き換えるだけでよいのでは? item.titleの代わりに  (item.title?item.title:"No Title") としてあげるとか。

u2k8090
質問者

お礼

おお・・・・! こんなに簡単に出来るなんて。 すごく助かりました!! 基礎が抜けてるとこういうことが起こるので 勉強しなおします

関連するQ&A

  • 外部のxmlデータを呼び込むproxy.php

    はじめまして。 サイト内に外部のブログのxmlデータ(rss)をjFeedを使用して表示したいと 思い設定しておりますが苦戦しております。 あるサイトで外部のxmlデータを呼び込む際には、直接呼び込めないためproxy.phpを 介して設定するように書かれているのを参考に設定しているのですが。 うまくいきません。 html側の記述 <script type="text/javascript"> $(function(){ $.getFeed({ url:'proxy.php', ←ココの部分で表示したいブログのアドレス(url:'http://rssblog.ameba.jp/one78/rss20.xml')にするとサーバーのプレビューでは確認出来ますが、サーバーにアップしたとたん表示されません。 success: function(feed){ $('#myfeed').append('<h2><a href="'+feed.link+'">'+feed.title+'</a></h2>'); var s=""; for(var i=0; i<feed.items.length && i<10; i++){ var item=feed.items[i]; s+= '<dt id="updated">' + dateChanger(item.updated) + '</dt>'; //更新時間 s+='<dd><a href="'+item.link+'">'+item.title+'</a></dd>'; } $('#myfeed').append(s); } }); var dateChanger = function(str){ var mydate = new Date(str); yy = mydate.getFullYear(); mm = mydate.getMonth() + 1; dd = mydate.getDate(); if (mm < 10) { mm = "0" + mm; } if (dd < 10) { dd = "0" + dd; } datestr = yy + "." + mm + "/" + dd + ""; return datestr; }; }); --> </script> proxy.php側の記述 <?php header('Content-type: application/xml'); $handle = fopen('http://rssblog.ameba.jp/one78/rss20.xml', "r"); ←この表記であっているのか不安です。 if ($handle) { while (!feof($handle)) { $buffer = fgets($handle, 4096); echo $buffer; } fclose($handle); } ?> proxy.phpは上記のhtmlと同じディレクトリに格納しております。 以上、アドバイスお願いいただけたらと思います。 よろしくお願いいたします。

    • 締切済み
    • PHP
  • 【jQuery】jQuery Masonry

    この度jQueryで壁にぶつかり、質問させて頂きます。 現在開発中のWEBサービスにて、jQuery Masonryとアコーディオン機能を組み合わせたページを構築する流れとなっております。 画面イメージとしては・・ Pinterestにアコーディオン機能が付いており、各帯をクリックする毎に内容が表示される機能です。 【Point】横幅は制限がありますが、縦幅には制限が無く、アコーディオンが開閉する毎にグリッド部分の再構築(ムーブアクション)を行いたいのですが、それが上手くいきません。 参考サイト:http://goo.gl/QLQI7 実際のソース(抜粋): <script> jQuery(function(){ var $container = $('#container'); $container.imagesLoaded( function(){ jQuery('#container').masonry({ itemSelector: '.item', isAnimated:true }); }); }); </script> <script> jQuery(function () { jQuery("dd").css("display","none"); jQuery("dl dt").click(function(){ var cont = jQuery(this).next(); if(jQuery(cont).css("display")=="none"){ jQuery("dd").slideUp("slow"); jQuery(cont).slideDown("fast"); jQuery("dt").removeClass("select"); jQuery(this).addClass("select"); } }).hover( function(){jQuery(this).addClass("over");} ),( function(){jQuery(this).removeClass("over");} ); }); </script> <div id="container"> ~ここから~ <div class="item"> <dl> <dt>タイトル1</dt> <dd>本文1</dd> <dt>タイトル2</dt> <dd>本文2</dd> <dt>タイトル3</dt> <dd>本文3</dd> </dl> </div> </div> ~ここまでがLoopで複数のデータが表示される~ なお、jQuery初心者でして具体的な構文までをサポート頂けますと幸いです。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • javascriptでわからない所があります。

    javascriptでわからない所があります。アドバイスお願いします。 ブログでajax feed apiを使いRSSを表示しようと思い下記のサイトのコードを貼ってみました。 サイト⇒http://www.zoezoe.net/2008/06/javascriptrssgoogle-ajax-feed.php 以下サイトのコード --------------------- <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA7_2e7OzfQnVgCZgpBhg3_RRuFDZ..."></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.zoezoe.net/atom.xml"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var dd = new Date(entry.publishedDate); // now var yearNum = dd.getYear(); if (yearNum < 2000) yearNum += 1900; var date = '<li>' + yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日 "; container.innerHTML += " " + date +"<a href='" + entry.link + "' title='" + entry.title + "'>" + entry.title + "</a></li>"; } } }); } google.setOnLoadCallback(initialize); </script> </head> <body> <ul> <div id="feed"></div> </ul> </body> --------------------- これをカスタマイズしたいのですが、以下のことができません。アドバイスお願いします。 ○表示したRSSの間に区切り線を入れたい ○日付の次を改行して    日付    タイトル のように表示したい。 ○別タブで開きたい。 一つでも分かりましたらアドバイスお願いします。 var date = '<li>' + yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日 "; container.innerHTML += " " + date +"<a href='" + entry.link + "' title='" + entry.title + "'>" + entry.title + "</a></li>"; ↑の所をいじっても出来ませんでした。

  • jacascriptでサイトにRSSフィードを表示した際の文字制限につ

    jacascriptでサイトにRSSフィードを表示した際の文字制限について 以下jacascriptでサイトにRSSフィードを表示してます。 google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://xxxxxxxxxxxxx.rdf"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var dd = new Date(entry.publishedDate); // now var yearNum = dd.getYear(); if (yearNum < 2000) yearNum += 1900; var m = dd.getMonth() + 1; if (m < 10) {m = "0" + m;} var d = dd.getDate(); if (d < 10) {d = "0" + d;} var date = yearNum + "-" + m + "-" + d + " "; container.innerHTML += "<p>" + "<span>" + date + "</span>"+ "&nbsp;<a href='" + entry.link + "' target='_blank'>" + entry.title.substr(0,15) + "</a></p>"; } } }); } google.setOnLoadCallback(initialize); 表示する文字数をsubstr(0,15)で制限しているのですが、15文字以上はタイトルの右に「…」を付加させたいのですが、どのようにすればよいのでしょうか?

  • jquery returnについて

    貴重なスペースをお借りいたします。 jqueryを勉強中前々から調べてもよくわからない部分がございまして、 皆様のお力を貸して頂ければとおもいます。。。 jqueryのreturnについてなのですが、 あやふやな部分が多く、どこで使えるのか、どうゆうときに使うのかということが今だに理解できていないところがございます。 $('#photogallery li .imgArea').hide();//ページ上の画像を隠す $(window).bind("load", function(){ var interval = 300; //表示間隔 for(var i=0; i<$('#photogallery li .imgArea').length; i++) setTimeout(doFade(i), interval * i); function doFade(i){ return function(){ $('#photogallery li .imgArea').eq(i).fadeIn(1000); }; } }); 上記は画像のプリロードをするためのjqueryなのですが、最下部のreturn function~の部分ですね、 なぜreturnで関数を返さないといけないのかがさっぱりわかりません。 doFade(i)でfadeInを実行するならreturnをかかなくてもいいのではないかと思い困惑中です。 物分かりが良い方ではなく、どなたかわかりやすく説明していただける方がいたら、 どうぞ宜しくお願い致します。

  • jqueryの構文について

    はじめまして、最近jqueryの勉強を始めました。 セレクタを変数で指定した場合の子要素の取得の仕方がわからず、困っています。 アドバイスいただけませんか? <html> <head> <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#next").click(function () { //下のように書いてみたのですが動きません。 var next_slide = $("#slide01").next(); $(next_slide).text("hoge");//これは動きます var img_url = $(next_slide > a).attr("href");//エラーを起こします alert(img_url); return false; }); }); </script> </head> <body> <ul> <li id="slide01"><a href="url01">スライド01</a></li> <li id="slide02"><a href="url02">スライド02</a></li> <li id="slide03"><a href="url03">スライド03</a></li> </ul> <a href="#" id="next">次へ</a> </body> </html> 要は次の要素の子要素にアクセスしたいのです。 ご教授のほどよろしくお願いしますm(_ _)m

  • jquery xmlのlinkが空の<a>タグ

    jquery ajaxでサイトのRSSを読み込み表示させるスクリプトです。RSS2.0形式のxml要素のlink内が空の場合、<a>タグを入れたくないのですが、下のスクリプトだと、IE8では、<a>タグが入りませんが、firefoxでは入ってしまいます。 ************** $(xml).find('item').each(function(i){ if ( i > 4 ) { return false; } var title = $(this).find('title').text(); var url = $(this).find('link').text(); var date = $(this).find('pubDate').text(); //日付を整形 date = dateChanger(date); if(url==""){ $('#feedList dl').append('<dt>' + date[0] +'<\/dt>'+ '<dd>'+ title+'<\/dd>'); } else { $('#feedList dl').append('<dt>' + date[0] +'<\/dt>'+ '<dd><a href="' + url + '">' + title + '<\/a><\/dd>'); } }); **************** どの部分が原因でしょうか。どうぞご教示ください。

  • 複数のRSSにそれぞれClass名を追加したい.

    Google AJAX Feed APIでホームページに複数のRSSを新しい順に入れ子で表示しているのですが、各RSSにclass名を追加したいです。 例) twitter <li class="twitter"></li> facebook <li class="facebook"></li> 自分なりに試行錯誤してみましたが、うまく行きませんでした。 下記にコードを書いております。(合ってるか不安です) よろしくお願いします。 後、希望の機能で ●読み込んだ順にフェードインで表示をしたい ●非同期 もよろしければお願いします。 ----------------------------------------------- google.load("feeds", "1"); var entryArray = new Array(); var entryNum = 0; function initialize() { /* url */ feedAdd("URL_facebook", 2); feedAdd("URL_twitter", 1); } function feedAdd(rssUrl, boolNum) { var feed = new google.feeds.Feed(rssUrl); feed.setNumEntries(20); feed.load(function(result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { entryArray.push(result.feed.entries[i]); var date = new Date(result.feed.entries[i].publishedDate); entryArray[entryNum].sortDate = ( date.getFullYear()*10000 ) + ( (date.getMonth() + 1)*100 ) + date.getDate(); entryArray[entryNum].blogName = result.feed.title; entryNum+=1; } }else{ alert(result.error.code + ":" + result.error.message); } if(boolNum==1){ feedOutput("feed", 100); } }); } function feedOutput(feedId, listNum){ var container = document.getElementById('rss'); entryArray = asort(entryArray, "sortDate"); if(listNum > entryNum){ listNum = entryNum; } for (var i = 0; i < listNum; i++) { var entry = entryArray[i]; var date = new Date(entry.publishedDate); var eTitle = entry.title; var eCont = entry.contentSnippet.substring(0, 100); var eLink = entry.link; var eimg = ""; var wrap = document.createElement("li"); var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.jpg)|(\.JPG))"/); if(imgCheck){ eimg += '<img ' + imgCheck[0] + '\>'; } wrap.innerHTML = eimg + '<span>' + date.getFullYear() + '年' + (date.getMonth() + 1 ) + '月' + date.getDate() + '日<\/span><br\>' + eCont + '...<br\><a href="' + eLink + '" target="_blank">投稿へ移動<\/a>'; container.appendChild(wrap); } } function asort(myArray, key){ return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? -1 : 1; } ); } google.setOnLoadCallback(initialize);

  • wordpressにjqueryを使う

    wordpress初心者の者です。 現在wordpressで海外のテンプレートを使っています。 その中で、wookmarkというjqueryを固定ページに使いたいのですが、 jqueryの元ファイルのhtmlのコードの中に、下記のようなリンク部分があるのですが、 1行目の「jquery.min.js」は読み込む必要ありますでしょうか? <!-- include jQuery --> <script src="../libs/jquery.min.js"></script> <!-- Include the imagesLoaded plug-in --> <script src="../libs/jquery.imagesloaded.js"></script> <!-- Include the plug-in --> <script src="../jquery.wookmark.js"></script> またその下に下記のような記述があるのですが、これはヘッダーに 貼付ければよろしいのでしょう?? ご存知の方教えてください。 <!-- Once the page is loaded, initalize the plug-in. --> <script type="text/javascript"> (function ($){ $('#tiles').imagesLoaded(function() { // Prepare layout options. var options = { autoResize: true, // This will auto-update the layout when the browser window is resized. container: $('#main'), // Optional, used for some extra CSS styling offset: 2, // Optional, the distance between grid items itemWidth: 210, // Optional, the width of a grid item fillEmptySpace: true // Optional, fill the bottom of each column with widths of flexible height }; // Get a reference to your grid items. var handler = $('#tiles li'), filters = $('#filters li'); // Call the layout function. handler.wookmark(options); /** * When a filter is clicked, toggle it's active state and refresh. */ var onClickFilter = function(event) { var item = $(event.currentTarget), activeFilters = []; if (!item.hasClass('active')) { filters.removeClass('active'); } item.toggleClass('active'); // Filter by the currently selected filter if (item.hasClass('active')) { activeFilters.push(item.data('filter')); } handler.wookmarkInstance.filter(activeFilters); } // Capture filter click events. filters.click(onClickFilter); }); })(jQuery); </script>

  • jQueryでHTML表示の部分

    jQueryで表示されるデータをHTMLで表示するのですが、 色々いじっていたのですが、表示されなかったり<li>タグだけしかひょうじされなかったりして、 いまいちわからなくて、質問を致しました。 -現在の表示------------ <li>No:1 Title:タイトル</li> ----------------------- <li>タグの中にclassを追加したいのですが、 どうすれば、<li>タグにclassが追加されるのでしょうか。 ----------------------------------- <li class="test">No:1 Title:タイトル</li> ----------------------------------- こんな感じに表示させたいのです。 大変申し訳ございませんが、よろしくお願い致します。 <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No:'+items.no+' Title:'+items.title }).appendTo('ul','#demo'); }); }); }); </script> <div id="demo"> <h4>リスト</h4> </div>

専門家に質問してみよう