FlickrProxy #1 - Overview

久久沒動手寫 code，手又開始癢了... 前陣子跟小熊子聊的時後想到一個新的 IDEA，就順手記下來。像我們這種自己用ADSL架的小型網站，瓶頸都是卡在頻寬。愛拍照的小熊子最在意的當然就是網站擺照片所需要的頻寬... 解決方式其實有一堆，像是 Live Writer 就有個很有名的 PLUGIN，可以直接插入你放在 Flickr 的照片...

其實這類的 solution 很多，但是用起來就覺的不大喜歡，怎麼說? 倒不是說軟體不好用，而是它的作法。這類 plug-ins 都是幫你一次把事情作好，幫你上傳到 flickr，幫你查出 link，幫你產生HTML片段，貼到 WLW... 這種作法的問題在於你張貼文章時，這些資訊就得確定下來。你沒辦法裝了這個外掛，就把你八百年前貼的照片一起轉到 flickr，你也被這個外掛還有你的 flickr 帳號綁死了，未來換帳號的話，或是你沒有 WLW 可以用時，這些功能都沒有了。

我比較喜歡的是 server side 的 solution，如果是透明的 (像 PROXY) 更好，如果隨時可以不要或是改設定最好，這樣我不但不用綁死在我的某個 flickr 帳號上，甚至不用綁在 flickr 這樣的服務...

過去 (沒想到已經快四年了 -_- ) 其實我作過幾個類似的 HttpHandler，都是用一樣的理念去開發的。這次想的是利用 Flickr 提供的 API，來做一樣的事。

簡單的說，如果我能夠寫個程式，能夠在 Run Time 動態去檢查網站上某張圖檔有沒有傳到 flickr 上? 如果沒有且判定不需要，則像一般網站一樣直接在 Http Response 傳回圖檔的內容。如果需要則自動上傳到 flickr，最後把這個 Http Request 重新導向到 flickr 上的照片網址。

這樣作法最後的結果跟 WLW 搭配 flickr plugins 差不多，差別在一個是靠 client 端，在你張貼文章時幫你處理掉一連串的動作，我的作法是統一在 server 端，在觀看文章內容時才做這件事。效能一定不如 WLW + Flickr plugin 好，不過就是多了彈性。我可以隨時關掉這個功能，隨時換相片服務，另一個更重要的是我自己保有一份完整的網站跟檔案資料。如果我的 BLOG 資料散在各地各個服務，我要備份或是還原等等也都很辛苦...

講了一堆都是廢話，其實這篇主題只有一個，就是想到好點子又要開始動手寫 code 了 [:D] ，有點成果之後會陸續在貼幾篇相關的文章。在之前作了 POC ( Prove Of Concept )，證明這個技巧是可行的，剩下的就是真正動手寫了。另外也有一個目的，就是想把之前寫的另外兩個 HttpHandler 整合起來，弄成統一的 provider 架構來實作。

想的很美，照片就轉到 Flickr，影片就轉到 YouTube ... 不過影片那邊的難度就高的多了，現在的實作只是從 HTTP 自動轉到 RTSP 而以.. ZIP 檔現在是虛擬化成一個資料夾，未來看看能不能自動轉到 Microsoft SkyDrive 之類的服務....

好，先寫到這裡，敬請期待下集 [:D]

2008/05/16 作品集: FlickrProxy .NET ASP.NET 作品集

Next Ten Years...

經過一個禮拜的準備，總算在這週末完成移機的動作了... 為什麼標題叫 "Next Ten Years" ? 因為換下來的 server 已經陪我十年了，不知道這次換的新 SERVER 能不能陪我再撐十年?

沒想到當年的 ASUS P2B-DS 這麼耐用，中間換了 CPU，換了 RAM，機殼，顯示卡，連硬碟光碟都換過好幾次了，唯獨主機板跟 Power 都沒換過...

 
舊 server 拆掉前

其實舊 server 能撐這麼久也不是沒有原因的，除了硬體都沒壞之外，老實說跑跑簡單的 NAT / DHCP / DNS 也都夠用，跑現在這個網站 (BLOG + SQL) 也都撐的住。不過規格時在是不饒人啊，現在已經買不大到 IDE 的硬碟了，就算買的到也很不划算。前陣子弄了張 PCI 的 4 ports SATA card，結果也因為BIOS實在太古董了，裝上硬碟就停在那邊不開機 @_@，舊硬碟只要 COPY 大檔，SQL 2005 Express 就給我罷工... 最後跟同事借了台量耗電的機器，舊SERVER一開機就要 150W... 以它的處理能力來說實在不划算，所以才會忍不住去敗了零件來換...

本來換機的 roadmap 規劃的很漂亮，想說等到 2009 Q1 ~ Q2，INTEL換了新的架構後，現在的桌機 (P5B-E Plus + E6300) 拿來當SERVER，桌機就換新的... 不過實在是受不了硬碟一直維持不到 5% 剩餘空間，加上每次一挪空間網站就給我掛掉，就改變策略直接買來換掉現在的SERVER，桌機就將就點用吧...

這次換的配備，都是以省電為主要訴求，規格就挑同級裡最低階的:

一直覺的SERVER還要找張VGA卡裝上去實在是很雞肋，跟本用不到幾次，不過不裝又很麻煩... 雖然2003號稱可以支援，不過我想還是別自找麻煩好了 [H]，主機板就鎖定 Q35 的，因為它定位在商用機種，內建 VGA，同時又保有基本的效能... 不會像其它內建顯示晶片的板子，要嘛RAM只能插兩條，不然就是SATA只有四個...

CPU挑了四核最入門的 Q9300，為什麼不挑 Q6600 ? 差一千五左右，不過耗電量跟溫度都有差，因為我堆SERVER的房間通風很差，太熱實在很麻煩，就挑了Q9300. 硬碟挑的是WD GP系列，閒的時後轉速可以自動從7200降到5400，正好符合我的需求。我一向不大在意硬碟有多快... 反正快慢頂多差個10%，實在沒差多少，容量多一點，溫度低一點比較實在..

裝好的新 SERVER

舊 SERVER 把機殼塞的滿滿的，相對之下新SERVER就顯的小多了，多插張網路卡就一切搞定了，之前插的滿滿的 (網卡 x 2 + USB + VGA ...) 耗電量也省的多，之前只接一顆硬碟，只要 70W... 四顆硬碟都加上去應該也不到 100W... 早知道買 330W 的 POWER 幹嘛...

移機的過程就不提了，原本還很謹慎的弄台IP分享器，想說換機過程中至少讓家裡對外網路是通的，事實證明這完全是多此一舉... 家裡會上網的人全都睡覺去了 [H]... 不過還是要感謝一下提供IP分享器的米國人 [:D] (沒錯，Honga 就是你..)，貼張照片感謝一下:

換完後又設定東設定西，檔案這裡搬過來那裡搬過去，總算弄完了。最後除了舊的 Modem 找不到 windows 2003 x64 driver 之外，其它一切正常。因為系統都重灌了，有缺啥設定漏掉的，或是發現網站那裡不正常的再通知我吧!

--------
趁機借問一下，有沒有推薦的 USB Modem (我只要拿來收發傳真而以)，有 2003 x64 驅動程式的? 網站是找到幾款，不過都是天價，不然就是市面上買不到...

2008/05/12 有的沒的 水電工

停機公告

因為現在 SERVER 已經是換機櫃, 藏在雜物間了, 拔機器很麻煩... 隨便換個東西就要半天一天的, 因此先公告一下.

時間不是這週末 (2008/05/10 ~ 11), 就是下週末 (2008/05/17 ~ 18), 會被影響的人請事先作好心理準備吧 [H]

誰會被影響? 不多啦, 只有...

1. 忠實讀者 (老闆說客戶永遠要擺第一)
2. 在我家上網的人 (除了家人外, 還有用我無線網路的好鄰居...)
3. 網站 Hosting 在我這邊的人
4. DNS Hosting 在我這邊的人
5. 那堆到對岸上班, 老用我的 VPN 上網的同學
6. 沒了...

看起來好像很多? 哈哈... 加一加不知道有沒有十個人? [H]

2008/05/06 有的沒的 水電工

Canon CR2 --> .JPEG 速度加倍.. 該換 Core2 Quad 了嘛?

看來是換四核心CPU的時機到了 [H]

之前弄了半天的歸檔程式，效能都卡在 .CR2 -> .JPG 這段。雖然祭出了 ThreadPool，也想盡辦法把獨立的工作湊在一起，盡量提升 CPU 的利用率，不過得到的效果有限，因為最後都是剩下 .CR2 的檔案轉不完啊，其它拿來填空檔的工作早就做完了，實在不成比例... 整體效能還是卡在最慢的 Canon Codec 身上...

這次無意間想到，單一 process 內，Canon Codec 有過多不能重複進入的問題 (不能同時利用到兩顆CPU)，那麼拆成兩個獨立的 process 是否就解決了?

想一想還蠻可行的，通常為了安全，都只需要做到 process 內的 LOCK 就夠了，不需要做到全域的 LOCK，除非要 LOCK 的資源是跨 process 會用的到的才需要這樣做... 在真正改程式下去之前，當然要先驗證一下...

用之前的 LIB 簡單寫了個執行檔，就單純的把 .CR2 轉 .JPG 而以。寫好後同時 RUN 兩份，讚! CPU 利用率飆到 80% (雖然離理想的 100% 還有段距離) ... 不過在我的 E6300 CPU，同時跑兩份，執行速度倒沒有下降，差不多..

確定這方式有效之後，花了點時間改我的歸檔程式，把轉檔部份抽成 .exe 然後由歸檔程式來啟動，一樣維持同時有兩個 .CR2 轉檔程序進行。耶! 情況不錯，轉一個檔案一樣要 70 秒，但是 70 秒過後可以轉完兩個檔案... 平均起來等於速度加倍了...

之前一直不想用這個方法，因為一來 IPC (inter-process communication) 是件麻煩事，不想去碰，二來啟動另一個 process，參數的傳遞也是個麻煩事，大概就只能靠檔案或是 arguments ... 或多或少都要處理到一些 parsing 的問題... 三來執行的回傳值也是一樣，總之都碰到 IPC 的問題就不想去碰他了

不過這次評估了一下，這些動作麻煩歸麻煩，至少不是花運算資源的動作，跟一張照片轉 70 秒，一次動則上百張的量比起來，怎麼算都划算...

真糟糕，這樣下去是不是代表該換 Q9450 了? 咳咳...

2008/04/10 .NET WPF 作品集 多執行緒 技術隨筆 有的沒的

搭配 CodeFormatter，網站須要配合的設定

題外話，這個 plugins 又有小改版了，原網址可以 [下載]..

到這邊差不多告一個段落了，歡迎各位下載回去用。只不過有些功能，你的BLOG SERVER要配合調整才會有效。統一說明一下:

1. CSS

我喜歡用這個函式庫的主要原因，是因為它長出來的HTML很乾淨，因為樣式的部份都拆出來到CSS了。不過缺點也是你必需另外想辦法把CSS放上去... 附上原廠提供的CSS內容，看你的BLOG SERVER可以怎麼改就怎麼改。以我用的CommunityServer為例，只要進入DashBoard，到修改版面的地方，它提供 "Custom Styles (Advanced)" 頁面，把 CSS 貼進去就搞定了!

.csharpcode, .csharpcode pre{	font-size: small;	color: black;	font-family: Consolas, "Courier New", Courier, Monospace;	background-color: #ffffff;	/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {	background-color: #f4f4f4;	width: 100%;	margin: 0em;}.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre

{

  font-size: small;

  color: black;

  font-family: Consolas, "Courier New", Courier, Monospace;

  background-color: #ffffff;

  /*white-space: pre;*/

}

.csharpcode pre { margin: 0em; }

.csharpcode .rem { color: #008000; }

.csharpcode .kwrd { color: #0000ff; }

.csharpcode .str { color: #006080; }

.csharpcode .op { color: #0000c0; }

.csharpcode .preproc { color: #cc6633; }

.csharpcode .asp { background-color: #ffff00; }

.csharpcode .html { color: #800000; }

.csharpcode .attr { color: #ff0000; }

.csharpcode .alt 

{

  background-color: #f4f4f4;

  width: 100%;

  margin: 0em;

}

.csharpcode .lnum { color: #606060; }

不過別急著貼!!! 如果你想要下一個功能的話，CSS 還要再多貼一段...

2. COPY CODE

這個功能不難，就透過 JavaScript 把一段文字放到剪貼簿就完成了。不過麻煩的是這些 CODE 怎樣偷渡到文章內容裡... 我用的 CS 預設會把 <SCRIPT> 給檔掉，直接在HTML裡加SCRIPT是行不通的。當然可以改communityserver.config，不過這樣有點麻煩，不喜歡這樣改... 於是我搬出了 HTC..

HTC 的原理很簡單，CSS是統一管理各種樣式，而DHTML的一堆事件，像 onclick="..." onload="..." 等等事件為什麼不能像CSS一樣統一管理呢? 可以的，只不過這就要靠 IE 才支援的 HTC (HTML Component) 才辦的到。後起之秀JQuery其實也有差不多的功能，不過要搭配 CS 的話，一樣得想辦法把 <SCRIPT> 給藏到HTML裡有點麻煩... 所以最後我還是選用 HTC 的方式來實作這個功能。

設定很簡單，CSS 再加一段就好:

.copycode {cursor:hand; color:#c0c0ff; display:none; behavior:url('/themes/code.htc'); }

.copycode {cursor:hand; color:#c0c0ff; display:none; behavior:url('/themes/code.htc'); }

再來就是把這個 HTC 檔案放到 CSS 裡指定的目錄，以上面的CSS來說，你應該把HTC放在 /Themes/Code.HTC

SERVER 的部份這樣就大功告成了。未來在插入CODE時，只要勾選這個選項 [產生出來的HTML會包含原始程式碼]:

最後輸出的成果就會像這樣，標題右方的 [copy code] 功能就正常了。按下去之後，SAMPLE CODE 就會自動複製到剪貼簿，不會因為加了一堆格式，讓你複製下來的 CODE 不能直接使用...

using System;public class Sample {    void Method() {    Object Obj1 = new Object();    Object Obj2 = new Object();    Console.WriteLine(Obj1.Equals(Obj2)); //===> false    Obj2 = Obj1;    Console.WriteLine(Obj1.Equals(Obj2)); //===> true    }}

   1:  using System;

   2:   

   3:  public class Sample {

   4:      void Method() {

   5:      Object Obj1 = new Object();

   6:      Object Obj2 = new Object();

   7:      Console.WriteLine(Obj1.Equals(Obj2)); //===> false

   8:      Obj2 = Obj1;

   9:      Console.WriteLine(Obj1.Equals(Obj2)); //===> true

  10:      }

  11:  }

這個功能，在預覽的時後就沒加上去了。另外預覽的畫面也做了點調整，一方面不是直接用IE開啟HTML檔，因為這樣會有一堆安全警告的訊息，我改用HTA (HTML APPLICATION)來實作預覽的功能。為了感謝提供這個LIB的原作者，我也在預覽的畫面裡加上他的首頁了。最後，當然也要讚助一下我自己的網站... 哈哈 [H]

好，這個PLUGINS大概就告一個段落，未來大概就修正BUG了，需要的人歡迎下載使用。如果要散佈請注明出處。

[下載位置]

2008/04/04 .NET 作品集 技術隨筆