2011年12月28日 星期三

明天的事?就交給明天來煩惱!


工作告一個段落了。今年意外接了兩位前輩的離職工作,原先我已經被分配全時做某個工作了,接了別人離職的工作,等同被加了 2 個人以上的工作量,這真的不是件好事。慶幸的,最後我也走出陰霾。


經過這次體驗,讓我學到不少事,例如經歷一些行政精華啊,也從中強化一些意志,算起來也稱得上大收穫囉 :D


2011年12月18日 星期日

2011-12-31前,記得辦一下中華電信「我的熱線」

前陣子收到不少網路文章,說中華電信在衝市占率?2011年底前申辦「我的熱線」可以享用一組免設定費,且24個月免月租費的服務。


然而,一堆文章都只提到"免設定費"、"免月租費"的訊息,那我在 emome 網站上卻看到"我的熱線"其實是以秒計費的,所以很擔心這只是文字噱頭,最後打電話問客服小姐,才確定這是 2011-11-01 至 2011-12-31 期間,申辦的優惠方案可以"免通話費"喔。目前優惠方案是設定第一組免設定費、免月租費的,假設你的門號設定兩組,那第一組免設定免月租,第二組則是要設定費 50 元且每個月都要 50 元月租費,同理第三、第四和第五組,都是要收月租費跟設定費的。所以,至少去設定一組吧!兩年內打電話都不用錢,何樂而不為?


簡言之,在 2011-12-31 前,到中華電信服務中心攜帶"雙證件"辦理「我的熱線」,可享有一組熱線號碼 24 個月完全免費(免設定費、免月租費、免通話費)。假設是在 2011-12-17 時,A門號設定打給 B 後,過不久就會收到系統寄來的簡訊,接著在 2013-12-17(18?) 前,從 A 打給 B 都是免費的。


這麼好的大放送,記得去辦一下啊。有任何問題可以用手機播打 0800-080-123 詢問客服人員,另外,CHT 週六、日營業服務據點可以參考一下,我是挑服務中心而不是特約的,有問題可以先問看看特約店是不是可以辦理。


相關連結:



2011年12月8日 星期四

繞路,沒啥不好的

竹東火車站


今晚挑了一間不曾去過的火車站,到那邊兌換車票,碰到了不熟票務系統的站長,大概是正逢早班晚班交接吧,看著他小慌地處理事情,我倒覺得有股溫馨的氣氛,不用著急外頭的車是否擋到別人,因為此刻的車站人煙稀少。我喜歡這樣的步調,甚至舉一下手跳一下就可以摸到車站外的天花板呢。



前陣子幾天假到處晃晃,終點站拜訪了恩師,恩師看到我的體型就跟我說有空繞路走走也不錯,然而,這「繞路」卻也點醒我的心境。周末順便看了「翻滾吧!阿信」,看完電影後上個廁所,連牆上都寫著:


證嚴法師:「信心、毅力、勇氣,三者具備,天下沒有做不成的事。


是啊,其實有時不會太在意別人的眼光,就像 Steve Jobs 自傳裡寫的那句話,每天當作最後一天,在那個情境下,別人的眼光、壓力都將顯得膚淺的。好好把認為有價值得事,從頭到尾地實踐吧,真正對你自己負責的,還是你自己啊。


建立 Django、Subversion、Trac 開發環境之相關設定 @ Ubuntu 10.04 64-Bit Server

最近準備移機和備份資料,雖然把開發環境跟 Trac 綁在一起不是很好,但基於機器數量及資源管理方面,備份就暫且這樣吧 :P 目標:有 Django 環境、有 Trac 環境,其中 Trac 採用 Subversion 並提供 HTTP 存取方式,並且讓 Subversion 和 Trac 的帳密使用同一份。


安裝相關環境:


$ sudo apt-get install mysql-server apache2 subversion libapache2-mod-python libapache2-svn libapache2-mod-wsgi python-mysqldb python-django ipython trac


設定 Subversion 環境:


挑選 /var/svn/repository 目錄為例


$ sudo mkdir -p /var/svn/repository
$ sudo chown -R www-data:www-data /var/svn/repository 


建立一個 Trac 環境:


挑選 /var/local/trac 目錄為例


$ sudo mkdir -p /var/local/trac
$ sudo chown -R www-data:www-data /var/local/trac 


設定 Apache Web Server 環境:


設定檔位置以 /etc/apache2/ 為例


設定帳密:


$ sudo touch /etc/apache2/dav_svn.passwd
$ sudo htpasswd /etc/apache2/dav_svn.passwd username 


設定 Subversion 部份:


可以挑選 /etc/apache2/mods-available/dav_svn.conf 和 a2enmod
此例用 /etc/apache2/site-available/svn.conf 和 a2ensite 


$ sudo vim /etc/apache2/site-available/svn.conf


<IfModule !dav_svn_module>
    LoadModule dav_svn_module modules/mod_dav_svn.so
</IfModule>
<IfModule !authz_svn_module>
    LoadModule authz_svn_module modules/mod_authz_svn.so
</IfModule>
<IfModule dav_svn_module>
<IfModule authz_svn_module>
<Location /svn>
    DAV svn
    SVNParentPath /var/svn/repository
    AuthType Basic
    AuthName "Subversion Repository"
    AuthUserFile /etc/apache2/dav_svn.passwd
    Require valid-user
</Location>
</IfModule>
</IfModule>


$ sudo a2ensite svn.conf
$ sudo /etc/init.d/apache2 reload 


如此一來,提供 http://localhost/svn/ProjectName 的存取機制,並採用 dav_svn.passwd 帳密管理


設定 Trac 部份:


可以挑選 /etc/apache2/mods-available/trac.conf 和 a2enmod
此例用 /etc/apache2/sites-available/trac.conf 和 a2ensite


$ sudo vim /etc/apache2/site-available/trac.conf


<IfModule !python_module>
    LoadModule python_module modules/mod_python.so
</IfModule>
<IfModule python_module>
    <location /projects>
        SetHandler mod_python
        PythonHandler trac.web.modpython_frontend
        PythonOption TracEnvParentDir /var/local/trac
        PythonOption TracUriRoot /projects
    </location>
    <locationmatch "/projects/[^/]+/login">
        AuthType Basic
        AuthName "Trac Authentication"
        AuthUserFile /etc/apache2/dav_svn.passwd
        Require valid-user
    </locationmatch>
</IfModule>


$ sudo a2ensite trac.conf
$ sudo /etc/init.d/apache2 reload 


如此一來瀏覽 http://localhost/projects 就可以看到 Trac 清單,並且登入各個 Trac Project 時,採用 dav_svn.passwd 帳密管理


建立一個 Project:


建立 Subversion project:


$ sudo -u www-data svnadmin create /var/svn/repository/mysite


建立 Trac project:


$ sudo -u www-data trac-admin /var/local/trac/mysite initenv
Project Name [My Project]> mysite
Database connection string [sqlite:db/trac.db]>
Repository type [svn]>
Path to repository [/path/to/repos]> /var/svn/repository/mysite


建立 mysite Trac 管理者(須先建立於 /etc/apache2/dav_svn.passwd 中):


$ sudo -u www-data trac-admin /var/local/trac/mysite/ permission add username TRAC_ADMIN


如此一來,就可以從 http://localhost/projects/mysite 進入 Trac 了,更可以用 username 登入後進去 Trac 管理者頁面進行設定,例如把 anonymous 權限刪掉,或是修改 authenticated 的權限,限制成員以外的只能 WIKI_VIEW 等,如果想要限制使用者能觀看哪些 page 的話,那可以試試 plugin TracTags 和 TracFullBlogPlugin 等。


挑選 ~/projects 目錄為例,作為儲存程式碼的地方:


$ mkdir ~/projects


建立 Django Project:


$ cd ~/projects
$ django-admin startproject mysite
$ cd ~/projects/mysite
$ django-admin startapp myapp


測試連線:


$ python manage.py runserver 0.0.0.0:8000


設定 Django 採用 WSGI 啟動(可隨著 Apache Web Server 啟動關閉一起行動):


此例用 /etc/apache2/sites-available/mysite.conf 和 a2ensite 


建立 django.wsgi:


$ vim ~/projects/mysite/django-mysite.wsgi 


import os, sys
sys.path.append('/home/user/projects')
sys.path.append('/home/user/projects/mysite')
os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'
import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler()


設定 mysite apache:


以 Port 做為區分服務的機制,此例為 port 8000


$ sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/mysite


$ sudo vim /etc/apache2/sites-available/mysite


Listen 8000
<VirtualHost *:8000>
    WSGIScriptAlias / /home/user/projects/mysite/django-mysite.wsgi
    WSGIDaemonProcess mysite_demo user=user group=user processes=1 threads=10
    ServerAdmin webmaster@localhost


    DocumentRoot /var/www
    <Directory />
        Options FollowSymLinks
        AllowOverride None
    </Directory>
    <Directory /var/www/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride None
        Order allow,deny
        allow from all
    </Directory>


    ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
    <Directory "/usr/lib/cgi-bin">
        AllowOverride None
        Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
        Order allow,deny
        Allow from all
    </Directory>


    ErrorLog /var/log/apache2/error.log


    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel warn


    CustomLog /var/log/apache2/access.log combined

    Alias /doc/ "/usr/share/doc/"
    <Directory "/usr/share/doc/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Deny from all
        Allow from 127.0.0.0/255.0.0.0 ::1/128
    </Directory>
</VirtualHost>


$ sudo a2ensite mysite
$ sudo /etc/init.d/apache2 reload 


存入 Subversion project:


$ cd ~/projects/
$ svn co http://localhost/svn/mysite svn_mysite
$ mkdir ~/projects/svn_mysite/trunk
$ mv ~/projects/mysite/* ~/projects/svn_mysite/trunk
$ cd ~/projects/svn_mysite
$ svn add trunk
$ svn ci -m 'init django project'
$ cd ~/projects
$ svn co http://localhost/svn/mysite/trunk mysite
$ rm -rf ~/projects/svn_mysite
$ cd ~/projects/mysite
$ svn info
Path: .
URL: http://localhost/svn/mysite/trunk
Repository Root: http://localhost/svn/mysite
Repository UUID: ########-####-####-####-##########
Revision: 1
Node Kind: directory
Schedule: normal
Last Changed Author: user
Last Changed Rev: 1
Last Changed Date: 2011-12-08 21:00:00 +0800 (Thu, 08 Dec 2011)


匯入:


$ sudo cp -r your_trac_project /var/local/trac
$ sudo cp -r toyr_svn_project /var/svn/repository/
$ sudo chown -R www-data:www-data /var/local/trac /var/svn/repository/


Update Path info:


/var/local/trac/*/conf/trac.ini


authz_file = /var/local/trac/*/conf/authzpolicy.conf


收工!


2011年11月16日 星期三

更新 Apache Web Server (2.2.14 > 2.2.16 > 2.2.17 > 2.2.20 或 2.2.21) 和 Django (mod_wsgi) 部份 @ Ubuntu 10.04

實在是有人太好心了,一直要掃我的機器,然後又跟我說機器上安裝的 httpd 太舊 Apache/2.2.14 (Ubuntu),因此需要更新軟體版本。我原先只會用 tarball 方式安裝,這次強者同事也提出很讚的解法(更新repositories),透過 /etc/apt/sources.list 慢慢新增 Ubuntu 10.10、11.04 甚至 11.10 的方式,在更新指定的套件,也能做到不錯得效果,如:


$ sudo vim /etc/apt/sources.list
#deb http://us.archive.ubuntu.com/ubuntu/ oneiric main #11.10
#deb http://us.archive.ubuntu.com/ubuntu/ natty main  #11.04
deb http://us.archive.ubuntu.com/ubuntu/ maverick main #10.10

$ sudo apt-get update
$ sudo apt-get install apache2
$ apache2 -v


例如以 apache2 為例,原先在 10.04 是 2.2.14 版本,先增加 10.10 來源,用 sudo apt-get update && sudo apt-get install apache2 更新 apache2 部份,得到 2.2.16 版本,若此版本不夠新,在換成 11.04 來源,一次使用一個來源,再繼續更新,直到版本符合需求,以 Apache Web server 為例:


10.04:Apache/2.2.14 (Ubuntu)
10.10:Apache/2.2.16 (Ubuntu)
11.04:Apache/2.2.17 (Ubuntu) 
11.10:Apache/2.2/20 (Ubuntu) 


同事建議循序更新,以免碰到軟體相依性問題。並且安裝完後再把新增得來源註解掉,再重新 apt-get update 一次。


另外,若想透過 tarball 更新的話,就直接在網路尋找來源,此例是更新為 Apache 2.2.21。優點是可以拿到最新版本,最大缺點卻是脫離系統原先軟體管控的架構,該套軟變成孤兒需要自行維護。


目前打算保留原先安裝的 apache 2.2.14 環境,直接用 tarball 來更新到 2.2.21,此例包括安裝 mod_wsgi 部份:


移除內建 Apache 的開機自動執行:


$ sudo update-rc.d -f apache2 remove


安裝開發環境:


$ sudo apt-get install gcc libssl-dev libexpat-dev python2.6-dev


安裝位置以~/tarball 為例:


$ cd ~/
$ wget http://apache.stu.edu.tw//httpd/httpd-2.2.21.tar.gz
$ tar -xvf httpd-2.2.21.tar.gz
$ cd httpd-2.2.21
$ ./configure --prefix=/home/user/tarball --enable-ssl
$ make install


$ cd ~/
$ wget http://modwsgi.googlecode.com/files/mod_wsgi-3.3.tar.gz
$ cd mod_wsgi-3.3
$ ./configure --with-apxs=/home/user/tarball/bin/apxs 
$ make install


設定開機啟動:


$ sudo ln -s ~/tarball/bin/apachectl /etc/init.d/apache2.2.21.sh
$ sudo update-rc.d -f apache2.2.21.sh defaults


除此之外,還需更新 httpd 的設定,設定檔就改到 ~/tarball/conf 裡頭,如此一來,就算是設定完成了


我想,如果沒特別的需求,還是透過強者同事建議的方式進行更新就好,以免很多套件需要更新時,就變成各自維護的情境了。


2011年11月12日 星期六

browser + web server + cgi = ??

01


看到 web app (HTML5+Javascript+CSS) 在 mobile 上應用的威力後,開始想要一個類似在 Windows 運作的平台,如 PhoneGap 幫你把 web app 包成 native app 的方式等,此原理就是用一個含有 UIWebView/WebView 的元件呈現指定的 web app 等,成果類似開啟瀏覽器呈現某個網址內容等,然而,在 PC 上有沒類似的平台?有的,那就是眾多的 Chrome extension、 Chrome Web app 和 Firefox plugin 等。


而 mobile 採用 Webkit 元件,如 UIWebView 於 iOS、WebView 於 Android 上,我開始在想能不能也有類似的情境用在 PC 端呢?例如 Webkit 於 Windows 上?但我不想直接拿 Safari Windows 或 Chromium Windows 來用,所以,我開始想惡搞小東西。


除此之外,以一個 WebView 元件,大多只能執行 Javascript 來作事,有沒可能執行 CGI 呢?對 mobile 上,以 Android 和 iOS 上,的確有一些架構可以巧妙地達成,對於 PC 平台,通常就是架一個 web server + cgi 功能。這樣的好處是讓習慣在 server 端寫 web app 的開發者,可以專心寫 web app 然後又可以運行在 PC 上。


總結一下,打算做的東西將提供的功能:



  • Windows 平台

  • 支援 HTML5/Javascript/CSS 環境

  • 支援 CGI 環境


為啥挑 Windows 平台?對 Open Source 開發者來說,不少對 Windows 很反感,但不可否認的,在 UI 和 App 數量上,Windows 有傑出的表現,簡單說那就是 OS 市占率還是 Windows 最高,例如遊戲平台大多都是 Windows 吧?或是周遭親友都還在用 Windows 吧!並且 Unix 環境上搞那小東西,反而更加無意義,因為下一個小指令,整個 web server 不就都裝好了 :P 所以我挑選 Windows 平台來惡搞。


實作的元件:



  • Chromium Embededd Framework (Browser)

  • Nginx 1.0.9 on Windows (Web server)

  • PHP 5.3.8 VC9 x86 Non Thread Safe (CGI)


成果:


http://web-apps-platform-on-windows-client.googlecode.com/files/YYWebAppsPlatformOnWindows-1.0.zip


用法:



  • 將程式碼擺在 nginx\html 目錄,當程式開啟自動瀏覽該目錄的 index.php 檔案

  • 此程式解壓縮後,請避開使用桌面、包含空白等位置 (有空再來處理)


應用情境:



  • 透過 HTML5、PHP 開發 Windows 視窗應用程式

  • 使用者使用時就像打開一般的視窗程式,接著操作畫面為 Web UI,使用者不須自行安裝和管理 Web server 等環境


主要會想搞這種東西的理由之一,是不想啥東西都要擺在 server 上頭,並且 Windows 的普及性的關係,如果可以提供一個 client 端的平台來運行 web apps 的話,這樣就可以方便得把程式散佈出去,並且不須網路連線也可以運作。更實際的應用例子,可以用在一些小案子上頭,幫別人做做單機版管理方面的應用服務等。




2011年11月7日 星期一

使用 VC++ 2010 Express 編譯 Chromium Embedded Framework (CEF) @ Windows 7 64-Bit

前一陣子接觸了 Webkit 和 Chromium 後,開始萌生一些小點子,雖然這些點子還滿粗淺的,但還是試看看吧。第一步則是要使用 Chromium Embedded Framework (CEF),並且嘗試編譯一下。


至於什麼是 CEF 呢?簡單說就是一個 library,讓你很容易在視窗程式中使用瀏覽器元件,若是以 mobile app 環境上,大概是 UIWebView @ iOS 和 WebView @ Android 吧。由於打算以免費的編譯環境,因此採用 VC Express 版本,設定上需要小小動一下。


編譯環境:


VC++ 2010 Express
VC++ 2010 Express SP1 
Windows Driver Kit Version 7.1.0


程式碼:


cef_binary_r306_windows.zip (42.0 MB)


設定:



  1. 開啟 cefclient2010.sln 檔

  2. [工具]->[設定]->[專家設定] && [檢視]->[屬性管理]-> 隨便一個 Project -> Debug | Win32 -> Microsoft.Cpp.Win32.user -> VC++ 目錄

    • Include 目錄

      • C:\WinDDK\7600.16385.1\inc\atl71

      • C:\WinDDK\7600.16385.1\inc\mfc42



    • 程式庫目錄

      • C:\WinDDK\7600.16385.1\lib\ATL\i386

      • C:\WinDDK\7600.16385.1\lib\Mfc\i386





  3. 設定 atldef.h 

    • C:\WinDDK\7600.16385.1\inc\atl71\atldef.h

    • 註解 //#error Do not define _SECURE_ATL.



  4. 設定 cefclient 專案

    • 屬性 -> 連結器 -> 輸入 -> 其他相依性 -> 增加 atlthunk.lib 即可




如此一來,即可編譯成功。唯一的缺陷是有警告訊息:


2>atlsd.lib(stdafx.obj) : warning LNK4078: 發現多個 'ATL' 區段有不同的屬性 (40301040)
2>clientplugin.obj : warning LNK4254: 區段 'ATL' (50000040) 以不同的屬性合併到 '.rdata' (40000040)
2>plugin_test.obj : warning LNK4254: 區段 'ATL' (50000040) 以不同的屬性合併到 '.rdata' (40000040)
2>atlsd.lib(atltrace.obj) : warning LNK4254: 區段 'ATL' (50000040) 以不同的屬性合併到 '.rdata' (40000040)
2>atlsd.lib(externs.obj) : warning LNK4254: 區段 'ATL' (50000040) 以不同的屬性合併到 '.rdata' (40000040)
2>atlsd.lib(atldebugapi.obj) : warning LNK4254: 區段 'ATL' (50000040) 以不同的屬性合併到 '.rdata' (40000040)
2>atlsd.lib(atlbase.obj) : warning LNK4254: 區段 'ATL' (50000040) 以不同的屬性合併到 '.rdata' (40000040)
2>atlsd.lib(atlfuncs.obj) : warning LNK4254: 區段 'ATL' (50000040) 以不同的屬性合併到 '.rdata' (40000040)
2>atlsd.lib(stdafx.obj) : warning LNK4254: 區段 'ATL' (50000040) 以不同的屬性合併到 '.rdata' (40000040)
2>atlsd.lib(allocate.obj) : warning LNK4254: 區段 'ATL' (50000040) 以不同的屬性合併到 '.rdata' (40000040)
2>atlsd.lib(atltracemodulemanager.obj) : warning LNK4254: 區段 'ATL' (50000040) 以不同的屬性合併到 '.rdata' (40000040)


雖然網路上有查到相關解法(屬性 -> 一般 -> ATL 用法 -> 選擇"動態連結 ATL"或"靜態連結 ATL"),但測試的情況並沒有完全清除訊息,因此就先不管他了。接著有空慢慢以這個 cefclient2010.sln 當作基底,修改成想要的東西好了 :D


cefclient_win.cpp


2011年11月4日 星期五

解決 PPS (PPStream) 之網路緩慢、常駐程式問題 @ Windows 7 64Bit

msconfig


打從學生時代,雖然聽過 PPS 上頭有多豐富的影集、電影,但基於版權合法,我都不曾使用 XD 並且因為學校的大水管,使得計中常常接到某某公司寄來的警告信,不外乎又是哪個學生用 P2P 軟體 :P 談到 P2P 也讓我回想起台灣 FOX 也都熄燈了呢。只是,對那些住在外頭的人來說,PPS 依舊是大家的好朋友 XDD 之前幫忙修電腦,發現網路奇慢無比,連 GMail 都上不去,仔細確認後,就是 PPS 搞的鬼 XD 據說 PPSAP.exe 負責把下載過的影片上傳出去。


解決方法:開啟 Windows 工作管理員,把 PPSAP.exe 關掉後,果真一切恢復正常啦。


只是從開機後,又會出現,因此,正確的解法還必須使用 msconfig ,在啟動區把 PPS 加速器關掉,這樣開機就不會執行了。


2011年10月23日 星期日

想想十年後想要變成什麼樣的人吧!

客運


參加家族聚會,又一次含糊地回答別人我的工作在幹嘛,說真的連我的家人也不太懂 :P 我想,我的工作內容或能力,大概是練習成為一位具現化系吧 XD 我不會跟別人說我是專門搞後端或是前端的開發人員,我只會很輕描淡寫地說,我是在做整合性服務的研發人員。回顧這幾年的變化,學生時期從一位熱愛搞 SA 活動的,慢慢地走向自以為是嵌入式,接著又跳到網際網路應用服務,然後網路上的東西日新月異,不會就學,並不侷限在某個領域或技術,剛好很符合我的個性,我不會想要用一招通吃,另類的中庸之道吧?


最近隔壁同事要役畢了,也選擇要離開換個環境,我分享了一些福利好的公司,但他一口回絕,他只想要可以去練功的公司!漸漸地,我發現自己的想法開始比較不會受人影響,不曉得這是不是成老頑固的第一步?


每個人的生活、條件都不一樣,不需要時時跟著別人的腳步,更需好好地思考,十年後,到底想要變成什麼樣的人,當下得選擇將會越來越清晰了。


2011年10月7日 星期五

替 Webkit 送 Patch

Webkit Bugzilla
Webkit Bugzilla:https://bugs.webkit.org/


幾個月前收到一個任務,要替 Webkit 送幾個 patch,當下覺得很興奮,但是時間不夠用,拖了幾個月後,我才正是嘗試。目前我只做了一個簡單的部分,替某個 patch 建立正確的 test cases,這部分不需要寫程式的。現在就先把這些過程筆記一下,或許哪天也可以學 J大神用 commit log 來介紹自己了(誤)


首先,想要替 Webkit 貢獻者,必須先確認該功能還沒被實作或是有某些 bugs,例如 HTML5 眾多的 CSS3 功能等,另外則是在 Webkit Bugzilla 搜尋一下。關於某個未實作的功能,最好的驗證方式是去查看目前 webkit svn 裡頭的 LayoutTests 的東西,這邊 Webkit 可是分成非常多的 platform 的,光 chromium 就還可以分 win/linux/mac 等版本。


http://trac.webkit.org/browser/trunk/LayoutTests/platform/


接著就照 Webkit 官網的介紹,去取得程式碼、安裝開發環境,最後再把它編譯起來。如此一來,至少完成編譯的動作,接著才進入開發階段。


開發完成時,一樣編譯好,可以透過自製或是上述 LayoutTests 的測資


測資來源:http://trac.webkit.org/browser/trunk/LayoutTests 


測資結果(win):http://trac.webkit.org/browser/trunk/LayoutTests/platform/win


當功能一切完善後,就可以到 Webkit Bugzilla 貢獻程式,甚至自己發佈新問題或需求,接著自己再解掉。


在上傳 patch 之前,是必須通過 Webkit framework 的驗證,驗證方式可透過 WebKit/Tools/Scripts/run-webkit-tests 查看更改的程式是否能通過 test cases:


驗證 LayoutTests/folder1/folder2 裡的測資


$ ./Tools/Scripts/run-webkit-tests -v folder1/folder2


建立 pixel results ,有網頁可以查看兩者在瀏覽器顯示的樣貌


$ ./Tools/Scripts/run-webkit-tests -v -p folder1/folder2


如果原先的 test cases 本來就不對了,那這時候就是把你產出的測資拿去覆蓋掉原本即可。


當工作一切完善後,接著才正式進入送 patch 階段,在送出 patch 前,須產生 Changelog 筆記一下,接著驗證自己產生的東西是否符合 Webkit coding style:


$ cd Webkit
$ ./Tools/Scripts/prepare-ChangeLog --name "Your Name" --email "Your Email Address"
  Running status to find changed, added, or removed files.
  Reviewing diff to determine which lines changed.
  Extracting affected function names from source files.
  Change author: Your Name <Your Email Address>.
  Running 'svn update' to update ChangeLog files.
    At revision xxxxx.
    At revision xxxxx.
  Editing the Source/folder/ChangeLog file.
  Editing the LayoutTests/ChangeLog file.
-- Please remember to include a detailed description in your ChangeLog entry. --

-- See <http://webkit.org/coding/contributing.html> for more info --


編寫完 ChangeLog 後,再用 check-webkit-style 驗證(包括ChangeLog):


$ cd Webkit
$ ./Tools/Scripts/check-webkit-style
...
Total erros found: 0 in # files


一切都備妥後,就可以正式在 Webkit Bugzilla 上傳 patch 了,上傳時會有表單要填寫:


patch_bugzilla


首先是上傳的檔案不能超過 2MB,不然就要切開成多個 patch 或是給一個 url 讓它測;接著給上簡短一句話的描述;最後,則是 Flags 要設定,若要被人審核,那 review 那邊要標 ? ,而希望通過 review 後可以自動進入 trunk ,那就要用 ? 標記 commit-queue 囉。可以用滑鼠移到下拉式選單,將有提示字句可以再多多了解。


最後,就是等待審核者來處理及相互互動囉,順利的話,就可以完成貢獻啦。


2011年10月3日 星期一

[Python] 使用 Django 架構,提供強制下載檔案的 CGI 服務

周邊有人有需求,希望 CGI 能夠提供強制下載的功能,這我以前寫過 PHP,知道很容易透過用 header() 來送出資訊,請瀏覽器直接下載檔案,但改成 Django 我又不會了。翻了以前的筆記,順便看到以前的筆記:[Python] 使用 Django 提供檔案下載的 CGI 服務,溫習了一下。


至於此篇解法如下:


@ views.py

from django import http
from django.http import HttpResponse
from django.core.servers.basehttp import FileWrapper
import os
import mimetypes

def DemoFileDownload(request):
file_path = '/data/cat.jpg'
file_name = 'name_for_download.jpg'
response = HttpResponse(FileWrapper( file(file_path) ),mimetype='application/force-download')
response['Content-Disposition'] = 'attachment; filename=%s' % file_name 
response['Content-Type'] = mimetypes.guess_type(file_path)
response['Content-Length'] = os.path.getsize(file_path)
return response


2011年10月2日 星期日

iPhone/iPod/iPad 影音播放軟體 - AnyPlayer 與字幕檔編碼錯誤的處理

 
iPhone app - AnyPlayer/AnyPlayer HD


忘記是何時下載到這款限時免費的軟體,周末就順手測試一下,在 iPad 上頭安裝 AnyPlayer 後,把一些影音檔透過 iTunes 傳進去,速度還不會太慢。接著在播放 AVI 影片時,可以正常顯示字幕呢!除此之外,播放影片還可以加速或減速播放,整體上很夠用。


雖然只是用 AnyPlayer 而非 iPad 版的 AnyPlayer HD,程式用 2x 放大來播放時,雖然畫質會變差,但對我來說還夠用 XD 因為看影片不需要看到多仔細,不像電腦螢幕很大,一點點的畫質不好很難接受。


然而,測試某一個影片與其字幕時,發現每一個 line 最後一個字總是顯示 "??" ,而前面都可以正常顯示,也開始發現,原來 AnyPlayer 還可以手動設定字幕編碼。只是試了很多編碼後,還是失敗收場,最後就想到轉碼的解法 :P 


notepad++_encoding


跑去下載 Notepad++ 並用他把字幕檔開啟,接著[轉換至 UTF-8 碼格式]並儲存起來再傳到程式裡,如此一來就播放就完全沒問題啦!這類軟體應該比較適合在 iPad 上使用,對 iPhone 或 iPod touch 來說,一來是螢幕太小,二來則是耗電快。


2011年9月29日 星期四

編譯 Webkit 所耗費的時間和 run-webkit-tests 筆記

原本只是一直在 Windows 平台上編譯 Webkit,但做 layout test case 時,一直無法 success,一些文章說是字型的問題,但好不容易都取到字型了,還是不太 ok ,就開始嘗試在其他平台上測試。


編譯成功的平台:



  • Windows 7 Eng 64Bit 與 VS 2005 Express

    • AMD 955 X4、12GB DDR3-1333

    • 耗時 45 分鐘



  • Windows XP 32Bit 與 VS 2005 Express

  • Windows XP 32Bit 與 VS 2005

  • Ubuntu 11.04 64Bit 之編譯 GTK+ 版

    • 躲在一台 AMD 945 X4、8GB 的 Win7 64Bit 裡的 VirtualBox ,分配 4 顆 CPU 和 2048 記憶體

    • 耗時 22 分鐘



  • Mac OSX 10.6 與 Xcode 4



整體上,編譯環境最容易設定的是 Mac OSX,但下載軟體還滿耗時:



  1. 下載安裝 Java for Mac OS X Developer Package (1xx MB) 和 Xcode 4 (4.x GB) 

  2. 取得 Webkit source code

  3. 執行 update-webkit

  4. 執行 build-webkit


第二好裝的是 Ubuntu 11.04 ,原先想說再 Ubuntu 10.04 裝,才發現 GLIB 版本不夠新,也才想起幾天前朋友安裝時,就有提過這種問題,不小心又走了回頭路一次:



  1. 安裝 Ubuntu 11.04 Desktop 64Bit

  2. sudo apt-get install autoconf automake autotools-dev bison flex gperf glib-networking gtk-doc-tools libenchant-dev libgail-3-dev  libgeoclue-dev libglib2.0-dev libgstreamer-plugins-base0.10-dev libgtk2.0-dev libicu-dev libjpeg62-dev libpango1.0-dev libpng12-dev libsoup2.4-dev libsqlite3-dev libtool  libxslt-dev libxt-dev

  3. 編譯時又發現找不到 gail (明明裝了 libgail-3-dev 了),因此又多裝 libgail-dev 來搞定

  4. 取得 Webkit source code

  5. 執行 update-webkit --gtk

  6. 執行 build-webkit --gtk


至於 Win7 或 WinXP 的嘛,大概就照官網的安裝下去及調教,簡易筆記:



  1. vcsetup.exe

  2. VS80sp1-KB926748-X86-INTL.exe

  3. VS80sp1-KB971090-X86-INTL.exe

  4. PSDK-x86.exe

  5. cygwin-downloader.zip

  6. quicktimesdk.zip

  7. DXSDK_Feb10_exe

  8. 設定 VS 2005 Express 額外的 lib 或 header、設定系統環境變數以便找到 PSK 程式、設定 VCProjects 等


如果是在 WinXP 編譯時,應該還會碰到不少問題,細節請參考 Building Webkit on Windows


最後,提及一下關於 run-webkit-tests:



  • 新版指令: new-run-webkit-tests

  • 舊版指令: old-run-webkit-tests 或 run-webkit-tests


只測試某些 case ,如 writing-mode:



  • run-webkit-tests -v fast/writing-mode/


想看瀏覽器的圖(Pixel不見得會過):



  • run-webkit-tests -v -p fast/writing-mode/


當使用舊版指令執行時,在 Windows 上會要求設定字型目錄(WEBKIT_TESTFONTS環境變數),用到的字型可以在這邊查閱:


https://trac.webkit.org/browser/trunk/Tools/DumpRenderTree/win/DumpRenderTree.cpp#L319


而這些字型大多是 Mac OSX 裏頭內建的,可以先把 /System/Library/Fonts 和 /Library/Fonts 的東西都複製到一個目錄,接著在 Windows 上使用 CrossFont 軟體(試用版15天免費)進行轉換即可,細節請參考 BuildingOnWindows#Font-metric-relatedfailures


關於跑 test case 的部分,若是在 Unix 環境可以試試 new-run-webkit-tests ,這跑起來比較快;在 Windows 上跑 new-run-webkit-tests 會碰到一些小問題,目前還沒著手去處理,暫時用舊版指令測試。


問題:WebKit/WebKitBuild/Release/bin/DumpRenderTree.exe: error while loading shared libraries: MSVCR80.dll: cannot open shared object file: No such file or directory


解法:請安裝 Safari 瀏覽器


2011年9月24日 星期六

竹東夜市 - 竹東後火車站、快速道路、頭前溪生態公園

15


來新竹後,第二次逛夜市,很巧的都是一個人逛。這是新竹縣竹東鎮周六夜市,營業時間差不多晚上五點半起,比較好的時段應該是晚上六點至六點半開始,可以把車停好,然後在堤防上散步一下,看看等會要吃哪一攤。這個夜市很特別,是在快速道路底下的區域,而堤防旁邊就是生態公園,天色未暗時,可以看到有人在散步等。



View Larger Map


記得兩年前到過竹東菜市場,以為那就是所謂的夜市,從此就很少過去了。這兩年多次聽到同事閒聊,這次就努力一下,終於找到切確的位置了!上述的 GPX 是從新竹往竹東的中興路開始的,到竹東後碰到朝陽路左轉,接著碰到北興路右轉,接著再碰到仁愛路左轉,就接到了快速道路底下,走到底往右轉慢慢過去就會找到囉。不熟的話可以用 Google Street View 看一下轉角處,例如北興路轉仁愛路時,會看到一間全家等,而上述的 GPX 因為接收訊號有誤差,所以就當個簡略的示意圖吧。


由於第一次去,大概五點初就騎車過去,差不多五點半就到了,趁著人還不多時,騎著車逛了一次,仔細看 GPX 圖,可以看到最後有一段像似有兩條線疊起來的折返範圍,那就是夜市的範圍,可真是說長不長,說短也不短。趁著天氣未黑,店家還在準備的時候,我就在旁邊走了幾次測了一下時間,大概走一趟要15分鐘,所以來回就 30 分鐘左右,還滿適合散步的。


01


上面這張是夜市的起點,可以看到一個黃底紅字的「機車停車處」,我第一次來這邊也問了一下,確定在第一攤之前的位置都是可以擺放機車的,放不夠的才會往堤防內停,而堤防內主要是給汽車停的,並且也是一個休憩場所、生態公園。盡管生態公園的區域很大,但晚上七點多望過去好像也是滿滿的車潮呢,並且只有一個出入口供車子進來與出去,晚上車潮多時會有人指揮,所以多一點耐心也不用擔心出不去。


02 03 04 05 06


然後看到一間電子公司的門口就是夜市呢,好像有點熟悉的名字,但我又想不起來?或許科技業都取得很相近吧!?說不定周六加班時,下班時可以順便吃一下夜市呢!


07


最後,天色慢慢變黑,大概晚上七點左右,人就越來越多,各家攤子的燈也打起來了,遠看就很熱鬧了


08 09 10 11 12 13 14


在網路上可以找到一些文章,說這邊是 2010.04 左右才移過來的,好像是舊竹東夜市原先以是在街道兩處,搬過來就延用這個習慣,變成一個很特別的夜市文化。逛夜市時,很容易吃飽想多走走,若擔心人潮太多,這時候可以到堤防上頭走走,也是分外清幽。雖然人潮熱絡,但還是不太建議一個女生在堤防上甚至生態公園閒晃,建議還是找找伴不然就是在下面的夜市閒逛吧,而堤防上也有幾個鐵椅,可以看到情侶或是青少年兩三位在那邊休息,也是特別之處。最後,接近夜市尾端,有三個流動廁所可以使用,但要收費(男生小便斗的不用),也別忘了,這還是一條道路,偶爾還是會有車子會開過去,走路時還是請多看一下車子吧!


2011年9月18日 星期日

基隆廟口

keelung


從松山搭火車到基隆,約 20 多分鐘會有一班車,車程約 40 分鐘,並且可以用悠遊卡通行,十分便利。整個行程要留意的是火車是否有到基隆,因為火車會在八堵分線,另一個方向是往瑞芳、侯硐等東部方向,只是基隆火車站已經是終點站,所以目的地是基隆的火車大多都會標示車子開往"基隆",很好辨認。另外,離開火車站前,也可以拍一張時刻表,這樣也很方便查回程時間。


基隆火車站 基隆火車站時刻表(2011-09-18)


第一次聽到基隆廟口,已經是一年前的事,那時同事規畫去九份玩,規畫了基隆廟口的行程,並且直說著基隆廟口三明治超好吃的(但這次我還是沒吃到XD)。直到這周末在漫畫店窩了幾小時後,天色還不錯,就衝吧!之前也詢問過住在基隆的大學同學,他覺得基隆沒甚麼好逛的,所以並不建議去那邊待很久,最後我也只把目的地規畫在基隆廟口而已。



檢視較大的地圖


基隆火車站還滿有特色的,從 Google Maps 上就可以窺見一二,一出基隆火車站,前方就是港口,可以看到船跟海,不曉得是不是因為與鬧區很近的關係,可以看到垃圾在海上漂流跟惡臭味,扣除這些之外,還滿不錯的,有一種與大海很奇妙的聯繫感,並且可以看到關稅局、文化中心等,火車站前方也有 Burger King 、 Starbucks 和超商等。


基隆火車站站前 基隆火車站站前


出火車站後,可以從右方走天橋往忠一路的方向走,那邊規畫了一個很讚的海洋廣場,除了是公車站外,還提供遊客在那邊休憩,可以好好拍拍港口風貌。


基隆火車站-忠一路海洋廣場 基隆火車站-忠一路海洋廣場


接著就可以往基隆廟口前進,從忠一路海洋廣場往麥當勞方向就對了!基隆廟口的店家都還有標記號碼,整條廟口前的攤販並不長(有掛燈的路段),但轉個彎,延伸出去的夜市反而很長很長,並隨著時間人潮越來越多囉!剩下的場景就自行體驗吧 :D


2011年9月15日 星期四

新竹海邊

17km


第二次到新竹海邊,這是 17KM 海岸線的紅樹林一隅。


這陣子常跟學弟閒聊,學弟正逢等待當兵之際,由於無法提早入伍,選擇到台灣東部散散心,有時擔心他空轉太久,但是,沒有經歷過空轉,熟能奮鬥打拼呢?早上也丟了 link 分享:


Yahoo!奇摩 青年微革命 - 堅定夢想 流氓變巨星,蕭敬騰
http://tw.topic.campaign.yahoo.net/localtouch/insist_article.php?c=4&aid=115


這篇真的寫的不錯,恰好在研發單位待過,更能體會那種大家一頭熱想要找 killer 級的賺錢方法,但往往這樣的驅動方式越來越走倒退,因為不新穎、不賺錢的點子永遠不會被重視,並且隨著資訊界訊息的爆增,反而變成嚴重擾亂帆舵的兇手,成果就是不斷地空轉、自轉,甚至組織解散。


除此之外,上述文章也提到「一個人」的藝術,我覺得描述的十分貼切,如果總要等著別人來認可自己的行為,那往往跳脫不出去,只要是在道德規範內、不影響健康、人身安全的,就算只是實現白日夢,還是可以衝看看吧!


第一次去新竹海邊,是大五那年的空轉,第二次的到來,恰好可以解解數個月煩悶的心情。充不充實?空不空轉?其實只是一線之隔罷了,好好珍惜光陰才是王道啊。


2011年9月10日 星期六

PostgreSQL 筆記

大約是 2010 年初才第一次用 PostgreSQL 的,那時是架 HadoopDB,之後則隔了一年半後,我才又因為 GIS 相關類再用了一次,只是又隔一個月後,我竟然又通通忘光了 :P


我想,以後就開始用 PostgreSQL 吧!然後其他不需要 server 的時刻,就改 SQLite 吧!


以下環境是 Ubuntu 10.04:


列出資料庫 (man psql)
$ psq -l
開始使用 psql (假設是用 postgres 帳號)
$ sudo su -l postgres
建立資料庫
$ createdb mydb
刪除資料庫
$ dropdb mydb
使用資料庫 (要先建立好)
$ psql mydb
查詢資料表
=# \d
查詢資料表定義
=# \d mytable;
建立資料表
=# CREATE TABLE mytable ( field1 int, field2 float, field3 varchar(255) );

從 STDIN 新增資料
$ vim mytable_records
COPY mytable (field1, field2, field3) FROM stdin;
1 2 3
2 3 4
...
$ psql mydb < mytable_records


2011年9月8日 星期四

珍惜身邊的所有


今天無意間又看到這,片中的點滴倏地提醒,真的要好好珍惜身邊的所有,這是愛情片。然後,我又看了一次。如果我還記得劇情,那我大概不會再看一次,有點奇妙的理性感?或許是無理地躲避對劇情的情緒吧。


對這部短篇動畫感動,大概是喜歡那接近真實生活的場景,沒有太多的科幻,卻是一滴滴點在心頭的故事。從漫長的鐵路、夾帶時間的溝通方式、不確定性等等,讓我想起以前的青春歲月。


回想起來,去年春天我看了這部,雖然我想起不來當下的情緒是什麼,但現在,巧地又到了人生的一個折點,整個團隊將就地解散各分東西了,恰好剛劇情中的一些角色、心情很像,呼。這齣戲是很沉重的,恰好題材很符合我的一些過去,有些人覺得很無趣,沒有一個小時的時間或不喜歡這類的,還是別輕易接觸吧!但此刻的我,告訴自己要更加珍惜一切,以及放手一搏。


2011年9月3日 星期六

Android 開發筆記 - 使用 PhoneGap、jQuery Mobile 與台北市政府開放資料(Open Data)

我本身是 Native App Development 崇尚者(雖然沒啥開發經驗),理由很簡單,我樂於學習新的開發環境,想要 app 的效能最快,過去也曾探問過一些人的意見,有些大老闆就是力推 Native App ,理由就是要給使用者最好的使用經驗。然而,我的強者同事一直推薦 PhoneGap 的架構,他的理念是希望可以用一套固定且可延續性的學習經驗,應用在任何 mobile app 開發情境,這時就完全屬於 PhoneGap/HTML 的絕對領域!我也能體會在某個情境下並不太需要高效能的追求,這時候就可以好好善用 PhoneGap 所提供的便利性,只要是 Web Programmer 背景,會 HTML + JS + CSS 即可,剩下的只是安裝 app develpment 環境並看著 PhoneGap 使用手冊,也就行啦!


由於沒啥動力,就找了台北市政府九月才提供的公開資料(Open Data)當作範例,剛好可以透過 Javascript API 取得資料,再加上這類屬於查詢及資料呈列功能,不會有多嚴重的效率,所以,衝一發!


首先不厭其煩還是要裝一下 Android 開發環境,需要的可以逛一下 :Android & Eclipse 開發環境 - 第一次安裝筆記


接著從 Eclipse 建立一個 Project ,在此命名為 MyOpenData:


Application name: MyOpenData
Package name: tw.taipei.opendata
Create Activity: MyOpenDataActivity
Min SDK Version: 10 


接著從 PhoneGap 官網下載相關檔案,並依照使用手冊安裝:



  1. 建立 /libs、/assets/www 目錄,將 phonegap-1.0.0.js 複製到 /assets/www,將 phonegap-1.0.0.jar 複製到 /libs,將 xml 複製到 /res 目錄中。

  2. 更新 MyOpenDataActivity.java


    • package tw.taipei.opendata;

      import com.phonegap.*;
      //import android.app.Activity;

      import android.os.Bundle;

      public class MyOpenDataActivity extends DroidGap {
          /** Called when the activity is first created. */
          @Override
          public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              //setContentView(R.layout.main);
              super.loadUrl("file:///android_asset/www/index.html");

          }
      }



  3. 在 /libs 目錄按右鍵> Build Path > Configure Build Path > Libraries > Add JARs > 選 phonegap-1.0.0.jar 。

    • add_libs_phonegap



  4. 更新 AndroidManifes.xml:

    • <supports-screens
      android:largeScreens="true"
      android:normalScreens="true"
      android:smallScreens="true"
      android:resizeable="true"
      android:anyDensity="true"
      />
      <uses-permission android:name="android.permission.CAMERA" />
      <uses-permission android:name="android.permission.VIBRATE" />
      <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.RECEIVE_SMS" />
      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
      <uses-permission android:name="android.permission.READ_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
      <uses-permission android:name="android.permission.GET_ACCOUNTS" />

    • <activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">
      <intent-filter> </intent-filter> 
      </activity>

    • 如此圖:
      androidmanifest_phonegap



  5. 在 /assets/www 目錄中,新增想要的資料即可,如 index.html 


    • <!DOCTYPE HTML>
      <html>
      <head>
      <title>PhoneGap</title>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      </head>
      <body>
      <h1>changyy.pixnet.net</h1>
      </body>
      </html>



  6. 目錄結構

    • project_phonegap



  7. 成果:

    • phonegap result




接著來使用 jQuery Mobile ,透過這可以很便利地製作 Mobile App UI 及其事件操作,例如仿 iOS UITableViewController 等:



  1. 下載 Javascript 函式庫和 CSS,加入 /assets/www 裡 (此例沒用到,改用外部資源)



  2. 更改 HTML 檔案,此例為 index.html

    • <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
      <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>



  3. 新增 header、table 和 footer 效果

    • <!DOCTYPE HTML>
      <html>
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <title>changyy.pixnet.net</title>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
      <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
      </head>
      <body>
      <div data-role="page">
      <div data-role="header">
      <h1>Page Title</h1>
      </div><!-- /header -->
      <div data-role="content">
      <p>Page content goes here.</p>
      </div><!-- /content -->
      <ul data-role="listview" data-theme="g">
      <li data-role="list-divider">changyy.pixnet.net</li>
      <li><a href="ios.html">iOS</a></li>
      <li><a href="android.html">Android</a></li>
      </ul>
      <ul data-role="listview" data-theme="g">
      <li data-role="list-divider">MyOpenData</li>
      <li><a href="1.html">PhoneGap</a></li>
      <li><a href="2.html">jQuery Mobile</a></li>
      <li><a href="3.html">Data.Taipei</a></li>
      </ul>
      <div data-role="footer">
      <h4>Page Footer</h4>
      </div><!-- /footer -->
      </div><!-- /page -->
      </body>
      </html>



  4. 成果圖:

    • phonegap_result2




接著使用 台北市政府開放資料 所提供的 Open Data API:



  1. 目前 2011-09-03 共有 131 項資料可使用,在此挑選 "臺北市健保特約藥局"


  2. 成果:

    • 健保特約藥局_1
      健保特約藥局_2



  3. HTML 程式碼:

    • <!DOCTYPE HTML>
      <html>
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8" />
      <title>changyy.pixnet.net</title>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
      <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
      <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
      <script language="Javascript">
      $(document).ready(function(){
      $.ajax({
      type: "POST",
      url: "http://taipeicityopendata.cloudapp.net/v1/TaipeiOGDI/G67AHAMEDICATION10007/",
      data: "format=json&callback=yourCallback",
      dataType: 'jsonp' ,
      });
      });
      var regionTitle = new Array();
      var regionData = new Array();
      var regionHash = [];
      function yourCallback(data)
      {
      //console.log(data);
      var container = $('#output');
      regionTitle = new Array();
      regionData = new Array();
      regionHash = [];
      for( var i=0 ,cnt=data['d'].length ; i<cnt ; ++i )
      {
      var getRegion = data['d'][i]['地址'].substring(0,data['d'][i]['地址'].indexOf('區',0)+1);
      if( regionHash[getRegion] == undefined )
      {
      regionHash[getRegion] = regionData.length;
      regionData.push(new Array());
      regionTitle[regionHash[getRegion]] = getRegion;
      }
      regionData[regionHash[getRegion]].push(data['d'][i]);
      }
      container.empty();
      for( var i=0 ,cnt=regionData.length ; i<cnt ; ++i )
      {
      //console.log( '@'+i+',Title:'+regionTitle[i]+',Cnt:'+regionData[i].length );
      container.append( '<li><a href="#'+regionTitle[i]+'">'+regionTitle[i]+'藥局資料<span>'+regionData[i].length+'</span></a></li>' );

      var subpage = '';
      for( var j=0,subCnt=regionData[i].length ; j<subCnt ; ++j )
      {
      //container.append( '<li><h3>'+regionData[i][j]['機構名稱']+'</h3><p>'+regionData[i][j]['地址']+'</p></li>' );
      subpage += '<li><h3>'+regionData[i][j]['機構名稱']+'</h3><p>'+regionData[i][j]['地址']+'</p></li>';
      }
      $('body').append(
      '<div data-role="page" data-url="'+regionTitle[i]+'">'+
      '<div data-role="header" data-position="fixed">'+
      '<h1>'+regionTitle[i]+'</h1>'+
      '</div>' +
      '<ul data-role="listview" data-theme="g">'+
      subpage +
      '</ul>' +
      '<div data-role="footer" data-position="fixed">' + 
      '<h4><a href="#home">Back</a></h4>' +
      '</div>' +
      '</div>'
      );
      }
      $('ul').listview('refresh');
      }
      </script>
      </head>
      <body>
      <div data-role="page" id="home">
      <div data-role="header" data-position="fixed">
      <h1>健保特約藥局</h1>
      </div><!-- /header -->
      <ul id="output" data-role="listview" data-theme="g"><center><h3>Loading...</h3></center></ul>
      </div><!-- /page -->
      </body>
      </html>




心得:


PhoneGap 的原理就是把開發者寫的 HTML + JS + CSS 用 Web 元件跑起來,在 Android 稱作 WebView ,在 iOS 稱作 UIWebView,因此,你也可以不需要 PhoneGap ,自行學樣包起來也沒問題。


使用 HTML 最大的優點是 UI 方面可以由 jQuery Mobile 包辦,這樣就算沒有像 iOS 漂亮的開發介面,也可以輕輕鬆鬆在 Android 或其他 mobile 平台達成。並且 UI 刻制對熟悉 CSS 的人來說,更是如魚得水啊。


最大缺點:


由於程式操作狀態從 Native app 移至 Web 元件上頭,當 native app 狀態改變時,不見得能對應到 Web 元件的狀態,例如偵測網路狀態或切換程式的動作等,有時希望每次一啟用程式,無論是從背景運作或是暫停模式中起來,都想要恢復至到一個畫面時,這時候 Web 元件就不見得會聽話。解法應該也是有的,只是解來解去會變成寫 native app 了。


2011年8月31日 星期三

Building Chromium Windows @ Windows 7 64Bit

為啥會需要編 Chromium 呢?一開始是工作需求,後來漸漸變成一種想把玩 Open Source 的心態去進行,即使下了班還是播出點時間研究研究。實在是 Web Browser 佔據的場景越來越多囉,如果手邊有一套自己可以亂改的 Browser 不亦樂乎?例如去年就有人拿 chromium 改成專門用於 facebook 的瀏覽器。雖然 Open Source 界不少人反微軟,但反過來看看 OS 市佔率,還是有太多太多人都在 Windows 上玩耍,如果想服務大眾或是做出合適於大眾把玩的東西,仍舊不能放棄 Windows 平台。


整個流程請參考:Build Instructions (Windows) 即可。在此使用 Windows 7 CHT 64Bit + VS2010 Express CHT 版,官方的簡介都是以 VS2008 Express 為基準或是 VS2008、VS2010 為主,所以參考官方的流程已足矣。另外一提的,連 Webkit 還都是以 VS2005 系列來說。


環境:


CPU:AMD 945 x4
RAM:DDR3-1333 2G x4
OS:Windows 7 CHT 64Bit


安裝軟體:


VISUAL C++ 2010 EXPRESS (VS2010ExpressCHT.iso)


Microsoft Visual Studio 2010 Service Pack 1 (VS2010SP1dvd1.iso)


DirectX SDK (June 2010 DirectX SDK)


Windows Driver Kit Version 7.1.0


cygwin


Chromium depot_tools


設定:



  1. 先取得程式碼,在此使用打包好的 http://chromium-browser-source.commondatastorage.googleapis.com/chromium_tarball.html ,此為 chromium.r96198.tgz 版本

  2. 接著打開 cgywin 並且把 chromium.r96198.tgz 擺在家目錄,用 tar -xvf chromium.r96198.tgz 解開,大概要 1x 分鐘,最後把 chromium 移到家目錄

  3. 切換至 ~/chromium/src 執行

    • $ set GYP_MSVS_VERSION=2010e

    • $ gclient sync --force

    • $ GYP_DEFINES='disable_nacl=1' gclient runhooks



  4. 打開 ~/chromium/src/chrome/chrome.sln 並將 chrome 設成起始專案

  5. 設定額外 include 與 lib 資訊

    • 開啟 chrome.sln 並點選 chrome project 後,[檢視] -> [屬性管理員] -> 點選 Microsoft.Cpp.Win32.user 後,去 [VC++ 目錄] 新增 [include 目錄] 和 [程式庫目錄]的資訊



  6. 可以點 chrome project 後,按 F7 編譯了。在我這台電腦大概一開始要跑快兩小時,修一修後再跑一小時,最後才編出 chrome.exe


microsoft.Cpp.Win32.user 


chrome_vc2010_express_lib chrome_vc2010_express_include


錯誤訊息及解決方式:


問題一:


官方說可以用 C:\trunk\src\chrome> devenv.exe /build Debug chrome.sln /project chrome.vcproj 這種 cmd line 編法,但一直找不到 devenv.exe 擺在哪


解法:


對 VS2008 Express 改用 vcbuild.exe ,位置在 C:\Program Files (x86)\Microsoft Visual Studio 9.0\VC\vcpackages\vcbuild.exe ,且使用時得改成 vcbuild.exe /upgrade ,這樣也會開始編譯。但我還是不知道 VC++ 2010 Express 該用哪支,最後還是用開始 chrome.sln 用介面編吧


問題二:


------ 已開始建置: 專案: ppapi_cpp_objects_nacl, 組態: Debug Win32 ------
2>  graphics_3d_dev.cc
2>  video_capture_client_dev.cc
2>  file_chooser_dev.cc
2>  scrollbar_dev.cc
2>..\..\..\..\ppapi\cpp\dev\video_capture_client_dev.cc(30): error C2440: '<function-style-cast>' : 無法由 'const PP_Resource' 轉換為 'pp::Buffer_Dev'
2>          沒有可以取得來源型別的建構函式,或建構函式多載解析模稜兩可
2>  video_decoder_dev.cc
2>..\..\..\..\ppapi\cpp\dev\graphics_3d_dev.cc(28): error C2511: 'pp::Graphics3D_Dev::Graphics3D_Dev(const pp::Instance &,const pp::Graphics3D_Dev &,const int32_t *)' : 在 'pp::Graphics3D_Dev' 找不到多載成員函式
2>          C:\cygwin\home\changyy\chromium\src\native_client\src\third_party\ppapi/cpp/dev/graphics_3d_dev.h(17) : 請參閱 'pp::Graphics3D_Dev' 的宣告
2>..\..\..\..\ppapi\cpp\dev\graphics_3d_dev.cc(58): error C2039: 'ResizeBuffers' : 不是 'pp::Graphics3D_Dev' 的成員
2>          C:\cygwin\home\changyy\chromium\src\native_client\src\third_party\ppapi/cpp/dev/graphics_3d_dev.h(17) : 請參閱 'pp::Graphics3D_Dev' 的宣告
2>..\..\..\..\ppapi\cpp\dev\graphics_3d_dev.cc(62): error C2039: 'ResizeBuffers' : 不是 'PPB_Graphics3D_Dev' 的成員
2>          C:\cygwin\home\changyy\chromium\src\native_client\src\third_party\ppapi/c/dev/ppb_graphics_3d_dev.h(37) : 請參閱 'PPB_Graphics3D_Dev' 的宣告
2>..\..\..\..\ppapi\cpp\dev\graphics_3d_dev.cc(63): error C3861: 'pp_resource': 找不到識別項
... 


解法:


把這東西給關掉 XD 在 cygwin 底下,切換到 ~/chromium/src 後,執行 $ GYP_DEFINES='disable_nacl=1' gclient runhooks 後,再去重編即可。


問題三:


108>C:\WinDDK\7600.16385.1\inc\mfc42\atldef.h(4) : fatal error C1083: Cannot open include file: '..\atl30\atldef.h': No such file or directory


解法:


安裝的 WDD 中,只有 atl71 目錄而沒有 atl30,所以就是直接把 atl71 複製一份並更名為 atl30。


問題四:


fatal error: 90>libGLESv2\libGLESv2.rc(10): fatal error RC1015: cannot open include file 'afxres.h'.


解法:


將 include 資訊多加個 WDD/path/inc/mfc42 吧


其他: 


編完沒過怎辦?繼續編 XD 重複幾次會發現沒過的會減少 :P


其他參考資料:



2011年8月30日 星期二

[Unix] .screenrc 與 .cshrc 筆記

在一台共用的工作站中,很不巧地使用共用帳號來操作時,這時候常常會碰到一些軟體設定的問題,最常見的就是自己用 tarball 偷裝的軟體 XD 這時候會想透過 source my.cshrc 來更新 PATH 環境變數,來使用這些 tools,然而使用 screen 時,卻變成每開一個視窗就得手動跑一次 source my.cshrc ,有點麻煩 :P 原先這種是應該寫在 ~/.cshrc 中就好,但因為是共用帳號,所以就設法避開了。


暫時還沒找到 .screenrc 的設定法?感覺應該有辦法每次新建一個視窗後,就跑某些指令吧?總之現在先偷改 ~/.cshrc 的部分,用的方式就是看工作目錄在哪,在指定工作目錄下就跑 source my.cshrc 來解決。至少簡單地可以 work 了 Orz


~/.screenrc:


caption always "%{bw}%M/%d %c %{wb} %-w%{c}%n %t%{w}%+w%{k} %=%{G}[%H] %l%"


~/.cshrc:


...
...

set checkdir='/data/MyWorkDir'
set currdir=`pwd`
set currcheck=`echo $currdir|cut -c1-15`
if( $currcheck == $checkdir ) then
        source /data/MyWorkDir/dev.cshrc
endif


/data/MyWorkDir/dev.cshrc:


setenv PATH     ${PATH}:/data/MyWorkDir/tarball/bin
setenv EDITOR   vim
if ( ! $?WINDOW ) then
        set prompt="%n@%m[%t] %~\n> "
else
        set prompt="%n@%m[%t]($WINDOW) %~\n> "
endif


如此一來,只要一開始切換到 /data/MyWorkDir 後,每次用 screen 開啟視窗時,都會跑 /data/MyWorkDir/dev.cshrc 來更新環境變數囉。先這樣撐著用吧 XD


2011年8月29日 星期一

資源


工作之後,越來越覺得資源是很重要的議題,例如最容易忽略的時間,一天也只有 24 小時,這讓我想起大一時的計概教授總是提醒大家 BBS 一天不要玩超過 30 分鐘!可惜做到的應該不多吧?我大學之後的學生生活,幾乎天天手洗洗衣服,時間加一加也挺可觀的,說真的不如其他同學一周花 20~30 元洗烘一次。


前陣子參加義工跟小我快十歲的資訊熱愛者聊天,聽到他很徬徨要學哪種程式語言,大概是擔心走錯路,這會讓我想到同事以前學習 Java 的路程,直接在書店看哪種程式語言最多,就挑它了來學,那時候就是 Java 了,事實證明,的確也沒挑錯,到現在 Java 還是很常出現在周邊的 open source 中。這些,也是青春的資源啊。


最近也常跟另一位同事去找主管 PK ,讓我體會計劃的推行也是需要資源的,這是更強烈的。假設方向是 spinoff 的話,那就需要設法去找錢來支援自己的想法,這時候絕對不是喊喊口號或是裝傻過日子,必須在組織可行的範圍內,提出洽當的計畫方向,可能是你想做得事中的十分之一,當計畫方向已經無法跟組織相輔相成時,那就該另尋一條路,向外找投資者,這些不是別人酸葡萄眼光中可以瞧見的。除此之外,對於職場上那些見人說人話的模式,有時真的不要太認真,認真就真的輸了,一不小心就將自己的資源揮霍掉了。


聊聊休閒活動,周末跑去一間漫畫店看書,這是我第二次在漫畫店看漫畫,這次的計價方式是以一本為單位(原價 x 10% - 2),這樣看一本 One Piece 就只要 8 元,看兩集就 16 元。上一次去清大水木則是四分鐘 1 元,一小時 15 元的算法,其實兩種都不差,或許在清大水木可以一直衝刺,但在時間的追趕下會不會損失了看漫畫的樂趣呢?我覺得到漫畫店看漫畫是一種資源善用的方式呢,有些東西真的只需曾經擁有就夠了。


我覺得資源這個議題,等到了成家立業還是會碰到,如同看著周邊已有家室的好友,偶時必須拒絕聚餐邀約,但我覺得這也不是什麼損失呢。資源,在每個人的心中都有一把尺,不需人云亦云,卻也該好好珍惜啊。可以挑些自己覺得有意義的事來闖闖,用旅行來增廣見聞也好,不見得是市面上火紅的東西,但不要只想著做大事,那樣的下場不是空轉二字可以道盡,有時順著命運緣分,小量也足矣。


2011年8月22日 星期一

我來減肥的

2011/08/20 06:57:00


終於,三天兩夜的行程撐了過去了。十分難得,連續三天都早起,今年的夏天有熱血到!


這個起源是去年與失散多年的高中學長相認,而後又閒聊台灣大型的資訊活動,總之就這樣加入了工作人員陣營。細想起來,碩班的大神就曾跟我說過,一生至少去參加一次吧!看來機會就差不多來了,再加上我本身不太可能因為想聽某堂而跑去台北,那用工作人員的身分,應該動力會多一點吧?!


經過三天的相處,我發現台灣其實有許多能力不錯或是默默耕耘的資訊能力者,有的高中就寫出 apt-get 這種相似功能的套件,有的則是不小心踏入資訊圈,正徬徨著未來的生活規畫,這些都足以令人振奮的!過去我在大學資訊系中,看到大部分的都比較顧成績而已,僅有少數人把資訊能力練得很好,如今在會場瞧見許多資訊強者,有單純愛玩某款遊戲,因此架論壇管理機器踏上了資訊這條路,無論哪種切入點,至少學了許多學校沒教的事,我覺得這才是大學該學會的技能啊!


Open source 是一種熱於分享精神,隨著生活的改變,或許不再有那空閒的時間寫 code 或置身於活動中,但我想,還是存在合適自己的付出模式,找到他!並好好地繼續熱血下去吧!


2011年8月15日 星期一

[Windows] 初探 Browser Helper Object - 在特定條件下刪除 Cookie 為例

IE 附加元件


Browser Helper Object (BHO) 說穿了就像 Firefox Plugin 或 Google Chrome Extension 一樣,用來擴充瀏覽器的功能,只是實作上不同於 Firefox 跟 Chrome 的 Javascript 環境,這次使用的是 VC++ 的環境。沒想到人生中第一次實作瀏覽器 plugin 竟然是用在 IE 身上。


原先一直想用 Visual Studio Express 來實作,但裝了一陣子後,雖然可以透過 Windows Driver Kit (WDK) 來補齊 Active Template Library (ATL) 所需的 header file 或 library ,但最後看到的教學要新增一個 ATL Simple Object 時,卡關了,最後還是乖乖使用 VS 系列了。


關於範例就請直接參考 MSDN 官網:


Building Browser Helper Objects with Visual Studio 2005



來源:http://msdn.microsoft.com/en-us/library/bb250489(v=vs.85).aspx


官網寫得非常夠用!上述例子是當網頁讀完後(OnDocumentComplete),彈跳出一個視窗,如果熟悉 jQuery (或Javascript) 的話,就類似 $(document).ready(function(){ alert("Hello World!"); }); 效果。簡單地說,透過瀏覽器的事件偵測,可以玩很多好玩的東西。


由於周邊有人有這樣的需求,我就好奇播一點時間研究了一下。目前的需求:


在特定的 URL 下,刪除特定網域的 Cookie


這樣的行為基於安全性的設計,本來就是不允許的 :P 但透過安裝 BHO 後,可以刪除不同網域的 cookie 資料。所以啊,亂裝 BHO 是很危險的,並且 IE 又是 Windows 核心啊。


寫法只需更改 OnDocumentComplete(IDispatch *pDisp, VARIANT *pvarURL) 部分:


void STDMETHODCALLTYPE CHelloWorldBHO::OnDocumentComplete(IDispatch *pDisp, VARIANT *pvarURL)
{
    // Retrieve the top-level window from the site.
    HWND hwnd;
    HRESULT hr = m_spWebBrowser->get_HWND((LONG_PTR*)&hwnd);
    if (SUCCEEDED(hr))
    {
        // Output a message box when page is loaded.
        //MessageBox(hwnd, L"Hello World!", L"BHO", MB_OK);

        if ( wstrcmp( pvarURL->bstrVal , L"http://www.google.com.tw/" ) == 0 )
        {
            InternetSetCookie( "http://localhost" , "MyCookieName" , "MyCookieValue; expires=Thu, 01-Jan-1970 00:00:01 GMT" );
        }
    }
}


別忘了要引用相關函式庫:


#pragma comment(lib,"Wininet.lib")

#include <Wininet.h>


整個效果就是當瀏覽器瀏覽到 http://www.google.com.tw/ 時,對 http://localhost 網域進行設定 Cookie 的動作,由於設定的 expire time 已超過,等同於刪除指定的 cookie 資訊。這樣的清除 cookie 技巧可以用再強制幫使用者登出等等。


2011年8月10日 星期三

Building Webkit on Windows


圖片來源:http://www.webkit.org/


多年以前,總覺得 FreeBSD 系統的 make buildworld 很威,在 P-200 的電腦等級,編 FreeBSD 4 系列就花了 6 小時。而後隨著硬體的升級,並且在 VirtualBox 的環境中,大概都不用 30 分鐘了吧。一直以為這樣的等待只會出現在編譯 OS/Kernel 方面,如今在 Windows XP 上編譯 Webkit source code,沒想到浩浩蕩蕩地也等超過 30 分鐘 XD 看來我對 Windows 的軟體編譯經驗太弱了,殊不知很多大型程式碼,編譯時間也是很久的。


環境:


Windows XP with SP3
Visual Studio 2005 Express
Microsoft Platform SDK for Windows Server 2003 R2
Cygwin


Webkit 版本:


$ time svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit
...
Checked out revision 92660.

real    79m43.055s
user    1m24.942s
sys     5m40.208s


步驟:


$ ~/Webkit
$ get http://developer.apple.com/opensource/internet/webkit_sptlib_agree.html
$ time ./Tools/Scripts/update-webkit
Updating OpenSource
...

real    6m53.662s
user    0m7.613s
sys     0m35.927s



$ time ./Tools/Scripts/build-webkit --debug
Installing WebKitSupportLibrary...
The WebKitSupportLibrary has been sucessfully installed in /home/user/WebKit/WebKitLibraries/win
Building results into: /home/user/WebKit/WebKitBuild
WEBKITOUTPUTDIR is set to: C:\cygwin\home\user\WebKit\WebKitBuild
WEBKITLIBRARIESDIR is set to: C:\cygwin\home\user\WebKit\WebKitLibraries\win
/cygdrive/c/Program Files/Microsoft Visual Studio 8/Common7/IDE/VCExpress.exe win\WebKit.vcproj\WebKit.sln /build Debug


錯誤訊息:


===== BUILD FAILED ======
Please ensure you have run Tools/Scripts/update-webkit to install dependencies.
You can view build errors by checking the BuildLog.htm files located at:
/home/user/WebKit/WebKitBuild/obj/<project>/<config>.
接著可在 ~/WebKit/WebKitBuild/Debug/buildfailed 看到哪個項目編譯有問題,再切換到該目錄裡尋找 BuildLog.htm 查看
例如 buildfailed 顯示 XXWebCoreXX,那就到 ~/WebKit/WebKitBuild/Debug/obj/WebCore/BuildLog.htm 查看即可。


相關筆記:


請先確認官方網站 BuildBot: WebKit,在這邊可以得知各個平台目前的狀況,有時編譯失敗不是自己環境的問題。


..\platform\DefaultLocalizationStrategy.cpp(345) : error C2001: 常數中包含新行字元
..\platform\DefaultLocalizationStrategy.cpp(347) : error C2001: 常數中包含新行字元
..\platform\DefaultLocalizationStrategy.cpp(345) : fatal error C1057: 巨集展開中未預期的檔案結尾


編輯 C:\cygwin\home\user\WebKit\Source\WebCore\platform\DefaultLocalizationStrategy.cpp
在 line 345 附近可以看到有使用全形“的地方,把他改成 \" 即可( "Look Up \"%@\"" 和 "Look Up \"<selection>\"")


error C2220: 將警告視為錯誤處理 - 沒有產生 'object' 檔案
warning C4819: 檔案含有無法在目前字碼頁 (950) 中表示的字元。請以 Unicode 格式儲存檔案以防止資料遺失


使用 VC++ 2005 Express 打開檔案後,再存檔一次即可,不需更動原始碼,即可解決問題。此 error C2220 問題可以參考 http://lists.macosforge.org/pipermail/webkit-help/2010-March/000860.html


以下是更動過得檔案
C:\cygwin\home\user\WebKit\Source\WebCore\platform\DefaultLocalizationStrategy.cpp
c:\cygwin\home\user\WebKit\Source\WebCore\css\CSSWrapShapes.h
C:\cygwin\home\user\WebKit\Source\WebCore\css\CSSWrapShapes.cpp
C:\cygwin\home\user\WebKit\Source\WebCore\rendering\RenderFlowThread.cpp
C:\cygwin\home\user\WebKit\Source\WebCore\rendering\RenderRegion.cpp
C:\cygwin\home\user\WebKit\WebKitLibraries\win\Include\ConditionalMacros.h


error PRJ0003 : 繁衍 (Spawn) 'midl.exe' 發生錯誤


將 C:\Program Files\Microsoft Platform SDK for Windows Server 2003 R2\Bin 加入 PATH 環境變數


LINK : fatal error LNK1104: 無法開啟檔案 'WebCoreTestSupport.lib'


原先是 DumpRenderTree 沒編過,而後才想起來可以找一下 WebCoreTestSupport 的狀態,在 WebKitBuild\###\obj\WebCoreTestSupport\BuildLog.htm,所以還是上面的老問題,把 WrapShapes.h 存檔一下就行啦


fatal error C1083: 無法開啟包含檔案: 'windows.h': No such file or directory


把 VC++ 2005 Express 打開,在 [工具] -> [選項] -> [專案與方案] -> [VC++ 目錄],將 "可執行檔"、"Include 檔案" 和 "程式庫檔",分別新增 C:\Program Files\Microsoft Platform SDK for Windows Server 2003 R2 對應的 Bin、Include 和 Lib 目錄


請把 How to: Use Visual C++ Express Edition with the Microsoft Platform SDK http://msdn.microsoft.com/en-us/library/ms235626(VS.80).aspx 做完。


至於執行編譯出來的 Webkit.exe 時,會碰到找不到相關的 dll 檔案,可以在下列位置確認一下:



2011年8月9日 星期二

[Javascript] 調整 TinyMCE 預設字型大小

上次隨意尋找,沒有看清楚,就荒廢了一陣子 XD


這次確實地找,看到相關的文章:



總之,解法就是可以在 tinyMCE.init 指定一個 content_css 資訊來設定顯示字型啦,例如:


@ /path/custom_content.css


body.mceContentBody {
    font-size:20px;
}


@ test.html


tinyMCE.init({
    ....
    content_css : "/path/custom_content.css?"+new Date().getTime(),
    ....
}); 


而 custom_contents.css 後面加上一個時間戳記,只是為了避免瀏覽器 cache 而已。


那些年擁抱的世界...


周末跟一位長輩聊天,聊著聊著就像說著那些年...


長輩說:「以前我們班的那些人,成績最好的當政府官員,接著來則是像我一樣當公司的員工,剩下來的要嘛不是老闆就是流氓。」


長輩的意思是要我更勇敢地衝刺,這就是為何那些成績不好的人會有兩種極端的結果,要嘛拼到老闆,要嘛就當流氓,千萬不要優柔寡斷,甚至騎驢找馬的下場就是什麼也沒有,傻傻地往前衝吧!


看著長輩談論著那些年,瞧得出他眼中的那些年的...未完成。


2011年8月3日 星期三

[Unix] 使用 Tarball 安裝 Nginx + PHP (FastCGI) + HTTPS @ FreeBSD 7

已經拖了將三過月的筆記,終於抽空寫完了。看了幾篇關於 Nginx 的文章,例如使用的資源比 Apache Web Server 少,以至於可以提供比 Apache 更多連線服務等。這次就順手安裝一下,雖然我對它還是不熟悉,就連 FastCGI 也是,只依稀知道要在 Apache Web Server 上跑 PHP,一種是用 mod_php 的方式,另一種好像就是 fastcgi 模式。網路上的文章是說 FastCGI 將 PHP 與 Web server 切開不綁在一起,使得 Web server 不會受 PHP 影響過深,也能達到節省資源。


此篇在 FreeBSD 7 環境下,採用 PHP-5.2.17、PHP-PFM 和 Nginx-1.0.5 並透過 tarball 方式進行安裝。可在到 Nginx 下載 nginx-1.0.5 stable version(Unix), 另外使用 PHP 5.2.17。而 FastCGI 的部份,有兩套管理方式,一種是使用 lighttpd 中的 spawn-fcgi ,另一種則是用 PHP-FPM ,在此選用 PHP-FPM 囉。


安裝:


下載 PHP-5.2.17:


> wget http://www.php.net/get/php-5.2.17.tar.gz/from/tw.php.net/mirror
> tar -xvf php-5.2.17.tar.gz


下載 PHP-PFM patch for PHP-5.2.17:


> wget http://php-fpm.org/downloads/php-5.2.17-fpm-0.5.14.diff.gz
> gzip -cd php-5.2.17-fpm-0.5.14.diff.gz | patch -d php-5.2.17 -p1


下載 Nginx-1.05:


> wget http://nginx.org/download/nginx-1.0.5.tar.gz
> tar -xvf nginx-1.0.5.tar.gz


安裝 PHP (依需求使用,但至少要有 --enable-fastcgi --enable-force-cgi-redirect --enable-fpm 資訊)


> cd php-5.2.17
>  ./configure --prefix=/path/tarball --without-pear --with-openssl --enable-mbstring --with-curl --with-imap --with-mcrypt --with-imap-ssl --with-gd --enable-pcntl --enable-fastcgi --enable-force-cgi-redirect --enable-fpm
> make install


安裝 Nginx:


> cd nginx-1.0.5
> ./configure --prefix=/path/tarball/ --with-http_ssl_module --with-pcre
> make install


設定:


PHP-FPM:


設定要跑 fastcgi 使用的 port number,預設在 9000:


> vim /path/tarball/etc/php-fpm.conf
<value name="listen_address">127.0.0.1:9000</value>


啟動 PHP-FPM:


> /path/tarball/sbin/php-fpm start
Starting php_fpm  done


停止:


> /path/tarball/sbin/php-fpm stop


Nginx :


設定 PHP FastCGI:


> vim /path/conf/nginx.conf
location ~ \.php$ {
#proxy_pass   http://127.0.0.1;
include conf/fastcgi.conf;
fastcgi_pass  127.0.0.1:9000;
fastcgi_index index.php;
}


設定 HTTPS:


建立憑證:


> cd /path/tarball/conf
> openssl genrsa -des3 -out server.key 2048
> openssl req -new -key server.key -out server.csr
> openssl x509 -req -days 3650 -in server.csr -signkey server.key -out server.crt
> openssl rsa -in server.key -out server.key


設定 nginx.conf 之 HTTPS 部分:


> vim /path/conf/nginx.conf

在 http {} 中增加 client_max_body_size 30m; 來解決 413 Request Entity Too Large 訊息

# HTTPS server
#
server {
listen       443;
server_name  localhost;

ssl                  on;
ssl_certificate      server.crt;
ssl_certificate_key  server.key;

ssl_session_timeout  5m;

ssl_protocols  SSLv2 SSLv3 TLSv1;
ssl_ciphers  HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers   on;

location / {
root   html;
index  index.html index.htm index.php;
}
        location ~ \.php$ {
            #proxy_pass   http://127.0.0.1;
            include fastcgi.conf;
            fastcgi_param  HTTPS on; 
            fastcgi_pass  127.0.0.1:9000;
            fastcgi_index index.php;
        }   
}


啟動:


> /path/tarball/sbin/nginx


停止:


> /path/tarball/sbin/nginx -s stop


如此一來,可以在 /path/tarball/html 目錄中,擺一個 index.php 檔案,用 <?php phpinfo(); ?> 來測試 PHP 是否正常工作囉。


2011年8月2日 星期二

透過 telnet 指令測試 Mail Server POP3/IMAP/SMTP 服務

很久沒碰 Mail Service 了,結果不小心忘了測試 POP3/IMAP 用的指令,翻翻以前的 code 又回憶了起來。


筆記一下:


POP3(110/995):


> telnet mail_server_ip 110
Trying mail_server_ip...
Connected to mail_server_ip.
Escape character is '^]'.
+OK POP3 mail_server_ip 2007e.104 server ready
user UserID
+OK User name accepted, password please
pass UserPasswd
+OK Mailbox open, 11 messages
quit
+OK Sayonara
Connection closed by foreign host.


IMAP(143/993):


> telnet mail_server_ip 143
Trying mail_server_ip...
Connected to mail_server_ip.
Escape character is '^]'.
* OK [CAPABILITY IMAP4REV1 I18NLEVEL=1 LITERAL+ SASL-IR LOGIN-REFERRALS STARTTLS] mail_server_ip IMAP4rev1 2007e.404 at Tue, 2 Aug 2011 17:42:07 +0800 (CST)
- login UserID UserPasswd
- OK [CAPABILITY IMAP4REV1 I18NLEVEL=1 LITERAL+ IDLE UIDPLUS NAMESPACE CHILDREN MAILBOX-REFERRALS BINARY UNSELECT ESEARCH WITHIN SCAN SORT THREAD=REFERENCES THREAD=ORDEREDSUBJECT MULTIAPPEND] User UserID authenticated
- logout
* BYE mail_server_ip IMAP4rev1 server terminating connection
- OK LOGOUT completed
Connection closed by foreign host.


SMTP(25):


使用 UserID 和 UserPasswd 測試 (採用 echo -n UserID | base64 和 echo -n UserPasswd | base64 產生資料)
> telnet mail_server_ip 25
Trying mail_server_ip...
Connected to mail_server_ip.
Escape character is '^]'.
220 mail_server_ip ESMTP Postfix
HELO localhost.localdomain
250 mail_server_ip
AUTH LOGIN
334 VXNlcm5hbWU6
VXNlcklECg==
334 UGFzc3dvcmQ6
VXNlclBhc3N3b3JkCg==
535 5.7.8 Error: authentication failed: authentication failure
quit
221 2.0.0 Bye


加密連線:


> openssl s_client -connect mail_server_ip:port


2011年7月31日 星期日

資訊展之痛徹心扉

資訊展


周末幫人買筆電,很巧碰上台北資訊展,於是就第一次去參加資訊展,成果是...損失慘重 XDD 人很多,看到不少單眼男跟 show girls!迷失了自己以往買 3C 產品的步調。啊,我現在才發現世貿是在台北 101 旁邊呢!


這次購買的目標是 Acer 筆電,原先是想買小筆電 Acer AO753 ,所以調查的 PCHome 的價格,然後就去資訊展逛逛,但是逛到一半改變了主意,往 4830TG 或 3830TG 發展,由於功課沒做好,就在第二家敗了 4830TG 了。回家後看了 PTT 的 NB-shopping 版,就十分痛心 XD 看到有人買 4830TG + 4GBx2 創見記憶體 + 750GB 空間,總價 26000 而已!驚覺自己太依賴過去的經驗,覺得新機在 PCHOME 賣三萬,那大概在資訊廣場用 27000 前後買的就差不多了,萬萬沒想到資訊展就是該用力砍價才對。


越想越傷心啊~ 錢雖然不是最重要的,但是受傷的心靈再次地提醒我:『市場調查一定要做好!千萬不要擺入過多的經驗。』我覺得這次買貴的主因是...忘了場合是資訊展,在資訊展就該用力砍價,以及要確實做好市場調查,每一間有買的一定要去問問,多花一點時間可以省到千元也是很值得的!


附上 4830TG 的美照 XD 還滿喜歡這款色調:


4810TG-01 4810TG-03 4810TG-05


Acer 筆電系列,選擇 48 開頭是因為有光碟機,若不在意可以選 38 開頭的,沒有光碟機可以輕 350g 左右吧!