2008年4月17日

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

2008年4月14日

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