Linked CSE (Custom Search Engine)

Google的自訂搜尋引擎，讓使用者利用Google的資源打造自己的搜尋，設定檔可以放在Google上用代號連結，或是放在其他地方用url連結 (Linked CSE)，使用Linked CSE可以在使用者端動態的改變設定檔及其連結，增加了很大的彈性。另外Google有提供一些工具，可以動態產生設定檔，例如makecse可以讀取HTML、RSS、ATOM、OPML格式的檔案，掃描其中的連結，作為設定檔中的網域限制，來限制CSE的查詢範圍，Blogger in draft中的search box的其中一部分，就是使用這個功能，提供範圍為blog中所有連結的查詢。

可以用這個線上Demo來測試，試試在URL欄輸入feed的位置，會有什麼效果。

Blogger Data API能產生符合多個標籤的文章的feed (使用summary post，而不是full post，以減少不必要的連結，max-results參數設成很大的數以取得所有符合的文章)，加上Linked CSE、makecse (參數設定pattern=exact)，雖然還有些缺陷，但是可以做出多標籤文章中的關鍵字查詢 (Multiple labels or tags keyword search)，當文章越來越多，若是標籤有分類好，這個功能將來也許會有用處。

這個方法的缺陷在於：

1. 因為makecse本身的功能，會多出一些網站 (feed中多餘的資訊，或是文章摘要中的連結)，目前一般只會多一個，例如傳入http://happytemplate.blogspot.com/feeds/posts/summary/-/Javascript/Cross%20Domain這個feed，產生的設定檔會多出happytemplate.blogspot.com/search/label/Javascript。
   (非本網誌的連結可以用搜尋運算子site:來排除，使用Google AJAX Search API的話，可以用setQueryAddition()在幕後加入。若要完全解決多出來的一個網站，需要用其他方法動態產生設定檔。)
2. 目前只有web search有此功能，blog search還沒有，差別在於文章本身之外的內容也可能會被搜尋到，例如在側邊欄中的東西。
3. 因為設定檔是動態產生，所以會要多等一下，若是使用Google AJAX search control，通常第一次搜尋，會有提示訊息要你過幾秒再按一次。

使用Google AJAX Search API做了以上的功能放在側邊欄，介面使用其中的google.search.searchControl，沒有多作修改。

Read more

Label Cloud Online Test

標籤雲的基本原理很簡單，就是改變一下CSS而已。

Blogger中的標籤格式大致如下：

<div>
  <ul>
    <li><a>AAA</a><span>(2)</span></li>
    <li><a>BBB</a><span>(1)</span></li>
  </ul>
</div>

只要將<li>設成display:inline，就會變成橫向表示，IE上要使標籤換行，還要在外面的區塊加上word-wrap:break-word (不知道是否有其他方法)。文章數的部分可依需要改變，例如是否顯示及顏色大小等。接下來就是依照標籤的文章數將標籤的顏色大小加以改變，顏色加在<a>上，文字大小加在<li>上 (好像這樣line-height才會有用)。
依照文章數改變style一般使用以下的方法，以log(文章數)/log(最大文章數)來做加權：

weightStyle( min, max, count, maxCount ) {
  if (maxCount <= 1 || min === max ) {
    return max;
  } else if (min < max) {
    return min + Math.floor(Math.log(count) * (max-min) / Math.log(maxCount));
  } else {
    return min - Math.floor(Math.log(count) * (min-max) / Math.log(maxCount));
  }
}

加權的方式可以自己做合理的改變，例如想要靠近代表最小值的顏色多一點，可以依照比例縮小加權用的文章數：

if (count < maxCount*0.66) {
  count = (count-1)*0.3 + 1;
}

標籤雲的線上測試：用來選擇自己喜歡的顏色及大小範圍、加權方式，可以設定標籤數、最大文章數，按下Refresh按鈕重繪。繪圖使用jquery plugin：flot，顏色選擇器使用yui color picker，flot使用canvas繪圖，因為IE不支援，所以需要ExploreCanvas (動態載入ExploreCanvas的話，flot繪圖會有問題，目前原因不明)，祝大家找到自己喜歡的標籤雲。

Read more

Google AJAX Feed API

Google.com serves as a proxy to the outside feeds。

Google AJAX Feed API是Google AJAX API的一個分支，簡單來說就是連到Google來取得feed，本質上仍是使用script tag的方式突破same-origin policy取得資料。

• 說明上說要先申請一個Google API key，雖然要輸入使用的URL（說明上說在此URL下所有的子目錄都可以使用，且可以用不同的URL申請），但是我用部落格申請的key，在個人電腦上也可以用，好像並沒有限制，甚至沒有key也可以用。
• 依照Developer's Guide的說明，使用起來非常直覺簡單。
• 有提供JSON、XML、Conbined JSON/XML三種資料格式，JSON格式將RSS或Atom的部分常用元素轉成對應的欄位，並統一名稱，並沒有全部轉換，XML格式可以使用google.feeds.getElementsByTagNameNS來取得擴充的資料。
• feed資料由crawler（Feedfetcher）取得，所以不一定是最新的。
• 可以設定取得資料的數量，預設是4個。
• 對於一般的資料顯示，有FeedControl可以直接用，另外還有提供一些成品可以套用（請參考Example、Blog）。
• 甚至可以做feed的查詢及探知。

範例

<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("http://api.flickr.com/services/feeds/photos_public.gne?tags=羅平,油菜花,sunset&tagmode=all");
  feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
  feed.load(function(result) {
    if (!result.error) {
      var div = document.getElementById("flickr photos");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var img = document.createElement("img");
        var imgLink = google.feeds.getElementsByTagNameNS(entry.xmlNode, "http://www.w3.org/2005/Atom", "link")[2];
        img.setAttribute("src", imgLink.getAttribute("href"));
        img.setAttribute("title", entry.title);
        img.setAttribute("width", "200");
        img.setAttribute("height", "116");
        var a = document.createElement("a");
        a.setAttribute("href", entry.link);
        a.setAttribute("target","_blank");
        a.appendChild(img);
        div.appendChild(a);
      }
    }
  });
}

google.setOnLoadCallback(initialize);
</script>

動態載入^{updated on 2008-04-18}

基本上使用Google AJAX API loader載入所需的模組分為兩個階段：

1. <script type="text/javascript" src="http://www.google.com/jsapi"></script> 建立google、google.loader模組及相關函式。
2. 使用google.load(moduleName, moduleVersion, optionalSettings)載入所需要的AJAX API模組，例如google.load("feeds","1")載入google.feeds模組

Google對這兩個階段都提供了動態載入的支援 (參考：blog、doc)：

1. 加上callback參數，動態插入<script type="text/javascript" src="http://www.google.com/jsapi&callback=YOUR_CALLBACK"></script>，載入完成後會執行所指定的回呼函式。
2. 傳入callback參數，google.load(..., ..., {"callback": YOUR_CALLBACK})會使用動態插入script tag的方式載入模組，完成後會執行所指定的回呼函式。

Read more

Multiple labels or tags search

目前很多網站及部落格都有提供使用標籤來分類文章的功能，對於以網頁提供服務的方式，這是傳統目錄分類方式的合理替代品。在瀏覽部落格時，常會想要找出符合多個標籤的文章，但網站上通常都沒有明確的說明如何做到，只把標籤當作類似單層的目錄來使用。

以下是我目前知道的多標籤查詢方法：

1. Technorati

在 Advanced Serch 中，Tag Search 好像可以做多個標籤邏輯組合的搜尋（使用AND、OR、NOT，空白似乎代表AND，標籤中有空白的話可用雙引號「"」將標籤包起來），但是介面上缺少只搜尋某個網站文章的功能，但是上面的 Keyword Search 卻有這項功能，使用的參數名稱是from，於是試著自己加看看，結果竟然成功了。

例如要搜尋 Ajaxian.com 上包含 jQuery 和 Prototype 標籤的文章（標籤的大小寫好像無關，這點跟一些部落格上的查詢好像有差），可以在網址列上輸入 http://technorati.com/tag/jQuery+AND+prototype?authority=n&language=n&from=http://ajaxian.com/ （中間用 jQuery+prototype 也可以）。

可惜的是查詢結果的 feed 及網站所提供的 Tag Query API 無法用上面的參數得到限制網站的結果，不過或許還有隱藏秘技沒被發現，有了這些資訊，要自己做一個多標籤限制網站的Technorati搜尋介面應該不難。

另外有的部落格較舊的文章在 Technorati 上找不到。（ps. 關於 Technorati 有一些問題，例如如何與部落格同步增減標籤及文章，或著如何以人工方式做到，如果有人知道希望能分享一下）

2. Blogger Data API（for Blogger.com 的 blog ）

Blogger Data API 是 Google Data API 的一個分支，提供以 feed 的格式存取 blog 資料的功能，其中包括查詢多個標籤文章的功能，例如要查詢本站包含 Javascript 和 Cross Domain 標籤的文章，可以輸入 http://happytemplate.blogspot.com/feeds/posts/summary/-/Javascript/Cross%20Domain。

要注意的是標籤的大小寫要一致，並且要經過 UTF-8 編碼，目前只支援 AND 的功能，用「/」表示。另外網頁上所列的查詢參數有一些錯誤，orderby 的值可以是 published（發佈）或 updated（更新），updated-min 和 updated-max 要與 orderby=updated 一起用才會有效，日期時間的值似乎不能加後面的時區（與 Google Data API 上說的不一樣），以上這些可在討論群組中找到。

利用這些資訊，練習寫了一個 Multiple labels search，放在側邊欄：

• 多個標籤的 AND 以「/」表示，標籤與/之間不能有空白，例如：Javascript/Cross Domain
• 本站查詢可以從下方標籤雲以拖拉的方式輸入
• 可以查詢其他 Blogger.com 的 blog
• 日期格式為YYYY-MM-DD，會跳出月曆方便選擇，不接受時間
• 為了方便，日期範圍統一依照排序方式為發佈日期或更新日期
• 顯示的日期時間以查詢目標網站的時區為主，不做轉換

程式方面的感想：

• 使用 dynamic script sag 及 JSONP 方式取得資料，若是查詢失敗或產生的網址有錯，script tag 的 onload 事件好像不會觸發，所以使用 timer 來刪除失敗時的 script tag，不知道是否有更好的方法，另外不知是否有辦法取得 script tag 所載入的內容。
• IE 真的很難搞，連簡單的產生並設定 DOM 物件的屬性的都會有問題，根據網路上的討論，似乎短時間內還不會改變。
• 放在 Google project hosting 的 download 中的 css 檔似乎無法在網頁中直接連結，還不知道原因。
• 會再用 Google AJAX Feed API 試試看。
• Yahoo Pipes 的 Filter operator 也可以用來過濾標籤，但是對於 Atom 格式的 feed 會有問題，未深入研究，不知怎樣將參數導入 Filter operator。

Read more