ブログのRSSを読み込んで新着記事を表示！Google AJAX APIを使ってみました
Google AJAX APIを使って、ブログのRSSから取得した情報を、静的なHTMLに新着記事としてを表示させるということを何度かやりました。ですが、その度に過去の案件を見返すことが多いので、備忘録として記事にしておこうと思います。
今回は、記事の日付、タイトル、記事の画像、記事本文概要を書き出ししたいと思います:)
2016/1/11にGoogle AJAX APIが使えなくなったようです。
別の方法でRSSを取得する方法をまとめておりますので、よろしければ以下の記事もご参考になさってください:)
ブログのRSSを読み込んで新着記事を表示！PHPを使ってみました
PR
0.RSSとは
RSSとは、主に、Webサイトやブログの更新情報を公開するために使われているXMLベースの文書です。
Webサイトの各ページのタイトルや、URL、更新日時などの情報が記載されています。
ちなみに、このブログのRSSはこちらです:)
RSSリーダーというソフトを使って、RSSを取得・購読することで、登録したWebサイトやブログの更新情報をチェックすることができるようになります。
今回は、このRSSをJavaScriptで取得し、新着記事の書き出しを行います。
1.使い方
今回のプログラムでは、以下の要素を取得し、表示させます。
- 記事の日付
- 記事のタイトル
- 記事のURL
- 記事の画像（１件目）
- 記事の概要
HTML
<head>要素内
新着情報を書き出したいHTMLの<head>要素内に、以下のコードを記述します。
<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("RSSのURL"); //読み込むRSSフィードを設定します
var noPhoto = ("<img src='画像がなかった場合に表示する画像のURL' />"); //画像がなかった場合に表示する画像を指定します
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] + '" >';
} else {
entryImg += noPhoto;
}
container.innerHTML += '<div><p>'
+ date
+ '</p><h3><a href="' + entry.link + '">'
+ entry.title + '</a></h3>'
+ entryImg
+ '<p>'
+ 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>
1行目はGoogle AJAX APIを呼び出しています。
3行目以降が、RSSを読み込んで書き出すためのJavaScriptになります。4行目から63行目までを、別のjsファイルにして読み込むことも可能です。
プログラム内で変更を加えたくなるような箇所については、コメントアウトにて説明をしていますので、参考にしてください。
46行目から53行目にかけては、書き出す内容を指定しています。
必要に応じて、タグなどを書き換えたり、入れ替えてください。
- date：記事の日付
- entry.link：記事へのURL
- entry.title：記事のタイトル
- entryImg：記事の画像
- entry.contentSnippet.substring(0,120)：記事の概要
また、56行目から59行目にかけて、<a>に対してtarget=”_blank”指定を行う処理が書かれています。不要の場合は削除してください。
<body>要素内
次に、<body>要素内に、RSSを書き出す対象とする要素を記述します。
JavaScript内で指定したIDを、対象の要素に指定してください。
今回、JavaScript内では「feed」というIDを指定していますので、HTML内に「feed」というIDをつけた要素を記述します。
<div id="feed"></div>
デモ
デモを作ってみましたので、ご覧ください。
デモページ内のデザイン、画像、写真についての改変・再配布は出来ません。ご了承下さい。
2.新しい記事が反映されない？
ブログには新しい記事があるはずなのに、書きだされた新着記事は古いまま…ということが何度かありました。
Googleがキャッシュしているデータを返してくるのが原因だそうです。
プログラム内で指定するRSSのURLに、ダミークエリを追加し強制的にキャッシュをクリアさせることで解決させる方法があるようです。
以下のブログでわかりやすく解説されていました:)
Google Ajax Feed APIでRSSを取得するとキャッシュが利用される件の解決法｜好奇心の塊
1.使い方内のJavaScriptの8行目以降を少し書き換えます。
var d = new Date();
var dq = d.getMonth()+""+d.getDate()+""+d.getHours();
var feed = new google.feeds.Feed("RSSのURL"+"?"+dq); //読み込むRSSフィードとダミークエリを設定します
RSSのURLの末尾の形によっては、うまくいかない場合もあります。その際は、10行目を以下のように修正してください。なお、この方法であっても上手くいかないブログもあるようです。
var feed = new google.feeds.Feed("RSSのURL"+"&"+dq);
お勉強・参考にさせていただいた記事
- Google AJAX Feed APIを使って、静的ページに外部ブログのRSSを取得・表示させるやつを私も試してみた | マイペースクリエイターの覚え書き
- Google AJAX Feed APIでブログの概要と画像を表示｜shiromaru しろまる
- Google Ajax Feed APIでRSSを取得するとキャッシュが利用される件の解決法｜好奇心の塊
最後に
いかがでしたでしょうか。
Google AJAX APIとRSSを使った新着情報の書き出しは、とても便利なので使う機会も多いです。この方法以前の書き出しはとても手間がかかった記憶があります。
この記事が誰かのお役に立てると嬉しいです:)
PR
あわせてこちらの記事もいかがですか？
- 関連記事が見つかりませんでした
最後までお読みいただき、ありがとうございました。
RSS登録・各SNSへの投稿をしていただけると、とっても嬉しいです！
