AJAX の最近のブログ記事
ブログを更新して、RSSも更新されているが、
Google AJAX Feed APIで読み込んだフィードが更新されていないということが多々あります。
それは、
Googleのキャッシュにあるフィードを読み込んでいるからだそうです。
キャッシュをクリアまたはリセットする方法があるのかもしれませんが、
リアルタイムに最新の記事一覧を表示する方法は
読み込むフィードのURLにユニークな値を付加させることで
毎回最新の一覧を表示できるようになります。
今回はユニークな値として現在日時をURLに付加させてみました。
<script type="text/javascript" src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize()
{
// 現在の日付と時間を取得
var date = new Date();
var year = date.getYear();
var mon = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var query = year + mon + day + hour + min + sec;
//現在の最新RSSフィードの取得
var feed = new google.feeds.Feed("http://example.com/blog/rss20.xml?"+ query );
//取得するフィード数
feed.setNumEntries(6)
//実際に読む込む
feed.load(function(result)
{
//読み込めたか判別
if (!result.error)
{
//表示部分を選択
var container = document.getElementById("feed");
//変数の初期化
var list = "";
//Feedの処理
list = '<ul>';
for (var i = 0; i < result.feed.entries.length; i++)
{
//Feedを一つ抽出
var entry = result.feed.entries[i];
if(entry.title.match(/^PR:/)) {
//「PR:」から始まるものがあれば何もしない
}
else{
list += '<li>';
list += '<a href="' + entry.link + '" target="_blank" title="' + entry.title + '">' + entry.title + '</a>';
var strdate = createDateString(entry.publishedDate);
list += ' (' + strdate + ')';
list += '</li>';
}
}
list += '</ul>';
container.innerHTML = list;
}
});
}
//日付の表示方法を変更
function createDateString(publishedDate)
{
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
//var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
var strdate = pyear + "-" + pmonth + "-" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);
</script>
<div id="feed">Loading...</div>
ちょっと難点なのは、
毎回フィードの読み込みを行うので、表示がもたつきます。
なので、
1時間ごとくらいにするために「分」のminと「秒」のsecは省いた方がいいかもしれません。
参考ページ
トラックバック(0)
トラックバックURL:
前回のページ「
Warning: Missing argument 2 for getTitleLink(), called in /home/sites/heteml/users158/m/h/0/mh0723/web/hoshiya.biz/blog/web/ajax/index.php on line 268 and defined in /home/sites/heteml/users158/m/h/0/mh0723/web/hoshiya.biz/include/function/function.php on line 104
Google AJAX Feed APIを使ってアメーバブログの「PR:」を除く記事一覧を表示するJavascript｜星屋工作室 hoshiya.biz
」で紹介したスクリプトを一部変更してみた。
変更の主な内容は、
表示するリストを作成する際に、HTMLタグを変数に入れるように改造しました。（赤文字部分）
前回はXMLの要素を操作してリストを作成するようにしていましたが、
XMLの操作は苦手なのでHTMLのソースを変数に格納するようにしました。
<script type="text/javascript">
google.load("feeds", "1");
function initialize()
{
//RSSフィードの取得
var feed = new google.feeds.Feed("●●読み込みたいフィードのURL●●");
//取得するフィード数
feed.setNumEntries(5)
//実際に読む込む
feed.load(function(result)
{
//読み込めたか判別
if (!result.error)
{
//表示部分を選択
var container = document.getElementById("feed");
//変数の初期化
var list = "";
//Feedの処理
list = '<ul>';
for (var i = 0; i < result.feed.entries.length; i++)
{
//Feedを一つ抽出
var entry = result.feed.entries[i];
if(entry.title.match(/^PR:/)) {
//「PR:」から始まるものがあれば何もしない
}
else{
list += '<li>';
list += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
var strdate = createDateString(entry.publishedDate);
list += '（' + strdate + '）';
list += '</li>';
}
}
list += '</ul>';
container.innerHTML = list;
}
});
}
//日付の表示方法を変更
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
//var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
var strdate = pyear + "-" + pmonth + "-" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);
</script>
<!--表示結果表示する部分-->
<hr size="1" />
<div id="feed"></div>
<hr size="1" />
<!--表示結果表示する部分-->
↓↓実際にうちの社長のアメブロのフィードを読み込んで表示した例↓↓
前回同様に
RSSに「PR:」が含まれていなければ新着5件を表示しますが、
新着5件中1件に「PR:」が含まれていた場合は
フィード自体から削除して消すのではなく、省略というか、スキップしているだけなので
表示が4件になります。
この辺りは改善が必要ですが、また今度にします。
参考にしたサイト
2009/09/23追記
上記を更に改造↓
トラックバック(0)
トラックバックURL:
MovableTypeの標準機能のmt-search.cgiによる検索ですが、
すこぶる遅いので、他の検索方法がないか探してみた。
結構、この話題は多いみたいで、
すぐ見つかった。
参考ページ
↓↓上記を参考に作った検索フォーム↓↓（実際に検索できます。）
検索がびっくりするほど速いです。
これを作った暴想さんに感謝です。
トラックバック(0)
トラックバックURL:
先日、「Google AJAX Feed APIを使って外部のRSSを読み最近の記事リストを表示するJavascript」を使用してアメーバブログのRSSを読み込み、
新着5件の一覧表示を行いましたが、
アメーバブログ（アメブロ）のRSSは広告（PR:○○～）というのが自動的に入り、
これがすごく邪魔で困っていました。
そこで今回はif文を加えて「PR:」から始まるフィードは無視（除く）することにしました。
スクリプト
<script src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize()
{
//RSSフィードの取得
var feed = new google.feeds.Feed("●●読み込みたいフィードのURL");
//取得するフィード数
feed.setNumEntries(5)
//実際に読む込む
feed.load(function(result)
{
//読み込めたか判別
if (!result.error)
{
//表示部分を選択
var container = document.getElementById("feed");
//変数の初期化
var list = "";
//Feedの処理
for (var i = 0; i < result.feed.entries.length; i++)
{
//Feedを一つ抽出
var entry = result.feed.entries[i];
if(entry.title.match(/^PR:/)) {
//「PR:」から始まるものがあれば何もしない
}
else{
var div = document.createElement("li");
var a = document.createElement("a");
var strdate = createDateString(entry.publishedDate);
a.href = entry.link;
var list = entry.title + " (" + strdate + ")" ;
a.appendChild(document.createTextNode(list));
div.appendChild(a);
container.appendChild(div);
}
}
}
});
}
//日付の表示方法を変更
function createDateString(publishedDate)
{
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
//var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
var strdate = pyear + "-" + pmonth + "-" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);
</script>
<!--表示結果表示する部分-->
<div id="feed"></div>
<!--表示結果表示する部分-->
ということで、うちの社長のアメブロのフィードを読み込んで
「PR:」を除いた新着情報を表示してみた
↓↓実行結果↓↓
ただし、
RSSに「PR:」が含まれていなければ新着5件を表示しますが、
新着5件中1件に「PR:」が含まれていた場合は
フィード自体から削除して消すのではなく、省略というか、スキップしているだけなので
表示が4件になってしまいます。
それを補うスクリプトは今度チャレンジします。
2009/09/23追記
上記を更に改造↓
Google AJAX Feed APIで最新の記事一覧を表示する。
http://hoshiya.biz/2009/09/google-ajax-feed-api-1.html
フィード（RSS2.0）を読み込むスクリプト
<script src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize()
{
//RSSフィードの取得
var feed = new google.feeds.Feed("●●読み込みたいRSS2.0のURL●●");
//取得するフィード数
feed.setNumEntries(5)
//実際に読む込む
feed.load(function(result)
{
//読み込めたか判別
if (!result.error)
{
//表示部分を選択
var container = document.getElementById("feed");
//変数の初期化
var list = "";
//Feedの処理
for (var i = 0; i < result.feed.entries.length; i++)
{
//Feedを一つ抽出
var entry = result.feed.entries[i];
var div = document.createElement("li");
var a = document.createElement("a");
var strdate = createDateString(entry.publishedDate);
a.href = entry.link;
var list = entry.title + " (" + strdate + ")" ;
a.appendChild(document.createTextNode(list));
div.appendChild(a);
container.appendChild(div);
}
}
});
}
//日付の表示方法を変更
function createDateString(publishedDate)
{
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
//var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
var strdate = pyear + "-" + pmonth + "-" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);
</script>
<!--表示結果表示する部分-->
<div id="feed"></div>
<!--表示結果表示する部分-->
ということで、うちの社長ブログのフィードを読んでみた。
↓↓結果↓↓
2009/06/30追記
アメーバブログ（アメブロ）等のフィードでPRなどが入ってしまい、
省略して表示をさせたい場合は「Google AJAX Feed APIを使ってアメーバブログの「PR:」を除く記事一覧を表示するJavascript」をご参照ください。
2009/09/23追記
上記を更に改造↓
Google AJAX Feed APIで最新の記事一覧を表示する。
http://hoshiya.biz/2009/09/google-ajax-feed-api-1.html
トラックバック(0)
トラックバックURL:
Googleブログ検索でこのサイトhttp://hoshiya.bizを検索。
↓実際に検索↓
http://blogsearch.google.co.jp/blogsearch?hl=ja&ie=UTF-8&q=hoshiya.biz&lr=lang_ja
そして、そのXMLを読み込みリストとして表示するスクリプト。
残念ながら現時点では被リンクが少なすぎて１件しかない...。
↓実行結果↓
スクリプト
<script type="text/javascript" src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●"></script>
<script type="text/javascript">
google.load("feeds", "1"); function initialize() {
var url = "●●検索対象のURL●●";
var num = 100;
// Get Linkbacks from Google Blog Search
var feed = new google.feeds.Feed("http://blogsearch.google.co.jp/blogsearch_feeds?hl=ja&q=link%3A"+encodeURIComponent(url)+"&output=rss&num="+num+"&lr=lang_ja&ie=utf-8");
feed.setNumEntries(num);
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function(result) {
if (!result.error) {
var items = result.xmlDocument.getElementsByTagName('item');
var item = null;
var entry = null;
var html = '<ul id="linkback_list">\n';
for (var i = 0; i < items.length; i++) {
entry = [];
// make simple array from item nodes
// You can access values like "entry['key']"
for ( var j=0; j<items[i].childNodes.length; j++ ) {
item = items[i].childNodes[j];
entry[item.nodeName] = (item.textContent)?item.textContent:item.text;
}
html += '<li class="linkback_entries">';
html += '<a class="linkback_links" href="'+entry['link']+'" rel>'+entry['title']+'</a>';
html += '<span class="linkback_blogs">('+entry['dc:publisher']+')</sapn>';
html += '<span class="linkback_dates">'+entry['dc:date'].substring(0,10)+'</sapn>';
html += '</li>\n';
}
html += '</ul>\n';
document.getElementById("linkbacks").innerHTML = html;
}
});
}
google.setOnLoadCallback(initialize);
</script>
<!--結果を表示する部分-->
<hr size="1" />
<div id="linkbacks">loading</div>
<hr size="1" />
<!--結果を表示する部分-->
参考にしたページ
Trackbackをやめて、Google AJAX Feed APIを使って被リンクを表示
http://creazy.net/2009/02/stop_tb_and_start_linkbacks_by_google_ajax_feed_api.html
トラックバック(0)
トラックバックURL:
なんか役に立ちそうなグーグルのツール
AJAX APIs Playground
http://code.google.com/apis/ajax/playground/
トラックバック(0)
トラックバックURL:
