WebKit/QT & WebKit/GTK+ on Ubuntu Linux初體驗

前兩篇「WebKit的Gtk+支援」與「OWB：以WebKit為基礎的嵌入式網路瀏覽器」介紹了些 WebKit的開發現況後，這邊大概講一下在Ubuntu Linux底下如何無痛進行初體驗。依據官方首頁的訊息，WebKit 簡介如下：

WebKit是一種開放原始碼瀏覽器引擎，同時也是 Mac OS X 底下的Safari 、 Dashboard、Mail、與其他Apple Mac OS X所使用的系統框架版本。WebKit所使用的KDE函式庫KHTML與KJS是屬於HTML與JavaScript實做的分支。

先來體驗一下原生於Qt的WebKit瀏覽器，動手打造個「仿Safari」。以Ubuntu Linux 7.10為例，操作程序如下：
1. 先安裝編譯時所需的軟體與套件庫

sudo apt-get install libqt4-dev libxslt-dev gperf bison libsqlite3-dev flex build-essential subversion

2.取得Subversion中的原始碼 (筆者花了近20分鐘才下載完畢，所以請保持耐心)

svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit

3.建立一個Qt for WebKit的瀏覽器
(安裝的機器 Intel CoreDue L2300@1.5GHZ 跑了近45 min )

QTDIR=/usr/share/qt4/ WebKit/WebKitTools/Scripts/build-webkit

4.安裝完後，打以下指令開啟剛剛建立的瀏覽器。

WebKit/WebKitBuild/Release/bin/QtLauncher

有圖有真相!!


接著，嘗試原生於Gtk+的WebKit，不過這次就直接介紹個剛成立的一個新軟體專案 Midori來體驗一下 WebKit/Gtk+。Midori 是一個輕量化的瀏覽器，有以下特點：

• 完全採用Gtk+ 2.x打造
• 以WebKit 進行快速網頁繪製
• 分頁、視窗與任務對話管理
• 書籤的儲存採用XBEL
  
• 搜尋框則基於OpenSearch
  
• 可自訂前後選單動作
• 支援使用者腳本與樣式自訂
• 可透過 Lua scripts 擴充

然而，這個專案目前還是屬於alpha測試版的狀態，所以可能會比較不穩定些，而且有些功能還沒實做出來。

Midori目前則可透過apt的方式去安裝預先編譯的套件，但得先編輯設定：

sudo gedit /etc/apt/sources.list

然後加入以下兩行：

deb http://ppa.launchpad.net/stemp/ubuntu gutsy main
deb-src http://ppa.launchpad.net/stemp/ubuntu gutsy main

儲存後離開，並進行更新：

sudo apt-get update

然後就可安裝Midori：

sudo apt-get install midori

跑完後，就可以直接從「應用程式」裡的「網際網路」選單開啟Midori ，其執行時期的快照如下：


本文改寫於以下兩篇文章：

• [軟體介紹] WebKit on Linux (ubuntu) -- GTK+ 篇
• [軟體介紹] WebKit on Linux (ubuntu) -- QT 篇

OWB：以WebKit為基礎的嵌入式網路瀏覽器

幾個月前介紹了「WebKit的Gtk+支援」新進展，現在openmoko已正式採納為web engine，提供為網頁瀏覽與RSS reader使用。Origyn Web Browser (OWB)則是另一個以WebKit為基礎的開放原始碼網路瀏覽器 (BSD license + LGPL + misc)，針對嵌入式環境做了許多微調與修正，引入一層簡化描繪與底層操作的軟體層，稱為OWB Abstraction Layer (OwBal)，得以銜接WebKit與消費性電子產品需求。具體來說，原本的WebKit需要heavyweight UI toolkit去作widget/font描繪，但OWB以OwBAL巧妙地補齊介面部份，並允許lightweight UI呈現，也就是 "render itself by its own toolkit"。詳細的技術介紹可參考「Introducing OWB, an open-source browser for consumer devices」一文。

建構方式如下：

• 取得開發中的程式碼：

svn checkout http://www.sand-labs.org/svn/trunk owb

• 以CMake調整組態設定：

cd owb && ccmake .

具體情況如下圖： 按下[c]則可進行組態設定，過程中會提示缺乏的開發套件。
最後按下[g]即可產生必要的Makefile

• 開始建構，當然是執行make

目錄下應該會有名為"owb"的執行檔。注意，建議安裝CJKUnifonts以支援中日韓文顯示支援，並且需作以下修正：

Index: BAL/Implementations/Fonts/freetype/BTFont.cpp
===================================================================
--- BAL/Implementations/Fonts/freetype/BTFont.cpp       (revision 147)
+++ BAL/Implementations/Fonts/freetype/BTFont.cpp       (working copy)
@@ -114,7 +114,7 @@
int size = static_cast<int>(m_fontDescription.specifiedSize());

if (m_fontMap[size] == 0)
-        m_fontMap[size] = d->open("/usr/share/fonts/owb.ttf", size, 0);
+        m_fontMap[size] = d->open("/usr/share/fonts/truetype/arphic/ukai.ttf", size, 0);
d->m_ttfFont = m_fontMap[size];
if (d->m_ttfFont == NULL)
   logml(MODULE_FONTS, LEVEL_EMERGENCY, make_message("open : \n"));

以「Jserv's blog」為例，OWB的呈現效果如下：

在組態設定時，指定了以FreeType作為字型描繪引擎 (即 "WEBKIT_USE_FONTS_FREETYPE" 選項)，以取得更加的顯示效果。可發現網頁周圍沒有視覺捲軸 (但可使用方向鍵或PageUp/Down)，而且HTML按鈕則是OWB自行描繪的，輸入框亦然。

OWB現在的空間使用量與網頁呈現正確度相當不錯，除了使用curl的方式還需要效能調整外，整體已相當穩定，目前的參考圖形引擎實做為SDL，官方網頁提供相當好的移植文件「OWBAL Porting Guide to Embedded Systems」。依據發展方向，OWB適合應用於Set-Top Box、數位電視、Kiosk等環境，並且對DirectFB的支援也開始進行。

WebKit的Gtk+支援

khtml是在KDE 2中，集合檔案檢視系統與網頁瀏覽器於一身的Konqueror內部主幹，是極為精美細膩的設計，如果說為一窺 KDE 技術最佳的進入點，那真是一點都不為過。由於khtml卓越的設計，很快就出現以khtml為基礎的網路瀏覽器專案，比方說運作於Qtopia (Core)之下的Konqueror/Embedded，而Apple Inc.也採納khtml，部分重新設計與最佳化就變成WebCore (MacOS X內建瀏覽器Safari的核心基礎建設)。而業界的應用也很廣泛，像是韓國嵌入式系統廠商Mizi Research就曾將Konqueror/Embedded經過一番調整，成為相當強悍的瀏覽器。

Apple Inc.提供了大量的修改，讓khtml的品質獲得極大的提昇，又在KDE開發者的斡旋下，Apple Inc.終於採納了社群開放發展的模式，於是KDE與Apple Inc.兩組開發人馬傾向共享WebKit的程式碼基礎 (codebase)。接著，Nokia也宣佈WebKit為基礎的S60WebKit (針對S60手機平台)與gtk+-webcore (針對Gtk+/X11環境)，並依循LGPL與BSD License的方式，將修改貢獻回WebKit專案。

WebKit在這三年內蓬勃發展，提供了許多不同軟硬體平台的移植，值得一提的是新出現的GDK (Gtk+的低階圖形處理部份) 移植，這意味著WebKit可運作於GDK支援的環境，就嵌入式系統來說，我們會關注linux-fb與DirectFB兩個Gtk+/GDK所支援的backend。在近半年來的發展，WebKit的Gtk+/GDK移植已到堪用的地步，針對Nokia770/Maemo與OpenMoko的硬體移植也出現成功案例。

為了降低建構WebKit/Gtk+的難度，我做了簡單的建構系統 (檔案：webkit-build-script.tar.bz2)，允許從Subversion取出最新的發展版本，並作必要的設定，最後進行編譯。下載並解開後，直接執行以下script：

# ./BUILD.sh

中間會透過apt-get取得必要的開發套件。建構完畢後，大致的執行畫面如下：
(1) wiki.openmoko.org
(2) Google MapsWebKit在OpenMoko GTA01也開始運作了，但還是有很多需要調整之處，這也是今年Google Summer of Code的項目之一，期待這方面的新進展。