新的一年，再次體會到Blog的重要性

借用實驗室小白板的賀圖，祝大家新年快樂。這篇我想聊一下對於Blogger的一些想法。

Windows Live Writer，掰掰。你好，Open Live Writer

在2015年中的時候發生了一件令許多Blogger作者都感到困擾的問題：Google修改了安全性設定，導致Windows Live Writer無法連線。這個問題雖然後來有迂迴的解決方法，但是在年底的時候這個方法又再度失效。

在這段期間，微軟把久未更新的Windows Live Writer釋出到GitHub上，而這工具也重新命名為Open Live Writer。跟Windows Live Writer簡稱WLW一樣，Open Live Writer也被大家簡稱為OLW。

回到剛剛說的問題，Google關閉Blogger傳統認證方式、導致WLW無法連線的問題，同樣也發生在OLW上。但是開放原始碼的OLW仰賴活躍的開發者社群，很快地找到了解決Blogger連線的方法，讓使用WLW撰寫Blogger的廣大作者們有了繼續撰寫Blogger的出路。

OLW雖然解決了Blogger連線的問題，但是還有兩個WLW使用者非常在意的功能尚未實作：一個是外掛(Plug-ins)，現在仍只有空的網站；另一個是標籤(Tag)，如下圖所示：

我剛剛才發現最新版的OLW允許作者自行新增標籤，但是並無法讀取Blogger上既有的標籤內容，仍有改進的空間。

WLW已經一去不復返，在這2016年的開始，就讓我們用期待的心情，繼續關心OLW的改版吧。

Blogger啊，我回來了！

(圖片來自GP02A的核彈攻擊影片，是鋼彈0083星塵回憶的名臺詞)

由於WLW時常故障，加上我也忙於其他外務，很難找到足夠坐下來寫個Blog的時間。就像是這篇本來只是想隨筆一下，卻也寫了兩個小時之久。因此2015年就比較少在Blogger上動筆。

雖然不能長時間寫一篇文章，但是我卻有個工作中隨手記錄工作日誌。很久以前是用Plurk，後來改用了Facebook。我會以一篇簡單的留言開頭，將工作中不斷把各種資料、想法、進度都以回應的方式回覆在那一篇下面。我可以藉此知道自己接下來要幹什麼事情，上一件事情做了多久。對我來說，這是另一種番茄鐘工作法的應用。

不過在Facebook記錄自己的工作日誌有個最大的問題：難以搜尋。雖然Facebook在2014年發佈了全文搜尋功能，但現在不知為何完全不能使用。上次我想找自己分享的質性研究分析工具oTranscribe跟QCAmap，竟然只能用瀏覽的方式慢慢往回捲來找，真是令人困擾。如果以前發表過得內容不能透過搜尋或整理的方式來回顧的話，那這個工作日誌的價值就被大打折扣了。

事實上，即使將Facebook的資料設為公開、留言也設為公開，沒有登入Facebook的話，就連留言也都看不到。

相較之下，在Blogger寫的東西不僅容易被搜尋(是的，請用Google搜尋，不要用Blogger站內功能搜尋)，還會有很多網站幫我備份我寫過的內容。在Facebook一直想要封鎖公開資料的時代中，Blog又再度彰顯了他的重要性。這件事情也讓我重新體會到寫Blog的價值。

「布丁布丁吃什麼？」的調整

在超級忙碌的2015年終於告一段落之後，我也以OLW可以連線Blogger作為一個契機，又開始對「布丁布丁吃什麼？」進行調整。

新網域名：blog.pulipuli.info

有人注意到嗎？「布丁布丁吃什麼？」的網址已經從Blogger預設提供的pulipuli.blogspot.tw變更為blog.pulipuli.info了。

這是我在goDaddy上購買的新網域：pulipuli.info。選擇名稱的原因是因為我覺得pulipuli很好記，而info是information的簡稱，也很符合我現在主要是在圖書資訊領域(library and information science)工作的代表。

購買pulipuli.info費用是美金1.99一年，再加上一些其他的服務，總共是一年10美金左右。我在goDaddy上購買網域之後，它還提供了很多其他服務。除了可以設定Blogger的網址之外，購買網域還有幾個好處：

• 網域 http://pulipuli.info ： 會直接轉址到 http://blog.pulipuli.info
• 「布丁布丁吃什麼？」Blog專用信箱網址： blog@pulipuli.info 
• 「布丁布丁吃什麼？」專用留言板網址：http://ask.pulipuli.info

還可以彙整各種網站來簡化網址長度，寫在名片上會很好看：

• 布丁的GitHub：http://github.pulipuli.info
• 布丁的Facebook：http://fb.pulipuli.info
• 布丁的LinkedIn：http://li.pulipuli.info
• 布丁的Google+：http://plus.pulipuli.info
• 布丁的噗浪：http://plurk.pulipuli.info

自行購買網域的作法在網路上非常盛行，我是參考以下幾位作者的作法來設定的：

• 申請GoDaddy網址的教學 (香腸炒魷魚 sofree.cc)：這篇雖然是寫給WordPress看的，但是申請GoDaddy的方法並無差別。
• 在Blogger上設定GoDaddy申請的網域 (符碼記憶)：申請網域之後的設定有點複雜，要看這篇的教學。
• 子網域的設定 (WFU BLOG)：要在GoDaddy上設定Forward only。其他各種應用也可以看作者另外一篇介紹。

購買網域時有很多要注意的地方，例如.tw代表臺灣結尾的網域，價格其實非常昂貴。個人網站大多是以.idv (代表indivual 個人)，但可惜pulipuli.idv已經被註冊走了，所以也沒得使用。總之我也還是個購買網域的新手，就讓我用一個一年再來回顧看看吧。

為什麼要購買網域？

這不是我第一次想要購買網域了。

我在高中的時候也有想要購買網域的念頭。那時候在奇摩免費空間架設了「最終兵器少女」的粉絲網站「千瀨小站」，當奇摩免費空間收掉的時候，我也在考慮自行用家裡電腦當做伺服器來架設網站，並購買網域作為專屬網址。可惜那時候還小，不會用信用卡購買，也不好意思對不算富裕的家裡開口要錢，所以作罷。

而這次則是因為Google對Blogger的設定一改再改，加上Google在2015年調整了許多服務，讓我一度懷疑Google是否要把Blogger也關掉，好方便他推展Google Plus。如果真要面臨Blogger的關門，那我除了要考慮下一個遷移地點之外，還要避免因為換一個服務而改掉網址，因此放棄一個已經是我自己重要代表的一個成就。因此我需要一個固定的網址，來作為能夠代表自己的「Homepage」，最後就買了網域 pulipuli.info。

令人值得慶幸的是，將網址改成「blog.pulipuli.info」之後，並不影響原本「pulipuli.blogspot.tw」的網址。Blogger會很聰明的把連線到「pulipuli.blogspot.tw」或甚至是早期使用的「pulipuli.blogspot.com」通通轉移到「blog.pulipuli.info」。當然，個別文章的網址也有這樣子的轉換。此外，Blogger內建的統計資料以及之前設定的Google Analytics也仍然能夠繼續沿用。

要說轉換後帶來的問題，大概只有網域名稱價值要重新累積就是了。根據$iteprice.org的計算，我最高價值的網域是pulipuli.blogspot.com，價值$285。而被調整後的pulipuli.blogspot.tw則是價值$198。最近才更新的blog.pulipuli.info價格跟前者差不多，是$185。還好我不是要給商業公司擺廣告的網站，不然這樣就虧大了。

其他的調整

「布丁布丁吃什麼？」還做了什麼調整呢？接下來，我想讓Blog更加簡單一點。我拿掉了已經不太更新的Plurk框，捨棄了使用已久的布丁式Blogger自動摘要功能，關閉了側邊欄可以開關的功能(這功能是很久很久以前做的，那時候甚至還沒有jQuery)。希望讓整個Blog打開的時候就像是讀完一樣，不要還要再等他動來動去。

這樣做的原因是歸功於現在電腦的進步。講個現在讀者應該很難想象的小故事：其實在Windows XP、仍使用IE 6的時代中，開啟原始的「布丁布丁吃？」(那時候仍是這個名字)的時候，IE 6會當機。但是時代已經來到了2016年，每個人的Blog不僅掛滿各種廣告，社群分享按鈕滿天飛，甚至留言板還同時用了二到三個 (原生的、Discuz、Facebook)。即使是這樣資料量龐大的網頁，讀者依然是來去自如，不覺得有任何不便。所以，我也在想，是不是我也差不多改做些取捨了呢？

接下來我還會找有空的時候繼續調整「布丁布丁吃什麼？」，一步一步慢慢來吧。

至少現在旁邊最新回應的功能就出了問題了orz。

結語

最近在上英文寫作的時候，老師強調英文寫作的邏輯性，讓我有很大的啟發：

1. 一個段落只能有一個主題句(Topic sentence)
2. 後續的句子是為了補充主題句，叫做補充句 (Support details)
3. 一個段落最後一句是呼應主題句，就是結論(Conclusion)
4. 句子跟句子之間的主詞或受詞必須連貫。如果發現下一個句子的主詞與受詞跟上一句完全沒有關係，則應該換下一段。

從上述規則來看，我寫Blog一點也不嚴謹。如果我連中文寫作的邏輯都沒有掌握好，要怎麼踏入英文寫作的領域呢？因此這也是我今年需要努力的一個重要目標。

不管怎麼說，就從寫Blog開始吧。

中華電信學院微課程演講：「從網頁開發到Android APP行動應用程式開發」 / Speech at CHT School: “From Web to APP: Developing Android APP”

這個月受邀到中華電信學院演講一門微課程「從網頁開發到Android APP行動應用程式開發」。這是給有HTML5基礎的前端網頁設計師開發Android APP的教學，講述AppsGeyser跟PhoneGap (Apache Cordova)的開發方法。

課程簡介 / Introduction

本次微課程將介紹如何從前端網頁開發技術進入到行動應用程式(APP)開發的領域，特別適合具備前端網頁開發能力的工程師來聆聽。演講內容將概述各種行動應用程式開發的技術，再聚焦到以網頁技術來開發行動應用程式的兩種方法：AppsGeyser 與 PhoneGap。只要會製作行動版網頁，聽完這個演講，您就能夠製作可以上架的行動應用程式！

大綱 / Outline

• 前言：我是前端網頁設計師
• 概論：要如何製作行動應用程式APP？
• 樣板型APP開發：AppsGeyser教學
• 網頁型APP開發：PhoneGap簡介
• 實作：PhoneGap開發
  

投影片 / Slide

投影片下載：Google Drive、OneDrive、Box.net、SlideShare

備註：由於當天演講時間太短，所以投影片有所刪減，這一份則是完整的版本。

演講的重點 / Points of this speech

這次的演講跟以往大家講述APP開發的內容相比，有幾個比較值得一提的地方。

關於APP開發的分類 / About APP development classification

以往大家對APP開發方法的分類只有三種：「原生型APP」、「網頁型APP」、「混合型APP」。但其實這是從PhoneGap的觀點來看APP開發方式，並不能夠含括所有的APP開發方法。

Wikipedia的Mobile Application development給我們一個比較完整的分類：前端型、後端型以及系統型。而前述的三種分類則是隸屬於前端型開發中。而我又進一步將前端型開發方式分類成四種開發方法：

1. 原生型APP：以該平臺開發方式開發，例如Android用Java搭配Android Studio開發。
2. 網頁型APP：以製作網頁的思維建立APP，例如PhoneGap。
3. 其他型APP：以獨特的程式語言與IDE來進行開發，強調跨平臺或能夠支援複雜應用的開發方式。我將NativeScript歸類於其他型APP而不是網頁型APP，儘管它使用的是JavaScript，但建制的思維並不是寫網頁，而是一種獨立的開發方式。
4. 樣板型APP：強調超簡單工具就能製作APP，像是APP Inventor。但是限制也很多。

我試著用這個分類來讓學員瞭解自己適合的開發方式，讓大家知道原來除了原生型開發方法之外，還有很多其他的途徑可以開發APP。

以PhoneGap Build的封裝方式 / Create APP by PhoneGap Build

市面上已經有很多書籍在講PhoneGap開發了，那我講這個PhoneGap開發豈不是再次老調重彈？實際上我這次講得內容並不是單純的PhoneGap開發，而是使用Adobe PhoneGap Build來封裝APP。

如果你仔細比較一下PhoneGap的開發方式，會發現他要做的前置作業就跟開發原生型APP一樣複雜。實際上也是如此，因為PhoneGap就是基於原生型APP之上在添加的功能。如果要開發Android的APP，就要先佈置Android的開發環境；如果要開發iOS (iPhone或iPad)的APP，就要先佈置iOS的開發環境。教過MIT APP Inventor之後，我覺得這種要花很多時間才能進行開發的方式並不利於教學。

而這個Adobe PhoneGap Build則是一種雲端服務的開發環境。我們只要把PhoneGap專案準備好、上傳，就能夠封裝成各種平臺的APP。這大幅度地降低了開發環境的配置需求，只要瀏覽器、能夠撰寫HTML的工具(像是ATOM)，我們就能夠開始開發了。

然而，PhoneGap專案跟上傳到PhoneGap Build的專案內容其實有很多的差異，但是卻很少人在介紹如何製作PhoneGap Build的專案。尤其是加入簽署檔案(.keystore)讓APP可以上架的這些細節更是很少人提及，這也是我這份演講比較獨特的地方。

行動網頁框架的佈景主題 / Mobile web framework’s theme

這篇演講介紹了jQuery Mobile、Dojo Mobile跟Sencha Touch這三種行動網頁框架。但我想要強調的是「佈景主題」(theme)的問題，也就是如何能在該平臺上呈現該平臺的使用介面的能力。我讚賞Sencha Touch對於佈景主題的自動偵測與切換，在Android上他是Holo Dark的風格，在iOS上則能夠維持iOS的風格。

這種能夠相應於該系統而自動切換佈景主題的功能，對於使用者體驗(User Experience, UX)來說至關重要。這表示使用者可以在自己的系統上操作熟悉的UI，而不是APP特立獨行的佈景主題。

Dojo Mobile跟Sencha Touch都有不同的主題可以套用。雖然jQuery Mobile也可以找到一些第三方主題使用，但比較麻煩。至於其他的Bootstrap、Semantic UI、Ionic、Angular Mobile等行動網頁框架就更是如此。

不過實際開發時，應該還要考慮到這些框架跟後端資料庫做交換的方式、是否能夠整合其他JavaScript函式庫、或是語法是否容易理解等問題才是。也許隨著經驗越多，這個看法也會隨之改變吧。

結論：更專業的教學內容 / Conclusion: An advanced speech

在準備這個演講的同時，我也一併在進行MIT APP Inventor的家教。我本來以為這兩件事情可以合併在一起做，但仔細想想之後還是放棄這個念頭。APP Inventor是給不會寫程式的人來學習的，做完的成果難以到實際應用的層次。這次的演講是給擁有網頁基礎的人來聽的，主要要講網頁技術跟APP之間的關聯。所以最後我是分開來做這兩件事情。

這個微課程只是一個先導性的簡介，之後會在安排一整天的工作坊，讓學員能夠一步一步地製作行動版網頁、以PhoneGap Build封裝，然後到Google Play上架。

儘管這次的教學跟我的專業有很密切的關係，而學員的程度也都很高，講的內容也可以深入不少。但我自己也擔心起實務經驗上是否有所不足，畢竟我跟專門開發APP的工程師相比，還是有很大的差距(這就是學界與業界的差別啦)。雖然是這樣說，懂得如何做一個非常複雜APP的知識，跟如何讓學員瞭解製作APP的教學方法，這兩件事情仍然是不太一樣。

接下來要努力準備工作坊的內容，加油！

如何閱讀JavaScript/CSS壓縮程式碼？快使用程式碼格式化工具 / How to Maxify/Parsing/Format Minified Code

為了閱讀被壓縮(minify)的JavaScript與CSS程式碼，我們可以使用線上工具Code Formatter或是NetBeans的format指令來為程式碼進行排版。

You can use some tools to maxify/parse/format the minified JavaScript or CSS codes, for example, Online Code Formatter or NetBeans.

關於壓縮程式碼 / Minify Code

JavaScript與CSS程式碼的特性在於必須下載到使用者客戶端才能執行，因此降低程式碼的大小是很常見的方式。JavaScript跟CSS通常是以壓縮(minify)的形態發佈給大家使用。被壓縮的程式碼檔案名稱通常會加上「.min」，而原始碼通常會加上「.src」，舉例來說：

這是jQuery 1.11.1原始碼的樣子。檔案大小是276KB。

這是jQuery 1.11.1壓縮程式碼的樣子。檔案大小是93.5KB，幾乎是原始碼的1/3大小。

壓縮程式碼中會移除註解、刪除空白與換行、縮短變數名稱（例如變數用了var book，會縮短成var a）。我之前也介紹過使用YUI Compressor與Minify壓縮程式碼的方法。而現在壓縮JavaScript跟CSS已經是主流用法，像是Fat-Free Framework中也直接內建了壓縮工具，非常方便。

為什麼要閱讀被壓縮的程式碼？ / To Read Minified Code

雖然像是jQuery這種知名的函式庫會提供非壓縮的原始碼供大家閱讀研究，但是還是很多專案並沒有提供解壓縮的原始碼，而只有被壓縮的程式碼可以看。

我最近在研究如何撰寫CKeditor的plugin，可惜他的教學跟文件寫的並不是很好。後來我覺得比起研究文件，不如直接修改程式碼，說不定還比較快。

可惜的是，大部分CKeditor中plugin的程式碼都是壓縮後的結果，閱讀起來不太容易，我們需要一些解壓縮(maxify)工具來輔助我們閱讀這些程式碼。

在此介紹兩種格式化被壓縮程式碼的方便工具：NetBeans的format指令跟線上工具。

NetBeans的格式化指令 / “Format” in NetBeans

我使用的是NetBeansIDE 8.0。要格式化被壓縮的JavaScript程式碼的做法如下：

1. 開啟JavaScript檔案
   
2. 開啟Source > Format 
   
3. 變成了漂亮的排版
   

不過你可以注意到下面還是有一團程式碼沒有解壓縮到，這似乎是NetBeans的限制。此外，NetBeans也不能解壓縮CSS程式碼，使用範圍有限。

使用Code Formatter解壓縮 / Maxify Code on Online Code Formatter

這個工具名稱叫做「Format, Beautify, Maxify, Unpack or Deobfuscate JavaScript/jQuery/HTML/JSON/CSS Codes」，有點長，還是用網址上的Code Formatter來稱呼好了。

這工具用法很簡單。首先先把壓縮的程式碼貼在框框中，然後按下下面的按鈕「Click here to Format/Beautify/Maxify Your JavaScript/jQuery/JSON//HTML Codes」。

程式碼就以漂亮的版面排版好了，而且NetBeans沒解開的後面部分也排版的漂漂亮亮，這樣就能夠更輕易地閱讀程式碼了，真是令人開心呢。

希望這些工具能夠幫助程式開發者更容易閱讀程式碼。學程式的第一步就是模仿別人怎麼寫，加油！

PHP File Host 檔案上傳專案 / PHP File Host Project

最近我完成了一個用PHP做的檔案上傳專案「PHP File Host」，順便學習了PHP框架Fat-Free Framework、PHP資料庫函式庫RedBeanPHP、前端檔案上傳工具jQuery File Upload跟前端界面Bootstrap等技術。以下說明這個專案內容。

I wrote a PHP project “PHP File Host” for cross origin file uploading. In this project, I try some new technology include Fat-Free Framework, RedBeanPHP, Bootstrap and jQuery File Upload. Following is introduction of this project.

專案由來 / Project Introduction

原本我的KALS專案並不具備檔案上傳功能（其實一開始規劃時有啦，但是一直沒有實作），但最近開始有了這方面的需求。然而檔案上傳乍聽之下很簡單，但是在跨網域(Cross Origin)的情境中，卻不太容易實作。

另一方面，簡單的檔案上傳應用實作常常會有幾個問題：

1. 實體檔案管理的問題：檔案存放在哪哩？伺服器空間足夠嗎？
2. 檔案重複問題：如何有效率地降低檔案的使用空間？
3. 檔案名稱問題：遇到不支援的檔案名稱編碼，存到伺服器的檔案系統時會造成亂碼的問題。

因此我想要做一個簡單的檔案上傳應用網站。這個只做一件事情：支援跨網域的檔案上傳、然後的到一個下載網址。這樣就夠了。這就是PHP File Host的由來。

專案內容 / Project

• PHP File Host專案網址

我把最近對PHP File Host的報告彙整成為一個投影片，裡面有簡單的功能介紹：

• Google Drive

特色 / Features

PHP File Host的特色在於：

• 運作環境：以PHP架設，資料庫預設使用SQLite，但是不需要額外配置資料庫。
• 跨網域檔案上傳：支援以JSONP上傳與jQuery File Upload上傳
• 避免儲存重複檔案：以MD5特徵碼來辨識檔案內容，避免儲存相同檔案。
• 完整保留檔案名稱：以資料庫儲存檔案名稱，並由程式負責從header指定下載檔案名稱，因此不會下載到亂碼的檔名。

相關技術 / Technology

裡面主要用到幾種技術，在此我也聊一下使用這些技術的心得。

Fat-Free Framework (F3)

Fat-Free Framework (F3)是一個PHP框架。不過在講F3之前，我想先聊一下CodeIgniter。

在開發KALS時，我主要使用的PHP框架是CodeIgniter (CI)。CI大量參考Ruby on Rails的理念，大量遵守「約定優於配置」(convention over configuration)的準則。特別是對於routing功能來說，要連到指定網址就得在特定的檔案結構中撰寫相對應的PHP類別。

一開始我覺得這也不錯，大家的都能遵守約定的話，開發就能夠維持一致性。但事實上是為了這這個約定，CI限制了大量的靈活性。常常會發現要接手專案的新手要花很多時間來瞭解routing的邏輯，而且無法自由指定routing中的變數與類別也很令人覺得限制很大。最致命的就是不能支援JSONP的呼叫模式，難以跟jQuery.getJSON()搭配運用。

雖然KALS的CI被我大改之後變得可以支援JSONP，但我不覺得這是一種理想的做法。所以當我這次要開發這個專門支援跨網域檔案上傳的PHP File Host時，我就毅然決然換了另一個PHP框架。

我花了一點時間嘗試不同的PHP框架，不過後來找到了F3。這個專案特色是檔案看起來不會太複雜，特別是與龐大的CodeIgniter相比。

F3一些零星的功能不多，但是主要功能卻比CI好用很多。

F3的routing是由設定檔控制，寫法跟Node.js的express框架很像。這符合我們一般使用的概念：從URI追溯檔案位置。而不是像CI那樣，得先瞭解約定才能知道檔案的位置。使用配置設定來規範routing這點看起來像是違反了「約定優於配置」，但是從另一個角度來看，這也是讓「使用者」(利用URI使用系統)跟「開發者」(使用伺服器上的檔案配置)脫鉤的一種好方法。CI那種routing規範實在是太過糾結，用起來綁手綁腳的。

而F3的routing也支援分辨GET (查詢)、POST (新增)、PUT (更新)、DELETE (刪除)等REST API會使用的四種方法。不過要注意到，若針對同一URI使用GET跟POST等多種方法，最後變數只會取得使用GET這個而已。這是比較令人困擾的地方，我得再研究看看。

此外，我喜歡F3用擴增HTML標籤的方式來建立樣板，輸出的樣板能夠直接指定MIME Type為JavaScript這點也很不錯，這對JSONP支援良好，也可以輕易使用現在流行的Markdown程式語言。相較之下，CI的樣板只能說是原始人。不過F3預設限制「同源使用」(same-origin)，為此得額外宣告以下header才行讓其他網站跨網域開啟F3專案：

CI提供了大量零星的函式(helper)，讓我們能夠簡單地處理很多小東西。F3並沒有這麼多helper，但是它把很多常用的系統與環境資訊都寫在框架的系統變數裡面。習慣之後也還算好用，但我比較喜歡helper的函式形式。

在資料庫的使用上，F3的資料庫也跟CodeIgniter的Active Record一樣，都是使用ORM (Object-Relation Mapping)的方式操作資料庫。而F3多了一些NoSQL資料庫的支援，像是MongoDB跟Jig。

雖然這些ORM用起來不錯，但是我這次更想使用另一種資料庫函式庫更感興趣，那就是RedBeanPHP。

RedBeanPHP

RedBeanPHP是一個PHP資料庫函式庫，使用時只要導入它一個PHP主要檔案即可。

他在使用上跟很多ORM函式庫一樣，可以把資料表當作一個類別，裡面的一列當作是一個物件來使用。但是最大的差別在於，RedBeanPHP是不需要預先設定資料表(schemaless)的架構。

舉例來說，今天我們有一種類別叫做Book，那我們就用RedBeanPHP建立一個類別叫做「Book」的物件，然後設定其中的屬性「title」跟「author」後儲存，這樣子資料庫中就會自動幫我們把相關的table與field都設定好，連field的資料形態都會與物件屬性的形態直接相對應。

未來如果這個Book想要增加第三種屬性「price」，那就在程式中加入「price」，儲存，這樣子資料表就會多一個price的欄位。

這樣子的好處在於，我們不需要在配置程式碼之餘還要煩惱如何配置資料庫。RedBeanPHP預設採用SQLite，但也可以支援主流的關聯式資料庫，如PostgreSQL跟MySQL。

我使用RedBeanPHP在PHP File Host中儲存檔案資料，操作起來非常容易上手，而且令人驚訝地好用。

有人抱怨RedBeanPHP的資料庫查詢速度過慢，這點可能要謹慎評估。但PHP File Host少量應用看來是沒有這個問題。

Bootstrap

這次我也一併改進了前端的界面。跟以往一樣，比起重頭開始設計網頁界面，我比較偏好從既有的網頁範本開始修改。難得這次機會，我也就從知名的客戶端技術Bootstrap的範本Landing Page開始改起。

使用Bootstrap的目的包括：

• 支援RWD (Responsive Web Design)：不論電腦、平板、手機等不同螢幕大小的裝置，網頁都應該自動最佳化調整版面。這點可以靠Bootstrap的Grid system來調整。
• 一致且美觀的元件：Bootstrap的選單、按鈕、讀取條非常好看。我還蠻喜歡它的Default、Primary、Success、Info、Warning、Danger、Link的通用分類與對應顏色。
  
• 豐富的圖示：不光是Bootstrap本身提供了大量的圖示(Glyphicons)，Landing Page範本還用了更多元的Font Awesome圖示，基本功能操作真的是不需要額外在準備其他圖片了。

最後完成的結果在Am I Responsive?上看起來就是這樣，開頭的圖片會按照視窗畫面去做調整，頂端選單列也會在小螢幕中自動縮成一個按鈕，成果很不錯。

雖然我老是做一些伺服器端的專案，但是作為網頁相關的程式設計師，前端界面技術自然也不能生疏。PHP File Host雖然只是一個小小的網站，但是做起來還是令我挺開心的。

jQuery File Upload

我這次也加入了jQuery File Upload來改善檔案上傳的介面。這個套件可以用簡單的方式來設定檔案上傳的功能，讓我們輕易加入以下功能：

• 點選按鈕、選擇檔案、馬上上傳
• 上傳進度條
• 拖曳至指定區域上傳
• 剪貼上傳

我很喜歡這些方便的操作，傳統點選檔案按鈕的方式實在是太過麻煩。

另一方面，我本來還蠻煩惱怎麼用jQuery File Upload來進行跨網域傳送檔案，卻意外發現jQuery File Upload使用了HTML5元件postMessage來傳輸檔案的方式，比我以前提出的JSONP跨網域檔案上傳還要好用很多，真讓我驚豔。

不過最後我要在其他專案使用jQuery File Upload設定上傳功能時，卻發現它使用的是jQuery 1.11，與KALS專案的jQuery 1.4有很大的差別。加上jQuery File Upload也要使用jQuery UI等工具，導致它與其他功能互相衝突，最後我還是放棄在KALS專案使用jQuery File Upload而使用原本的JSONP跨網域檔案上傳方式。

向DSpace致敬 / Salute to DSpace

最後也提一下PHP File Host內部檔案儲存的方式，這部分我大量地參考了DSpace保存檔案的方式。

DSpace依照檔案的MD5特徵碼作為檔案名稱與實體位置的設定，因此每個檔案都長得像是「01f7b24e629cc23e369983994d0b8fbe」。檔案的名稱、MIME Type等相關資訊則是寫在資料庫中，連同上傳者、上傳時間等操作記錄也一併分開儲存。

這樣做可以改善檔案重複儲存、避免檔案名稱編碼不支援等問題，但是檔案管理 （特別是刪除）跟下載就成為另一個技術上的重點。目前PHP File Host還沒有做的刪除功能，就只是一直擺放資料，然後以供人下載而已。

利用Base56面碼縮短網址 / Shorten URL by Base56 Encoding

喔對了，為了避免網址過長，我還特別用了Base56將數字ID以「0123456789abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ_-.~」等網址允許的字元進行編碼。即使檔案的編號很大，網址長度仍然不會很誇張地漲大。這種做法我也挺喜歡的。

這些大致上就是PHP File Host使用到的技術。

結語：過時的技術？ / Conclusion: Outdated Technology?

剛好最近也看到一篇分析報導：「AngelList 分析：越好的公司越喜歡用 Python，越差的公司越愛用 PHP」。該分析將公司分成Okay、Good、Great三級，然後看公司使用的程式語言。

其中伺服器端PHP排行第三、客戶端Bootstrap排行第五（但是RoR我不認為是客戶端技術）、資料庫SQLite榜上無名。雖然直接看圖表起來也沒啥不好，但我現在才學這些技術，的確是比很多人慢了許多。

之後有機會的話，我想要研究伺服器端的Node.js，然後在單一頁面應用上繼續精進AngularJS (之前寫了一個批次開啟網頁的小應用，蠻好上手的)。久違地學習新的技術，真的很令人開心呢。

KALS安裝教學 / KALS Installation Guide

KALS 閱讀知識合作標註學習系統 可以讓HTML靜態網頁加入合作式閱讀標註的功能。本文將會教你如何插入一段JavaScript程式碼，讓你的網頁擁有KALS的功能。

KALS (Knowledge-based Annotation Learning System) is a web-based system for digital reading. This guide describe how to install KALS on your webpage.

Step 1. 準備數位文本：您要加入KALS的網頁 / Prepare Digital Content: KALS Target Webpage

KALS可以安裝的數位文本必須是輸出成HTML格式的文字。範例頁面可以在此下載：

• KALS!標註工具 未安裝頁面.html (請按右鍵下載)

不管伺服器端使用的程式語言為何，像是PHP、ASP.NET、JSP還是Node.js，只要最後前端輸出的是HTML格式，都可以安裝KALS。

準備好內容之後，接下來就是安裝KALS的手續了。

Step 2. KALS安裝程式碼 / KALS Installation Code

以下是KALS基本安裝的程式碼：

<!-- [KALS] -->
<script type="text/javascript" src="http://public-kals-2014.dlll.nccu.edu.tw/kals/web_apps/generic/loader/release"></script>
<!-- [/KALS] -->

安裝位置請放在網頁的</body>標籤(注意，是結尾的<body>標籤)之前，如下圖所示：

KALS安裝完成的網頁範例請在此下載：

• KALS!標註工具 安裝完成頁面.html (請按右鍵下載)

Step 3. 安裝完成 / Installation Complete

如果順利安裝完成，那麼就會看到KALS的功能列了。

接著要使用KALS的話，請註冊帳號。KALS的詳細使用教學請看這篇。

安裝注意事項 / Attention

無法安裝KALS的數位文本 / Install Problem Webpage Types

以下類型的數位文本無法使用KALS，請不要安裝：

• 前端以JavaScript框架實作的複雜網頁，例如用ext.js、jQuery Mobile或AngularJS實作的網站。
• 以Flash、Java Applet等非HTML標準輸出的外掛程式。
• 無法連線的網頁
• 本機端的網頁：如果網址開頭不是http或是https，那就無法使用KALS

問題回報 / Report

如果安裝時有遇到任何問題，請在此篇底下留言，或是寄信給我，並告訴我必要的資訊：

• 信箱地址：pulipuli.chen@gmail.com
• 必要資訊：您所安裝的網頁位置，例如 http://kals.example.edu.tw

進階設定 / Advanced Configuration

KALS目前還是一個在開發中的專案，目前使用說明並不完整。程式碼的部分已經公開在GitHub上，建議可以閱讀程式碼以進一步瞭解KALS的內涵。而使用說明文件則會以GitHub的Wiki來撰寫。

• KALS專案網站：https://github.com/pulipulichen/kals
• KALS說明文件：https://github.com/pulipulichen/kals/wiki

合作與支援 / Support

如果您的單位想要結合KALS來合作開發，則以單位名義與國立政治大學圖書資訊與檔案學研究所 數位圖書館暨數位學習實驗室指導教授陳志銘老師聯絡。

• 國立政治大學圖書資訊與檔案學研究所 數位圖書館暨數位學習實驗室：http://dlll.nccu.edu.tw
• 陳志銘教授 電子信箱：chencm@nccu.edu.tw

用AppsGeyser把網站轉換成Android APP / The Usage of AppsGeyser: From Website to Android APP

我使用AppsGeyser把「布丁布丁吃什麼？」做成APP，並製作一個簡單的投影片介紹如何操作，並記錄把網站做成APP的一些看法。

I used AppsGeyser to package my blog: "pulipuli.blogspot.tw" as a Android's APP. I share a slide about usage of AppsGeyser and my thoughts of WebApp.

從網站與APP / From Web Site to APP

很多人都想把他們的網站做成APP，但是其實很多網站只要遵守自適應網頁設計原則(Responsive Web Design)，就能夠直接用手機的瀏覽器開啟。

Android的APP具備Webview的功能，能夠讓你在APP中開啟指定網址。而AppsGeyser則是提供了一個Android APP框架，讓你建立一個開啟指定網址的APP，並協助你上傳到Google Play。

Blogger提供了27種行動版的網頁介面。行動版的網頁介面簡化了網頁排版，將連結按鈕加大，方便行動裝置使用者用手指點選。以「布丁布丁吃什麼？」來說，以下兩個網址各別呈現桌面版與行動版的樣貌：

• 桌面版：http://pulipuli.blogspot.tw/
• 行動版：http://pulipuli.blogspot.tw/?m=1

桌面版網址會偵測瀏覽器的類型，在行動裝置上開啟桌面版網址則會自動轉到行動版的網頁去。這次我就是用「布丁布丁吃什麼？」的行動版網頁來製作APP。

AppsGeyser的操作 / Guide of Apps Geyser

很多人都在網頁上介紹過AppsGeyser。我為了方便跟大家分享而製作了投影片。

• 投影片檔案：Google雲端平台、Box.net、SkyDrive

APP下載 / Download APP

• 布丁布丁吃什麼？APK直接下載

手機直接掃描這個QR Code，你就可以把我的APP下載到你的手機囉。

讓網頁看起來像是APP：WebApp / Make Website Like A APP: WebApp

用Blogger的行動介面可以快速產生一個適合在行動裝置上瀏覽的網頁介面。不過這還不太像一個APP。作為一個良好的APP，我們需要讓操作元件遵守作業系統的設計規範。至少也要做個像是可以按的按鈕之類的操作介面，才會讓使用者覺得這會是一個APP。這種網頁一般就稱之為WebApp。

現在很多網頁元件提供了類似APP的操作元件，例如jQuery Mobile就內建了上圖的選單與按鈕，iUI更是讓你的網站一整個就像是APP。你可以重新設計網頁版面，套用jQuery Mobile或iUI提供的框架(framework)，然後你就可以在網頁瀏覽器中操作一個像是APP的網頁了。

如果用AppsGeyser把長得像APP的WebApp製作成真的APP，那就會像是真的在使用APP一樣。

用網頁語法製作APP：PhoneGap / Using HTML5 to Create a APP: PhoneGap

如果你覺得在APP中開啟網頁來操作一個長得像APP的WebApp感覺非常彆扭，或是你覺得AppsGeyser提供的介面與功能太過簡陋或是多餘（我其實對AppsGeyser強迫隱藏手機的通知列這點感到困擾），那何不試著用你原本的網頁程式碼來製作一個真正的APP呢？

PhoneGap是一個用HTML、CSS與JavaScript來製作iOS、Android、Windows Phone等行動裝置的APP的免費工具。在這裡你不需要額外去學習Android的程式語言JAVA、也不用學習iOS的程式語言Object-C，而是用你原本就會的網頁寫作語言：HTML、CSS與JavaScript來製作APP。

基本上PhoneGap也跟AppsGesyer很像，他一樣是製作一個內建Webview的APP，讓你用APP開啟手機瀏覽器來顯示你用PhoneGap撰寫的網頁。不過PhoneGap還提供了許多用JavaScript呼叫的函式庫，讓你在網頁語法中使用手機內建的元件，還有相機、儲存裝置、定位系統等網頁之外的功能。

使用PhoneGap來開發APP，你可以讓你的WebApp不只長得像是APP，還能夠使用行動裝置上面的其他功能，讓它更像是一個APP。

最近看到我常用的IDE NetBeans也支援PhoneGap的開發，真讓我感到躍躍欲試啊。

網站就是APP: Firefox OS / HTML5 Website Is a APP: Firefox OS

上面的WebApp都是在APP中利用Webview內嵌一個瀏覽器以顯示一個長得像是APP的網頁。不論是用jQuery Mobile、iUI讓網頁長得像是APP，還是用PhoneGap讓網頁可以用手機的功能，他們都還不是一個APP。因為在Android上執行APP是要用Java撰寫，在iOS上執行APP是要用Object-C撰寫，要執行你寫的WebApp都還是得透過網頁瀏覽器。

Mozilla抱持著開放自由的遠大志向，製作了Firefox OS。Firefox OS是一個真的是用HTML5（就是HTML、CSS、JavaScript等網頁技術）來撰寫APP的作業系統。我們撰寫Firefox OS的APP時不僅可以用HTML5的語法，還能用Firefox OS推廣成為網頁標準的Web APP。這下子不需要在PhoneGap裡面才能引用手機功能的函式庫，你可以在網頁裡面直接以JavaScript取用手機的功能了。

APP開發方式的選擇 / Selection of APP Development

原生語言 / Native Solution

許多人，特別是電腦訓練課程補習班，他們大多都認為要製作在手機上運作的APP，就必須要用手機原生的程式語言(Native Solution)來撰寫。你要在Android上開發APP，你就必須用JAVA來撰寫，並且上傳到Google Play；你要在iOS上開發APP，你就必須用Object-C來撰寫，並且上傳到App Store。

Unify 3D

除了原生語言之外，你也可以利用Unify 3D這種程式開發工具來製作跨平台的APP。現在手機上許多遊戲，特別是在Android與iOS都能夠看到的APP，很多都是用Unify 3D來製作。根據網路上的評論，Unify 3D製作的效率並不會比原生語言還要差得太多。不過Unify 3D是付費軟體，製作並發佈APP的成本可不便宜喔。

HTML5

那用自由免費又跨平台的HTML5來開發WebApp呢？就像我這一篇從AppGeyser，一路談jQuey Mobile、iUI、PhoneGap到Firefox OS。

但是其實很多人都對於WebApp抱持否定的看法，像是認為PhoneGap製作的APP在跨平台與執行效率上有著相當大的問題。而在iOS的App Store上，更是明言拒絕WebApp上架。在Android與iOS這種原生語言非HTML5的作業系統上，藉由網頁瀏覽器來執行HTML5的APP，當然執行效率與外觀都比不上原生語言來得好。這是可以預見的情景，我並不感到意外。儘管實際上我還沒有真正著手踏入製作APP，不過我對WebApp的期許卻是一直都比原生語言來得高。

原生語言與WebApp的爭論就像是早期程式語言的爭論，有人認為使用組合語言為專門機器開發效率比較高，高等語言還要經過編譯效率較差。但是現在普遍的認知卻是偏向以高等語言來進行開發，這是因為高等語言在學習與開發效率上比組合語言高上更多。

儘管HTML5的HTML、CSS與JavaScript實際上是比Java還要再高等一些的高等程式語言，但是門檻也不見得比較低，很多人在面對JavaScript的Event與CSS的Selector上都遇到很多困難。不過比起開發效率，我認為HTML5的價值在於他是一個開放、自由、普遍流行的程式語言。比起花很多時間寫一個APP，最後只能在單一平台上執行。我認為用HTML5撰寫一個可以在任意平台上執行的APP更有價值。

使用APP的自由 / The Freedom of APP

許多人都會受到手機與APP彼此之間的高耦合的限制。例如想要用某個APP而選擇了iOS，又因為選擇了iOS而無法使用Android上面的APP。這種大家已經習以為常的場景，背後卻是代表著壟斷、封閉的下場。

我認為裝置歸裝置、APP歸APP，這才是真正的自由。我們應該是要用開放自由的程式語言，來開發一個包括電腦、手機等任何平台都能夠共用的APP。就這點來看，Firefox OS相當具有前瞻性，也是我十分看好的未來方向。

結論：WebApp是網站行動化計畫的最佳方案 / Conclusion: WebApp is the Best Solution

最近很流行兩個名詞，一個叫做「雲端」，另一個叫做「APP」。儘管真正搞懂這兩個名詞的人並不多，但是我們也毫不免俗地提出了一個目標兼具開發「雲端化」與製作「APP」的計畫。

除非一開始就致力於APP的開發，不然大部分的計畫應該都會以製作網頁應用為起點。特別是圖書館常見的數位典藏、數位圖書館計畫，大家都是製作一個用瀏覽器就能閱覽的網站。以這個網站為基礎，將網站套上行動網頁的元件，就能夠製作出長得像是APP的網頁。接著再用PhoneGap打包網站本身，讓網站直接以APP的方式交到使用者手中。

這就能夠在成品中包含「雲端化」──資料保存在遠端伺服器，不論你用哪種裝置都能夠取用相同的資料，以及「APP」──用手機行動裝置也能夠取用計畫成果的內容。

這是我心中規劃的最佳方案，也是我目前亟欲推薦老師往這方向進行開發的目標──不過這跟我的論文沒有直接關係就是了。

最後，其實我剛剛把AppsGeyser製作的APP上傳到Google Play去了，還付了750元台幣註冊成為Google Play的開發者。不過目前還不能在Google Play中搜尋到我的APP「布丁布丁吃什麼？」。我猜想可能是因為發佈後得過幾個小時才能看到結果吧？那晚點可以在Google Play找到我的APP的時候，我再跟大家說囉。

「布丁布丁吃什麼？」在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只是簡單的技術，重點在於要如何應用。這也是我們作為研究者應該去思考的問題。共勉之。

jQuery動態載入CKEditor注意事項

最近在寫標註工具的API，完成之前沒有好好做的載入器(loader)，目標是要讓人用一行程式碼就能載入全部需要的工具。

在我做的KALS標註工具當中使用到了CKEditor，而要讓他與jQuery搭配，則需要額外載入一個調配器(adapters)。但是傳統的用法都是在<head>寫<script>標籤，這跟我要的動態載入不太一樣。

在四處碰壁嘗試之後，終於找到了正確的作法。在此做個筆記。

不可用的方法

由於我是要在網頁讀取完之後才開始動態載入，因此不能用document.write，否則會洗掉整個網頁。

原本我也想利用DOM建立<script>標籤，內含src屬性載入CKEditor，插入<head>當中，但卻發現這個插入的<script>標籤並不會執行，簡單來說就是沒有效果。

後來改用jQuery的getScript()方法，就能夠確實地讀取並執行CKEditor。不過仍有其他細節需要注意，以下說明。

正確的方法

正確的作法是：

1. 建立<script src=”[CKEditor的網址]”></script>貼到<head>之中，供CKEditor本身去搜尋連結，自動載入其他檔案。
2. 以jQuery.getScript()載入並執行CKEditor。
3. 先載入CKEditor主程式，再載入調配器。

以下是簡單的範例程式碼：

//在這之前，你已經確認載入了jQuery

//路徑宣告
var _ckeditor_url = "/ckeditor/ckeditor.js";
var _adapters_url = "/ckeditor/adapters/jquery.js";

//載入函式
var _load_lib = function (_url, _callback) {
    var _script_tag = $('<script type="text/javascript" src="' + _url + '"></script>');
   _script_tag.appendTo($('head'));
   
   $.getScript(_url, function () {
       if (typeof(_callback) == 'function')
           _callback();
   }); 
};

//開始載入
_load_lib(_ckeditor_url, function () {
    _load_lib(_adapters_url, function () {
        
        //你接下來要做的其他程式
        
    });
});

這是截自KALS載入器的部分程式，並沒有經過測試。有任何錯誤，請提醒我再檢查、修正。