RSSを取得して表示
アメブロの場合
Google API
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>RSSを取得</title> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("feeds", "1"); //APIを読み込みます function initialize(){ var feed = new google.feeds.Feed("http://rssblog.ameba.jp/アメブロID/rss.html"); //読み込むフィードを設定します //var noPhoto = ("<img src='http://kana-lier.com/demo/feed_ajax/img/noimage.jpg' />"); //画像がなかった場合に表示する画像を指定します feed.setNumEntries(5); //記事を読み込む件数を設定します feed.load(dispfeed); function dispfeed(result){ if(!result.error){ var container = document.getElementById("feed"); //HTMLに書き出す対象のIDを指定します for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var entryDate = new Date(entry.publishedDate); //日付取得 以下二桁処理をします var entryYear = entryDate.getYear(); if (entryYear < 2000){ entryYear += 1900; } var entryMonth = entryDate.getMonth() + 1; if (entryMonth < 10) { entryMonth = "0" + entryMonth; } var entryDay = entryDate.getDate(); if (entryDay < 10) { entryDay = "0" + entryDay; } var date = entryYear + "年" + entryMonth + "月" + entryDay + "日" ; var entryImg = ""; var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))/); //画像のチェックをします /* if(imgCheck){ entryImg += '<img ' + imgCheck[0] + '" width="100">'; } else { entryImg += noPhoto; }*/ container.innerHTML += '<div><p class="date">' + date + '</p><h3><a href="' + entry.link + '">' + entry.title + '</a></h3>' + entryImg + '<p class="text">' +entry.contentSnippet.substring(0,120) + ' …<a href="' + entry.link + '">more</a></p></div>'; } var linkBlank = container.getElementsByTagName('a'); // targetに'_blank'を設定します。不要な場合は、以下4行を削除 for (var j = 0, l = linkBlank.length; j < l; j++) { linkBlank[j].target = '_blank'; } //target'_blank'ここまで } } } google.setOnLoadCallback(initialize); </script> </head> <body> <div id="feed"></div> </body> </html>
1行目はGoogle AJAX APIを呼び出しています。
3行目以降が、RSSを読み込んで書き出すためのJavaScriptになります。4行目から63行目までを、別のjsファイルにして読み込むことも可能です。
プログラム内で変更を加えたくなるような箇所については、コメントアウトにて説明をしていますので、参考にしてください。
46行目から53行目にかけては、書き出す内容を指定しています。
必要に応じて、タグなどを書き換えたり、入れ替えてください。
date:記事の日付
entry.link:記事へのURL
entry.title:記事のタイトル
entryImg:記事の画像
entry.contentSnippet.substring(0,120):記事の概要