Doro One Two Three: Web

2015/08/17

QNAP Container Station in COSCUP

週六，有幸能在 COSCUP 分享用 QNAP Container Station 打造 CI 環境。投影片如下：

QNAP COSCUP Container Station from Fan-Cheng Wu

伴隨著即將 release 的 NAS Firmware 4.2，Container Station 也終於能一同發佈了。

Container Station 有許多獨家功能，像是

同時支援 ARM and x86 平台，最近出的 NAS 都有支援這個功能。
除了當紅炸子雞 Docker 外，我們還支援 LXC，LXC 更適合做 OS 的虛擬化。
自動偵測 Docker Image 裡的設定，大部分 Image 不用多做設定就能直接使用。

除此之外，為了廣大的開發者我們還提供了這些實用功能：

一鍵架設 Docker Registry，相信真的在用 Docker 的人都需要這個服務。
Container Station 也可以存取已經架好的 Private Registry
用 Docker compose 來架 App Repository，而且也開放格式在 github 上。
可以輕易自己 fork 我們的 qnap-dev/container-app 來放你自己的 App，UI 上設一下就可擺脫 QNAP 的控制 (雖然我們很希望你提 PR 給我們)
進階使用者，我們已經為你提供直接存取 docker service 用到的 CA, Cert and Key，照著 UI 提示就行。
進階使用者，我們也提供了我們的 API，你可以輕易用 API 打造自己的工具。

此外，Container 也能跟原本 QNAP 獨家提供的 Virtualization (qemu-kvm) 也能結合應用。
以下影片是在 docker container 內，跑 qemu-kvm 的虛擬化，你只要給定 ISO 的位置，就可以輕易開出一台虛擬機，還附上了 HTML5 VNC 的功能，這種應用我想目前是拿來做 target under test 是還不錯方便。

最後，LXC 還有一些額外應用，COSCUP 現場，我們的攤位上，2 台電視上的 Ubuntu 是直接用 Container Station 內的 LXC container 輸出的，這個功能也讓你的 NAS 不再只是 NAS，說是台桌機也不為過，實際上我用 TS-471 拿來裝 Steam 玩遊戲，效果很不錯。

最後的最後，我相信我們產品是非常有趣且富競爭力，我們也還在徵人，辦公位址可以在忠孝新生捷運站附近或汐止，有 Python，Go，AngularJS/React 技能的人非常歡迎直接與我聯絡 dorowu_AT_qnap.com。

2013/10/30

初嚐 Greasemonkey: LpTable

有時會想要在任意的網頁上加入一些特殊設定或是需要重新排版成看起來比較爽的頁面，舉例來說：在 facebook 的登入畫面做一個快速切換帳號的按紐；又或是最近在用 Lauchpad 的 bugs 覺得它的排版很鳥，所以自己重新用 jQuery 的 tablesorter 重新排一下。

想要解決這樣的問題，一來是可以寫瀏覽器的外掛來改，二或是用我今天要介紹的方法 userscript 來達成，以 firefox 的使用者需要先安裝 greasemonkey，chrome 的使用者則要安裝 tampermonkey 。

這次就 Launchpad 為例，原先 Launchpad 的 bug 列表長這樣

經過了 LpTable 的 script 會變這樣

Firefox 的使用者來說，在安裝完 greasemonkey 後，再到 LpTable 的頁面按下 Install 即可使用了
。

基本上寫這些 script 如果已有網頁基本能力寫起來很容易，因此我就在做 LpTable 用到的一些手法來介紹。

jQuery

要在 userscript 裡載入其他 javascript 檔，只需在檔頭的部分加入 @require filepath 即可，如下：

// @require     http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js
// @require     http://datatables.net/release-datatables/media/js/jquery.dataTables.js

CSS

要加入自訂的 CSS 也有幾種方法可以用，舉例來說第一種用 GM_getResourceText，再用 GM_addStyle 將樣式加入，在使用之前記得要先用 @grant 取得權限。又或是用比較原始的的手法，自己建立一個 style element 插在 head 裡如下：

function initStyleSheets() {
    function addGlobalStyle(css) {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }

    var css_alert = '.alert {padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; color: #468847; background-color: #dff0d8; border-color: #d6e9c6}';

    addGlobalStyle(css_alert);
    var stylesheets = ['https://dl.dropboxusercontent.com/u/23905041/media/css/demo_table.css',
                       'https://dl.dropboxusercontent.com/u/23905041/media/css/jquery.dataTables.css'
                       ];
    $.each(stylesheets, function(index, value) {
        var link = window.document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = value;
        document.getElementsByTagName("HEAD")[0].appendChild(link);
    });
}

Persistent Storage

要將某些資料存起來，在下次 reload 網頁時再用，可用 GM_getValue and GM_setValue 這組 API。使用前記得要 grant 權限，

TableSorter

最後是關於網頁表格的應用，跟 greasemonkey 完全沒關係。當初是希望能有一個表格，可輕鬆動態插入資料，排序，過濾資料，google 一下很快就找到了 TableSorter 這個 jQuery plugin。這部分的線上文件範例都超多，自己網上看看吧。

Doro One Two Three