:::
顯示具有 PHP 標籤的文章。 顯示所有文章

Nextcloud的安裝 / Nextcloud Installation

布丁布丁吃布丁

Nextcloud的安裝 / Nextcloud Installation

2023-0314-004036.png

隨手記錄一下Nextcloud的安裝方式。

(more...)

如何從句子中的單字搜尋詞典中符合的詞彙? / How to search for the matching terms in the dictionary from a word in the sentence?

如何從句子中的單字搜尋詞典中符合的詞彙? / How to search for the matching terms in the dictionary from a word in the sentence?

21-How_to_search_for_the_matching_terms.png

如果我想要以一個字搜尋字典裡面有的詞彙,而這個詞彙又需要符合該字在句子構成的詞彙時,要怎麼做呢?舉例來說,我想在「清晨時去游泳池」這個句子裡,用「泳」來找出「游泳池」、「泳池」、「游泳」,但要排除掉「晨泳」、「泳褲」等詞彙。我整理了一套搜尋演算法來實作這個目標,這套搜尋演算法包括了過濾出現字、過濾相連順序、過濾相符詞彙、排序詞彙長度、排序錨點字位置這五個步驟。以下我將以JavaScript程式碼來講解各步驟的做法,最後附上JavaScript跟PHP兩種版本的實作程式碼。

(more...)

PHP文內關鍵字索引全文資料庫 / PHP KWIC Database

PHP文內關鍵字索引全文資料庫 / PHP KWIC Database

image

這個PHP KWIC Database是我在進行文本分析研究中的一個產物。文內關鍵字索引(Key Word In Context)的做法是將檢索的關鍵字擺在查詢結果中間,前後呈現該關鍵字的前後文。這不僅只是拿來搜尋具有該關鍵字的文本,還能夠進一步知道該關鍵字在這些文本中的用法。在許多人文研究中,具備引得查詢資料庫是非常重要的研究工具,許多語料庫(corpus)都有提供。可惜的是,現在許多全文檢索系統都沒有實作引得,包括Apache Solr。所以我在2016年年初的研究中順手寫了這個PHP KWIC Database,並將之整理成框架,讓大家能夠簡單地使用Excel整理文本資料後,並利用Convert to SQLite Online將Excel檔案轉換成SQLite資料庫,就能夠並使用PHP KWIC Database來進行檢索與分析。

(more...)

Voc4Fun 全民樂單字:單字學習行動應用程式 / Voc4Fun: A Mobile APP for Vocabulary Learning

Voc4Fun 全民樂單字:單字學習行動應用程式 / Voc4Fun: A Mobile APP for Vocabulary Learning

image

這是2016年年初我與學弟共同開發的單字學習行動應用程式,名為「Voc4Fun 全民樂單字」。這個應用程式包含了客戶端 voc4fun-client伺服器端 voc4fun-server,全部在GitHub儲存庫保存。該程式的客戶端是以Onsen UI 2開發,並可能夠直接使用Adobe PhoneGap Build來封裝成APP。而伺服器端則是我用RedBeanPHP開發的特製Log型資料庫,以詳細記錄各個行為歷程細節,再用view視圖功能做成普通的資料表。

這篇就為全民樂單字 Voc4Fun的功能做個介紹,記錄我做過的這個單字學習行動應用程式吧。

(more...)

布丁版OCS特色介紹:第三部分 / Pudding’s OCS Features: Part 3

布丁版OCS特色介紹:第三部分 / Pudding’s OCS Features: Part 3

2016-03-01_174458

上一篇講完了OCS的作者投稿流程,最後這一篇則是要介紹線上審查以及邀請審查委員審稿的審核流程。雖然這些流程跟一般研討會參與者無關,但是卻是常常另研討會管理者傷透腦筋的一個環節(當然,研討會當天的行程安排也是很費工啦XD)。如果有像是OCS這樣的資訊系統來輔助這些瑣碎的流程,相信會為研討會省下不少功夫吧。

不過就如之前所提過的,資訊系統可不是銀彈,特別像是OCS這樣目標在於提供全面功能,卻又造成讓人難以上手的複雜系統,在迎接OCS的好處之前,可別忘了它高昂的學習成本。

因此,我這此大幅度修改OCS,也是希望讓大家能夠更容易使用它。至於改得好不好用,就請看以下的介紹囉。

 

(more...)

布丁版OCS特色介紹:第二部分 / Pudding’s OCS Features: Part 2

布丁版OCS特色介紹:第二部分 / Pudding’s OCS Features: Part 2

2016-03-01_160300

上一篇對於布丁改造OCS的特色介紹,本篇則是繼續介紹OCS的主要特色工作流程之一:作者投稿

「作者投稿不是像Dropbox一樣丟過去就上傳完了嗎?」

(來自某老師的真實疑問)

對於沒有參與過學術發表的人來說,投稿這件事情的確是有點難以想象。不過我覺得這比較像是一個小組合作作業:組長是研討會主辦單位,而各位作者是組員。組長要告訴組員這份作業要做什麼,以及繳交時應該採用什麼格式,以便最後的統整。而組員就能夠根據組長的要求來分工完成這份作業——有人投A主題、有人投B主題,最後完成這一份大型的作業——也就是這個研討會。
當然,在舉辦研討會的時候並不是像教室內一樣,同學之間很容易聯絡。當研討會採用公開徵稿(call for 的方式進行時,作者可能是來自於四面八方的學者,往往連研討會主辦方都不認識。因此我們需要一個說明徵稿辦法的公開網站。更進一步,我們還要提供一套遞交稿件的流程。其中後者就是大部分研討會網站沒有去做,而在OCS就有建構了高度可自訂的功能。這可能是我們會需要一個研討會管理系統,而不是一般的內容管理系統的一個很重要的理由。

(more...)

布丁版OCS特色介紹: 第一部分 / Pudding version OCS Features: Part 1

布丁版OCS特色介紹: 第一部分 / Pudding version OCS Features: Part 1

2016-02-03_010637

上一篇簡單地介紹了研討會開放原始碼管理系統Open Conference System (以下簡稱OCS),這篇我想來介紹一下我修改的地方。這次要介紹的是外表上的介面、翻譯、以及報名功能。另外還有OCS主要功能的投稿與審查功能,則留到下次再介紹。


套用Bootstrap介面 / Mordern Interface with Bootstrap

原本OCS是2014年發佈的2.3.6版,從現在的角度來看,它的介面實在是很難使用。不僅大部分按鈕都小到只有一個20px*20px的圖示,也不能隨著畫面大小作適度的調整。

image

我參考Bootstrap 3 Affix Sidebar的樣板來套用在OCS上面。套用Bootstrap之後有很多好處,像是RWD的自動適應、置頂的導覽列、按鈕、已經經過良好安排的顏色,這些都可以直接套用在網站上。

2016-02-03_151250

我把OCS的按鈕套用成Bootstrap的格式,讓它變得又大又好按。而且我還加上了圖示,讓整個畫面變得精緻許多。

2016-02-03_013450_thumb

因為Bootstrap本身就是響應式網頁設計(RWD),所以縮小螢幕的時候版面也會自動調整。儘管如此,在我的手機上看起來還是有點奇怪,這個問題就先擱著吧。


中文化翻譯 / Localization Translate

image_thumb[2]

OCS雖然有提供中文版的語系,但是跟主要使用的英文語系相比,中文欠缺的資料非常多。我花了很多時間來把前端訪客看得到的畫面都翻譯好,至於後端管理者介面就之後再處理了。

image

原本OCS中文翻譯還蠻奇怪的,特別是電子郵件的範本以及較長的說明。舉例來說,有一處翻譯如下:「這將如同一個網路超連結,出現在 "關於作者" 內的聲明底部和 "組織團隊" 的彈出頁面。」英文原文是:「You do not yet have access to this conference's presentations.」因此正確的翻譯應該是:「您無權瀏覽該研討會的簡報。」

不過OCS是免費公開的程式碼,在這裡我也不是要吹毛求疵。相反地,正因為它是開放原始碼,所以我們可以繼承前人的進度再繼續前進。

2016-02-03_153552

在進行翻譯之前,必須要先彌補中文缺少的語系設定。因此我製作了4個語系整合工具,用來將英文語系設定檔與中文語系設定檔比對之後整合:

image

之後再一一翻譯中文語系裡面的英文,就這樣將翻譯問題告一段落了。上圖是我主要使用的開發工具NetBeans


報名流程 / Registration

接下來我們來講講OCS的主要流程之一:報名。

image

OCS可以制訂多種報名類型。不同的報名類型都可以設定不同的報名截止時間與繳費方式(或是設定0元,也就是免費)。但是原始的OCS在報名時要求使用者註冊一個OCS帳號,對希望更多人參加的小型研討會來說並不合適,所以我把OCS的報名功能簡化到只需要填入「姓名」、「單位」、「電子信箱」這樣就好。

2016-02-06_115951

基於OCS報名功能,我讓報名時能夠自動寄送確認信之外,又增設報名表格與問卷調查功能上去。

報名表格 / Registration Form

有鑑於一般學術圈的研討會管理者不懂得設計複雜的HTML表單,寧願偏向製作一個Word表格讓人填寫資料,所以報名表格的功能是我新增的一個所見記得的報名表格欄位,讓管理者直接貼上Word中設計好的表格,而使用者也只要像是在Word的所見記得欄位裡面填寫資料就好。

報名表單的優點是簡單就能設計出複雜的報名表,因為就只是表格而已。但是缺點在於難以提供統計資料。為了克服這個問題,我另外做了一個問卷調查功能。

用jQuery.Survey開發的問卷調查功能 / Survey Function

image

問卷調查功能是基於jQuery.Survey的程式碼,管理者只要作出一套JSON的設定檔,就可以動態產生一個HTML的問卷。而使用者填答的結果會以JSON匯出,也能夠再匯入已經填答的結果。我更進一步簡化jQuery.Survey的程式碼,將傳統HTML會把選項(name或label)跟值(value)合成一個設定。例如以前設定HTML表單時,選項是「葷食」,而值我們可能要設成「animat food」。但是簡化過後,只要設定「葷食」,顯示選項跟值都會是「葷食」。這是參考Google表單的設計方式,這種簡單的邏輯似乎很能夠被使用者接受。

當然,我也製作了問卷調查匯出功能。能夠把多位使用者的JSON檔案轉換csv格式匯出。這樣就能夠讓使用者匯入到Excel,進一步製作統計圖表或是報到表。

有機會我再將這套工具獨立釋出給大家使用,有興趣的人可以先到GitHub上抓我改過的jQuery.Survey的程式碼來玩玩看。

可內嵌Google表單 / Integrate with Google Form

image

剛剛講到Google表單被很多國內研討會採用作為報名系統這件事情。我開發系統的原則是盡量遵照使用者原來的使用習慣,因為系統的目標是改善使用者的工作流程,而盡量不要增加大家額外的學習成本。因此我也在OCS裡面加入了可以內嵌網頁(iframe)的設定,方便管理者把建立好的Google表單嵌入到OCS中。

不過這只是單純用iframe來提供連結而已,實際上OCS跟Google表單的資料並沒有共同。所以很抱歉,沒辦法在OCS上面看到Google表單的報名結果囉。


待續 / To be continue

本篇介紹的介面修改、翻譯以及報名流程只是這次修改的一部分。OCS核心的價值在於下一篇要介紹的作者投稿、線上審稿、邀請審查委員審稿的主要流程。

為了維持能夠常常寫blog的動力,我想比起一篇寫得非常非常長,還是分成多個部分一篇一篇來寫比較好。剩下的部分就留待下次介紹吧。

(more...)

研討會管理開放原始碼系統簡介 / Open Conference System (OCS) Introduction

研討會管理開放原始碼系統簡介 / Open Conference System (OCS) Introduction

2016-02-03_005200

由於最近幫空大社科系的2016社會變遷與當代議題研討會在架設研討會網站,所以找了網路上馳名已久的PKG系列系統之一的Open Conference System (我把它翻譯成「研討會開放原始碼管理系統」,以下簡稱OCS)。我把它拿回來進行大幅度的改造,並公開在GitHub上 (請到此下載)。。以下我想針對這個系統做個簡介。


為什麼不要用內容管理系統? / Why not use Content Management System?

很多人應該都有這個疑問,為什麼不要用普通的CMS,中文叫做內容管理系統(Content Management System),像是Joomla、Drupal,或甚至是WordPress (儘管它是用來寫Blog用的,但很多的時候被人用做CMS)。

但是普通的CMS很難支援研討會複雜的處理流程。舉例來說,研討會會有摘要與全文兩階段投稿、多人匿名審查、審查意見與作者修正後再上傳檔案、以及審查結果公告等功能。我們必須對CMS做大量的修改、調整,才能讓它的處理流程支援研討會。因此,與其花費大量時間去將一個CMS調整成能夠支援研討會的系統,不如一開始就找一個能為研討會設計的系統,也就是本篇所介紹的OCS。

為什麼不要用email? /  Why not use email to handle conference?

然而,我先把另一個很重要的問題說在前面:這些複雜的研討會流程,為什麼不要用email來處理就好了?這個問題問的非常好,這是一種人們對於資訊系統的迷思。

事實上,用email很好。主要的理由在於他是大家熟悉的工具,我們幾乎不需要額外的學習成本就能夠使用email。第二個理由是如果研討會規模不大,那麼信件來往勢必數量上也不會多,用email來管理就很足夠了。

那為什麼不要用email呢?這是因為人們會希望追求更省力的工作流程,但是往往卻忽略了學習成本這個問題。一個資訊系統「可以用」,與「好用」,這兩者之間的距離是用新臺幣來計算。而像是OCS這種開放原始碼的系統,只能夠稱得上可以用,但是距離一般人們心目中的好用,換句話說,就是客製化,則是相當困難的事情。

儘管如此,我還是為OCS做了相當大幅度的調整。不過先讓我們看一下OCS有什麼功能好了。


開放原始碼研討會管理系統簡介 / Introduce Open Conference System

以下介紹來自於OCS的首頁

OCS是一個開放自由的網頁發佈工具,專門用來建立學術研討會。OCS的特色如下:

  • 建立研討會網站。
  • 支援論文徵稿(call for papers, cfp)流程。
  • 支援摘要投稿、全文投稿、以及摘要與全文兩階段式投稿。
  • 作者上傳稿件之後仍可以更新版本。
  • 會議主席與審查委員可以在線上完成審查作業,並能夠直接傳送Email通知審查進度。
  • 發佈研討會議程與發表的論文,並支援搜尋功能。
  • 可發佈原始資料集(布丁註:這我不太確定是什麼功能)
  • 支援研討會報名功能。可透過Paypal讓與會者繳交註冊費。

OCS複雜的後台管理系統 / Complexity Management System in OCS

為了研討會處理流程而設計的OCS相當的複雜。就使用角色來說,OCS裡面㑹可能會有以下七種角色(role):

  • 系統管理者 (System Manager):架設OCS與管理伺服器運作的技術人員。
  • 會議管理者 (Conference Manager):設定各研討會的網站細節,像是公告、議程。
  • 會議主席 (Director):負責安排主題負責人、審查者、決定論文審查結果、寫信通知作者等等。
  • 主題負責人 (Track Driector):研討㑹可以細分為多個主題,作者可以投稿到各個主題,而各主題又可以安排負責管理的主席,稱之為主題主席。主題主席可以進行的工作跟會議主席差不多,但只能夠管理投稿到這個主題的稿件。
  • 審查委員 (Reviewer):受會議主席或主題主席邀請,前來審查特定一篇論文的審查者。
  • 作者 (Author):投稿到研討會的作者。
  • 讀者 (Reader):一般研討會比較少強調這個角色。讀者的功能是可以訂閱研討會已經接受且發佈的論文。

每一種角色可以使用的功能都不一樣,例如會議主席不能夠修改整個系統的網站標題,只有系統管理者可以進行這項動作。審查者可以為稿件提出接受/修改/拒絕的意見,但只有會議主席或是主題主席可以決定這個論文的最終結果。

多種不同的角色與複雜的流程造成OCS的高度複雜性。這對許多只是想要架一個「簡單網站」的學者來說,簡直是無法想像的程度。


簡化的第一步:後臺的連結 / First Step to System Simplification: Add Quick Edit Icon

2016-02-03_010637 - Copy

這麼複雜的流程有辦法簡化嗎?老實說,如果要辦一個大型研討會,那就的確是要如此複雜的分工。我目前先做一些小功能來連結前台顯示內容與後台的設定欄位:有筆的圖示按鈕。在使用者擁有相對應的權限時,系統會在公告、議程等我修改過的位置上顯示這個按鈕,點選後就能夠直接跳掉相對應的後台欄位中。這個應急之道是給那些懶得去後台翻設定的使用者使用,但相對於OCS的高度複雜來說,只是杯水車薪。


OCS嘗試要解決的灰色文獻問題 / How OCS resolve gray literature issue

OCS並不是單純的CMS,其中一個特色就是對於灰色文獻(gray literature)問題的處理。什麼是灰色文獻呢?灰色文獻的意思是指在資訊傳播過程中所存在但難以被搜尋、取得的資訊。研討會上發表的論文就是一種很常見的灰色文獻。

大部分研討會上發表的論文並沒有正式出版。常見的情況中,研討會的會議論文集(proceeding)並不會像一般書籍一樣作成一本書、申請ISBN、遵照法定送存規定一樣地送往國家圖書館保存,而通常只是將研討會中所發表的論文作成一本會議手冊──有些研討會手冊裡面甚至連全文都沒有、只有投影片──然後只有參與研討會的與會者才拿得到。這樣的結果造成雖然有研討會論文的存在,但是一般人卻只能知道有這篇文章發表在研討會中,卻難以得到文章的內文,這就是灰色文獻的問題。

image

OCS不僅只是研討會網站,它本身也是資料典藏系統,可以讓其他人輕易取得在OCS上發佈的論文。從設定上可以看到,它提供了OAI-PMH的資料交換功能,可以作為資料提供者(data provider)讓其他資料獲取者(data harvester)來取得資料,像是PKP另一個系統Open Harvester Systems。同時它也可以為發佈的論文加上數位物件識別碼DOI (Digital Object Idenifier System),方便學術論文的引用與取得。

然而現在學術傳播環境中,研討會論文是否要公開的這個問題,其實並沒有定論。有些研討會並不是難以負擔出版成本而不將會議論文出版,而是遵照作者的意願而不公開作者在研討會發表的論文。有人可能會覺得奇怪:如果發表的論文不出版的話,那豈不是違反學術傳播的目的了嗎?這是因為許多作者會在研討會跟期刊上發表同一主題的論文,而通常研討會上只是初步的成果、期刊則會是較完整的內容。為了避免期刊的主編或審查者搜尋到作者之前發表的研討會論文而造成一稿多投的誤解,所以許多作者寧願選擇在研討會不公開他的論文,而是在期刊上刊出較完整的結果。當然,我不否認也會有真的是一稿多投:研討會跟期刊的內容幾乎一樣的問題,但這不是本文的重點。

回到OCS來看,它試圖解決灰色文獻問題的方式是否能為現在學術研討㑹所接受,我想仍需要一段時間來觀察。但我能夠確定的是,在處理OCS的如何公開論文之前,光是OCS複雜的設定就已經讓一堆不懂資訊系統的學者舉白旗投降了吧。


小結:我建置的一個不完整的版本 / Conclusion: My modified OCS is not stable.

2016-02-03_010637_thumb_thumb

如果你也想要來架設OCS看看的話,可以從我的GitHub上取得我目前修改的進度:

秉持著開放原始碼的精神,既然從開放原始碼的系統取得了OCS,我當然也很樂意與大家分享我作的系統。但是必須事先聲明的是,這是一個不完整的系統。因為我是一邊安裝一邊修改,直到最後才順利讓它勉強可以運作。我並沒有要讓它做到可以讓人從無到有地順利架設,只要能夠支援現在研討會運作就好了。

另一方面,我的OCS目前僅支援線上全文審查的功能,還沒有去修改它的摘要/全文二階段審查功能。這可能是要到年中的時候才會去處理的問題,現在就先擱著了。

 

總之,歡迎大家拿取我修改過的程式碼來作進一步開發,有問題歡迎底下提問,或是用GitHub的Issues功能提問都可以。接下來幾篇我想跟大家聊聊我這個OCS改了什麼東西,慢慢來寫吧。

(more...)

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

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

圖片1

最近我完成了一個用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

圖片2

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

特色 / 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相比。

image

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專案:

header('X-Frame-Options: ');

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

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

雖然這些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的通用分類與對應顏色。
    image
  • 豐富的圖示:不光是Bootstrap本身提供了大量的圖示(Glyphicons),Landing Page範本還用了更多元的Font Awesome圖示,基本功能操作真的是不需要額外在準備其他圖片了。

圖片1

最後完成的結果在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 (之前寫了一個批次開啟網頁的小應用,蠻好上手的)。久違地學習新的技術,真的很令人開心呢。

(more...)

PHP線上轉檔服務搭配pdf2htmlEX / PHP File Converter with pdf2htmlEX

布丁布丁吃布丁

PHP線上轉檔服務搭配pdf2htmlEX / PHP File Converter with pdf2htmlEX

2014-08-11_202622

我開發了一個可以用PHP線上轉檔服務 (PHP File Converter)。此服務可以讓使用者上傳檔案,然後等待系統進行轉檔,最後輸出轉檔完的結果。這個程式是為了搭配pdf2htmlEX一起運作,以省略需要用指令來進行轉檔的過程。以下介紹這個服務的由來與下載說明。

I developed an online PHP File Converter to let user online convert their files to another format. PHP File Converter use system command line to  use convert tool, for example, pdf2htmlEX. Following is introduction of PHP File Converter.


簡介 / Introduction

2014-08-11_201945

一開始是因為我們需要一個PDF轉成HTML的方案。這些方案中王璐的pdf2htmlEX專案轉換成效非常好。pdf2htmlEX可以把一份PDF檔案轉成一個HTML檔案,而這個HTML檔案可以直接開啟,裡面已經包含了原本PDF的排版與圖片。上圖是轉換後的成果,非常好用。

但是pdf2htmlEX的操作是要用Linux的指令列進行,這對於許多不熟悉Linux的人來說有點麻煩。這讓我想要發展一個線上轉檔網址,可以讓使用者上傳檔案,然後利用作業系統的命令列進行轉檔,轉檔完成之後再提供使用者下載的服務。最後就完成這個PHP File Converter

特色 / Features

68747470733a2f2f6c68352e676f6f676c6575736572636f6e74656e742e636f6d2f2d424b4e2d31796b516741492f556d643863637538456d492f41414141414141424d4c592f62586138485459516769492f73302f323031332d31302d3

PHP File Converter特色在於讓使用者直接在瀏覽器中上傳檔案到伺服器,然後PHP File Converter會自動執行系統轉檔指令。轉檔完成之後,使用者則會被引導到下載網址,然後就可以下載已經轉檔完成的檔案。

具體來說,特色如下:

  • 以伺服器作業系統的命令列進行轉檔。只要伺服器可以使用命令列CLI (command line interface)進行轉檔,就可以用PHP File Converter來轉檔
  • 伺服器端可設定上傳檔案允許大小、格式,避免惡意檔案上傳
  • 伺服器端可設定轉檔輸入的參數
  • 伺服器端可設定保留轉檔數量,避免使用者上傳過多檔案而導致伺服器空間不足
  • 檔案的上傳、轉換與下載會在系統留下記錄,包括檔案名稱、使用者IP與時間
  • 系統是基於CodeIgniter 2.1.4,採MVC架構開發
  • 以SQLite作為資料庫,不需要額外搭配其他資料庫設定

目前PHP File Converter跟pdf2htmlEX轉檔工具綁定在一起,特別設置了pdf2htmlEX會使用的Zoom等參數。

至於pdf2htmlEX則是王璐開發的專案,詳細請看他的pdf2htmlEX專案

系統需求與設定 / System Requirement & Configuration

PHP File Converter的專案網站與下載位址如下:

PHP File Converter是以PHP架設,需要搭配SQLite資料庫才能運作。建議運作環境是:

  • PHP 5.5.3
  • SQLite 3
  • 硬碟空間:建議100MB以上
  • 測試環境XAMPP 1.8.1

轉檔程式主要的設定檔位於 [php-file-converter]/application/config/converter.php 。參考檔案內的說明來進行設定。

由於轉檔需要耗費大量伺服器資源,故在此不提供展示用的界面。


結語:未來發展方向 / Conclusion: Future Works

雖然目前PHP File Converter設定是搭配pdf2htmlEX,但其實它有很多可能。

發展PHP File Converter的原因有很多,另一個原因是因為很多服務都需要搭配轉檔工具才能使用,例如DSpace多媒體轉檔器 (Media Filter)就需要轉圖片、轉文件檔案(txt或doc)、轉聲音、轉影片,很多很多。雖然大部分轉檔工具都可以在Linux中安裝,但是每一臺都安裝自己的轉檔工具,顯然是無法善用資源的一件事情。

於是我的構想是:一臺伺服器專門負責一種檔案的轉檔,其他伺服器則是把檔案交給它轉檔。為了做到這件事情,PHP File Converter甚至有規劃API使用。

不過可惜的是,目前為止還沒有朝向這個方向進行的實際規劃。目前大家主要是手動上傳、手動下載,再把轉檔好的檔案擺到提供使用者取用的位置,伺服器之間沒有這麼自動。

最後,請讓我用這一篇文章來感謝pdf2htmlEX的作者王璐。我在安裝跟使用pdf2htmlEX時遭遇了很多問題,感謝他在信中熱情地為我解惑,而且還快速地修改了一些錯誤,真是令人尊敬的開發者。謝謝您。

(more...)

RSS全文抽取服務 / Full-Text RSS Service

布丁布丁吃布丁

RSS全文抽取服務 / Full-Text RSS Service

2014-08-11_200706

Full-Text RSS是我根據FiveFilters.org提供的full-text-rss改良的開放原始碼RSS全文抽取服務。Full-Text RSS可以分析RSS中每個頁面的網址,抽取該網址中的網頁文章內容,並加上換頁偵測、中文字編碼調整,讓RSS閱讀器可以直接閱讀到全文的RSS。

Based on FiveFilters.org’s full-text-rss code, I developed Full-Text RSS service to extract full text in RSS feed especially for Chinese article. Following are Full-Text RSS’s introduction, features and usage.


由來 / Introduction

由於我個人是重度的RSS讀者,然而大部分的RSS訂閱來源都只有提供文章一小部分的內容,例如Linux伊甸園開源社區 (RSS網址為:http://www.linuxeden.com/rss.php) ,這意思是說我要看文章的內容,還得從RSS瀏覽器中打開瀏覽器、上網、然後用他們網站中不適合手機小尺寸螢幕的排版來閱讀。雖然之前我也找許多RSS全文服務,包括まるごとRSSFeedEx.netFiveFilters.org,但是因為效率跟中文編碼的問題,總讓我使用起來十分受限。

2014-08-11_204136

這讓我興起了想要自己來架設RSS全文抽取服務的念頭。一開始我是在GitHub上搜尋,找到很多以full-text-rss為名字的專案。然後循著README.md,才找到於FiveFilters.org的開放原始碼軟體full-text-rss

於是我就很開心地下載下來,改放到GitHub託管,然後隨著自己的習慣不斷地改造這個Full-Text RSS全文抽取服務

特色與改造 / Features

RSS全文抽取服務最主要的目的在於抽取RSS的文章內容。以Linux伊甸園開源社區為例,原本的RSS網址 www.linuxeden.com/rss.php 只能顯示部分內容,如下圖:

2014-08-11_204733

但是經過RSS全文抽取之後,可以把原本的網址取代成RSS全文抽取服務的網址: http://example-full-text-rss.org/full-text-rss/makefulltextfeed.php?url=www.linuxeden.com%2Frss.php&max=10&links=preserve&exc=&submit=Create+Feed  (只是範例網址,實際上不能連線喔),顯示內容如下:

2014-08-11_200750

2014-08-11_204930

你可以看到「物联网福音 不耗电Wi-Fi技术问世」一文已經從原本的部分文字抽取成文章全文了。

而我從FiveFilters.org下載full-text-rss之後,還進行了以下特色的改造:

用到現在也將近快1年了,陸陸續續修改了很多次,到現在總算是覺得比較穩定一點,所以就來寫這篇Blog介紹。

系統需求 / Server Requirement

Full-Text RSS是以PHP運作。安裝時條件如下:

  • PHP版本:5以上
  • 不需要搭配資料庫

但是由於Full-Text RSS在抓取網站的全文時需要大量記憶體與等待相當長的時間,如果超過PHP可以執行的時間,就會顯示錯誤訊息:

[unable to retrieve full-text content]

因此我們必須調整PHP的設定檔php.ini的部分參數,讓Full-Text RSS能有比較寬裕的執行環境:

  • max_execution_time=300
  • max_input_time=600
  • memory_limit=128M
  • 必須啟用cURL,才能抓取資料

如果還有其他參數需要調整,請在下面留言跟我說。

由於Full-Text RSS會消耗大量伺服器的資源,我本來想試著架設在免費的PaaS上來運作,可惜免費空間都跑不動。因此我推薦是安裝在自己的電腦上,當然,你的電腦也得是可以公開連線的伺服器才行。

安裝 / Installation

請從以下網址下載Full-Text RSS:

下載後,請解壓縮到你的PHP運作環境目錄。以XAMPP伺服器來說,執行目錄就是在htdocs資料夾底下。例如c:\xampp\htdocs\full-text-rss\

然後運作網頁伺服器,直接開啟Full-Text RSS網址,例如http://your-ip/full-text-rss/,這樣就可以連線了。

使用方法 / Usage

Step 1. 輸入RSS訂閱資訊網址 /  Enter RSS Feed URL

2014-08-11_200706 - Copy

首先在Enter URL輸入RSS訂閱資訊的網址,例如:http://www.linuxeden.com/rss.php。然後按下「Create Feed」按鈕。

接著等待一段時間,讓Full-Text RSS去讀取。如果讀取到最後發生錯誤,建議修改輸入頁面的「Max items / 最多抽取文件篇數」,降低為5篇以下,可以降低Full-Text RSS的讀取負擔。

Step 2. 取得全文抽取網址 / Get Full-Text RSS Feed

2014-08-11_211821

順利開啟之後,到網址列複製Full-Text RSS提供的網址。舉例來說:

  • 原本網址:http://www.linuxeden.com/rss.php
  • Full-Text RSS轉換網址:http://example-full-text-rss.org/full-text-rss/makefulltextfeed.php?url=www.linuxeden.com%2Frss.php&max=10&links=preserve&exc=&submit=Create+Feed 

剛剛的參數都寫在網址上,應該很容易看懂吧。

Step 3. 加入您的RSS閱讀器 / Add Feed To Your RSS Reader

2014-08-11_212408

然後把剛剛拿到的Full-Text RSS網址加入到你的RSS閱讀器,像是Feedly (可惜沒有Google Reader了),這樣就可以了。


結語:不太對的回饋 / Conclusion: Missing Feedback

github

Full-Text RSS網站服務又是一個受惠於開放原始碼的例子。我從FiveFilters.org取得了full-text-rss,然後改造之後再到GitHub去發佈,現在寫一篇Blog介紹這怎麼使用。取之開放原始碼,回饋於開放原始碼,嗯?好像哪裡怪怪的?

是的,其實Git版本控制在團隊合作之間一般是使用Fork建立自己的分支專案,然後用Pull Requests來請求原作者看一下我改過的程式碼,以回饋給原作者。這部分doggy有比較詳細的介紹:了解 GitHub 的 fork 與 pull request 版控流程

可惜當初我還不知道Fork這個很重要的功能,所以到現在也就獨立發展了。以後會乖乖Fork專案,好好回饋給作者的啦。

(more...)

WordPress定期管理debug.log / Reducing oversized WordPress’s debug.log

布丁布丁吃布丁

WordPress定期管理debug.log / Reducing oversized WordPress’s debug.log

image

WordPress的debug.log會在不知不覺的時候無限增加。本文章介紹如何定期壓縮debug.log以避免容量暴增。

In WordPress, it's very easy to have a oversized debug.log. This article is aim to reduce the oversized debug.log in Linux.


前言 / Profile

最近我在管理WordPress的時候,赫然發現WordPress的目錄異常巨大,但是明明沒有上傳什麼大型檔案。查看之下才發現是debug.log的異常檔案過多,該檔案的路徑位於:

[WordPress安裝路徑]/wp-content/debug.log

網路上查了一下,發現大家並沒有什麼徹底解決該問題的方法。所以我決定自己撰寫Linux的Shell Script來壓縮debug.log。

解法流程 / Solution

我的解法如下:

  1. 配置compress_debug.log.sh腳本檔。
  2. 每天早上1點執行腳本檔。
  3. 腳本檔檢查debug.log容量是否大於100MB。
  4. 如果大於100MB,則壓縮到archive_debug_log目錄底下,依照日期命名,例如「debug.log-2014-02-18.zip」。然後清空debug.log。

以下介紹安裝的流程。

Step 1. 配置compress_debug.log.sh腳本檔 / Setting compress_debug.log.sh

腳本檔已經上傳到GitHub了,請從此連結下載。該檔案放置路徑如下:

[WordPress安裝路徑]/wp-content/compress_debug.log.sh

接著開啟該檔案的執行權限:

# chmod +x compress_debug.log.sh

你可以執行該檔案,看看archive_debug_log底下是否有出現備份檔案。

Step 2. 設置排程 / Setting crontab

修改排程檔案:

# vim /etc/crontab

加入以下設定

0 1 * * * root [WordPress安裝路徑]/wp-content/compress_debug.log.sh

其中的1就是指早上1點執行。


結語 / Conclusion

最近常常在處理備份檔的事情。這次備份腳本跟以往最大的不同在於加入了檔案大小的測試。很多每日備份檔案的行程,其實檔案大小並沒有大到值得備份的程度。這次加入了測試檔案大小來減少備份檔案的數量,也算是比以前更進步一些吧。

(more...)

在XAMPP設定郵寄服務 / Enable Mail Function in XAMPP

在XAMPP設定郵寄服務 / Enable Mail Function in XAMPP

image

XAMPP是結合ApachePHPMySQLSendmail等多項服務的整合伺服器,是我很常用伺服器套裝軟體。如果要使用XAMPP內建的PHP來寄送郵件(使用mail()),那需要對PHP與Sendmail做些設定。你必要有個郵件傳輸伺服器做搭配,本例是用政大的信箱來做範例。以下我會記錄我成功設定的方式。

XAMPP is a web server tool include Apache, PHP, MySQL, Sendmail and other tools. I usually use XAMPP for deploy web service. If you want to use PHP with XAMPP to send e-mail (using PHP's mail() function), you should configure PHP and Sendmail and prepare a SMTP mail server. In this example, I use my university's mail server: "nccu.edu.tw". To let XAMPP enable mail function, following is my configuration.


郵件傳輸伺服器 / SMTP Mail Sever

要讓php使用mail()寄信,你必須要有個能夠寄信的郵件傳輸伺服器。本文是借用政大的MAIL 2000伺服器。基本資訊如下:

  • SMTP伺服器位置:nccu.edu.tw
  • SMTP連接埠:25

XAMPP中也可以用Mercury/32來做為郵件傳輸伺服器,不過我還沒研究成功。

XAMPP的安裝 / XAMPP installation

XAMPP是跨平台的軟體,但是Windows跟Linux的XAMPP內容卻不一樣。Linux的XAMPP叫做LAMPP。這篇文章主要介紹的是在Windows底下安裝的XAMPP

作業系統是Windows 7 64位元版本。XAMPP的版本是1.8.1,主要包括以下套件:

  • Apache 2.4.3
  • PHP 5.4.7
  • Sendmail 32

XAMPP是免安裝軟體,但是解壓縮資料夾必須是在根目錄底下。本文將XAMPP安裝在以下路徑:

D:\xampp\

這個路徑會影響到其他參數的設定,在做以下設定時請務必注意到。

設定php.ini / Configure php.ini

首先要告訴PHP說,我們要使用sendmail來寄信。php.ini是PHP的設定檔,路徑位於:

D:\xampp\php\php.ini

找到 [mail function] 的區段,找到sendmail_path參數,將之設定以sendmail運作,設定參數為:

sendmail_path = "\"D:\xampp\sendmail\sendmail.exe\" -t"

如果用「;」放在一行的前面,表示是註解。

找到mail.log參數,設定寄送郵件的記錄檔,設定參數為:

mail.log = "D:\xampp\php\logs\php_mail.log"

設定sendmail.ini / Configure sendmail.ini

接著要設定sendmail的參數。sendmail.ini設定檔的路徑為:

D:\xampp\sendmail\sendmail.ini

找到smtp_server參數,將之設定為政大信箱位置:

smtp_server=nccu.edu.tw

其他的smtp_port=25、smtp_ssl=auto都用預設的即可。

重新啟動Apache / Restart Apache

image

打開XAMPP Control Panel,把Apache按下「Stop」,等它關閉之後,再按下「Start」即可。


結語:難怪郵件伺服器很容易被入侵 / Conclusion: Mail Sever may be hacked easily

如果你仔細看上述設定的話,會發現其實我並沒有輸入任何帳號密碼的資料,就能使用政大的郵件伺服器進行寄信。我不確定這是不是因為我現在在政大的區域網路內所以可以這樣做,不過這顯然是很危險的一件事情──嘿,我隨隨便便都可以借用政大的郵件傳送伺服器來寄信喔。

稍微摸一下mail()這個寄信的方式,你就可以知道其實要改寫寄件者、收件者等訊息都不難。不僅偽裝成別人寄信很容易,而且也可以設定你回信時的地址──是的,你回信時,預設的收件者可能不會是寄件者喔。

嗯,總之寄送郵件真是充滿陷阱的服務,也難怪垃圾郵件如此盛行。請大家謹慎使用吧。

(more...)

WordPress外掛Postie啟用其他郵件通訊協定的方法 / Enable other mail protocols of WordPress plugin “Postie”

布丁布丁吃布丁

WordPress外掛Postie啟用其他郵件通訊協定的方法 / Enable other mail protocols of WordPress plugin “Postie”

image

最近在研究WordPress上的Postie外掛,它可以從電子郵件帳戶收信,轉換成WordPress的文章發佈出去。不過預設的郵件通訊協定(Mail Protocol)僅有POP3可以選,後面會顯示「IMAP/IMAP-SSL/POP3-SSL unavailable」表示不能使用。但是只要啟用PHP的php_imap.dlll擴充功能就可以啟用這功能了。

Postie, a plugin of WordPress for receiving email to be a blog post automatically, could only use POP3 mail protocol. There would be a message “IMAP/IMAP-SSL/POP3-SSL unavailable” displayed near the “Mail Protocol” option. You can enable php extension “php_imap.dll” to use other mail protocols.


修改php.ini / Edit php.ini file

image

修改的方式是找到你的php.ini檔案,每個作業系統的php.ini位置都不太一樣,請詢問你單位的網管。

然後找到這一行:

;extension=php_imap.dll

把前面的註解「;」去掉,變成:

extension=php_imap.dll

修改完就儲存檔案吧。

重新啟動apache / Restart Apache Server

image

重新啟動apache伺服器。重新啟動的方法也請教你的網管吧。

可以使用其他郵件通訊協定了 / Other Mail Protocols Are Enabled

image

回到Postie的設定,其他的郵件通訊協定已經可以選擇了。如果你要用Gmail來設定Postie的話,就必須開啟POP3-SSL才可以喔。

(more...)

使用Minify壓縮JavaScript跟CSS範例

使用Minify壓縮JavaScript跟CSS範例

image

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

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


下載檔案

image

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

壓縮範例

我這篇的用法中,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網站服務的專案還是很多,大家到底是怎麼面對這種問題的啊?我很好奇!

(more...)

在 PHP 使用 YUI Compressor 壓縮 JavaScript 跟 CSS

在 PHP 使用 YUI Compressor 壓縮 JavaScript 跟 CSS

2011-11-14_232832 yui logo

我在寫程式的時候,習慣搭配程式註解一併撰寫。寫JavaScript就搭配JSDoc,寫CSS就搭配CSSDoc,寫著寫著程式碼就會非常非常地龐大,造成使用者每次都要下載過大的檔案內容而效率緩慢。

YUI是一套開放原始碼的JavaScript與CSS框架,以BSD授權條款開放使用。它其中一個相當知名的功能是JavaScript與CSS的壓縮器(compressor)。這篇是要教你如何在PHP的環境中使用YUI Compressor來壓縮JavaScript與CSS。


安裝配置

由於這篇的目的是使用PHP作為開發環境,相信你已經有了一個運作PHP的環境。我自己的測試環境是以XAMPP 1.7.0架設,使用PHP 5.2.8。

首先,你要準備一個資料夾,用來擺放YUI Compressor與相關檔案。

再來將以下檔案下載到該資料夾中:

安裝Java

由於YUI Compressor使用Java,你必須確保你的環境中安裝了JDK才行。請到Java網站下載Java Platform (JDK),他有提供Windows與Linux各種版本。

然而我在CentOS作業系統中安裝JDK 7u1時不知為何地失敗了,所以我又回頭去裝了JDK 6u12。

下載之後,請調整該檔案的權限為755,然後執行該檔案。舉例來說指令如下:

[root@dspace ~]# chmod 755 jdk-6u12-linux-i586-rpm.bin
[root@dspace ~]# ./jdk-6u12-linux-i586-rpm.bin

如要確認Java能夠使用,請輸入以下指令並可能會看到如下訊息:(可能是因為我先裝7u1失敗的關係,以下版本顯示的是7u1而不是6u12)

[root@dspace ~]# java -version
java version "1.7.0_01"
Java(TM) SE Runtime Environment (build 1.7.0_01-b08)
Java HotSpot(TM) Client VM (build 21.1-b02, mixed mode)

這樣就完成配置囉。


壓縮使用

使用YUI Compressor時,要先引用Minify_YUICompressor.php,然後透過它的靜態方法minifyJs()跟minifyCss()來輸入要壓縮的程式碼,並取得壓縮過後的程式碼。

以下是minifyJs跟minifyCss的用法:

/**
* Minify a Javascript string
*
* @param string $js
*
* @param array $options (verbose is ignored)
*
* @see http://www.julienlecomte.net/yuicompressor/README
*
* @return string
*/
public static function minifyJs($js, $options = array())

/**
* Minify a CSS string
*
* @param string $css
*
* @param array $options (verbose is ignored)
*
* @see http://www.julienlecomte.net/yuicompressor/README
*
* @return string
*/
public static function minifyCss($css, $options = array())

使用範例

為了讓大家更容易理解如何使用,請下載以下兩個範例檔案到上述Minify_YUICompressor.php跟yuicompressor-2.4.6.jar的同一個資料夾中。

我們先看一下blogger-template.css的原始碼,這是一個沒有經過壓縮的CSS程式,大概長得像下面這樣子,程式碼大小為19.9KB:

2011-11-14_232059 blogger-template.css

然後我們再透過minifyCss.php看一下壓縮過的樣子,壓縮過後程式碼大小為13.4KB,足足有67.3%的壓縮率:

2011-11-14_232133 minifyCss.php

以下是minifyCss.php的程式碼內容。這裡面包括了在HTTP標頭輸出為CSS格式的指令,以協助瀏覽器正確判斷資料內容。

<?php
header('Content-type: text/css', TRUE);

include("Minify_YUICompressor.php");
$script = file_get_contents("blogger-template.css");
$packed = Minify_YUICompressor::minifyCss($script);
echo $packed;

而JavaScript也是以此類推,以下是minifyJs.php壓縮JavaScript的標頭輸出與壓縮寫法:

<?php
header('Content-type: text/javascript', TRUE);

include("Minify_YUICompressor.php");
$script = file_get_contents("puliBloggerDigest.js");
$packed = Minify_YUICompressor::minifyJs($script);
echo $packed;


致謝與修改過程

YUI Compressor雖然一般是要透過Java以指令列的方式運作,不過多虧了minify專案開發了Minify_YUICompressor.php,讓我們得以輕易地以PHP使用YUI Compressor。

然而由於原本的Minify_YUICompressor.php需要將YUI Compressor跟暫存目錄指定為絕對路徑,我覺得不是很好用,所以將暫存目錄改為系統自訂的暫存目錄、YUI Compreesor改為跟Minify_YUICompressor.php相同的目錄,讓我們只要把兩個檔案擺在一起就能夠使用。這樣在程式碼轉移的時候特別方便,例如將PHP系統從Windows轉移到Linux的時候。

結語:最好搭配快取機制一起使用

YUI Compressor的壓縮功能雖然挺好用的,搭配上Minify程式之後就更容易讓PHP取用,但是運作效率卻有待堪慮。我在Windows環境中請YUI Compressor壓縮1MB左右的JavaScript的時候,通常會延遲個3秒鐘左右才完成。儘管這是因為我檔案太大的關係,但是如果太過頻繁的壓縮,恐怕仍會帶來效率上的問題。

我建議在使用YUI Compressor的時候,同時搭配一些快取機制(cache),將YUI Compressor的壓縮結果另存為一個靜態的JavaScript或CSS程式碼。下次就能讓系統直接讀取壓縮結果,而不需要經過YUI Compressor的壓縮。

(more...)