RSSでURLに文字列を追加と配置
- 現在googleのAPIを使いRSSからURLと画像を取得しています。URLの末尾に指定した英数字を付加し、画像のレイアウトを４×4に変更したいですがうまくできません。
- 複数のURLの取得時、どの段階でどのように振り分ければ良いのか分かりません。
- CSSでレイアウトを試みましたが、一括で処理されるため途中での区切りでの配置ができません。複数の画像の振り分け方もわかりません。
- ベストアンサー
RSSで取得したURLに文字列を追加と配置？
現在googleのAPIを使いRSSからURLと画像を取得しています。 それで質問なんですが、その取得した(それぞれの)URL末尾に指定した同一の英数字を付加と、 表示する画像のレイアウト(現在は縦一列表示)を４×4とかにしたいとですがうまく出来ません>< 複数のURLだと、どの段階で？？どう振り当てて組み込んだら良いのか？？ レイアウトもＣＳＳで試みましたが一括で処理されるので途中で区切っての配置が出来ず；； 複数の画像だとどうやって振り当てていくのかが判りません>< 初心者で申し訳ありませんがよろしく願いします。<m(__)m> <script type="text/javascript" src="googleのapiキー"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("RSSのURL"); feed.setNumEntries(16); 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 gazo = entry.content.match("<img.*jpg.*?>") if(gazo != null){container.innerHTML += "<p><a href='" + entry.link + "'>" + gazo +"</a></p>" } var div = document.createElement("div"); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> <body onload="OnLoad()"> <div id="feed" ></div>
- Cronus2
- お礼率46% (28/60)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
最終的なHTMLを確認してみればわかると思いますが、container（ ＝<div id="feed" ></div> ）の中に、 <div id="feed" > <p><a href="link1"><img src="gazo1" alt="alt1"></a></p> <p><a href="link2"><img src="gazo2" alt="alt2"></a></p> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ </div> のようなソースが追加された形になっているはずです。 このままでも、CSSで #feed p のサイズを指定してfloat:leftなどとしておき、div#feedの幅をその４倍に設定しておくことで4列のレイアウトになると思います。 画像のサイズが指定のサイズより大きかったりすると、レイアウトが乱れる原因となるので、overflowを設定しておくか、先にタグ内でサイズを指定しておくか、あるいはスクリプトで個々にサイズを調整するかなどが必要かも知れません。 文章の段落ではなくなるので、マークアップは<p>よりも <ul> <li><a href="link1"><img src="gazo1" alt="alt1"></a></li> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ </ul> などの方が一般的かも知れません。 まあ、リストにしなくても<div>～</div>でもよいのかも。 おすすめではありませんが、<table>を利用して表示すれば、サイズ調整などをしなくても確実に4×4にできるという意味では簡単かも知れません。 他の考え方としては、現状の縦一列の表示を4個ごとに<div>でくくっておいて、これをフロートさせるというのもありかと。 見え方としては、１番目から順に横に並んでゆくのと、縦に並んでゆくのの違いとなります。
関連するQ&A
- 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
- 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
- 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について
ブログの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で、ホームページにアメブロRS
Google AJAX Feed APIで、ホームページにアメブロRSSを表示する際、「PR」広告を排除したいです。 現在のソースは以下の通りです。 ------------------------ <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://feedblog.ameba.jp/rss・・・・・"); 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>" + date +" <a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></p>"; } } }); } google.setOnLoadCallback(initialize); </script> （ボディー内） <p><div id="feed"></div></p> ------------------------ どこをどのようにすればいいのでしょうか？ どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- google feed apiを使い分けたい
google ajax feed apiですが、下記コードを書いて "rss_url"部分を引数にして同一ページ内でURLの違うものを複数 使用したいのですが、やり方がわかりません。 理想は<div id = "feed"></div>の id = ""の部分を変更してURLごとに使い分けたいのですが、 どうすればいいでしょうか？ google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("rss_url"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); } }); } google.setOnLoadCallback(initialize); このコードだと<div id = "feed"></div>を記述すればうまく実行されます。 試しに google.load("feeds", "1"); function initialize(rss_url, id) { var feed = new google.feeds.Feed(rss_url); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById(id); } }); } google.setOnLoadCallback(initialize); var test = new MyRssReader("rss_url", "test1"); として <div id = "test1"></div>としてみましがたうまくいきませんでした。
- ベストアンサー
- 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
- google feed api
以下のようにブログのフィードを取得しようとしたのですが、何も出てきません。ＡＰＩキーは 間違っていないです。二つのファイルは同階層です。余分なところは省略しています。 //test.html <title>Google AJAX Feed API テスト</title> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAABuy1BFnkBh8stkm....................................."> </script> <script type="text/javascript" src="test.js"> </script> </head> <body> <p>Google AJAX Feed API テスト</p> </body> </html> //test.js google.load("feeds", "1"); function initialize() { google.feeds.lookupFeed("http://feedblog.ameba.jp/rss/ameblo/blog/rss20.xml", getFeedUrl); } function getFeedUrl(result){ if (!result.error){ if (result.url != null) { var feed = new google.feeds.Feed(result.url); feed.load(dispfeed); } }else{ var container = document.getElementById("feed"); container.innerHTML = "フィードがありません"; } } function dispfeed(result){ if (!result.error){ var container = document.getElementById("feed"); var htmlstr = ""; htmlstr += '<h2><a href="' + result.feed.link + '">' + result.feed.title + '</a></h2>'; for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>'; htmlstr += "<p>" + entry.publishedDate + "</p>"; htmlstr += "<p>" + entry.contentSnippet + "</p>"; htmlstr += "</p>"; } container.innerHTML = htmlstr; }else{ alert(result.error.code + ":" + result.error.message); } } google.setOnLoadCallback(initialize);
- ベストアンサー
- 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
お礼
回答ありがとうございます。 サイズ指定とoverflowを使えばよかったんですね。 float:leftで回りこみまでは出来たんですが、 そのあと、どうやって折り返せば?と悩んでいました。 英数字を付加は自己解決しましたw 寝しなにすると頭が回りが悪かったようでw ありがとうございました<m(__)m>