JavaScriptで表示文字数を制御したい
- Google Feed APIを使い、JavaScriptで自分のホームページにRSSのニュースを表示しています。文字の大きさと行間は、以下のようなcssを書くことによって調整できましたが、現在の状態だと全部のニュースを表示してしまうので表示する文字数を「先頭から40文字」までにしたいのですが、そのやり方が分かりません。
- 具体的に、どうすればよいのか、ご教示いただければと思っています。大変困っているので、何卒よろしくお願い致します。
- 以下、参考までにjavascriptも載せておきます。
- ベストアンサー
JavaScriptで表示文字数を制御したい
Google Feed APIを使い、JavaScriptで自分のホームページにRSSのニュースを表示しています。 文字の大きさ と 行間 は、以下のような <style type="text/css"> #feed { font-size:16px; } #feed li { height: 4em; } </style> のcssを書くことによって調整できましたが、現在の状態だと全部のニュースを表示してしまうので 表示する文字数を「先頭から40文字」までにしたいのですが、 そのやり方が分かりません。 具体的に、どうすればよいのか、ご教示いただければと思っています。 大変困っているので、何卒よろしくお願い致します。 以下、参考までにjavascriptも載せておきます。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { //RSSフィードの取得 var feed = new google.feeds.Feed("RSSフィードのアドレス"); //表示したいエントリー数 feed.setNumEntries(4); //実際に読む込む 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 div = document.createElement("li"); var a = document.createElement("a");a.href = entry.link; a.target = "_blank" ; //日付を取得 var date = new Date(entry.publishedDate); var yearNum = date.getYear(); if (yearNum < 2000) yearNum += 1900; a.appendChild(document.createTextNode(entry.title)); //タイトルと日付の行を変える a.appendChild( document.createElement( "br" ) ); //a.appendChild(document.createTextNode(" (" + date.toLocaleDateString() + ")" )); //↑chromeで年月日が表示されない a.appendChild(document.createTextNode("(" + yearNum + "年" + (date.getMonth()+1)+"月"+date.getDate()+"日"+")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script>
- mcse
- お礼率55% (148/266)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
たんじゅんに、 #feed li { height : 4em; width : 15em; text-overflow : ellipsis; overflow : hidden; white-space: nowrap; } では だめですか？ もしくは、ぜんかくくうはくをはんかくにして <!DOCTYPE html> <meta charset='UTF-8'> <title></title> <style> #feed { font-size:16px; } #feed li { height : 4em; } </style> <body> <ol id='feed'></ol> <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script> google.setOnLoadCallback (function () { var url = 'http://okwave.jp/rss.php?type=recent_answered_question&c=254'; var feed = new google.feeds.Feed (url); feed.setNumEntries (10); feed.load (function (result) { if (! result.error) { var doc = document; var FGM = doc.createDocumentFragment (); var LI = doc.createElement ('LI'); var A = doc.createElement ('A'); var title = doc.createTextNode (''); var date = doc.createTextNode (''); A.target = '_blank' ; A.appendChild (title); A.appendChild (doc.createElement ('BR')); A.appendChild (date); LI.appendChild (A); for (var i = 0, I = result.feed.entries.length; i < I; i++) { var entry = result.feed.entries[i]; var d = new Date(entry.publishedDate); A.href = entry.link; title.data = entry.title.substring (0, 39);//←ここ date.data = ['(', d.getFullYear (), '年', d.getMonth () +1, '月', d.getDate (), '日', ')'].join (''); FGM.appendChild (LI.cloneNode (true)); } doc.getElementById ('feed').appendChild (FGM); } }); }); google.load ('feeds', '1'); </script> とか… いちいち、createDocument するよりも、ひながた から、cloneNode でこぴーして createDocumentFragment で、つくったものに、appendChild しています。 はやいから！？
関連するQ&A
- scriptリンクの別画面表示
はじめまして。 ホームページのトップにブログの件名をニュースとして一覧表示したくて Google AJAX Feed API を利用しました。 表示自体はうまくいったのですが、 この記事へのリンクを別ウィンドウで開くようにするにはどうすればいいのでしょうか？ 当方、JavaScriptは全く分からずで困っております・・・ おわかりの方、いらっしゃいましたらよろしくお願いいたします。 【html header 部分】 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://blog.XXXXX.XXX"); 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 li = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link ; var date = new Date(entry.publishedDate); var titlelink = entry.title; a.appendChild(document.createTextNode( "・" + date.toDateString() + " " +titlelink)); li.appendChild(a); container.appendChild(li); } } }); } google.setOnLoadCallback(initialize); </script> 【html body 部分】 <div id="feed"></div> 以上、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- Google AJAX Feed API
Google AJAX Feed APIでRSSを読み込んでタイトルなどの文字のみの表示をすることはできたのですが、（下の記述でやっています。） 画像が投稿されているブログ記事の画像を読み込み、表示させることはできるのでしょうか？ その場合の方法はどのように、すればできるのでしょうか？ お手数をおかけしますが、よろしくお願い致します。 <script type="text/javascript" src="http://www.google.com/jsapi?key="></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://"); <!--表示したいエントリー数--> feed.setNumEntries(10); 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 div = document.createElement("li"); var a = document.createElement("a");a.href = entry.link; <!--別窓で表示しない場合は削除してください--> a.target = "_blank" ; a.appendChild(document.createTextNode(entry.title)); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script>
- ベストアンサー
- JavaScript
- Google AJAX Feed APIについて
ブログのRSSを使って自動的にホームページに新着ブログ記事の日付とタイトルを表示されるようにしたいと思い、Google AJAX Feed APIを使用しました。 下記のソースだとこのように表示されます。 ・タイトル(2009年6月22日) ・タイトル(2009年6月20日) 表示方法をもう少し変えたいんですが、文字サイズと行間の変更はどのようにすれば可能か、ご存知の方は教えて下さい。 1.文字サイズをもう少し小さく(10pxに)したい 2.行間がくっ付いているのでもう少し広くしたい <script type="text/javascript" src="http://www.google.com/jsapi?key=APIキー"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("フィードのアドレス"); feed.setNumEntries(10); 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 div = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link; a.target = "_top" ; var date = new Date(entry.publishedDate); a.appendChild(document.createTextNode(entry.title + " (" + date.toLocaleDateString() + ")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> <div id="feed"></div>
- ベストアンサー
- JavaScript
- Google AJAX Feed APIキー
http://okwave.jp/qa/q7289256.html ↑こちらの記事を参考にしてサイトのTOPページにWPのタイトル表示を試みました。 表示はされるものの、そのタイトルを更にリンク（各記事にとぶ）にしたいのですが、 以下のソースのどこをいじればリンクになるのか教えて下さい。 ------------------------------------------------------- ■タイトル表示させたいページの<head>内に以下入れる。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("★RSS★"); 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 div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> ■HTMLのタイトル表示させたい部分に以下入れる。 <div id="feed"></div> ------------------------------------------------------------------------------- よろしくお願い致します。
- 締切済み
- JavaScript
- Scriptを読み込み中の表示について
HTML <script language="JavaScript" type="text/javascript" src="AAA.js"></script> 外部JS <!-- google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("RSSURL"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("mini_feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); var entry = result.feed.entries[i]; var dd = new Date(entry.publishedDate); // now var yearNum = dd.getYear(); if (yearNum < 2000) yearNum += 1900; var date = yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日"; container.innerHTML += "<div>【"+"<b>" + date+"</b>" +"】<br /><a href='" + entry.link + "'>" + entry.title + "</a></div>"; } } }); } google.setOnLoadCallback(initialize); //--> を設置し、RSSをスクリプトで表示しています。 2秒くらい読込みが遅いので、その部分が、一時空白状態のままになります。 そこで、読み込み中に読込みしていますというぐるぐる回る画像を表示したいのですが、どのように記述すれば宜しいのでしょうか？
- ベストアンサー
- JavaScript
- CSSについて
ホームページにブログを載せるのに以下のjavascriptを使用したいのですが、 CSSでタイトルの文字色などは変更できても、ブログ本文の文字色だけどうしても変更できません。 •javascript <script type="text/javascript"> google.load("feeds", "1"); var FA = new Array( "http://*****" ); function initialize() { var feedsArr = new Array(); var numEntr = 3; var container = document.getElementById("feed"); var cnt = FA.length; for (var k=0; k<FA.length; k++) { var feed = new google.feeds.Feed(FA[k]); feed.setNumEntries(numEntr); feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); feed.load(function(result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var eimg = ""; var imgCheck = entry.content.match(/(http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG)|(\.gif))/); if(imgCheck){ eimg += imgCheck[0]; } var attributes = ["title", "link", "publishedDate", "contentSnippet"]; var ind = feedsArr.length; feedsArr[ind] = new Array(); feedsArr[ind][0] = Date.parse(entry[attributes[2]]); feedsArr[ind][1] = entry[attributes[1]]; feedsArr[ind][2] = entry[attributes[2]]; feedsArr[ind][3] = entry[attributes[3]]; feedsArr[ind][4] = entry[attributes[0]]; feedsArr[ind][6] = eimg; } } cnt--; if (cnt == 0) { feedsArr.sort(); feedsArr.reverse(); for (var j = 0; j < feedsArr.length; j++) { var aE = document.createElement("A"); var h3 = document.createElement("H3"); var p = document.createElement("P"); var spanD = document.createElement("SPAN"); aE.href=aE.title=feedsArr[j][1]; aE.appendChild(document.createTextNode(feedsArr[j][4])); h3.appendChild(aE); spanD.appendChild(document.createTextNode(feedsArr[j][2])); spanD.appendChild(document.createTextNode(" ("+feedsArr[j][5]+")")); p.appendChild(document.createTextNode(feedsArr[j][3])); p.appendChild(spanD); container.appendChild(h3); container.appendChild(p); var img_link = document.createElement("img"); img_link.setAttribute("src", feedsArr[j][6] ); img_link.setAttribute("width", "300" ); container.appendChild(img_link); } } }); } } google.setOnLoadCallback(initialize); </script> •html <div id="feed"></div> ブログ本文の文字色の変更方法をご教授お願い致します。
- 締切済み
- 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>"; ↑の所をいじっても出来ませんでした。
- 締切済み
- JavaScript
- innerHTML
JavaScript初心者です。 下記のコード（１）がGoogleの公式サンプルに載っていますが、 私としては（２）の方が分かりやすいと思っています。 コードとして問題がありますでしょうか？ １． var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } ２． var container=document.getElementById("feed"); var htmlsrc=""; for(var i=0;i<result.feed.entries.length;i++){ var entry=result.feed.entries[i]; htmlsrc+="<div>"+entry.title+"</div>"; } container.innerHTML=htmlsrc; } 参考サイト http://www.ajaxtower.jp/googleajaxfeed/before/index2.html
- ベストアンサー
- JavaScript
- 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>"+ " <a href='" + entry.link + "' target='_blank'>" + entry.title.substr(0,15) + "</a></p>"; } } }); } google.setOnLoadCallback(initialize); 表示する文字数をsubstr(0,15)で制限しているのですが、15文字以上はタイトルの右に「…」を付加させたいのですが、どのようにすればよいのでしょうか？
- ベストアンサー
- JavaScript
- 関数内の配列を関数外で使うにはどのような方法がありますか？
関数内の配列を関数外で使うにはどのような方法がありますか？ 実際には以下のものです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google AJAX Feed API テスト</title> <meta http-equiv="content-script-type" content="text/javascript" /> <script type="text/javascript" src="http://www.google.com/jsapi?key=【キーコード】"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("【ＲＳＳアドレス】"); 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 date = yearNum + "."+(dd.getMonth()+1)+"."+dd.getDate()+" "; container.innerHTML += "<p>" + date +" <a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></p>"; } } }); } google.setOnLoadCallback(initialize); </script> </head> <body> <div id="feed"></div> </body> </html> 最後の方の、container.innerHTMLを使わず配列として blogs.push(Date.parse(date),"<p>" + date +" <a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></p>"); で、配列にpushして最後にdateでsortしたいのですが、どうでしょうか？ 初心者なのでお手柔らかにお願いします！
- 締切済み
- JavaScript
お礼
babu_baboo様 アドバイスいただきまして、誠にありがとうございました！ #feed li { height : 4em; width : 15em; text-overflow : ellipsis; overflow : hidden; white-space: nowrap; } で、できました！ cssで制御すれば簡単だったんですね！ とても、目から鱗でした！ 大変感謝いたします！