Chrome Extension其實還蠻簡單的, 之前無聊試寫了一個, 其實也不是啥大東西, 就只是去氣象局抓張最新的衛星雲圖回來

沒啥code, 隨便把它開放出來好了:  https://bitbucket.org/fishuman/taiwansatimage/src

前篇提到利用CutyCapt來產生Web page thumbnail, 不過畢竟CutyCapt是C++寫的, build出來也是一個執行檔, 寫完上一篇就有股衝動想用PyQt來做, 反正一樣可以利用Qt/WebKit, 原理應該相同的

沒想到, 真的那麼簡單, 只用了二十幾行code就可以辦到了

這邊主要利用到的一個class就是 QWebPage , 透過這個class我們就可以很簡單的達成這任務

為了程式的重複利用性, 我把它包裝成一個class PageRender:

class PageRender(QObject):

    def __init__(self, url, outfile, scale):

       QObject.__init__(self)

       self.outfile = outfile

       self.scale = scale

       self.web = QWebPage()

       self.web.mainFrame().load(QUrl(url))

       self.connect(self.web, SIGNAL(“loadFinished(bool)”) ,self.loadFinished)

    def loadFinished(self, b):

        print “load finished”

        self.web.setViewportSize(self.web.mainFrame().contentsSize())

        image = QImage(self.web.viewportSize(), QImage.Format_ARGB32);

        painter = QPainter(image)

        self.web.mainFrame().render(painter)

        painter.end()

        thumbnail = image.scaledToWidth(self.scale)

        thumbnail.save(self.outfile)

        app.exit(0)

 在Constructor那邊做的就是把loadFinished跟我們實際處理save to thumbnail的function connect在一起

而在loadFinished那邊就是實際render到image的部份, 這邊要注意的是:

self.web.setViewportSize(self.web.mainFrame().contentsSize())

這是把QWebPage的View port size設成跟實際content一樣大, 後面接著我們就可以建立QImage跟其相對映的painter, 然後用QWebFrame的"render()“把它實際輸出到image

最後scale到我們想要的大小(pixels)

這邊是一個實際call它的範例:

p = PageRender("http://www.yahoo.com.tw”, “sssss.png”, 200)

結果:

實際的程式可以在此下載

剛突然想弄一個可以產生Web page thumbnail的service

第一個想到的是能不能用Webkit做一個, 不過, 自己寫, 有點太麻煩了, 想說應該有人做過, 後來就找到這個: CutyCapt 

這軟體是用qt寫的, 也不會很複雜, 只有六百多行 (有點想用PyQt仿一個 :P), 也很容易就可以build起來了(只要qmake; make), 但記得要裝libqt4-dev就是了

使用方式很簡單:

CutyCapt -url=http://julianshen.posterous.com -out=julian.png

但產生的檔案, 是一整個頁很大一張, 像這樣(點開可以看大圖) :

這樣就不能算是thumbnail了吧?

所以只好拿ImageMagick來剪成200x200的Thumbnail

我用的command是這樣:

convert -resize 200 -shave 0x200 julian.png julian_small.png

出來的結果:

再找時間包裝成一個web app吧~~

晚上快速翻了一變 memcached , 想了一些想法, 趁還沒忘之前先寫下來再去睡好了

memcahced的設計概念說實在的簡單到不行, 說簡單不是說他不好或是沒什麼, 反而這麼一個簡單的設計, 幫助真的會不小

memcached簡單說了就是一個分散式key-value based data cache, 資料是分散放在很多台電腦的RAM裡面, 因為是key-value based, 所以說起來就是一個大的hash table, 並不需要複雜的query, 只需要O(1)就可以取得資料, 而且資料就在RAM中, 可以是相當的快

我們都知道一個事實: “IO costs”, 如果每次都需要從database query資料, 那所花的時間, 包含SQL處理的時間, 以及IO的時間會是相當長的, 這點不管是Web application或是在mobile上(尤其現在SQLite被大量使用)都通用

因此使用RAM來cache query result as long as possible會是tuning這類的performance的其中一步, 這觀念應該是很多人都想的到

不過這樣得pattern可能得考慮的:

  1. 怎樣把一個常用且複雜的query對應到一個key-value pair
  2. cache的存續時間
  3. How to efficiently invalidate or update cache after data set changed

或許在Android的ContentProvider中可以引入memory caching的機制來減少IO的量

以往嵌入Youtube video到網頁中要貼一大堆醜醜的object tag像是:

<object width=“640” height=“385”><param name=“movie” value=“http://www.youtube.com/v/VIDEO_ID?fs=1&amp;hl=zh_TW”></param><param name=“allowFullScreen” value=“true”></param><param name=“allowscriptaccess” value=“always”></param><embed src=“http://www.youtube.com/v/VIDEO_ID?fs=1&amp;hl=zh_TW” type=“application/x-shockwave-flash” allowscriptaccess=“always” allowfullscreen=“true” width=“640” height=“385”></embed></object>

後來股溝大神….提供了一個新的方式, 這方式不用太過複雜的tag (說穿了不過就是用iframe包裝起來), 而且會隨使用者設定選擇到底是用Flash還是HTML5 player :

<iframe class=“youtube-player” type=“text/html” width=“640” height=“385” src=“http://www.youtube.com/embed/VIDEO_ID” frameborder=“0”>
</iframe>

底下是實際的範例: