如何下載「布丁布丁吃什麼？」的Google Docs投影片 / Guide for downloading slide from Google Docs

布丁布丁吃布丁

3月 03, 2013 0 Comments Blogger

如何下載「布丁布丁吃什麼？」的Google Docs投影片 / Guide for downloading slide from Google Docs

「布丁布丁吃什麼？」上面有時候擺放投影片，這些投影片有時候會上傳到不同空間，但大多數都會以Google Docs（現在叫做Google Drive雲端硬碟）內嵌播放的方式呈現，讓人在閱讀Blog的時候就能夠觀看投影片。

然而許多人並不知道，這些內嵌播放的投影片就能夠直接下載成Power Point或PDF。最近我收到了許多分享投影片的請求，讓我覺得應該寫一下簡單的教學，讓大家知道如何從Google Docs下載投影片。

My blog has many slides. Must of slides are hosted in Google Docs (or Google Drive). Google Docs supports us to read the slides on webpage with a embed iframe player, and you can also download slides directly from the player.

This post will teach you how to download the slide as Power Point file from the Google Docs player.

Step.1 開啟內嵌網頁 / Open Embed Iframe

這篇以DSpace教學講座(四)：修改實例之修正TextEditor為例來說明如何操作。

「布丁布丁吃什麼？」的內嵌網頁（iframe）都會先以這種樣式呈現。這是為了避免讓大家一開網頁就要載入許多內嵌網頁、拖慢了網頁速度的設計。

未來可以考慮應用「圖片延遲載入」的功能，當讀者捲軸讀到這個內嵌網頁時，就自動開啟內嵌網頁的原貌。

Step.2 開啟設定選單 / Open Setting

開啟內嵌網頁之後就會看到Google Docs的播放器。請按下下方工具列的齒輪圖示，開啟設定選單。

Step.3 下載為PPTX / Download PPTX file

設定選單中有一項就是「下載為PPTX」。點下去就開始下載了。

如何開啟PPTX？ / Guide for Opening PPTX

因為寫這些有點太短了，不好意思只是來賺個稿費（？）。這邊額外再來說明如何開啟PPTX檔案。

PPTX是Microsoft Office PowerPoint 2007之後使用的格式，在PowerPoint 2003之前使用的則是PPT。儘管現在PPT的使用量逐漸下降，但是還是很多人使用著舊版的Office，無法直接開啟PPTX。

這邊我提供兩種作法，讓你可以開啟PPTX檔案。

使用自由軟體LibreOffice / Use LibreOffice

LibreOffice是從知名的OpenOffice分支而成的專案。現在開放原始碼界最常使用的辦公室生產力軟體應該非LibreOffice莫屬，它也可以開啟Office的檔案格式。因為是採LGPL3授權的自由軟體，所以你可以免費下載使用，當然也有正體中文版囉。

下載LibreOffice

為Office 2003以前的版本安裝檔案格式相容性套件 / Install Microsoft Office Compatibility Pack

這是微軟推出的工具。只要安裝檔案格式相容性套件，就算是Office 2003以前的早期版本，也能夠直接開啟Office 2007之後的Open XML檔案格式囉。

下載Microsoft Office Word、Excel 及 PowerPoint 檔案格式相容性套件

結語：練習下載看看吧 / Conclusion: Exercise

現在就以「DSpace教學講座(四)：修改實例之修正TextEditor為例」這篇的投影片來練習看看下載Google Docs的方法吧。

有什麼問題請在下面回覆喔。

(more...)

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

布丁布丁吃布丁

3月 03, 2013 0 Comments 程式寫作 Blogger GitHub

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

(more...)

Symbolic Link Creator建立結合目錄

布丁布丁吃布丁

2月 26, 2013 0 Comments 電腦軟體

Symbolic Link Creator建立結合目錄

Windows使用的NTFS檔案系統具備了結合目錄（Directory Junction）功能，可以建立一個連結目錄直接指向另一個目的目錄。連結目錄操作時就跟一般檔案操作一樣，實際上卻是操作目的目錄的資料。這篇是教你如何使用Symbolic Link Creator讓一個資料夾同時出現在Windows不同路徑上，他們的內容檔案共通，而且操作起來跟一般檔案總管內的操作一模一樣──就連其他軟體運作時不會感到差異。這可不是捷徑（Shortcut），而是結合目錄功能的優點喔！

結合目錄應用於雲端同步工具

在現在雲端空間的時代，我們可以用Dropbox來同步、備份電腦上的各種文件，這也包括了軟體的設定檔，例如IDE開發環境、遠端伺服器的連線設定。但是Dropbox之類的雲端空間通常會將同步範圍限定於特定的資料夾中，你要同步，就必須把檔案放入這個資料夾。對於必須安裝在特定路徑才能夠使用的軟體來說，設定檔不能放在Dropbox指定的資料夾，就難以享受雲端同步的好處。

Dropbox Folder Sync是利用建立結合目錄的方式，先將資料移到Dropbox資料夾，然後建立一個資料夾的結合目錄，擺放到原本的位置。這能讓原本位置的路徑仍能正常使用、實際的檔案內容又可以在Dropbox備份。但是Dropbox Folder Sync只能用於Dropbox，其他的軟體像是Google Drive、SugarSync、box之類的軟體就得另尋他法。

其實Dropbox Folder Sync也只是將指令junction弄成讓人簡單操作的GUI介面，不過可選擇的參數比較少。而Symbolic Link Creator也是一樣是利用指令列做成的GUI介面，但是你就可以任意建立符號連結到你要的地方了。
舉例來說：

將iTune備份位置從C磁碟移到其他磁碟
開始程式集內的常用連結結合到Dropbox
在桌面上直接顯示Dropbox內部的資料夾：這是這一篇的教學範例。

Directory Junction跟Symbolic Link的差別

這一篇雖然介紹的是Directory Junction，但是用的工具卻是叫做Symbolic Link Creator，到底這兩者之間有什麼差別呢？
網路上也有人問過這個問題。最簡單的區別就是Directory Junction建立出來的連結點是一個「目錄」，而Symbolic Link則是建立一個「檔案」（類似捷徑的感覺）。另外，Directory Junction通常只能連結到本地端的資料夾，而不能透過網路上的芳鄰之類的網路技術連結到遠端資料夾。這大概就是他們最大的差別了。

下載Symbolic Link Creator

symlinker - Symbolic Link Creator. GUI for mklink, Microsoft Windows symlink utility
Downloads
Symlink Creator 1.1.1.3：免費空間備份、Box備份

這是免安裝的工具，開啟之後就能夠直接使用了。

建立結合目錄資料夾

首先，我們要規劃連結資料夾（Link Folder）與目的資料夾（Destination Folder）的路徑。

在這個例子中，我想要在桌面上擺一個連結資料夾，路徑是「D:\Desktop\」底下，資料夾名字叫做「demo」。這個資料夾會連到目的資料夾，路徑為「D:\Desktop\Dropbox\demo」。

打開Symbolic Link Creator，各別在以下幾個地方輸入我們的規劃設定：

Link Folder
- Please select the place where you want your link:
  輸入連結資料夾所在路徑「D:\Desktop\」
- Now give a name to the link:
  輸入連結資料夾名稱「demo」
Destination Folder
- Please select the path to the real folder you want to link:
  輸入目的資料夾路徑「D:\Desktop\Dropbox\demo」
- Select the type of link: 選擇「Directory Junction」

按下Create，符號連結很快就會建立完成。

完成之後會跳出這個訊息。

桌面上就會出現一個資料夾「demo」，內容就跟Dropbox底下的「demo」一樣。在裡面新增、修改資料，也同樣會影響到另一個資料夾喔！

移除結合目錄

你可以注意到桌面的「demo」資料夾跟一般資料夾不太一樣，有個類似捷徑的圖示，表示他是結合目錄。

如果不需要結合目錄，那就直接刪除掉桌面的「demo」資料夾就好。這個動作並不會影響到Dropbox底下的「demo」囉。

結語：寫備忘也學一些東西

因為我常常在不同電腦與手機之間工作，檔案同步對我來說非常重要。而且我也想要備份花了很多時間配置的軟體設定，Dropbox一向是很穩定的備份工具。所以最近常常使用Symbolic Link Creator來建立結合目錄。

不過每次使用Symbolic Link Creator的時候都會忘記怎麼設定，到底Link Folder要寫來源還是目的？type of link又要選哪一種好？為了怕下次又忘記，這次我乾脆寫在blog上就好了。（其實我Blogger大多數文章都是操作備忘錄，方便未來我忘記的時候再回頭查閱而已啊。）

這次在寫的時候也一併搞懂了Directory Junction跟Symbolic Link的差別，意外地又學到一些知識，真不錯啊。

(more...)

水果店老婆婆的香蕉

布丁布丁吃布丁

2月 25, 2013 4 Comments 日記

水果店老婆婆的香蕉

今天我也一如往常地，拖著一身剛從實驗室離開的疲憊身子（以及一身做不完的工作），在半夜12點多的時候踏入了24小時營業的水果店。

超過12點之後，水果店的水果架會蓋上一層布，彷彿要打烊一般。通常只會有一位顧店的店員，以及我與零零星星的幾位顧客而已。

今天也跟以前一樣，半夜的水果店沒什麼人。然而不同的是，卻有一位老婆婆站在攤位旁吃著一根熟透的香蕉。

（她是店員的熟客嗎？正在試吃香蕉？）雖然有點好奇這位老婆婆的身分，不過我的注意力終究是被拿根香蕉吸引了。是的，熟得剛好的香蕉是很少出現在水果攤的。水果攤大多都擺的是稍微青澀的香蕉，以便顧客買一串回家慢慢吃。於是看到熟透的香蕉，讓我油然興起想吃香蕉的念頭。

「香蕉～香蕉～香蕉在那兒？」一邊喃喃自語的我，抱著期待地經過了老婆婆，走向擺香蕉的位置。可惜，攤位上剩下的幾串香蕉都還很青，不適合現買現吃。

好吧，我還有其他水果可以選呢！椪柑39元與19元、芭樂10元、7元與1元、蘋果一顆10元、小蕃茄29元、黑珍珠39元……到底要吃什麼好呢？

「你要吃香蕉嗎？」

正當我在猶豫的時候，背後有個聲音呼喚了我。

一轉頭，老婆婆站在我後面，似乎的確是對我講話。

「啊我喔，是啊，想吃香蕉呢。」我點了點頭。

老婆婆說道：「我這有一根熟到裂開的香蕉，你拿去吃吧。」

聽到這句話我十分開心，高興地回道：「是喔，真是太好了，我好喜歡熟的香蕉呢。」

老婆婆緩慢地從手上的袋子中摸索幾番，然後拿出一根旁邊裂開的香蕉。「拿去吧，」老婆婆好心地提醒我：「記得要把旁邊裂開的部份切掉喔。」

「好的！我想現在就吃，沒有刀可以切，不過應該沒關係吧？」」看到黃橙橙的香蕉，我迫不及待地開始剝起了皮。

「店員那邊有水果刀可以借。」老婆婆指指櫃檯。

「原來如此，謝謝喔。」

跟老婆婆道了聲謝，我從店員借了把水果刀，然後再旁邊處理水果的地方切起香蕉來。

嗯……到底要切多少呢？隨便吧，好像也沒熟到爛掉啦。

「這根也給你吃吧。」

咦？老婆婆突如其來地又拿了一根香蕉放到我的面前。

我有點驚訝地回道：「這怎麼好意思……」

「哇跨例馬西就儉ㄟ狼……我看你也是很節儉的人，」老婆婆用臺語講到一半，似乎以為我聽不懂，所以又換成了國語。

「我也是很省著吃，我們很像。我已經好幾年都沒收入了。」

對著老婆婆的語重心長，我一時間不知道該怎麼回應才好。

只見老婆婆點了點頭，補充了一句：「這根就給你明天吃，一天不要吃太多啊。」然後就轉身慢慢地離去。

「是，謝謝您。」我一手拿著播到一半的香蕉，一手拿著水果刀，目送老婆婆離開。

我到底該怎麼回應老婆婆才比較好……

我不是沒有錢，我錢包裡面也有幾千元……是要拿來繳學分費的就是。

比起我想吃香蕉這件事情，總覺得老婆婆應該更需要這根香蕉。

可是我還是傻傻地接受了老婆婆的好意，收下了兩根香蕉。

我到底該怎麼報答老婆婆，怎麼報答願意施捨給陌生人的這個社會呢？

在這邊，我只能還是謝謝老婆婆的心意。

香蕉很好吃，我明天的早餐就靠它了。

(more...)

使用Minify壓縮JavaScript跟CSS範例

布丁布丁吃布丁

2月 21, 2013 0 Comments 程式寫作 CSS JavaScript PHP Programming/CSS Programming/JavaScript Programming/PHP

使用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網站服務的專案還是很多，大家到底是怎麼面對這種問題的啊？我很好奇！

(more...)