PhantomJS

這次 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

但是因為我們想把程式放到 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

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 賽拉維‧柯南 的頭像
    賽拉維‧柯南

    賽拉維的秋天

    賽拉維‧柯南 發表在 痞客邦 留言(2) 人氣()