首先連線到 https://opensvn.csie.org/MirrorScripts/userscripts/, FF3會出現如下提示畫面. 這時請點選”新增例外網站”:

接著在FF跳出的”新增安全例外”視窗中點選”取得憑證:

取得憑證之後勾選左下角的”永久儲存此例外”, 再點選下方的”確認安全例外”.

接下來再到 VIL Config 點選 Check Now, 應該就可以順利更新.

附帶一提, 如果 filter 有更新成功, 請重新整理頁面. 要確定filter是否有正確執行可以按 config, 進入設定畫面, 在 URL Pattern 下拉選單中應該會有新的 URL 才對.

首先要感謝這些愛用者的支持. 老實說, 這個問題在 3.0b1 時我就已經知道了, 看起來是 Firefox 在 3.0 中對 XPCOM 元件的安全性修正而造成的問題. 到目前為止, 我還找不到對應的解法, 所以得先請各位忍耐一下. 真的非 PicLens 不可的話可以考慮使用 Portable Firefox(在頁面下半的Legacy Versions中可找到2.0.0.14版的下載連結)。

事實上, VIL 在處理 PicLens / Download 功能時採用的方法不算是很正統的處理方式, 而要完全解決這個問題, 只有自己開發 extension 了. 目前我正在著手進行 VIL+ 的開發, 但是最近頗忙, 所以目前還處於停滯狀態 :p anyway, 先放個 screen shot 給大家看看:

VIL Viewer with local directory index. Auto Fit, Thumbs and Info panel are enabled.

總之, 請大家再多耐心等等吧!

這怎麼可能? 這幾個檔加起來也才不到200K吧? 怎麼會off limit? 後來去查了一下 googlepages 的 help, 也沒明確寫出 bandwidth/page view limit 是多少, 只好自立救濟一下囉! 首先把 jquery 指到 Google AJAX Libraries API, 再把其它幾個獨立的 static file(js/css/images, gadgets 程式(xml)本身會被 www.google.com/ig parse 後 cache 起來, 所以不用處理), 移到自己的 hosting, 再加上 gzip & expires header, 以減少 http access 次數.

目前 gadgets 程式檔已經更新, 應該等 igoogle cache 更新後就會生效. 如果有哪位朋友還是遇到 gadget 不正常的話請再通知我囉!

本季目前為止有在看的有18部左右 驚, 如果要我從中選前三名, 大概會是

1. 料理仙姬
2. CHANGE
3. LAST FRIENDS

以下是無責任評鑑(依首集播出日排序) :p

1. 篤姬: 大河劇, 質感還是有一定水準…有空就會繼續看下去. 推薦指數4
2. ケータイ捜査官7 - 手機搜察官7: 就..當作特攝片來看吧. 推薦指數2
3. パンドラ - 潘朵拉: 看妖精三上博史那麼正經的表情好不習慣啊 XD. 推薦指數3
4. 無理な恋愛 - 無理的戀愛: 意外的還滿有趣的, 推薦指數3.5
5. ラスト・フレンズ - LAST FRIENDS: 劇情錯綜複雜又黑暗, 不過我喜歡 心 缺點是看到上野樹里就想到Nodame XD 推薦指數4.5
6. Around 40: 天海還是比較適合演女王…. , 推薦指數3
7. キミ犯人じゃないよね? - 你不會是犯人吧?: 被要潤愛上的一定是犯人 XD. 貫地谷 しほり怎麼跟小山內美步時代差那麼多 orz… 推薦指數2.5
8. 7人の女弁護士2 - 七人女律師2: 第一話有電車+溫泉+殺人事件..好老派的感覺 ._. 推薦指數2
9. 絶対彼氏 - 絕對達令: 帥哥美女賞心悅目啊~ 不過…我想要絕對女友對我說 “H shiyo~” 羞 推薦指數4.5
10. ホカベン - 熱血律師: 雖然劇情有點沉重, 在日本收視率也不高, 不過我個人滿喜歡的.(絕對不是女主角上戶彩的原因) 推薦指數4
11. ROOKIES～ルーキーズ～ - ROOKIES: 感覺演高中生的演員們都超齡很多吧 @_@. 不過熱血的感覺很好啊!! 推薦指數4
12. 模範女秘書: err…圏外. 推薦指數1
13. パズル - 謎: 感覺跟 Trick 好像. 是故意的嗎? 推薦指數3.5
14. ごくせん3 - 極道鮮師3: 老梗….不過在日本收視率怎麼這麼高 !_! 另外..星野亞希++ XD 推薦指數3.5
15. 猟奇的な彼女 - 我的野蠻女友: 微妙…..總是覺得有哪個地方不對勁 o_O. 推薦指數3
16. おせん - 料理仙姬: おせん好口愛啊~~~大心, 缺點是那些食物都看得到吃不到 orz….推薦指數5!!
17. ハチワンダイバー - 81 Diver: 設定還滿有趣的…巨乳女僕 + 將棋, 推薦指數3
18. CHANGE: 木村拓哉就算演阿宅還是木村拓哉, 好久不見深津繪里一開場的網球裝真吸引人 大心, 阿部寬的角色讓我想到龍櫻裡的老師 XD 不過因為目前只出了第一集, 所以推薦指數先給4.5 :p

大概是這樣吧 :p

P.S. 寫完才在想…我有看那麼多部嗎…….. XD

1. 找出相簿裡所有的小圖URL
2. 利用小圖URL找出大圖URL
3. 回傳所有的大圖URL資訊.

再來介紹一下 filter function 回傳的結果定義. VIL 支援的回傳結果種類如下:

1. String array, 每個 Element 就是圖片的URL.
2. Object array, 每個 Element 是一個包含圖片相關資訊的 Object. 這個 Object 可包含以下 property:

• src: 圖片的 URL, required.
• desc: 圖片的說明文字, optional
• thumb: 縮圖的 URL, optional.
• link: 圖片在相簿中的連結, optional.

以上這些 properties 只有 src 是必要的, 其它的 property 如果不存在, 則會自動代換成 src.

接下來我們以無名相簿為例來說明怎麼樣寫 Filter Function. 先隨便打開一本無名的熱門相簿來參考. 在網頁上要秀圖片, 最常用的方法就是用 <img> tag. 所以我們可以用以下方法抓出頁面上所有的小圖:

function(){
  var images = document.getElementsByTagName("img");
}

這樣 images 陣列中就是頁面上所有的 <img> 了. 因此, 用以下迴圈就可以找出所有的小圖URL了.

function(){
  var images = document.getElementsByTagName("img");
  for(var i = 0; i < images.length; i++){
     var imgurl = images[i].src;
  }
}

接下來進行第二步, 來看看大圖和小圖片URL有沒有什麼關聯性. 如果你有 Firebug 可以直接用它來觀察:

不然, 用 DOM Inspector也不錯:

再不然直接 “檢視原始碼” 也可以 :

接下來就是找出大圖的URL:

比對一下:

小圖: http://f4.wretch.yimg.com/bunny1010/9/thumbs/t1344171903.jpg
大圖: http://f4.wretch.yimg.com/bunny1010/9/1344171903.jpg

這樣很明顯了吧? 所以我們再把圖片URL處理一下:

function(){
   var images = document.getElementsByTagName("img");
   for(var i = 0; i < images.length; i++){
       var imgurl = images[i].src.replace(/thumb\/t/,'');
   }
}

這樣就是所有的大圖URL了. 再來把所有大圖路徑存入 Array 之後回傳即可.

function(){
  var images = document.getElementsByTagName("img");
  var myurls = new Array();
  for(var i = 0; i < images.length; i++){
     var imgurl = images[i].src.replace(/thumb\/t/,'');
     myurls.push(imgurl);
  }
  return myurls;
}

如此就完成最基本的 filter 了. 當然功能是很陽春的, 不過已經足夠讓 VIL 顯示圖片了. 對進階功能有興趣的朋友可以參考 VIL wiki 上完整版的 filter for wretch. 如果有了什麼成果, 也歡迎跟我聯絡分享喔!

上圖是在日本東京Metro裡的宣導圖片, 內容是指”請不要獨佔座位, 圖上的行為請留在家裡”. 真是讓我想轉寄給台鐵工作人員, 建議他們也在車上掛上類似的東西…

雖然應該有不少朋友知道, 不過還是再提一下, 我是個火車通勤族, 每天靠火車往返台北上下班.

其實坐火車通勤比大多數人想像的要方便又快速多了, 平均從我出門到進公司, 大約可以控制在50~70分鐘內, 而實際上在火車上的時間則大約是40分鐘上下, 這樣跟一些住在淡水、新店..等台北近郊的同事相比, 也沒有多花太多時間, 而且通勤費用跟搬到台北可能增加的生活費用相比, 真的是太便宜了, 也因此我從畢業後到現在, 都一直維持著這樣的通勤生活.

在車上的時候, 如果幸運的有座位, 那我就會拿出Notebook看看影片或著趕工寫程式什麼的, 沒座位的話通常是看書或是玩手機, 所以坐車對我來說不但不辛苦, 反而是我的一個放鬆時間. 但是通勤這麼多年下來, 難免會遇到一些奇奇怪怪的事情, . 以下是我列出覺得比較困擾的部分…

• 講手機, 而且很大聲, 困擾指數1: 這種情況比較常發生在年紀稍長, 有點耳背的長輩們身上. 他們因為自己聽不清楚, 自然就以為對方也聽不清楚, 所以越講越大聲. 這種情形其實也是在所難免, 畢竟想在台灣推行像日本那樣上電車就用Manner mode是很困難的(大家都習慣了…) 上班時間倒還無所謂, 要是下班的車上, 你正想閉眼休息的時候, 同車廂內有人大聲講手機, 難免就會有想過去把他手機砸掉的衝動.
• 聊天嘻鬧, 旁若無人, 困擾指數2: 這種情況比較常看在假日的通勤電車上出現. 通常都是一群一起出遊的學生們, 佔據了一大排座位, 聊天打鬧, 甚至和坐在對面一排的同學大聲對話. 年青人有活力是還滿正常的, 但是如果當時有人站在附近, 或被夾在你們兩排中間, 對他們來說還滿痛苦的. 另外就是, 通常一群人一起出去, 看到有需要的乘客就比較不會起來讓座. 大概是要假裝沒看到比較容易吧.
• 任意佔用座位或空間, 困擾指數3: 通常車廂內人少的時候比較容易發生. 很多人手上大包小包上車, 就隨手放在身旁的座位上. 可是在上行的火車上, 一般來說在到台北之前, 乘客數都是只增不減的. 每當有人上車, 看著這些放著東西的位子, 又不好意思請對方開口. 如果東西的主人自動把包包拿起來就算了, 但總是會有人完全(或著假裝)沒有意識到其它人的視線, 完全不為所動, 拜託, 不讓座就算了, 請不要拿行李佔用座位好嗎? 另外, 我在某次車廂很擠的狀況下, 聽到鄰座的小姐很嬌傲的跟她朋友說: “妳看, 我每次人很多的時候都會把腳翹起來, 這樣就不會很人站在我前面了, 我不喜歡有人站我前面, 壓力很大…”,這位小姐, 我是不知道您以前有什麼陰影啦, 但人家站著已經很辛苦了, 不用這樣吧? 不然妳站起來讓個座, 妳就不會有壓力了, 這方法不錯吧?
• 把屁股以外的東西放在座位上, 困擾指數4: 用東西佔位子就算了, 比較可怕的是有人會把鞋子脫了, 腳拿到椅子上. 或是有人整個躺平在電聯車的座位. 拜託, 這些座位下個乘客還要坐好嗎? 我看過最誇張的是我下班坐到一班人很少的莒光號, 兩個高中生把前排座位轉了180度, 然後把腳跨在這兩個位子上…我正想過去指正他們, 還好列車長出現主持正義了, 不然我大概會因此上報吧…XD
• 在車上製造氣味, 困擾指數5: 氣味種類其實還滿多的…你永遠不知道下一班會聞到什麼味道. 最常見的是食物的味道. 大部分食物的味導還不會太令人反感, 只要不是臭豆腐或泡菜等有強烈氣味的東西, 應該都還可以接受, 只是對我這個在減肥中的人, 在車上聞到雞排香味時, 還真的滿痛苦的. 但為什麼我給的困擾指數是5呢? 因為曾經遇過一位媽媽(還滿年輕的, 但看起來是外籍人士), 在電聯車上幫他的小孩換尿布(是車廂中, 不是廁所!)….那種味道真是讓人想跳車逃生……..

以上是我個人的感覺啦, 我是覺得要求大家上了車安靜無聲也滿無理的, 而要像日本人哪樣推行車廂中不講手機應該也有困難, 但是, 這些會造成其它乘客很大困擾的行為, 請你 “Do it at home!”吧!

1. 如何比較遠端版本和已安裝的版本?
2. 如何下載並更新本機的Userscript?

首先來看第一個問題. 在 greasemonkey userscript 中, 要取得遠端網站上的資訊可以透過 GM_xmlhttpRequest 來進行, 因此只要遠端的 server 可以提供版本資訊, 或者 Last-Modified, 我們便可以拿來做為判斷依據. 不過以 Last-Modified 來判斷, 比較容易產生誤差. 所幸 VIL 目前是放在 Opensvn上, 而 SVN 會在 HTTP Response Header 的 ETag 中包含 SVN revision number:

---response begin---
HTTP/1.1 200 OK
Date: Sat, 19 Apr 2008 06:24:47 GMT
Server: Apache
Last-Modified: Sat, 19 Apr 2008 05:38:26 GMT
ETag: "55//userscripts/view.image.links.user.js"
Accept-Ranges: bytes
Content-Length: 44055
Connection: close
Content-Type: text/plain
X-Pad: avoid browser bug

所以我們可以比較這個值即可. 但是另一個問題是, 要如何取得已安裝程式的版本呢? 我原本有想過利用 SVN Keyword 的方式, 自動 replace 程式中的 $Revision$ keyword, 不過後來發現 SVN 是由 client 來進行 Keyword replace, 所以使用 HTTP 方式取得的內容Keyword並不會被代換掉, 因此只好用 GM_getValue/GM_setValue 來處理了. 以下便是 check update 的程式碼片斷:

    if('200' != rspDtls.status){
        GM_log('check failed, response HTTP status: '+rspDtls.status);
        return;
    }else{
        var myrev = parseInt(GM_getValue(revtag,'0'));
        var remoterev = parseInt(rspDtls.responseHeaders.match(/Etag:\s+"([0-9]+).*"/)[1]);
        GM_log('remote rev is ' + remoterev + ', current rev is ' + myrev);
        if(myrev < remoterev){
            return updateFunction(rspDtls, remoterev);
        }else{
            if(showOptMessage){
                alert('remote rev is ' + remoterev + ', my rev is ' + myrev + ', no need to update.');
            }
            return true;
        }
    }

至於第二點, “如何下載及更新本機Userscript”, 我一開始的想法是直接 window.open() 到 userscript 的 URL, Greasemonkey 便會自動出現安裝提示. 但後來發現, 這樣的安裝方法會清掉現有的 Include/Exclude page 設定, 所以便改用直接覆蓋已安裝檔案的方法. 而問題又來了: 要如何取得現有的安裝路徑及檔名呢? 這時候就要直接去挖 greasemonkey extension 的 source 了. 在 greasemonkey 的 util.js 中可以看到這一段:

function getScriptDir() {
  var dir = getNewScriptDir();

  if (dir.exists()) {
    return dir;
  } else {
    var oldDir = getOldScriptDir();
    if (oldDir.exists()) {
      return oldDir;
    } else {
      // if we called this function, we want a script dir.
      // but, at this branch, neither the old nor new exists, so create one
      return GM_createScriptsDir(dir);
    }
  }
}
function getNewScriptDir() {
  var file = Components.classes["@mozilla.org/file/directory_service;1"]
                       .getService(Components.interfaces.nsIProperties)
                       .get("ProfD", Components.interfaces.nsILocalFile);
  file.append("gm_scripts");
  return file;
}

function getOldScriptDir() {
  var file = getContentDir();
  file.append("scripts");
  return file;
}

直接 copy paste 到 VIL 中就 ok 了. 取得 script install dir, 再用 DOMParser 取得安裝後的檔名(修改自 greasemonkey 的 config.js):

function getInstalledFileName(){
    var installedFilename = '';
    var configContents = getContents(getScriptFileURI("config.xml"));
    var domParser = new DOMParser();
    var doc = domParser.parseFromString(configContents, "text/xml");
    var nodes = doc.evaluate("/UserScriptConfig/Script", doc, null, 0, null);
  for (var node = null; (node = nodes.iterateNext()); ) {
        var fname = node.getAttribute("filename");
    var name = node.getAttribute("name");
    var namespace = node.getAttribute("namespace");
        if(name == MY_NAME && namespace == MY_NAMESPACE){
            installedFilename = fname;
            break;
        }
  }
  return installedFilename;
}

之後就直接 overwite 掉現有的 userscript, 再 alert 提示使用者重新整理頁面即可.

解決這兩個問題之後, userscript 便可以享有 auto-update 的功能了. 有在寫 userscript 的朋友可以參考看看.

完成後:

用 AutoUpdate 有什麼好處呢?

1. 不用重設 include/exclude page (如果直接用 greasemonkey 重新安裝就要重設)
2. 除了自動 update userscript, 還會自動更新 filter config!

設定頁面如下:

趕快安裝後試用看看吧!

PS. 如此你現在已經有另外設定過 include/exclude page, 那麼可以參考以下做法避免重設 include/exclude page:

• 打開 Greasemonkey 管理頁面:

• 先於左側點選 “View Image Links”, 然後再點選下方的 “編輯”:

如此一來, Firefox 會用 text editor 開啟已安裝的 userscript file, 此時自行把最新的 source code 貼上後存檔即可!

這次的議程一如往常非常充實, 第一天議程主要由各 Sponsor 主講, 內容涵蓋 OS, Web/javascript, Distributed Computing 及語文處理, 最後還有 Kawasaki 桑的 Jet Stream Attack!, 第二天則分兩個場地同時進行, 而高天師一人主講三場更是當天的最佳男主角 第二天最後的 Lightning Talk 我也有報名參加. 事實上, 這是我第一次在這類活動中上台分享, 內容就是前幾篇提到的View Image Links. 時間只有短短5分鐘, 不得不很快帶過, 但是重點應該是都有講到了, 大家似乎也聽得很高興, 算是還不錯啦!

當然, 議程豐富之外, 網路(雖然我的網卡太舊連不上 orz)、點心及正妹一樣不缺(真相請到 flickr 上的 OSDC.tw Pool 找…), 更是大快人心!! 尤其是點心的充實程度, 差點讓我停不下來 XD 另外, 會場文化大學大新館離我當兵時的營區很近, 所以中午時自然是由我帶路找飯吃. 第一天吃了桃源街的菜肉大餛飩(Kawasaki桑還在他的旅遊書上找到推薦 XD). 而第二天則是吃了我很懷念的龍記搶鍋麵, 真是滿足啊!! 不過貪嘴的後果就是兩天下來胖了一公斤多 :~~~

明年的 OSDC 還會不會繼續舉辦呢? 這麼好的活動我當然是希望會繼續辦下去囉….也希望我明年還有空參加 XD

PS. 我在 Lightning Talk 的 Slides 可以在 這裡線上觀看, 或是在這裡下載PDF檔.