看第四台不買液晶電視的理由 / The Reason Why Not Use LCD TV to Watch Cable TV

最近在跟家人討論是否要把家裡老舊的映像管電視換成支持Full HD的液晶電視。幾經考量之後，由於我們家仍是以看第四台為主，因此最後仍決定繼續看映像管電視，不買液晶電視。

Recently, I discussed with my family whether to replace our old CRT TV by high resolution LCD TV. The final decision is that, because we want to watch low resolution cable TV, it's the best to use CRT TV, not LCD TV.

映像管電視與液晶電視 / CRT TV vs. LCD TV

每個家庭大多都會有一臺電視。傳統家庭大多擁有的是映像管電視。但隨著科技發展，液晶電視的價格越來越便宜。液晶電視可以支持更大的解析度、更大的可視畫面(但可視角度不一定大)、省電，而且薄型的液晶電視比肥胖的映像管電視還要省空間。詳細的比較可以參考travis0501所整理的LCD與CRT的比較。

由於我的電腦使用液晶螢幕已經好幾年了，我很喜歡液晶螢幕不閃爍的感覺，看起來很舒服。而每次回家跟家人一起看電視時，總覺得很不習慣映像管電視的閃爍與低解析度。尤其現在電影大多採用IMAX格式拍攝，比例通常是1.44:1或是1.78:1，傳統的4:3電視下左右畫面都會被切掉，讓我覺得看起來一直覺得很奇怪。

因此我就打算去了附近的店家看一看液晶電視，考慮看看是否要不要買一臺液晶電視回來。

智慧型液晶電視的無用功能 / LCD TV with Unused Features

(圖片來自於羅技HD網路攝影機 for TV結合大畫面液晶電視 讓電視不再只能看電視 還是視訊通話零時差的最佳互動管道)

現在許多電視逐漸從單純的影片播放轉型成為家庭娛樂中心。以往電視只負責播放影片，是個單純的顯示器。可是現在電視有逐漸取代電腦的趨勢，不僅要可以上網、可以裝APP擴充功能、還可以視訊連線，讓你接個無線滑鼠與鍵盤來把它當電腦用。

各家販賣店的店員一聽我要買液晶電視，馬上就會推上述的各種功能。這時候要注意了，其實這些廣告臺詞有很多問題。如果是對電腦不熟悉的人來說，恐怕很容易搞混。

多餘功能1：上網 / Unused Feature 1: Internet Browser

我媽很久以前就常常搞不懂，以前拿傳統手機可以用WAP上網，那為何我還是堅持要用能安裝Opera或是Firefox之類的智慧型手機上網。那是因為這不是能不能連上網際網路的問題，而是瀏覽器能不能瀏覽標準網頁的問題。

以上圖中在Nokia手機上瀏覽Google的例子來說，你可以發現這個畫面跟我們一般在電腦上看到的Google界面差很多。除了這是因為配合小螢幕或是降低傳輸資料量之外，最主要的因為手機上的網頁瀏覽器通常都只提供了最低限度的網頁功能，所以Google網頁也只好閹割成不同的畫面。

為什麼手機只提供簡易版瀏覽器呢？這是因為傳統手機的CPU跟記憶體與桌上型電腦相比小了許多，不太可能做到跟桌上型電腦用Google Chrome或Firefox來看網頁一樣的效果。

那用簡易版的瀏覽器上網有什麼問題嗎？如果你只是用Google查關鍵字，瀏覽純圖文的普通網頁，那還沒啥問題。但如果你對「上網」的意義在於用一些複雜的應用，特別是使用了大量的AJAX、或是以Web APP為目標的網頁服務，例如Facebook網頁版，那是完全不能指望簡易版的瀏覽器能夠正常開啟這些網頁。

那手機上的簡易版瀏覽器跟液晶電視有什麼關係？關係也很大，因為現在的液晶電視上網的模式就跟當初用手機上網差不多，裡面裝得十之八九也都是簡易版的瀏覽器。儘管技術的進步，液晶電視上的瀏覽器看起來也許比當初用WAP看網頁的手機來說好得多，但是這還是很難保證液晶電視的瀏覽器可以順利開啟你要的網頁。

不然保險起見，你也可以把「我的最愛」書籤整理一下，然後到展示區一一測試看看，似乎比較安心一點。

多餘功能2：APP / Unused Feature 2: APP

有一點很恐怖的事情是，許多人都以為「APP」這個字是直接對應到iPhone或Android的APP。聽到「可以安裝APP」就以為是「可以安裝我在iPhone上使用的那些APP」，但這是天大的誤會。

(圖片來自News24 launches Samsung Smart TV app)

以上面來自Samsung Smart TV上的TV APP來說，這臺Samsung Smart TV就只能裝Samsung Smart TV的TV APP，不能裝iPhone或Android的APP；這些TV APP就是特別為了Samsung Smart TV而設計，你也不能裝在LG或Sony的智慧型電視上——不管它們誰比較智慧。

回頭說到這個APP，他本來就只是一種在作業系統上安裝應用程式的行為，可以幫既有的作業系統增加一些額外的功能。Windows 7上可以安裝遊戲擴充娛樂功能、Android上可以安裝Google注音輸入法改善輸入功能，智慧液晶電視也提供了類似的擴充功能，大多不外乎是可以看YouTube、上Twitter。

乍看之下可以擴充功能似乎很不錯，可是若你仔細一看，會發現跟iPhone的App Store或Android的Google Play相比，智慧型電視的APP數量完全只是小巫見大巫。可是每一家都說自己是APP，這也造成許多人都以為每一種APP都是像iPhone或Android那樣的APP。這是一個很大的誤會。

那為什麼智慧型液晶電視上的APP不像是智慧型手機的APP這麼多呢？這是開發環境的問題。APP，其實也就是一種作業系統開放環境、供開發者撰寫應用程式、好安裝在作業系統上的做法。不過複雜的作業系統通常是用在電腦上，以應付各種功能需求。而電視的主要任務在於播放，我們很難要求電視能扮演好一個複雜的作業系統，因此電視上能夠安裝的APP通常功能有限。其次，iPhone與Android能夠擁有這麼多的APP，這是因為這些平臺的盛行與開放供人開發，才會有這麼多人願意考慮在智慧型手機上開發各式各樣的APP。液晶電視並沒有採用通用的作業系統，也不一定有開放供人開發APP，而大多是由製造商自己開發。少數人開發一些電視的零星價值，又只是提供使用者免費安裝，那當然不能期待液晶電視上的APP有多好用啦。

總結上述，不要看到電視可以裝APP就心動，這個APP跟你想像的有很大的不一樣啊！

更智慧的選擇：使用Android電視棒 / Android TV Stick

與其考慮智慧型電視提供的不太智慧的作業系統環境，我還比較建議使用現在智慧型手機使用的Android作業系統。以上圖這個BenQ 電視上網精靈Android電視棒為例，它主要把電視當作HDMI的顯示器，內裝的是Android的作業系統，電源採用USB供電，可外接無線鍵盤滑鼠來操作。簡單來說，它就像一臺電腦或智慧型手機，但是是把液晶電視當作螢幕來顯示而已。

買電視棒可以解決上述的幾個問題：

1. 上網可以安裝各種支援標準網頁的瀏覽器，包括Google Chrome。可惜依然不支援IE。
2. 可以使用Google Play的各種APP，但是要注意是否真的有安裝Google Play。
3. 鍵盤輸入法可以使用更好用的輸入法，像是Google注音輸入法。

但是相對的，購買這種電視棒也需要注意幾個問題：

1. 是否有為電視螢幕做版面調整：智慧型手機是小螢幕，可是電視是大螢幕。不同螢幕所使用的DPI不同，這是需要注意的地方。
2. Android的版本：早期的電視棒大多是Android 2.3，可是現在主流的Android是4版以上。Android 4為大螢幕做了不少的調整，比起Android 2.3好用很多。而且現在的APP也大多限定在Android 4以上才能安裝，在選擇時務必特別注意。
3. 是否內建Google Play：有安裝Google Play、能夠從Google Play下載APP的電視棒需要多付一點錢給Google，所以會賣比較貴。未安裝Google Play的電視棒雖然也可以安裝APP，但是會有很多APP無法支援，而且操作複雜度會麻煩許多。

因此購買電視棒也是一門學問，需要仔細比較、評估再來購買。現在很多賣場會把電視棒跟電視綁在一起賣，價格雖然比較便宜，但若一個不堪用的電視棒，那等於是花了更多冤枉錢，不得不慎。

其他的電視棒 / Other TV Stick

你也可以考慮買像是GameStick遊戲專用的電視棒。內容一樣裝Android，而且界面有為遊戲設計特別調整過，還有一個無線操作器，非常的酷。但不能當作是普通的Android看待，它似乎不能像一般的Android一樣使用各種APP。把它當作是類似PS3或XBox這樣的電視遊樂器來使用吧。

另外讓我期待的是Firefox OS的電視棒 MatchStick。雖然Firefox OS前景依然不明，但我還是很支持基於Web網頁技術開發的任何開放標準應用。

 

不過話說回來，上述這些智慧型電視的考量問題都跟我家無關。我家要的只是有台電視看第四台而已，其他的功能都是多餘的啦。

為什麼要看第四台？ / Why We Need Cable TV?

在繼續談液晶電視之前，我想先回歸到一個基本問題，那就是前提是我們要看第四台。

臺灣俗稱的第四台是指以同軸電纜連接的有線電視，並以多頻道月組的方式提供服務。租了第四台之後，家裡就可以看到上百台不同的節目。儘管原本第四台是因為有別於早期的中視、臺視、華視的第四種選擇，而在民視出來之後，無線電視早就不只四臺了，可是我們還是習慣以第四台稱呼。

第四台的缺點 / Cable TV’s Problems

傳統的第四台採用的仍是早期的NTSC影像格式，僅有提供640*480的解析度。而當時的映像管電視也是以支援這種解析度為主而設計。然而640*480其實並不是很清晰，因此早期的字幕做的很大，就是為了讓觀眾在不清晰的解析度下看清楚文字。

時代來到了1080p大螢幕盛行的現代，越來越多影片是特別為了高解析的顯示器設計。像是這個PS4的介面設定，在僅支援640*480解析度的映像管電視底下觀看，你完全看不清楚文字的內容。

由於同軸電纜提供的資料量有其極限，近年來以光線網路提供更高品質的視訊來源越來越盛行。最有名的就是中華電信的MOD，而MOD提供的高品質Full HD也是許多人更換電視的主要原因。MOD是以隨選視訊的方式提供服務，意思是你要看哪一個節目或影片，就在你想看的時候臨時從網路上下載來播放，而不是跟傳統第四台是持續播放不同節目這種模式。好處是你想看的節目可以隨時從頭或是你想要的地方看起，壞處是只有少部分節目或影片免費、大部分節目都是要收費的。

另一方面，傳統的有線電視台也開始提供高品質清晰的數位頻道，採額外付費的方式讓使用者購買。但是這個問題在於，即使是聲稱有線電視數位化，仍然只有少數幾個頻道是高品質清晰畫面，例如公視與那些額外付費的頻道，大部分仍是跟傳統的第四台一樣的畫質。而且數位電視訊號來源必須要以光纖網路來傳輸，不見得所有社區都有鋪線、支持數位有線電視。要確認的話還是打一通電話比較保險。

第四台的優勢 / Advantage of Cable TV

好吧，我們知道第四台清晰度比不上數位有線電視、也沒有像MOD一樣的隨選視訊，那為什麼我們還是要看第四台？原因當然是因為有想看的節目囉。

第四台雖然提供了很多我們不會想看的節目，但是仍然有各種電影臺跟娛樂節目，這也是我們家人主要收看的頻道。而這些頻道目前MOD有些並沒有提供，或著是還需要額外加價購買之後才能看。儘管高畫質可能值得多花點錢，但對於娛樂花費斤斤計較的家人來說，這可能不是什麼好選擇。

有些年輕人可能會跳出來說：「什麼綜藝節目或電影的我可以下載啊？」但是對於懶得找尋去哪裡下載的家人來說，能在指定時間內打開電視觀看，那就是最好的娛樂來源了。看個電視何苦還要強迫家人學習下載影片呢？

液晶電視能看第四台嗎？ / Can Cable TV display on LCD TV?

在確定要看第四台的前提之下，我們來看看液晶電視看第四台的問題。

(圖片來自於DIY：第四台 CATV (Cable TV 有線電視)同軸電纜線（Coxial Cable）剝線製)

基本上現在以「液晶電視」為名的產品都可以支援以同軸電纜輸入視訊訊號的接頭。因此現在液晶電視可以看第四台，但是可以看、跟好看是兩回事。

解析度問題 / Resolution Problem

第四台僅提供640*480低解析度的影像來源，而這在高解析度的液晶電視上看起來非常地傷眼。以現在液晶電視支援原生的Full HD 1080p來說，他的解析度是1080*1920，跟第四台的640*480相比大概差了快7倍左右。這個意思是說，原本在映像管電視上會看到的一點色塊，會被直接放大快7倍之後成為一個大馬賽克。而電視尺寸越大，你看到的馬賽克也就越大。

為了方便大家理解，我借用訊號分接共享該如何弄清楚畫面? 及 電視卡/電視盒產品畫質的選擇這篇教學的電視圖片作為例子來解釋。

這是電視的原圖。

若你在映像管電視上看，差不多是這種感覺。

你在液晶電視上看，差不多是這種感覺。

這並不是什麼放大鏡細看的問題，而是實際上就是會「清楚地看到那些模糊的畫面」。

好吧，畢竟第四台先天上影像訊號就沒有那麼高畫質，不能期待他清楚是合情合理的。但問題還沒完，還有另一個大問題需要注意。

螢幕比例 / Display Aspect Ratio

(圖片來自於Faking It : Making 4:3 footage work in 16:9 projects)

現在的液晶電視幾乎都只剩下16:9寬螢幕的樣式，但是第四台的視訊來源比例卻是4:3。從上圖中你可以發現寬螢幕跟普通螢幕相比是有相當大的差距。為了讓寬螢幕電視能夠顯示4:3的第四台訊號，液晶電視會提供幾種選擇：

• 最大化拉寬：把4:3拉大到吻合液晶電視的比例，比例看起來最奇怪。
• 左右拉寬：中間保持比例，只有左右兩邊拉特別寬。這樣可以讓觀眾看起來不會覺得特別奇怪。
• 稍微上下裁掉之後拉寬：由於上下畫面被裁掉一點，所以拉寬時比例比較不會差距太大。
• 上下裁掉，維持相同比例：犧牲大量上下畫面，維持畫面比例不變。但是這樣看不到的區域很大之外，馬賽克會被放得更大。
• 保留左右黑邊，維持相同比例：這可能是顯示4:3比例畫面來源最理想的方法。

雖然畫面比例上有這些選擇，但是很遺憾的是，並不是所有液晶電視都會提供比例的調整。就我那時候看的幾款產品，便宜的只有大同提供螢幕比例調整，其他的液晶電視都是比較貴的品牌才有提供這個功能。

沒有適合看第四台的液晶電視嗎？ / Which LCD TV is Suitable to watch Cable TV?

我跑了幾家店親自看了幾臺液晶電視，發現大多數液晶電視播放第四台的時候看起來都很糟糕。特別是店家通常會展示的都是高畫質影片，相較之下第四台更是慘不忍睹。

不過看到最後，赫然發現SAMSUNG的UA40H5100AWXZW在第四台這種低解析度的畫面時，硬是要比Sony的高價液晶電視還要漂亮一點。而且SAMSUNG的操作按鈕採用十字加點選來控制，跟其他液晶電視相比起來順手許多，當時我看了還蠻心動的。

不要用液晶電視看第四台 / Don’t Watch Cable TV on LCD TV

可是回家後又看了一下映像管電視，然後靜下心想一想，赫然驚覺一個事實：

 

就算液晶電視調整的再好，看起來也不過跟映像管電視差不多，為什麼我還要花大錢去買呢？

 

事實上，這個問題也早就被人討論已久。像是kreties的[心得] 只看第四台 大家怎麼都推CRT? 液晶錯了嗎? 或是 LED背光的液晶電視看有線電視時畫質變差? 

許多人的模式都是：

1. 原本看第四台
2. 聽說液晶電視大螢幕很炫，來換液晶電視好了
3. 第四台看起來好模糊
4. 改換MOD，花更多的錢，但看不到第四台的節目

有些人為了第四台在液晶電視上看起來很模糊的問題發問，還會被回嗆說去拿藍光來看，想來發問者心中應該是百般無奈：我就是想看第四台，第四台錯了嗎？orz

 

這個問題非常地嚴重，但是電視銷售員的介紹方式卻通常是：

「液晶電視也可以看第四台啦，只是比較模糊而已。」

卻不是：

「要用液晶電視看第四台，你不如去買映像管電視。」

 

為了賺錢，在商言商，這也是沒辦法的事情。我們消費者自己要多做功課，別太輕易相信銷售員囉。

結論：內容為王 / Conclusion: Content is King

好吧，姑且不討論那些因為被液晶電視大螢幕騙到而買來看第四台的可憐消費者。我們還是為這篇已經超過5000字的文章做個總結。

為什麼不選擇液晶電視？我的主要理由在於因為我們想看第四台上的節目，而這些節目並沒有的提供高畫質格式，液晶電視並不適合在看低畫質的影片，因此繼續看映像管電視即可。

如果有朝一日MOD或其他有線電視提供了我們想看節目的高畫質版本，到時候再來考慮採購液晶電視也不遲。

為了想看的內容而選擇適合的電視，而不是追逐潮流換電視，這點希望跟大家共勉之。

 

最後我想澄清一下，其實我從大學搬到宿舍之後就不太看電視了，大多都是用電腦來看影片，而現在逐漸改成用平板電腦來看影片。電視播什麼節目我也不太在意就是了XD

(more...)

我讓CKEditor也可錄音了：Recordmp3js插件 / Recordmp3js Plugin: Record Voice in CKEditor

我做了CKEditor的插件Recordmp3js，這是以HTML5的新功能為基礎，建構在Recordmp3js專案上實作的插件。以下介紹這個套件的功能。

I developed a CKEditor pluing: Recordmp3js. This is based on HTML5 audio function and Recordmp3js project. You can use Recordmp3js plugin to record voice in CKEditor. This article introduce Recordmp3js and some development memo.

CKEditor插件：Recordmp3js / CKEditor Plugin: Recordmp3js

• Recordmp3js 專案首頁：https://github.com/pulipulichen/kals/tree/pudding/libraries/ckeditor/plugins/recordmp3js (這是依附在KALS專案底下)
• CKEditor Add-ons Recordmp3js: http://ckeditor.com/addon/recordmp3js

recordmp3js的特色如下：

• 使用HTML5的錄音功能，不需要Flash或Java Applet等其他插件。
• 錄音功能旁有個音量顯示器，可以知道自己的麥克風有沒有啟用或收到聲音。
• 限制錄音長度：最短3秒，最長60秒。
• 錄音檔案可以壓縮成MP3，而不是預設產生WAVE。
• MP3檔案預設以Base64編碼儲存，也可以儲存到PHP File Host專案上。

安裝說明請看專案的README。

使用介紹 / Usage

安裝好之後會看到一個麥克風的圖示。

開啟視窗之後，要先按瀏覽器的「允許」麥克風。

然後主要操作介面才能正常啟用。左邊是錄音的按鈕，右邊是音量的顯示器，未開始錄音時是以單色顯示。讓我們按下錄音按鈕。

開始錄音。你可以看到限制錄音時間，右邊的音量顯示器變成彩色了。

停止錄音之後，要等待系統轉檔與上傳。大致上錄音1分鐘就需要1分鐘轉檔。

轉檔完成，下面會出現音樂播放界面。按下音樂下載圖示則可以下載錄音檔MP3。錄音檔案的時間長度比實際錄音的時間還要長，這是已知的正常BUG (參考Known issues那段)，目前沒有解決方法。

按下「確定」之後，就可以在編輯器內插入<audio>標籤了。

開發感想 / Development

萬用的Base64編碼 / Amazing Base64 Encoding

其實前一篇開發的PHP File Host專案是為了保存這篇的錄音檔而開發，規劃上是最後才實作。不過真的摸到Recordmp3js之後，才發現原來保存二進位MP3檔案的方式竟然是用Base64編碼！

Base64編碼是一種將二進位檔案以字串的方式編碼的方法。一般HTML網頁是以純文字的方式保存，因此網頁上面的圖片、聲音檔案等二進位資料通常是另外儲存，再以<img>、<audio>標籤嵌入到HTML網頁中。可是這個動作是撰寫HTML網頁初學者的第一個難關：為什麼網頁跟圖片要分開儲存？這也造成了複製網頁檔案的困難，不能只有複製HTML網頁檔案本身，還得複製相關使用的二進位圖片檔案。

Base64編碼可以讓圖片以字串的方式保存在HTML網頁中，而不需要額外保存一個檔案。我以前也介紹過以Base64編碼保存圖片這件事情。在寫這個Recordmp3js插件時，也因為覺得還要另外找地方插入麥克風圖示很麻煩，所以直接用Base64編碼的圖片來插入。可是我還真沒想到原來Recordmp3js的MP3聲音檔案也是用Base64來儲存！

以前只是單純地使用Base64編碼的檔案，但是到這時候我才意識到Base64的麻煩之處。一般是使用file類型表單欄位來上傳檔案，例如：

<input type=”file” name=”file” />

但是由於Base64編碼是字串資料形態，所以用普通的text類型表單欄位來遞交：

<input type=”text” name=”file” />

這兩者的name雖然都是file，但是對伺服器來說卻是不一樣的。在PHP當中前者是要用$_FILES[“file”]來取用、後者是要用$_POST[“file”]。此外，由於Base64編碼並沒有指定檔案名稱，所以還需要用另一個text欄位來傳送檔案名稱。

而即使Base64編碼是字串形式，也不能用JSONP的方式來做跨網域傳輸。因為JSONP實際上是將資料輸入在網址上，而Base64編碼的結果通常很容易超過網址的2083字元限制。

這造成我得改寫PHP File Host的檔案接收方式，又花了我一番功夫。到最後索性乾脆讓Recordmp3js預設使用Base64編碼來儲存，讓PHP File Host變成選擇性支援。雖然這會造成插入CKEditor的資料變得超級長，但不需要額外架設伺服器保存MP3檔案這點還是蠻容易讓人使用的。

MP3轉檔 / MP3 Convert

一開始研究HTML5錄音功能時，最讓我困擾的地方在於HTML5預設的錄音結果是WAVE格式。WAVE是沒有壓縮的聲音檔案，因此聲音檔案的大小非常大，讓我難以直接使用HTML5的錄音功能來儲存錄音檔案。

本來還在考慮是否要在PHP File Host加上檔案轉檔功能，在上傳檔案之後轉檔成MP3或amr格式。可是後來意外發現Recordmp3js居然在Recorderjs專案之上加上了MP3轉檔libmp3lame.js的功能，讓MP3轉檔的工作直接就在客戶端瀏覽器上完成。這真的是太方便了。

當然，對很多網頁開發者來說，這是風險很高的事情。因為客戶端使用的瀏覽器跟電腦效能不一，因此完全不能寄望IE6或是在行動裝置上的瀏覽器能夠正常執行。我剛剛拿了Android的Chrome跟Firefox來玩玩看，的確是無法開啟。

不過我的應用場景比較特殊，我可以要求使用者以Chrome或Firefox來使用我的系統，這個顧慮就暫時不在我的考量之中。

其他的轉檔格式？ / Other Better Audio Format?

這也讓我想到是否可能用更有效率的amr格式來為語音聲音檔案編碼，赫然發現GitHub上的確有amr.js專案，真是厲害。然而選用編碼格式也要顧慮到瀏覽器的支援，根據w3schools.com的HTLM5 Audio介紹，<audio>標籤只支援MP3、Wav跟Ogg格式，大部分瀏覽器都支援MP3，除了Opera。支援細節如下：

Browser	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	NO	YES	YES

 

HTML5的錄音元件 / Audio in HTML5

Recorderjs將HTML5的錄音元件包裝的非常好用，但是實際上使用之前，還是需要經過非常多的設定。你可以看看Recordmp3js的範例網頁程式碼，JavaScript設定那邊就一長串了，一開始研究的時候還真讓人感到困擾。Recordermp3js也具備了錄音完成之後上傳的功能，可是這功能卻寫死在Recordmp3js檔案裡面，而非開放設定的功能，讓我到最後還跑到Recordmp3js裡面去研究，也花了不少功夫。

在研究的過程中，越來越覺得audio真是有趣的應用。藉由結合多個音訊來源，我們可以動態控制各種聲音播放，就可以自行製作各種樂器。Web Audio Demos展示了很多聲音的應用，Web Audio Vocoder是其中一種強調混音的功能，這激起了很多不同應用的可能性。而我則是參考了AudioRecorer華麗的音量顯示器，做到Recordmp3js當中，讓錄音介面感覺漂亮一點。

錄音功能需要的Worker / Recorder and Worker

使用HTML5錄音跟MP3轉檔時，Recordmp3js都使用到了HTML5新元件Worker。一般來說，這個Worker必須是獨立的JavaScript程式碼，而且受限於同網域下執行的安全性問題。在跨網域應用中，這是一個很大的門檻。

但是我參考使用web workers這篇文章的說明，撰寫了worker_manger.js，將worker要執行的程式碼事先插入到目標網頁中，然後在以該網頁上的worker程式碼作為worker物件執行，就能夠保持在同網域執行的限制，迴避跨網域的問題。

雖然這個小功能我只用了很短的時間來做，但其實應該對很多人來說是很重要的功能吧？有機會再來正式發佈好了。

如何允許瀏覽器錄音 / How to Allow Browser Enable Microphone

使用HTML5錄音元件的另一個重點在於「允許」錄音檔案的事件。實際上啟用Recordmp3js的時候，跟HTML5元件宣告我要使用麥克風的時候，不是所有的瀏覽器就會跳出提示問你要不要啟用麥克風。

Firefox會在使用時直接跳出是否允許啟用，一個網頁只會問一次，Chrome有些版本也是如此。但是我電腦的Chrome卻不會在Recordmp3js載入時跳出來詢問，而是要離開網頁、再回到網頁時才會詢問。我索性加入一個<iframe>標籤，讓網頁觸發讀取事件，好讓Chrome問我要不要允許使用麥克風。但是離開網頁又回來時，Chrome還是會問我要不要允許麥克風，還好這動作也只要問一次而已。

很多使用者應該會忘記做「允許」麥克風這個動作。Chrome跟Firefox的介面都不太容易讓人理解，我可以預期這個動作應該是最讓人感到困擾的地方吧。

播放介面與<audio>標籤 / Audio Controller <audio> Tag

至於播放介面，我就直接使用HTML5的<audio>標籤。雖然<audio>標籤提供了播放/暫停、時間、播放進度條、聲音控制等功能，但是各個瀏覽器上<audio>長得都不太一樣，因此網路上大多建議是自行重寫<audio>的操作介面。但想到這個<audio>是要插入到CKEditor當中使用，寫得太複雜也不利於編輯。所以我還是選用最基本的<audio>標籤來顯示。

CKEditor插件開發 / About CKEditor Plugin Development

最後來講講CKEditor插件的開發。

一開始我是看为CKEditor在线编辑器增加一个自定义插件這篇，一步一步來實際操作看看。但是做到最後並沒有如期地做出可以用的CKEditor插件。我也去翻了CKEditor的Plugin教學跟它的API，但後來還是覺得乾脆直接複製既有的Plugin開始做起好了，所以就打開被壓縮的程式碼來看，直接從可以運作的功能中找尋我需要的程式片段。

雖然並不是什麼正規的學習方式，但這樣也在一片混亂中寫完了這個插件。有多混亂呢，看看插件的程式碼就知道了orz

總之最後還是完成了，也發佈到CKEditor的Add-on頁面去，也算是對這份研究有個交待啦！

話說回來，一開始會全部都重頭製作的原因就是因為在CKEditor與TinyMCE上找不到這種錄音的插件。現在我可以用這種方式來製作錄音插件的話，那其實像是webcam拍照與錄影等各種應用應該都沒問題才是。有機會再來研究看看吧。

(more...)

如何閱讀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沒解開的後面部分也排版的漂漂亮亮，這樣就能夠更輕易地閱讀程式碼了，真是令人開心呢。

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

(more...)

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

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

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

(more...)

為何Power Point插入圖片變得模糊了？勾選不要壓縮檔案中的影像 / Disable Power Point’s Image Compression Configuration to Avoid Blurring Images

如果你在Power Point插入圖片時，發現圖片變得模糊不堪使用，那就得啟用選項中的「不要壓縮檔案中的影像」來避免這個問題。

In Power Point, if you get a blurred image after inserting it, you should enable “Do Not Compress Images in File” at Power Point Options.

圖片模糊的問題 / Problem when Inserting Images

本文使用的是Power Point 2013，不過我在Power Point 2010上也會遇到相同的問題。

在做投影片的時候使用插入圖片時……

插入一張電腦截圖，可是圖片卻很小。

圖片放大之後模糊不堪使用。

網路上找了以下，從plumdumplings的回答中才知道原來是因為Power Point啟用了圖片壓縮的緣故。以下說明解法。

解決方法 / Solution

1. 開啟Power Point的選項：
   
   
2. 到「進階」中，取消勾選「捨棄編輯資料」，並勾選「不要壓縮檔案中的影像」。
   

這樣子重新插入圖片時，圖片解析度就不會被壓縮了。

這問題困擾了我好一陣子，不過網路上好像很少看到有人提起。在此跟大家分享。

(more...)

Git合作開發從NetBeans開始！NetBeans複製git專案教學 / Clone Git Project in NetBeans

本文介紹如何在NetBeans中複製Git專案到本機端，然後建立NetBeans專案，以便開始進行程式的開發。

This article describes how to clone Git project and then create a NetBeans project in NetBeans.

Git專案 / Git Project

本文以我最近要開始的新專案「PHP File Host」為例子來做示範。這是一個存放在GitHub的開放原始碼專案，大家可以任意複製(Clone)裡面的程式碼到本機端來修改。要複製Git專案的方法很多，有HTTPS、SSH與Subversion等通訊協定。在NetBeans裡面，我們可以用HTTPS通訊協定來進行複製，連線方式在GitHub專案網頁的右方下面「HTTPS clone URL」。

總結上述，以下是Git專案的資訊：

• Git專案網頁：PHP File Host
• HTTPS複製網址：https://github.com/pulipulichen/php-file-host.git

NetBeans環境 / NetBeans Version

NetBeans是我現在主要的IDE開發環境，他也是一個開放原始碼的自由軟體。NetBeans不僅支援語法標亮、自動完成(auto-completion)，從7.4版之後也開始支援Git。以往我使用TotoiseGIT來管理GIT的工作，現在逐漸都改以NetBeans來進行操作。

為了讓大家能夠更輕易以NetBeans來開始使用Git專案，本文將介紹如何複製Git專案到NetBeans中，並直接建立一個NetBeans專案來使用。

• NetBeans 網站
• NetBeans下載：建議下載All版本，可以同時支援JavaScript與PHP
• NetBeans的Git功能說明：Using Git Support in NetBeans IDE

在NetBeans中複製Git專案 / Clone Git Project in NetBeans

以下介紹如何在NetBeans中複製Git專案。大致上操作步驟分成兩個部分：從Git複製專案檔案、以及在NetBeans中建立NetBeans專案。

Git專案主要負責程式碼的版本控制，NetBeans專案通常還包括一些專案程式碼指定編碼、伺服器上傳連線等資訊，而這些資訊並不建議放到Git專案中公開，兩者要分開處理。

Part 1. 複製Git專案 / Clone Git Project

在NetBeans中，請進入Team > Git > Clone…

接著會開啟Clone Repository對話視窗。在這裡我們先進行Remote Repository設定。要輸入的欄位包括：

• Repository URL: 請輸入剛剛的HTTPS複製網址「https://github.com/pulipulichen/php-file-host.git」
• User與Password：登入GitHub的身份認證。
• Clone into：存放專案的目錄。NetBeans會在這個目錄底下再建立一個Git專案的目錄。舉例來說，我的XAMPP網頁擺在「D:\xampp\htdocs」，那麼Git專案就會出現在「D:\xampp\htdocs\php-file-host」底下。

接下來選擇要複製的Remote Branches。一般是選擇該專案的代表master分支即可。直接按「Next >」按鈕吧。

然後最後是確定目標資料夾 Destination Directory。這邊會帶入剛剛的設定，只要按「Finish」按鈕完成即可。

複製完成之後，NetBeans會問你是否要建立NetBeans專案。打勾「Open Sources in Favorites」，然後按下「Create Project…」，接下來就進入新增專案的步驟。

Part 2. 新增NetBeans專案 / Create NetBeans Project

NetBeans會顯示「Net Project」對話視窗。在這邊我們要選擇與該專案相對應的程式語言類型。PHP File Host是一個PHP程式語言的專案，而且已經有Git專案過來的檔案，因此我在PHP目錄底下選擇專案類型「PHP Application with Existing Sources」。

然後按下「Next >」按鈕進入下一步。

在Name and Location這邊要設定的東西蠻多的。

首先我們要指定Sources Folder，請設定剛剛跟Git專案複製的目標資料夾路徑「D:\xampp\htdocs\php-file-host」。接著NetBeans會自動帶入下面的資訊。

接著我們要確認Default Encoding為UTF-8。如果沒有設定NetBeans專案的話，NetBeans會用非UTF-8的編碼來開啟檔案，造成檔案看起來會是亂碼。

然後請打勾「Put NetBeans metadata into a separate directory」，然後指定另一個地方存放NetBeans專案的資訊，不要跟Git專案擺在同一個地方。這是為了避免NetBeans專案資訊被納入Git版本控制之中，這個動作很重要。

最後就是運作環境設定 Run Configuration。由於我的專案會先在本機端的XAMPP底下運作測試，所以設定Run As: Local Web Site即可。如果你實際運作的伺服器在遠端，那也可以在此步驟設定遠端伺服器的連線方式。不過遠端伺服器設定比較複雜，在此就先不說明。

其他沒有特別要設定的地方，按下「Finish」完成。

NetBeans會顯示剛剛設定的php-file-host專案，複製Git專案的工作就大功告成囉。

其他的Git操作 / How to use Git in NetBeans

當然，除了clone (複製)之外，NetBeans也支援很多Git的操作動作。以下舉例來說常用的指令與其位置：

• commit: Team > commit ，我還特地設了熱鍵Alt+C，讓自己更方便就能commit
  
• Pull & Push: Team > Remote > Pull or Push
  
• 比較檔案差異 Diff: Team > Diff > Diff To…  (可以取代「Git取代分支檔案的方法」一文中以TortoiseGIT的操作動作)
  

Git詳細的說明請參考「Using Git Support in NetBeans IDE」一文。我也還在持續摸索中，有任何心得歡迎在下面討論喔。

結語：IDE的重要性 / Conclusion: The Importance of IDE

以前常常會聽到有人會以「只要筆記本(notepad)就可以寫網頁」來當作自豪的特技，我覺得這只能說是程式設計師的基本，只能拿來跟外行人炫耀。但是如果要往更進階前進，你就必須學習使用IDE。

就目前為止，我主要使用的IDE有Aptana Studio 2 (第三版是是完全不同的東西)跟NetBeans，在我工作中，這些IDE有幾個我非常仰賴的重要工具：

• 全文搜尋(full text search)：當我要找某個函式要如何使用時，全文搜尋是很重要的。特別是像NetBeans能夠解讀程式碼，可以在你使用函式時顯示對應的註解說明，這個功能在閱讀程式(trace code)是非常好用的輔助工具。
• 正規表達式(regular expression)的搜尋與取代：當要取代換行、找尋某個函式的使用處的時候，正規表達式非常重要。
• 自動完成(auto-completion)：有了語法自動完成，你就不用煩惱每次都為函式或變數少打一個字而帶來的bug。
• 程式導航(navigation or outline)：像是地圖一樣地顯示程式的組成，這在檢視大程式的時候十分有用。
• Git版本控制功能：一個不做版本控制的專案不僅無法持久發展，也很難跟別人協同開發。

因此我會建議每一位致力於寫程式的朋友，請務必要熟悉一些好用的IDE。如果你跟我一樣是寫PHP與JavaScript，那我建議你就從NetBeans開始吧。

(more...)