賽拉維的秋天

這次 Facebook Hack Day，
我和另外兩個朋友一起組隊參加，
我們的作品是 Drawer，
理想上這是一個可以對任一網站畫圖給重點的服務，
因此，
我們需要實作將網站抓圖下來的功能。

開發的當下，
沒有想到要用其他提供 抓圖 API 的服務，
而是想到了 PhantomJS 這個有趣的元件。
什麼是 PhantomJS ，
從它的官方網站我們可以得到以下資訊：

"PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG."

就我的認知，
它就是一個可以透過 JavaScript 控制的程式瀏覽器，
執行它並不會看到瀏覽器，
但是他可以讓程式用瀏覽器的眼光去瀏覽網頁，
順便做一下額外的事情，
例如解析 DOM 結構與內容然後順便把解析的結果儲存成圖片。

而這就是我們 Hack 內容所需要的。

在本機上安裝執行 PhantomJS 是很簡單的，
只要到 http://phantomjs.org/ 這裡下載，
並設好路徑就可以在 Mac 中的任何目錄執行 JavaScript 。 

但是因為我們想把程式放到 Heroku 上面，
所以眼下遇到了難題，
該怎麼把 PhantomJS 部署到 Heroku 呢？

因為 PhantomJS 並不是靠 NodeJS 的 NPM 來安裝的，
所以我沒有辦法在 package.json 裡面寫好 package name 與版本後，
git push 後就讓 Heroku 幫我安裝。

就在這個時候，
我發現 Heroku 竟然有一個方法叫做 Build Pack
它的說明網頁在此 https://devcenter.heroku.com/articles/buildpacks

我對 buildpack  的認知，
就像是安裝檔，
照著 heroku 的規範寫好 script，
它就會在每次 git push 的時候根據我們寫好並放在 github 上的 build pack安裝，
因為我參考了網路上的資訊，
改寫了一個可以同時跑 Nodejs 與 phantomjs 的 buildpack。

原本以為這樣子 heroku 的基本環境就搞定了，
沒想到，
在開發的過程發現了另一個問題，
那就是在我本機 Mac 上的 phantomjs 去截取網頁圖片時，
中文網站的文字一切正常，
但在 heroku 上卻是一片空白，
我猜測是因為 heroku 上沒有中文字型或者 phantomjs 不知道中文字型在哪所致，
但網路上找了一兩回好像也沒有明確解法，
不知道各位朋友有沒有什麼方法，
讓 phantomjs 在 Heroku 上也能截取中文網頁呢？ 

Technorati Tags: Facebook, Heroku, World Hack, PhantomJS, BuildPack