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 了。