2011/05/31

h4addicted - 聚會主題搜集器

上次聚會的時候, Rex 講了一個小問題。通常我們在聚會之前,其實就會有一些覺得有趣的主題想要帶到 Hacking Thursday 討論。所以希望有一個地方可以搜集這些主題。不過大家都有各自用的服務如 plurk, twitter 或是 facebook,通常有不太想要只是因為要搜集主題就需要額外使用一個 service (如 friendfeed)。

於是大家就討論想要寫一個 web app 來解決這個問題。基本上的概念就是希望在發言的時候如果加了 #h4 時,就會把這個發言丟到 web app 上,條件是至少要在 twitter 與 plurk 都可以使用 (Facebook 會比較麻煩,所以就先跳過了)。然後我們就在 David 的筆電上蓋看到 addicted 這個字,所以這個專案就叫做 h4addicted 啦。

今天我研究了一下,發現這個服務很容易就可以使用 Yahoo Pipes 兜出來!基於懶惰的原則,我就沒有自己去寫程式了 :P

Yahoo Pipe 基本上是一個可以從網路上撈資料進行後處理的 web app。所以我們要做的就是搜集大家的 feed,對各個 service 做一些後處理後產生新的 RSS/JSON 就完成了。你可以到下面這個網址:

http://pipes.yahoo.com/yurenju/h4addicted

功能其實是非常簡易的,原本製作也很簡單,只要把大家的 RSS feed 拉進來就結束了。不過事情沒有這麼簡單!我們把 twitter, plurk, facebook (對,後來 David 又透過 JSON 撈到了 Facebook 的資料,但是前提是你的 post 是公開的。)都弄出來之後發現有幾個問題要解決:

  1. Plurk 的 RSS link 欄位填寫的是相對網址,需要對字串作後處理
  2. Facebook 也有相同的問題,因為是從 JSON 轉過來的,所以也沒有 link 欄位。
  3. Facebook 因為根本沒有與 link 對應的欄位,所以要從 post id 那邊分析後取得 post id,然後再跟 user id 合併後產生 link 欄位
  4. Facebook 的 message 欄位沒有 author,所以要額外把 name 加入 message 欄位
所以比想象中的複雜一點,不過還是搞定了 XD

首先看概觀


Plurk 的部分其實就是把 link 拿出來加上 http://www.plurk.com/ 的前綴後再塞回去就完成了。右邊的 facebook 我則是把它獨立成另外一個模組處理。


  1. Rename 模組負責把 JSON 的格式改成與 RSS 類似,讓訊息可以正確的的解譯出來。
  2. Loop - String Builder 的部分是為了作讓 user name 加在 message 前面,才知道是誰的發言。
  3. Loop - String Regex 的部分則是用來把 item.id 裡面類似 724235041_10150262195320042 的結構取出後者(也就是 post-id)並且儲存
  4. 取出 post-id 後再利用一次 String Builder 把 facebook 前綴、 user-id 與 post-id 連接在一起,就完成了。

Yahoo Pipes 真是非常方便的工具,利用它其實可以做到非常多事情了 :)

也歡迎 clone 拿去使用。

2011/05/30

GNOME3 延伸套件開發

這幾天到 KaLUG 講了一場『GNOME3 延伸套件開發教學』,其實也幫我自己上了一堂課。在這邊寫下一些心得讓大家參考一下。

3D 加速後的 GNOME3 桌面

在 GNOME3 裡面多了一個 gnome-shell 的軟體,主要負責提供 GNOME3 新一代的使用者體驗,包含更容易使用的 workspace,新的 application 管理機制等等。比如說下面的影片講解了 workspace 系統:



而這些絢麗的使用者體驗歸功於新的 UI Toolkit - Clutter 以及 Shell-Toolkit (ST)。Clutter 是一套利用 OpenGL/OpenGL ES 加速的 UI Toolkit,可以簡單的創作出許多絢麗的特效。比如說我們要撰寫一個小程式,當使用者點擊圖像之後,做出淡出、放大並且位移的特效。若使用 GTK+ 或其他 UI Toolkit 亦然可撰寫出來,但採用 Clutter 撰寫時就會格外簡單許多。


(因為使用桌面錄影的關係,感覺有些遲鈍,不過實際上跑的時候還蠻順暢的。)

這個 Demo 程式源碼如下:
const Clutter = imports.gi.Clutter;
const Tweener = imports.tweener.tweener;

function click(actor, ev) {
    let properties = {  time: 2.0,
                        x: texture.x+100,
                        y: texture.y+100,
                        scale_x: 1.5,
                        scale_y: 1.5,
                        opacity: 0
                    };
    Tweener.addTween(texture, properties);
    print('Clicked!');
    return true;
}

function quit(actor) {
    Clutter.main_quit();
}

Clutter.init(0, null);
let stage = new Clutter.Stage();
let texture = new Clutter.Texture({ filename: 'test.jpg',
                                    reactive: true });
texture.connect('button-press-event', click);
stage.connect('destroy', quit);
stage.add_actor(texture);
stage.show();

Clutter.main();

上面這個範例可以在 Debian 安裝 gir1.0-clutter-1.0, gjs 之後即可執行。

GNOME3 extension 採用 Javascript 撰寫

其實在 gnome-shell 的 UI 部分幾乎都是採用 Javascript 撰寫而成。而理所當然的開發 extension 時當然也是採用 Javascript 開發。然而最好的地方在於開發 extension 的時候,就像是 firefox extension 一樣,你可以任意的存取原本 gnome-shell 的所有元件。比如說,你可以存取 panel 的日曆元件,並且加入或修改這些元件。

Looking glass - 幾近作弊的 console

在 GNOME3 extension 開發的時候有個非常好用的工具叫做 Looking glass,這個東西就像是雷神之錘按下 "~" 就可以叫出來的 console (然後可以在裡面輸入作弊指令)。在 GNOME3 的環境下,按 alt + F2 並且輸入 lg 你就會看到這個 console 緩緩地從上面降下來。

這東西有什麼用途呢?最好用的工具是左上角那隻筆。它的作用是可以拿來點 GNOME3 桌面元件的任何東西,接着你就可以取得那個元件,然後做些什麼事情。


選取元件之後會跳回 looking glass,這個時候系統就會給他一個存取他的變數 r(NUM),接下來你可以在 console 使用這個代號調用它。


當你點擊這個物件的時候,他就會把這個物件的 method 全部列出來,馬上就可以知道有什麼 method 可以調用。然後!這個東西當然不是只有看的,你甚至可以在 looking glass 裡面使用 r(NUM).method() 直接在 runtime 執行特定 method。比如說我執行了 r(13).set_text("I don't care")



系統的日期馬上就任性了起來!當然你也可以做些旋轉或什麼之類的事情,而且由於 clutter 的特性,作了修改後的元件依然可以操作。



最後附上 Tutorial 簡報,請多多指教 :)

2011/05/16

Linkedin 連結

Hi 各位讀者大家好,下面是小弟的 Linkedin 連結:

http://tw.linkedin.com/in/yurenju

歡迎寄信給我索取詳細資料 :)

yurenju -AT- gmail -DOT- com