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

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

Syntax Highlight

厭倦了單調的程式碼嗎，來加點色彩吧！

當你需要某種軟體功能時，要花多久時間才能找到讓你滿意的答案呢？龐大的資料量，加上不同的用語、語言、資料來源，使得需要在搜尋結果中花費很多時間來篩選，然後還要再一一測試，而且說不定還找不到想要的結果。所以搜尋引擎還有很多進步空間，suryvey、catalog類型的網站或文章還是需要的。

對於將程式碼加上語法色彩，大致上分為兩類，事先產生後將靜態的資料貼到網頁上，或是以javascript線上即時修改網頁，以下是一些例子：

事先產生：

1. Highlight(名字真直接)
桌上軟體，可將檔案轉換成所選的格式，語法以副檔名判斷，可選擇配色、CSS是否inline、是否顯示行數，可自行定義語法及配色，若輸出格式選擇UTF-8，中文在預覽視窗會是亂碼，不過輸出的結果是正確的。

因為使用CSS檔，以下程式碼在feeds中顯示會有問題。

//syntax highligth 測試程式碼
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  logger.info("copy 開始!");
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
  logger.info("copy 結束!");
}

2. SyntaxColor4Writer (Windows Live Writer Plugin)
需要.NET 2.0，使用inline CSS，神奇的是會將WLW轉換編輯模式後吃掉的空白和斷行回復。
註：0.26版在WLW 12.0.1367.1128無法執行

//syntax highligth 測試程式碼
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  logger.info("copy 開始!");
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
  logger.info("copy 結束!");
}

3. CodeSnippet(Eclipse plugin)
將所選程式片段依Editor中的顏色設定產生輸出，因為如此所以不需要定義語法，但是目前只支援幾種格式，使用inline CSS。

//syntax highligth 測試程式碼
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  logger.info("copy 開始!");
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
  logger.info("copy 結束!");
}

4. Iris Syntax Highlighter(C# Open Source)
提供網頁版syntax highlight介面，下載版需要.NET 2.0，利用Vim(一種文字編輯器)已有的語法定義檔，支援超過460種語法，可選擇配色、是否顯示行數，可自行定義語法及配色。

	//syntax highligth 測試程式碼 public static <T> void copy(List<? super T> dst, List<? extends T> src) { logger.info("copy 開始!"); for (int i = 0; i < src.size(); i++) { dst.set(i, src.get(i)); } logger.info("copy 結束!"); }
1 2 3 4 5 6 7 8

線上即時：

1. SyntaxHighlighter (Yahoo Developer Network上有在用)
可以處理<textarea>(ps. 為了在feed中有較好的顯示結果，最好還是使用<pre>)，使用CSS檔做樣式，適合用在少量程式碼的情況(因為用regular expression來做parse)，在Blogger上因為轉換換行符號的問題，需要特別設定(只是多呼叫一個函示)。

//syntax highligth 測試程式碼
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  logger.info("copy 開始!");
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
  logger.info("copy 結束!");
}

Read more