AJAX on qwerty.work

Google AJAX Feed APIでRSSフィードを読込み最新の記事一覧を表示する。

Wed, 23 Sep 2009 14:50:10 +0900

前回の「Google AJAX Feed APIを使ってアメーバブログの「PR:」を除くで記事一覧を表示するJavascript 」ですが、アメーバブログを更新して、最新の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 += '&nbsp;(' + 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>

ちょっと難点なのは、ページを開く度に最新のフィードを読み込むので、表示がもたつきます。

なので、「分」のminと「秒」のsecは省いて1時間以内の表示はキャッシュを読み込むくらいにした方がいいかもしれません。

mt-search.cgiの検索が遅いのでblog_ajax_json_search.jsに乗り換えた。

Sun, 05 Jul 2009 01:03:52 +0900

MovableTypeの標準機能のmt-search.cgiによる検索がめちゃくちゃ遅いので、他の検索方法がないか探してみました。

結構、この話題は多いみたいで、すぐに見つけることができました。予め書き出された検索用のjsonのテキストファイルをAJAXで検索して表示するというもので、めちゃくちゃレスポンスがいいです。

http://blog.kumacchi.com/2008/07/mtsearchcgi.html http://blog.kumacchi.com/2008/07/mtsearchcgi.html

設置方法

prototype.jsを読み込む
blog_ajax_json_search.jsを読み込む
search_data.txtを書き出すインデックステンプレートをMovabletypeに作成
検索窓を設置

1.prototype.jsを読み込む

方法は省きますが、jQuery.jsがあるとコンフリクト（衝突）して動かないので対策が必要です。

私の場合、prototype.jsはCloudFlareのCDNから読み込んでいます。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js"></script>

Googleがよければこちら。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>

2.blog_ajax_json_search.jsを読む

私の場合、ローカルに保存した物を使用せず、外部から読み込んでいます。

<script type="text/javascript" src="https://furyu.tea-nifty.com/script/blog_ajax_json_search.js"></script>

3.search_data.txtを書き出すインデックステンプレートをMovabletypeに作成

<?xml version="1.0" encoding="utf8"?>
{data: [
<MTEntries lastn="3000">
{title:"<$MTEntryTitle remove_html="1" encode_js="1"$>",link:"<$MTEntryLink$>",body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$>"},
</MTEntries>
{"title": "", "link": "", "body": ""}
]
}

の部分は対象の投稿の上限を指定しています。全投稿を対象にする場合、でもOKです。

コメントも検索対象に含めたい場合は以下となります。

<?xml version="1.0" encoding="utf8"?>
{
data:[
<MTEntries all="1">{
title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
,link:"<$MTEntryLink$>"
,body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$><MTComments>【<$MTCommentAuthor remove_html="1" encode_js="1"$>】<$MTCommentBody remove_html="1" encode_js="1"$></MTComments>"
},</MTEntries>
{title:"",link:"",body:""}
]
}

4.検索窓を設置

/blog/search_data.txtの部分は環境によって階層が違うので、ご自分の環境に合わせてインデックステンプレートから書き出されたsearch_data.txtがある場所のパスに書き換えてください。

<form action="javascript:blogAjaxJsonSearch( '/blog/search_data.txt', document.getElementById('search_box').value );">
<input id="search_box" size="30" type="search" />
<input id="search_button" onclick="javascript:blogAjaxJsonSearch( 

'/blog/search_data.txt', document.getElementById('search_box').value );" value="サイト内検索" type="button" />
</form>
<div class="content"></div>

``の部分に検索結果が表示されます。

設置例

↓↓上記を参考に作った検索フォーム↓↓（実際に検索できます。）

–>

↑↑検索結果がここに表示されます。↑↑

検索がびっくりするほど速いです。これを作った暴想さんに感謝です。

http://java.cocolog-nifty.com/blog/2005/12/typepadmtajaxja_c70d.html http://java.cocolog-nifty.com/blog/2005/12/typepadmtajaxja_c70d.html

参考ページ

https://furyu.tea-nifty.com/annex/2006/05/blog_ajax_json__94c8.html https://furyu.tea-nifty.com/annex/2006/05/blog_ajax_json__94c8.html

https://hyper-text.org/archives/2007/10/ajax_search_mt.shtml https://hyper-text.org/archives/2007/10/ajax_search_mt.shtml

http://www.55link.com/archives/2006/05/13-2213.html http://www.55link.com/archives/2006/05/13-2213.html

jQueryで動くflexibleSearch.jsというものあった

prototypeを使うblog_ajax_json_search.jsよりも、jQueryで動くflexibleSearch.jsの方が使いやすそうです。また今度試してみようと思います。

https://tinybeans.net/blog/2010/12/21-091505 https://tinybeans.net/blog/2010/12/21-091505

https://github.com/tinybeans/jq-plugin-flexibleSearch https://github.com/tinybeans/jq-plugin-flexibleSearch

https://webcake.stars.ne.jp/flexible-search-mt.html https://webcake.stars.ne.jp/flexible-search-mt.html

http://www.skuare.net/2007/11/movable_typeajax.html http://www.skuare.net/2007/11/movable_typeajax.html

Google AJAX Feed APIでアメーバブログのRSSフィードから「PR:」を削除して記事一覧を表示するJavascript

Tue, 30 Jun 2009 11:44:23 +0900

先日、「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:」を除いた新着情報を表示してみた。

↓↓実行結果↓↓

google.load(“feeds”, “1”);
function initialize() {
//RSSフィードの取得 var feed = new google.feeds.Feed(“http://feedblog.ameba.jp/rss/ameblo/atsugirijason/rss20.xml");

//取得するフィード数 feed.setNumEntries(5)

//実際に読む込む feed.load(function(result) {

//読み込めたか判別 if (!result.error) { //表示部分を選択 var container = document.getElementById(“feed”);

//変数の初期化 var list = “”;

//Feedの処理 for (var i = 0; i

ただし、RSSに「PR:」が含まれていなければ新着5件を表示しますが、

新着5件中1件に「PR:」が含まれていた場合、フィード自体から削除して消すのではなく、省略というか、スキップしているだけなので、表示が4件になってしまいます。

それを補うスクリプトは今度チャレンジします。

2009/09/23追記

上記を更に改造↓

**Google AJAX Feed APIで最新の記事一覧を表示する。

**http://qwerty.work/2009/09/google-ajax-feed-api-1.php