關閉NetBeans的滑鼠中鍵字體縮放功能 / Disable NetBeans Zoom Text In / Out Keymap

在NetBeans上用滑鼠中鍵滾動捲軸時，往往會不小心因為按著中鍵滾動而導致觸發了文字縮放功能。本文章參考stackoverflow中fivedigit的解答，以圖文說明如何關閉這個功能。

To prevent from triggering off zooming text function in NetBean, this article aims to disable this function by modifying keymap configuration.

作法指導 / Guiding

Step 1. 進入Tools > Options

Step 2. 進入Keymap分頁進行調整

此處動作比較複雜。進入Keymap分頁之後，你會發現有很多快捷鍵的設定。請先在Search輸入「Zoom」，以找到我們要修改的Zoom Text In與Zoom Text Out。然後按下右邊的「…」按鈕，選擇「Clear」。兩個功能都要做「Clear」喔。

Step 3. 按下OK

這樣就完成囉。

請使用NetBeans的人先把這個功能關掉吧，不然每次滾動捲軸時真的是常常誤觸呢！

EMAIL-KM介紹 / EMAIL-KM Introduction

這學期電子文件管理專題期末報告，我製作了一個典藏電子郵件與整合知識管理的系統，稱之為EMAIL-KM。以下是EMAIL-KM的介紹。

For completing the final report of “Electronic Records Management Project”, I developed a web system used for archiving email and knowledge management. This system is named “EMAIL-KM”. Following is the introduce of EMAIL-KM.

EMAIL-KM操作投影片/ A Slide About EMAIL-KM Operation

為了方便說明，我做了一份投影片，簡單介紹EMAIL-KM的主要寄信功能。

檔案：Google 雲端硬碟、Box.net、SkyDrive

第一節 系統開發 / System Development

為了降低架設的門檻，EMAIL-KM選用的工具皆為開放原始碼軟體與免費服務。WordPress是著名的部落格管理系統之一，架設環境僅需在低階電腦配置PHP運作環境與MySQL資料庫，而且WordPress擁有親切好用的操作介面以及數量驚人的外掛功能（包括了電子郵件接收器）等特色，這些都是本研究選擇WordPress的原因。為了統計系統使用狀況，本研究額外加入了Google分析的功能到EMAIL-KM中，以記錄造訪次數與人數等資訊。

秉持學術交流的精神，EMAIL-KM以開放原始碼的形式公布在GitHub中。任何人皆可從「https://github.com/pulipulichen/email-km」網址中下載本研究開發的EMAIL-KM來自行使用。此外，功能使用上有任何問題也請不吝多多指教。

不過必須說明的是，由於資料不便公開，GitHub上開放的只有程式碼與資料庫schema，並沒有涵括資料庫的內容資料。直接複製程式碼來安裝的話可能會有些問題。

第二節 系統架構 / System Architecture

EMAIL-KM的系統主要是以WordPress (WordPress Taiwan, 2013)為基礎建置而成的知識管理系統，其中內建電子郵件接收者(Mail Receiver)的外掛(Allen, 2013)，再搭配免費使用的Gmail電子郵件伺服器服務而成。整體架構如圖 2所示，以下將以電子郵件典藏與知識管理系統兩種角度來介紹EMAIL-KM的運作方式：

圖 2 EMAIL-KM系統架構圖

一、電子郵件典藏的運作方式 / The Process of Archiving Email

EMAIL-KM依賴Gmail接收、暫存要典藏的電子郵件，然後電子郵件接收者會定期向Gmail接收郵件，並典藏在EMAIL-KM的資料庫(Database)之中成為一篇一篇的文章(Post)。Gmail是免費的電子郵件服務，只要申請一個專用的電子郵件地址即可與EMAIL-KM搭配使用。電子郵件地址通常是以gmail.com結尾，以下以「email.km@gmail.com」為例。

為了確保資料不會遭受垃圾郵件的入侵，僅有EMAIL-KM的註冊成員才能使用電子郵件典藏的功能。因此使用者要典藏電子郵件時，必須先確認使用者的電子郵件地址登錄在EMAIL-KM中。再來只需要將「email.km@gmail.com」加入收件者中，並加上分類標籤的描述，電子郵件的主旨、訊息與附件內容就能夠順利地納入EMAIL-KM中典藏。

電子郵件典藏的詳細操作步驟將會於後面小節詳述。

二、知識管理系統的運作方式 / The Knowledge Management System With Archived Email

將典藏的電子郵件保存到資料庫之後，EMAIL-KM就能搭配資料庫中的團隊成員帳號與系統功能，提供搜尋、取用與其他應用的服務。為了避免敏感資訊外洩，EMAIL-KM預設僅能由註冊的使用者登入。

使用者可以透過網頁瀏覽器開啟本研究架設的EMAIL-KM來使用EMAIL-KM的功能，方便地查找典藏在EMAIL-KM中的電子郵件資料，並在EMAIL-KM上進行社群互動。使用者也能夠在EMAIL-KM上直接建立文件資與管理已典藏的電子郵件。

知識管理系統的詳細操作步驟將會於後面小節詳述。

第三節 電子郵件典藏操作步驟 / Operation of Archiving Email

一、寄送典藏的電子郵件 / Send Email To Archive

當使用者要將電子郵件典藏在EMAIL-KM時，就要在收件者加入EMAIL-KM的電子郵件地址「email.km@gmail.com」。郵件的主旨與訊息將會是EMAIL-KM中文章的標題與內文。而附件也會保存在EMAIL中，成為文章的附件。圖 3是使用Gmail寄送電子郵件同時欲將之典藏在EMAIL-KM的示意圖。

圖 3 電子郵件典藏操作示意圖：加入email.km@gmail.com

EMAIL-KM支援兩種分類架構方式。第一種「分類」是前分類設計，由主要管理者制定出預設好的層級分類架構；第二種「關鍵字」則是後分類設計，由使用者自由建立、選擇欲描述此封電子郵件的關鍵字，可建立屬於使用者自己的分類架構。兩種分類架構在EMAIL-KM的瀏覽介面略有不同，後續小節會有詳細介紹。

二、在典藏電子郵件時加上分類與關鍵字 / Add Catelog And Keyword Within Email

在典藏電子郵件時，使用者即可在郵件的主旨直接加入分類與關鍵字，以利典藏進EMAIL-KM之後的後續管理。以圖 3中的郵件為例，該郵件的主旨為「[網管專區] EMAIL-KM研究團隊知識管理方案 #email-km」，即同時使用了分類與關鍵字。分類是在郵件主旨開頭加入以中括號「[ ]」包覆的分類名稱，此例中即為「[網管專區]」，意思是將此封電子郵件分類到「網管專區」；關鍵字則是在郵件主旨末端加入以井字號「#」開頭的關鍵字名稱，此例中即為「#email-km」，意思是將此封電子郵件加上關鍵字「email-km」。分類語法的設計是基於臺灣電子佈告欄(BBS)中常用的分類表現方式，而關鍵字語法的設計則是參考Twritter的標籤機制(hashtag)來表現。(Efron, 2010)

本研究在電子郵件主旨加入分類與關鍵字的機制，不僅讓使用者容易在寄送時即可為電子郵件進行分類描述，其他收件者也希望將回信典藏到EMAIL-KM時，也會因為採用相同主旨而會擁有相同的分類架構，以確保相關的電子郵件將會置於同一分類或擁有相同的關鍵字。

三、典藏在EMAIL-KM中的電子郵件 / Archiving Email

EMAIL-KM的電子郵件接收者會在每1小時自動向Gmail收取郵件，使用者也可以手動操作「手動收信」功能以要求電子郵件接收者立即檢查Gmail。電子郵件接收者只會接收由EMAIL-KM註冊使用者的電子郵件地址寄出的郵件，然後將電子郵件內容轉換成EMAIL-KM文章的格式，並將文章的作者設為典藏該電子郵件的使用者帳號。接著電子郵件接收者會刪除所有Gmail上的郵件，以確保Gmail空間不會持續累積信件而無法運作。

圖 4是EMAIL-KM典藏來自圖 3寄送的電子郵件的結果示意圖。

圖 4 電子郵件典藏在EMAIL-KM示意圖

第三節 知識管理系統操作步驟 / Operation of Knowledge Management System

一、登入EMAIL-KM / Login to EMAIL-KM

EMAIL-KM的設計是供研發團隊使用的知識管理系統，因此內容資訊是不公開的，使用者要操作任何步驟都必須先進行登入。EMAIL-KM也不允許外來使用者任意註冊，必須由擁有權限的系統管理者幫新進成員新增帳號。圖 5是EMAIL-KM的登入介面，使用者必須在帳號與密碼輸入正確的資訊，才能登入進到EMAIL-KM當中，並看到圖 6的畫面。

圖 5 EMAIL-KM登入介面

圖 6 登入EMAIL-KM之後的首頁

二、搜尋文章內容 / Search Archived Email

EMAIL-KM右上角有一個「Search」的搜尋框，使用者可以在此輸入欲搜尋的關鍵字（不一定是分類架構中的關鍵字），EMAIL-KM就會搜尋文章的標題、內文與附件檔案的名稱，再將找到的文章彙整成一搜尋結果列表呈現給使用者，並標亮使用者欲搜尋的關鍵字。圖 7即是在EMAIL-KM中搜尋「KALS」的搜尋結果呈現畫面。由於系統限制的關係，目前並不支援附件檔案內容的全文檢索功能。

圖 7 EMAIL-KM搜尋KALS的搜尋結果

三、瀏覽最近典藏的文章 / Browse Recent Emails

登入EMAIL-KM之後即會看到最近典藏進EMAIL-KM的電子郵件以文章列表的方式呈現，如圖 6所示。由於EMAIL-KM是基於部落格管理系統WordPress開發而成，因此在此繼承部落格的特性，首頁即列出最新的文章內容。

四、依照分類架構瀏覽文章 / Browse Architecture

在EMAIL-KM的右上角有四個連結，其中前三個是EMAIL-KM的分類架構。包括「個人專區」、「知識地圖」與「關鍵字」。

（一）個人專區 / Personal

個人專區是以群組分類使用者帳號，可直接查詢該使用者在EMAIL-KM典藏（或說是發表）的所有文章。進入個人專區之後會看到圖 8的群組目錄。點選任一群組後會跳到該群組的位置，並顯示該群組的使用者列表，如圖 9所示。點入任一使用者之後，EMAIL-KM即會展現該使用者發表過的所有文章。圖 10為使用者「布丁」在EMAIL-KM發表過的文章列表。

圖 8 個人專區目錄中的群組目錄

圖 9 個人專區中該群組中的使用者帳號列表

圖 10 使用者「布丁」的文章列表

（二）知識地圖 / Catelog

知識地圖是分類的瀏覽頁面。知識地圖會先描繪出分類的層級關係、計算每個分類的文章數量，再列出該分類底下最新的五篇文章。進入知識地圖之後會看到圖 11的分類層級，包含分類的名稱與分類底下的文章數量。點入任一分類之後，會看到該分類底下的最新五篇文章，如圖 12所示。點入該分類之後，分類底下的文章就會以文章列表的方式呈現。圖 13即是MIS GROUP MEETING分類底下的文章列表。

圖 11 知識地圖的分類層級

圖 12 分類底下的最新五篇文章

圖 13 MIS GROUP MEETING分類底下的文章列表

（三）關鍵字 / Keyword

關鍵字則能依照關鍵字瀏覽文章。進入關鍵字頁面之後，會先看到如圖 14所示的關鍵字列表。關鍵字並沒有上下層級的區隔，只是依照字母順序排列，並附加統計具有關鍵字的文章數量。點選進入任一關鍵字後，可以看到具有該關鍵字的最新五篇文章，如圖 15。再點入該關鍵字後，即可以但具有該關鍵字的文章列表。圖 16即是EMAIL-KM中具有「中文斷詞」關鍵字的所有文章列表。

圖 14 關鍵字列表

圖 15 關鍵字與最新的五篇文章

圖 16 具有「中文斷詞」關鍵字的文章列表

五、訂閱最新文章 / Subscribe to Latest Archived Email

為了促進團隊成員間的資訊交流，EMAIL-KM提供電子郵件訂閱功能。只要成員輸入他的電子郵件地址（輸入位置如圖 17所示），當EMAIL-KM典藏了新的電子郵件，或是有使用者發表新的文章時，就會立即通知訂閱的使用者。

圖 17 訂閱最新文章功能位置示意圖

結論：在日常業務中進行研究 / Do Research On Regular Business

期中的時候，老師問我們修課的學生期末報告的題目。大部分的人都仍在摸索、嘗試聚焦在某個題目上，想藉由文獻整理來做一份報告。我則是回答：「我做了一個系統。」

為了改善我日常生活遇到的問題，我已經很習慣著手去做些東西，來讓我與周遭的人工作起來更便利。不僅僅是這個EMAIL-KM，我在Blog中聊到的DSpace、GLPI、Zentyal等等，都是我覺得可以為大家做些什麼而去修改的經歷。

修改之後，有些人會覺得系統更好用了。也有些人會認為，系統還有很多不夠的地方，未來仍需要繼續去修改。在我投入心力去撰寫程式碼以及大家的回饋意見之間，我在想，是不是有可能在這邊進行研究呢？

能投到國際期刊的高水準研究是我們追求的目標沒錯，但是對於日常業務的改進，我想應該也是可以用做研究的心態來進行，並試著在開發、改善與回饋的過程中，將成果分享給大家。一起讓這世界變得更好吧。加油。

網頁應用測試工具：Selenium IDE / Testing Tool for Webpage: Selenium IDE

Selenium IDE是一個網頁應用測試工具，可以應用在許多網頁程式設計上。我製作了一份投影片簡單地介紹了Selenium IDE的主要功能，進一步的詳細操作則可以參考我以前介紹Selenium IDE的文章來使用。

Selenium IDE is a testing tool for webpage. I made a slide to introduce the features of Selenium IDE. For more details, you can read my other articles about Selenium IDE.

為什麼要用Selenium IDE？ / Why sholud you use Selenium IDE

不論背後是用什麼程式語言來開發，最後成品大多都會是瀏覽器可以運作的網頁。因此只要最後網頁上運作結果正確，那麼大致上整體系統就能維持一定品質。

Selenium IDE他就像是操作瀏覽器的機器人一樣，你可以撰寫機器人執行的腳本，讓機器人自動去測試。當腳本無法順利執行時，則回報錯誤訊息給你。Selenium IDE省下很多我們手動用滑鼠去點選、操作的瑣碎時間，可以讓我們更專心於開發本務上。

用Selenium IDE取代功能測試員 / Replace Human Testers By Selenium IDE

我以前做過資料庫功能測試員。功能測試會附帶著一張測試目標的表格，表格內每一列都是要測試的項目。測試員依照測試項目的指示一一操作、確認，沒問題之後再到表格上勾選確認無誤。

事後我常常在想，為什麼這種機械化的動作，還要聘用一個活生生的人來做呢？後來我在Selenium IDE身上，找到了取代功能測試員的方案。

Selenium IDE介紹 / Introduce of Selenium IDE

檔案：Google雲端平台、Box.net、SkyDrive

這份投影片介紹了以下內容：

• 軟體測試的重要性：我想要強調程式開發與測試應該是要齊頭併行的，並不是開發完成之後再來測試。
• Selenium IDE介紹：介紹Selenium系列家族的主要功能，以及Selenium IDE的安裝與開啟。
• Selenium IDE的指令：介紹操作型(Actions)、存取型(Accessors)、驗證型(Assertions)三種類別的指令
• 快速錄製功能：使用Selenium IDE製作測試案例的第一步，並介紹錄製完成之後如何進一步修改測試案例。

這份投影片只有概述Selenium IDE的功能，如果要詳細操作，可以看我之前的文章：

• 網頁應用程式測試工具Selenium IDE介紹

我也寫了兩份測試案例的例子可供參考：

• 以Selenium IDE建立測試案例：圖片延緩載入
• 以Selenium IDE建立測試案例：無限捲頁

結語：開發與測試並進 / Conclusion: Development And Testing Are Both Important

我們在做軟體開發的時候，通常會有一個目標。而這個目標有兩種：一個是想要做、但還沒做的功能；另一個是本來的功能無法如預期般地運作。不管是哪一種，他都可以用「測試案例」(test case)的形式來表現。只要測試案例能夠順利通過，那麼我們就完成了程式開發的目標了──這就是測試驅動開發(Test-Driven Development, TDD)的基本概念。

狂熱的TDD教義派開發者會在系統開發不同階段使用單元測試(unit test)、整合測試(integration testing)、功能測試(functional testing)、回歸測試(regression testing)、持續整合(continuous integration)等策略維護軟體品質。但是這對我們這種小型團隊來說，學習、製作、維護測試案例是相當高成本的工作。

因此我建議是只採用Selenium IDE製作功能測試，確保系統的主要功能能夠順利運作。發生錯誤時，Selenium IDE可能無法像是單元測試或整合測試回報詳細錯誤內容，但是能夠提醒程式開發人員注意到「有錯誤」這件事情，那就幫得上許多忙了。

Selenium IDE快速錄製測試案例的功能真的很好用，我希望能把這方法引入開發團隊中，進一步地提高大家的開發品質。再加油吧。

Zentyal 3.0動手做模組入門 / Zentyal 3.0 Module Development

Zentyal是一個強大的路由器套裝軟體，他也提供了客製化製作模組的功能。我參考Zentyal的說明建立了一個修改SSH連接埠的功能，並記錄一下製作模組時的一些步驟。

Zentyal is a powerful Router and could install custom module. Base on Zentyal module development tutorial, I created a SSH module for modifying SSH port. Following is my create steps.

安裝Zentyal / Install Zentyal & Configuration

我安裝的是zentyal-3.0-2-amd64.iso，Zentyal 3.0 64位元版本。安裝在VirtualBox上，並配置兩張網卡：eth0為Host-only，設定為內網；eth1為NAT，作為外網。

我將預設帳號設為Linux的root群組，以省去每次都要sudo的困擾。所以下指令我都不用sudo，因為已經假設是root權限了。

然後我也關閉了Zentyal的桌面功能，作法參考這篇，語法是：

sudo mv /etc/init/lxdm.conf /etc/init/lxdm.conf.nostart

最後我安裝了pound作為後續研究的需要，語法是：

apt-get install pound

Zentyal雖然不難裝，但是也有些稜稜角角的小細節需要額外下指令去克服。詳細安裝細節此處就省略。

Zentyal模組開發教學 / Zentyal module development tutorial

Zentyal已經提供了模組開發教學的網頁文件。我大致上是照著這個步驟來操作，不過有遇到一些問題，此篇一一記錄細節。

安裝開發環境 / Development Environment

要開發Zentyal的模組需要安裝很多東西，以下列出我安裝的東西：

apt-get install build-essential gcc zbuildtools fakeroot

然後在家目錄中下載Zentyal的鷹架工具skel，並調整鷹架工具的權限：

wget https://raw.github.com/Zentyal/zentyal/master/extra/scripts/zentyal-module-skel
chmod +x zentyal-module-skel

這樣就準備好可以開發了。

建立SSH模組鷹架 / SSH Module Scaffolding

我們可以用鷹架工具skel來建立SSH模組鷹架。現在位置是在家目錄(cd ~)底下，指令為：

./zentyal-module-skel SSH ssh

然後就冒出一個空的模組啦。這到這邊為止的進度是教學中的Scaffolding。

修改SSH模組 / Revise SSH Module

鷹架模組無法正常運作，所以我們要進行修改。修改的方式教學中寫得很清楚，請看這個網頁。修改之後的結果請看我上傳到GitHub的程式碼。

主要修改的程式為：

• ~/ssh/src/EBox/SSH.pm
• ~/ssh/src/EBox/SSH/Model/Settings.pm
• ~/ssh/stubs/service.conf.mas

跟教學文件相比，修改的差異在於設定檔是SSH的/etc/ssh/sshd_config，而參數的樣板service.conf.mas也差異很大。

必須特別要說明的是在參數樣板中要加入#開頭的註解文件時，必須要用以下語法來加入：

% print "# the setting of \"PermitRootLogin without-password\".\n";

注意雙引號""中間要記得脫逸，還有最後要加上\n表示換行。

編譯並安裝SSH模組 / Compile & Install SSH Module

編譯的方法是先移動到模組目錄，然後輸入zentyal-package指令：

cd ~/ssh
zentyal-package

編譯成功的話，模組目錄底下會冒出debs_ppa，裡面是可以安裝的檔案。再來就是安裝編譯好的檔案：

dpkg -i ~/ssh/debs-ppa/zentyal-ssh_3.0_all.deb

如果安裝時沒有特別的錯誤，那就是安裝完成了。我猜這個安裝檔應該可以轉給其他Zentyal系統，讓他們也能安裝你自己製作的模組。

啟用SSH模組 / Enable SSH Module

安裝好SSH模組之後，導覽列Core底下會出現SSH。但是它目前還沒啟動，要先到Module Status中，在SSH的Status裡打勾，然後再右上角Sava changes。

這樣就之後就可以正常使用SSH模組了。

結語：只是開始 / Conclusion: Just Begin…

摸了一整天總算搞懂怎麼修改Zentyal。意外地發現它的工具寫得很好用，也不難理解。只是一些細節它沒有說明，讓我試誤了好一陣子。這些細節解決之後，我想要開發新功能應該是得心應手吧。

我目前想要做一個整合pound反向代理伺服器的功能。然後再做一個DNS + NAT Port Forwarding + Reverse Proxy綜合控制的介面，讓管理者可以一口氣在一個介面設定這些東西。

不過目前進度到這邊得暫停來做一下開會的準備了orz

用SQLite資料庫安裝Drupal 7 / Install Drupal 7 with SQLite database

目前Drupal 7（我用的是elms-7.x-1.x-dev-core.zip）安裝時選用SQLite資料庫會發生錯誤，導致無法正常安裝。我試著修正了一些程式碼之後，使用SQLite資料庫安裝Drupal 7就能夠順利進行。以下介紹如何順利安裝使用SQLite資料庫的Drupal 7。

If you want to install Drupal 7 (for example, elms-7.x-1.x-dev-core.zip) with SQLite database, the installation would have encountered an error and crash. I fixed some bug of Drupal 7 to let the installation completes successfully. I will show you how to completely install Drupal 7 with SQLite in this post.

更新程式碼 / Update Codes

用Drupal 7原始碼安裝的時候，我看到畫面上出現了很多錯誤。於是我照著這些錯誤去修正程式碼，然後安裝大致上就很順利。

要修正的程式碼如下：（[elms7]表示Drupal 7的根目錄）

1. [elms7]\includes\install.core.inc
2. [elms7]\includes\database\sqlite\query.inc
3. [elms7]\profiles\elms\modules\contrib\features\features.module
4. [elms7]\profiles\elms\modules\contrib\spaces\spaces_og\plugins\space_og.inc
5. [elms7]\profiles\elms\modules\elms_features\elms_site\elms_site.module

安裝完成之後會遇到登入錯誤，於是我又修改了兩個檔案：

1. [elms7]/profiles/elms/modules/contrib/og/og.module
2. [elms7]/profiles/elms/modules/contrib/entity/includes/entity.wrapper.inc

安裝環境 / Environment

• PHP Version 5.4.7
• SQLite Library 3.7.7.1

安裝Drupal 7 / Install Drupal 7

接下來我用圖文教學，教大家用SQlite資料庫安裝Drupal 7的方法。

我這邊要安裝Drupal的發行版之一ELMS，所以我選擇這個。

在此不要選擇其他語言，因為安裝的時候中文好像有點問題。

選擇SQLite資料庫安裝，其他選項都用預設。

如果你的程式碼沒有更新，你會看這一堆警告。

如果程式碼更新過了，你就會看到正常安裝的畫面。

安裝過程非常久，但是沒有錯誤訊息的話就一切OK！

資料庫安裝完成！接著設定其他的資訊吧。

完成。

全新的Drupal 7，很穩。

登入 / Login

安裝完成之後，預設網頁上並沒有登入的按鈕。你只會看到「Access denied」的錯誤訊息。

登入網址為：http://localhost/elms7/user/login （請換成你自己的網站）

請用安裝時設定的管理者帳號登入吧。

至於要怎麼在首頁就顯示登入表單，請看看「Display login form for anymous users when 'access denied'」這篇或其他的教學，本篇就到此為止了。

結語：自己修Bug / Conclusion: Fix Bug by Yourself

安裝過程中很多的問題都是在於陣列裡面沒有對應的指標，例如：

$non_required[$module] = $files[$module]->sort; 

有時候$module出現的值不見得存在於$files陣列中，或著是$files可能根本就不是個陣列。所以我們要在之前加入判斷式。

if (is_array($files) 
  && isset($files[$module]) 
  && is_object($files[$module])) {
    $non_required[$module] = $files[$module]->sort; 
}

這樣就不會發生錯誤了。

共勉之。

「布丁布丁吃什麼？」在GitHub上開放原始碼囉！ / My Blog is now open source on GitHub!

「布丁布丁吃什麼？」這個Blog最大的特徵就在於網站上有著許多奇奇怪怪的小功能。從側邊欄上的「最近留言」、「最新文章」、「留言板」，到文章本身的「自動摘要法」、「圖片延遲載入」等各種小工具，都是Blogger沒有提供、我參考別人的寫法或自己撰寫而成的功能。

現在這些程式碼統一保存在GitHub上進行版本控制。對於改造Blogger有興趣的朋友、JavaScript或CSS有興趣的朋友，歡迎參考我的程式碼，彼此多多切磋交流吧。

Welcome to Pulipuli.blogspot.tw. My blog has many features which are not provided by Blogger, for examples, like “recent response list”, “recent post list”, “post auto digest”, etc.. Today, I released the code of these features on GitHub. You can use them freely. Enjoy it!

存放空間的遷移歷程 / History of Code Hosting

說真的，「布丁布丁吃什麼？」很早之前就是Open Source了。除了Blogger內建功能之外，大部分功能都是以JavaScript與CSS的程式碼來實作。這些程式碼本身都是必須讓你下載之後才能執行，換句話說，這些功能本身就是「開放」的程式碼了。

那麼這些程式碼是存在哪裡呢？這邊我就在簡單的回顧中記錄一下「布丁布丁吃什麼？」的這段歷史吧。

Google Page Creator

我印象中「布丁布丁吃？」時期一開始的時候，我是將程式碼擺放在Google Page Creator中。Page Creator是Google早期供人架站的空間。雖然它只有提供100MB的大小，在流量上也有諸多限制，但是擺放我這種小流量Blog使用的JavaScript與CSS程式碼已經很夠用了。

不過老實說它不太好用，沒有目錄功能（因為Page Creator是用來建立網頁、而不是網站），上傳介面也很難操作。幾年之後，Page Creator被關閉，成為歷史名詞。而原本在Page Creator上的程式碼則是被轉換到Google協作平台上繼續運作。

Google Sites協作平台

由於Google Page Creator被關閉，我的程式碼就順勢移到了Google協作平台上，叫做「布丁布丁吃？」wiki。協作平台搭上了當時流行的wiki風格，讓人容易在網頁上建立資料，也允許更複雜的網站架構。

協作平台是個穩定的架站空間，我一樣把它用來存放JavaScript與CSS程式碼。受惠於協作平台的功能，我可以將程式碼分門別類，每次上傳檔案也會記錄不同的版本。在「布丁布丁吃什麼？」介紹的功能中，有些是獨立出來讓讀者安裝使用的程式碼，這些程式碼就會放在協作平台中，跟「布丁布丁吃什麼？」專用程式碼分開保存。

可惜的是，協作平台的上傳功能依然很難用。點開網頁、選擇檔案、上傳的這幾個步驟雖然看起來很簡單，但是時常修改程式碼的話，這些步驟依然是相當地煩人啊！

Dropbox

「布丁布丁吃什麼？」的程式碼中，給讀者使用的程式碼是放在協作平台，而現在你所看到「布丁布丁吃什麼？」專用的JavaScript與CSS程式碼其實是架設在Dropbox的公開資料夾Public底下。

知名雲端硬碟Dropbox早在很久之前就提供了架站空間的功能，你可以把網頁程式碼放在公開資料夾上供他人瀏覽，也可以用DropPages之類的第三方應用輕易地架起專業網站。

雖然我的網頁內容寫在Blogger上，不過JavaScript與CSS卻也可以放在Dropbox中。我這次搭配Directory Junction整合了Aptana Studio 2 IDE與本機端XAMPP伺服器的運作環境。我不僅能在本機端開發與測試「布丁布丁吃什麼？」，也能夠用簡單地幾個步驟就能夠將JavaScript與CSS進行壓縮、上傳到Dropbox公開資料夾。

如果你對Dropbox有興趣的話，歡迎使用我的推薦連結來註冊Dropbox，順便幫我增加一點空間吧！

布丁邀請註冊Dropbox連結

GitHub

Dropbox提供了我的程式碼穩定的運作環境，而GitHub則是提供了查看我的程式碼的社交平台。

之前我開始研究起GitHub，這是因為最近看到幾篇新聞都在討論GitHub。GitHub是許多開放原始碼專案存放的保存庫，近年來也逐漸成為公司招聘程式設計師的管道。因為公司能在GitHub上看到每個人實際上寫的程式碼，而不是像LinkedIn只能看到幾行經歷。

雖然說光看程式碼也不見得夠看到實際上運作的平台，就像是「布丁布丁吃什麼？」的GitHub也是要搭配Blogger才能運作，不過光是為這個社群貢獻程式碼的精神，我覺得就具有令人值得去做的意義。

我想藉由「布丁布丁吃什麼？」的程式撰寫來練習GitHub與Git的用法，這也是「布丁布丁吃什麼？」作為讓我實驗程式碼的用途之一啊。

近期「布丁布丁吃什麼？」的調整 / Recent Changes in Pulipuli.blogspot.tw

除了用GitHub與Dropbox改進「布丁布丁吃什麼？」的功能調整流程之外，最近也做了幾個小地方的修改。

英文標題與摘要 / Writing Title and Abstract in English

作為博士生，英文寫作是必須要去面對的課題。我希望能夠在日常生活中就常常使用英文來寫作，所以現在就從寫Blog開始。我寫的英文應該會有很多錯誤，歡迎大家用留言回覆來幫我糾正一下喔！

至於為什麼只有標題跟摘要是英文，這是因為光是寫標題跟摘要就花了好多時間，等更能上手之後再來考慮全英文的Blog吧。不過我寫這Blog一部分就是為了給華人地區的讀者看，所以仍然會以中文版本為主喔！

QR Code

有人發現到了嗎？這是今天才剛出來的新功能喔！「布丁布丁吃什麼？」每篇全文文章最後都加上了QR Code的名片，讓讀者方便知道這篇文章的來源。

對我來說，因為我很常查閱「布丁布丁吃什麼？」的文章，有時候在電腦上看一看想要轉移到手機上的時候，在手機輸入網址總是太過麻煩。現在我只要在手機上用QR Code Scanner之類的App掃描一下QR Code，就能在手機上直接開啟文章內容喔！

在列印的時候，也會出現這個名片的樣子。就算將「布丁布丁吃什麼？」印成紙本，也能夠透過QR Code方便地回到網頁上喔。

這個功能是以jquery.qrcode.js為基礎，我自己建立了它的分支並進行改造，在加上適用於Blogger環境的包裝器(wrapper)來實作。如果有人也想要安裝QR Code到你的Blogger的話，請回覆在下面，我有時間會再另外寫一篇QR Code的安裝教學。

結語 / Conclusion

藉著調整Blog的契機，這篇介紹了「布丁布丁吃什麼？」的JavaScript與CSS原始碼存放空間選擇的歷程，目前是用以下規則來擺放程式碼：

• 「布丁布丁吃什麼？」專用程式碼存放在Dropbox、公開在GitHub。
• 供讀者使用的部分功能存放在Google協作平台。

然後聊了一下最近「布丁布丁吃什麼？」的變動，也順便宣傳自己加入的QR Code功能。

最後我想閒聊一下QR Code。我認為QR Code不僅僅只是讓人在廣告上開啟網頁而已，它可以是連結實體與數位（從印出紙本開啟Blog）、數位到數位（從螢幕掃描到手機），也可以藉由加入特殊參數讓它用於開啟指定的應用程式。而這個簡單的轉換，卻能夠連結不同時空的人與物。

想像一下，公車的乘客不需要在座椅上塗鴉了。他們可以掃描這台公車專屬的QR Code，然後在這台公車專屬的線上討論版聊天；圖書館的讀者不僅僅是在書上從別人的筆記來認識與這本書內容相關的事情，他能掃描QR Code來到這本書專屬網站上來取得相關資訊，更能在討論版上認識同樣閱讀這本書的愛書者。

QR Code只是簡單的技術，重點在於要如何應用。這也是我們作為研究者應該去思考的問題。共勉之。

使用Minify壓縮JavaScript跟CSS範例

Minify是用來壓縮JavaScritp跟CSS的PHP 5應用程式。跟我之前介紹的YUI Compressor壓縮器功能類似，但是YUI Compressor是Java程式，沒有Minify原生整合PHP來得方便。Minify目前最新版本為2.1.5，你可以在GitHub找到它全部的原始碼。

Minify功能很多很複雜，但是它自己的使用手冊中卻沒有提到怎樣簡單地在PHP使用。這篇就是簡單地寫個範例，讓大家知道要怎麼用Minify來壓縮JavaScript跟CSS。

下載檔案

你可以在GitHub找到Minify的所有原始碼，請按下「ZIP」下載檔案。

• mrclay/minify – GitHub
• Minify 2.1.5: Box空間下載、免費空間下載

壓縮範例

我這篇的用法中，JavaScript跟CSS都是以PHP變數的形式儲存再來進行壓縮。Minify主要的用法是壓縮既有的JavaScript與CSS檔案，但是我比較常將各個檔案整理、組合、排列，然後再壓縮，這也是這兩個範例的主要作法。

壓縮JavaScript

<?php

/**
 * --------
 * JavaScript Compressor
 * --------
 */

$js = "
/**
 * This is a demo script
 */
function test() {
    var _test_ms = '1'; 
    alert(_i);
}
 ";

require_once './min/lib/JSMinPlus.php';

$packed_js = JSMinPlus::minify($js);

echo $packed_js; //function test(){var _test_ms='1';alert(_i)}

?>

壓縮CSS

<?php

/**
 * --------
 * CSS Compressor
 * --------
 */

$css = "
/**
 * This is a demo css
 */
body hi {
    font-size: 3em;
    /* font-weight: bold; */
    color: #666666;
}
 ";

require_once './min/lib/CSSmin.php';

$cssmin = new CSSmin();
$packed_css = $cssmin->run($css);

echo $packed_css; //body hi{font-size:3em;color:#666}

?>

注意：不是任何JavaScript都能壓縮

然而，Minify壓縮法跟YUI Compressor還是不一樣。如果JavaScript已經是壓縮好的程式，那麼Minify再壓縮之後通常就會發生錯誤。

另外，有些程式碼是專門寫好給YUI Compressor壓縮的，所以用Minify壓縮時就會發生錯誤。這時候要嘛就是找線上的YUI壓縮服務，要嘛就是自己裝個YUI Compressor來壓縮。

結語：原生的Minify比Java的YUI Compressor好用

我之前改用YUI Compressor壓縮的時候常常會發生錯誤，這是由於PHP並非多線程設計，一旦網站大量對PHP請求的時候，PHP就會傻傻地去呼叫YUI Compressor的Java程式，然後Java就會快速地吃光伺服器的CPU跟記憶體，最後伺服器當機。即使我之前用PHPLock跟設計快取機制，這個問題還是很難根治。

然而跟使用Java的YUI Compressor相比，Minify原生於PHP的運作效率並不差，甚至可以說更好。到目前為止運作都蠻順暢的。而大量請求網頁的時候仍會出錯，那也是PHP自身設定就能夠搞定，不用像是使用YUI Compressor的時候還要去研究Java的環境設定。

最後發個牢騷，我還是覺得Java太容易當機了，不論是這邊用Java跑YUI Compressor，還是Tomcat上運作DSpace，Java太容易吃光記憶體跟佔用大量CPU，這讓我感到非常困擾。（即使設定了Xms跟Xmx還是很容易當機！）即使如此，用Java開發Servlet網站服務的專案還是很多，大家到底是怎麼面對這種問題的啊？我很好奇！