<![CDATA[網站製作學習誌]]> 2012-02-13T14:28:16+08:00 http://www.jaceju.net/ Octopress <![CDATA[[Web] 連結分享]]> 2012-02-13T14:26:00+08:00 http://www.jaceju.net/blog/archives/web-link-share-20120213

PHP

Zend Framework

JavaScript & AJAX

jQuery

Backbone.js

CoffeeScript & Sass

CSS

HTML5 & CSS3

Mobile Development

Web Development

Ruby & Rails

Database

Node.JS

Programming

Python

Design

SCM

System

Other

]]> <![CDATA[領悟 - 程序員版]]> 2012-02-07T21:16:00+08:00 http://www.jaceju.net/blog/archives/realize 時程一直是專案很難掌握的東西，尤其是上頭訂下一個尷尬的死線時。然後自己明知道不可為，但為了面子就只能勉強答應下來。

所以新網站在還沒完全測試後就上線了，只好邊看規格邊修 Bug 。

這時腦海裡突然浮現出一首歌的旋律，心有七七煙的我，就改出了以下的歌詞：

領悟 - 程序員版

我以為有寫測試，但是我沒有；

我只是征征望著那些錯誤，然後像孩子一樣無助。

這何嘗不是一種領悟，讓我把規格看清楚；

雖然那加班的痛苦，將日日夜夜在我靈魂最深處。

 

我以為我會度姑，但是我沒有；

當我看到我親手寫的程式，給我那大紅色的錯誤。

這何嘗不是一種領悟，讓你把程式看清楚；

測試是奢侈的幸福，可惜 PM 從來不在乎。

 

啊！一段程式就此刪除…

啊！一小時眼看要荒蕪。

我的程式若是錯誤，願 user 沒有白白受苦；

曾經無日無夜忙碌，就只有「辛苦」。

 

啊！多麼痛的領悟，這規格不是全部；

只是我回首開會時的每一步，都走的好孤獨。

 

啊！多麼痛的領悟，這時程已經延誤；

只願我掙開票的枷鎖， PM 束縛，全力追逐，別再為 bug 受苦。


Muzicons.com ]]> <![CDATA[我的 Web 開發工具]]> 2012-01-23T16:42:00+08:00 http://www.jaceju.net/blog/archives/my-webdev-tools 在我從事 Web 開發這段期間，其實一直依賴著很多好用的工具及參考文件；當然也不是所有的工具和文件我都精通，但它們確實幫我節省了很多開發的時間，也讓我學到很多有趣的技術。

以下我就來分享一些我收集並放在手邊參考的資訊，我也會大略地描述它們的內容與用途。

Javascript

Formatter

  • Online javascript beautifier

    用來格式化雜亂無章的 JavaScript 程式碼，通常我都用來偷看別人壓縮過的 JavaScript 是怎麼寫的。

  • Online JavaScript Packer

    跟上面那個剛好相反，用來打包 JavaScript 程式碼。當然目前還有很多更好的選擇，能直接整合在開發流程裡，但線上版的總是比較方便。

Library / CDN

  • cdn js - the missing cdn

    這個網站幫我們很多常見的 JavaScript Library 放在 CDN 服務上。如果 Google Libraries API 找不到的話，可以來這裡找找看。

  • Microjs

    這個網站收集了很多較不常見的 JavaScript Library ，並且分門別類讓我們可以清楚的瞭解它們的用途。通常我用到的機會不大，但有用到時，就會發現有很多寶可以挖。

  • URI.js - URLs in Javascript

    用來解析網址的好工具，我目前是用它來製作 Portable 的 Backbone.js 程式。

JSON

  • Online JSON Viewer / Json Parser Online

    這兩個工具可以用樹狀的方式來呈現 JSON 輸出；除了可以用來驗證 JSON 外，我通常也用來看 JSON 的結構是不是正確的。

Converter

  • Js2coffee

    這個工具可以幫我們把 JavaScript 轉成 CoffeeScript ；有趣的是，它也是 CoffeeScript 寫的。一開始學習 CoffeeScript 時，用到的機會比較多。

Syntax

  • JavaScript Garden

    這是收集了一些 JavaScript 常見問題的網站，通常我在遇到某些語法問題時，會來看看。

Online Tester

  • jsFiddle

    線上測試 JavaScript 的好用服務，而且也提供一些主流 JavaScript Library 的預載。

  • Tinkerbin

    跟 jsFiddle 一樣的服務，但它直接支援 CoffeeScript/SASS/LESS 等語法。

  • JS Bin

    這個服務也可以線上測試 JavaScript ，也支援多數主流 JavaScript Library 。

jQuery

Backbone.js

  • Backbone.js

    Backbone.js 的官方網站，同時也是參考手冊；目前是我最常瀏覽的網站。

  • Underscore.js

    除了是 Backbone.js 必要的 library 外，它裡面提供的很多功能對 JavaScript 開發也非常有用。

  • Backbone.js Tutorials

    收集了一些 Backbone.js 的教學文件。

  • Tutorials, blog posts and example sites

    Backbone.js 官方列出的教學與範例原始碼，我有時會來這裡看高手是怎麼用 Backbone.js 。

  • Backbone patterns

    使用 Backbone.js 可以應用的一些 Patterns ，有很多好用的密技。

  • Backbone Boilerplate

    一個結合了後端 Node.js 程式，很完整的 Backbons.js App 範本。

CSS

SASS Tools

  • SASS

    提供可程式化的 CSS 語法，也是我目前在 Web 開發上的利器。

  • Compass

    目前是我製作前端網站必備工具之一，它在 SASS 語法上加入更多方便的外掛，讓我可以很輕鬆地處理很多原本很複雜的 CSS 。

  • css2sass

    這個工具可以把 CSS 轉換成 SASS ，當我需要把某些別人寫好的 CSS 片段放到目前的 SASS 檔案中時，我就會用這個工具來協助我轉換。

Layout

  • CSS Layout Generator

    視覺化的 CSS Layout 產生工具，雖然很久沒用了，但依舊推薦給剛學 CSS Layout 的朋友。

  • CSS layouts

    這是一個收集 CSS Layout 教學的網站，我之前會在這裡找接近專案需要的版型，再舉一反三地套用到專案上。

Formatter

Browser Support

Snippets

  • Incredibly Useful CSS Snippets

    這是很久以前找到的好用 CSS 程式片段，但後來用了 Compass 後就比較少參考了。

  • CSS Word-wrap

    很有用的程式碼片段，它將目前各家瀏覽器支援的 white-space 屬性做了整理。

Framework

  • Formee

    表單美化的 CSS Framework ，但目前用到的機會也是很少。

  • Bootstrap, from Twitter

    目前最常用的 CSS Framework 。

  • Twitter Bootstrap Generator

    如果沒有安裝 LESS 時，這個工具可以用來調整 Twitter-Bootstrap CSS 的參數。如果有裝 LESS 的話，直接改其中的 scaffolding.less 會比較快。

  • Skeleton

    目的跟 Twitter-Bootstrap 很像，也是一個很完整的 CSS Framework 。不過 Skeleton 多了 Media Query 的特色，更適合用在行動裝置上。

CSS3 Generator

  • CSS3.0 Maker

    這個線上工具大概是我看過最完整的 CSS3 特效產生器了。

  • Layer Styles

    這個 CSS 產生器的介面很類似 Photoshop 的屬性視窗來協助我們調整 Box 的相關屬性。利用它也可以作出很多不錯的按鈕樣式。

  • CSS3 Generator

    這個 CSS3 產生器也是非常完整，它的特色是會用問答的方式幫我們產生出想要的 CSS3 樣式。

  • CSS3 Playground

    也是支援多種 CSS3 特效的產生器。

  • CSS3 Generator

    這個工具的功能就少了一點，但介面很好看。

  • Ultimate CSS Gradient Generator

    專業級的 CSS3 漸層產生器，能設定的選項鉅細靡遺。

  • Linear Gradients

    也是用來產生 CSS3 漸層特效的工具，但後來也加入了一些其他 CSS3 效果。

  • CSS3 Gradient Generator

    也是很不錯的 CSS3 漸層產生器，但選項稍微少了點。

Button Maker

References

  • CSS3.com

    這個網站就是有關 CSS 的問答網站，也提供了基本的 CSS 參考手冊。

  • Media Queries

    這個網站收集了很多使用 Media Query 的網站，主要我是用來參考高手們如何在不同尺寸下呈現網站。

HTML5

Detection

  • Modernizr

    這個 Library 可以用來偵測瀏覽器對 HTML5 / CSS3 的支援程度，讓開發者可以選擇替代方案。

Template

  • HTML5 Boilerplate

    提供預先設定好的 HTML5 範本，，讓我們不必從無到有建置 HTML5 網站。

  • Initializr

    基於上面的 HTML5 Boilerplate 的 HTML5 範本，但提供了更多樣化的選項，讓我們可以自訂要加在範本上的元件；它也是目前我製作新網站一定會用到的工具之一。

  • SwitchToHTML5

    這個工具可以產生一個簡單的 HTML5 範本，不過目前我很少用了。

Features List

  • Element Index

    這個網站把所有 HTML5 支援的 HTML 標籤都列出來；是我剛開始學習 HTML5 時，會來查詢標籤定義的地方。

  • HTML5 Demos and Examples

    這個網站展示了很多 HTML5 的新特色；先前 HTML5 剛流行起來時，我會在這裡看看有什麼新玩意兒。

  • The HTML5 test

    測試瀏覽器對 HTML5 的支援程度，一般是在新瀏覽器版本推出時，我會用這個服務來測試。

  • Mobile HTML5

    這個網站列出目前行動裝置對 HTML5 的支援，這是之前在製作 PHPConf.TW 網站時會參考到的。

  • CSS3 & HTML5 Browser Support

    列出目前主流瀏覽器對 HTML5 及 CSS3 的支援狀況。

Framework

Tools

  • Manifested

    可以幫網站建立離線檔案清單，目前還沒有機會在實戰中使用。

Reference

  • HTML5 web dev reading list

    這是一份學習 HTML5 的推薦閱讀清單；有時間的話可以全部看看，我目前是挑有興趣的先看。

Cheat Sheet

DOM Tools

  • XRAY

    這是很久以前我就一直放在手邊用的 bookmarklet 小工具，可以列出 HTML 元素的一些概況。重要的是它支援各家主流瀏覽器，讓我在沒有 Firebug 時也可以使用。

  • MRI

    用來測試輸入的 Selector 是不是能找到我們想要的那些元素，尤其在寫 jQuery 時非常方便。

Browser Tools

  • resizeMyBrowser

    這個工具提供了很多常見的行動裝置可視區域大小，點選後可以快速把瀏覽器重設為我們選擇的大小。通常我是用來測試網站能不能在某些行動裝置上看。

  • Detect Mobile Browsers

    提供了偵測是否為行動裝置瀏覽器的各種做法，這也是我在做行動網站時會用到的好工具。

PHP

Database Client

  • phpMyAdmin

    這應該不用多介紹了，幾乎我手邊的機器都會安裝的 MySQL 線上 Client 工具。

Formatter

  • PHP Formatter

    用來格式化 PHP 程式碼的好工具，這是我在寫作時會用到的。

Snippet

Design

Templates

  • Free Web Templates

    每次有需要做頁面時，我都會在這些網站裡找靈感。

Color

Icons

Mockup

Regular Expression

  • RegExr

    測試 Regular Expression 的工具，應該適用於大多數有支援 Regular Expression 的語言。

  • Online Javascript Regular Expression Tester

    專為 Javascript Regular Expression 所寫的線上測試工具。

  • Rubular

    專為 Ruby Regular Expression 所寫的線上測試工具。

Documents

  • Docpool.co

    收集了一些網站前置作業文件的範本。

Projects

  • Redmine

    最近終於開始有時間研究的一套強大專案管理工具，支援多種版本控制系統。

Site Tools

Code

Snippets Share

  • Chop

    用來分享一段小程式的服務。

Online Diff

Git

Books

References

Tips

Markdown Editor

  • Online Markdown Editor

    在左方輸入 Markdown 語法，就可以在右方即時預覽的 Markdown 編輯器。

  • Markdown Editor

    跟上面一樣，但提供了數種版面配置選項，也可以讓我們上傳 Markdown 文件編輯。

Desktop App

  • NetBeans IDE

    這個是目前我最得力的 PHP 開發助手。除了 PHP Class/Function 的自動完成與基本重構功能外，還加上了 PHPUnit/ZF/PHPDoc 等外部指令的支援。

  • Sublime Text 2

    號稱可以取代 Textmate 的強大文字編輯器，因為它啟動速度快，又支援 SASS/CoffeeScript 語法，目前是我在 NetBeans 之外的另一個好助手。

  • LiveReload

    這個 Mac 上的好用工具，可以幫我們監控專案中指定檔案類型的更新；通常是用在 CSS/SASS 及 JavaScript/CoffeeScript 這些檔案上。搭配瀏覽器的外掛程式後，就可以即時預覽這些檔案更動後的變化。

  • VirtualHostX

    用來管理 Mac 上 Apache VirtualHost 的小工具，這也是我在開發 PHP 專案的利器之一。 (如果是 Rails 開發者的話， Pow 會是比較好的選擇。)

  • Sequel Pro

    免費的圖形化介面 Mac MySQL Client ，是在本機操作中，我用來取代 phpMyAdmin 的工具。

  • SourceTree

    除了用 Terminal 直接操作指令外，它是我在 Mac 上使用 Git 必備的 Client 工具。

  • SmartSVN

    因為公司的版本控制系統是 Subversion ，因此這個 Mac Subversion Client 工具也是我目前最常使用的。

更多好用的 Desktop 工具，可以參考龍哥 (高見龍) 的這篇文章：我的工具箱。

結論

這裡所羅列的資訊其實只是茫茫網海的冰山一角而已，我想一定還有更多更好用的工具與文件等待我們去發掘。

希望這篇文章能夠幫助大家在 Web 開發這條路上走得更順暢一些，也歡迎大家能夠分享自己常用的工具。

]]> <![CDATA[[Web] 連結分享]]> 2012-01-22T17:03:00+08:00 http://www.jaceju.net/blog/archives/web-link-share-20120122

PHP

Zend Framework

JavaScript & AJAX

jQuery

Backbone.js

CoffeeScript & Sass

CSS

HTML5 & CSS3

Mobile Development

Web Development

Ruby & Rails

Database

Node.JS

Programming

Design

SCM

System

Software

Other

]]> <![CDATA[Head First CSS Layout]]> 2012-01-04T23:56:00+08:00 http://www.jaceju.net/blog/archives/head_first_css_layout 這是最近的讀書會報告，內容是有關 CSS 排版相關知識與實例分享。

以下是投影片的部份：

試著用 Head First 的風格來呈現，希望沒有畫虎不成反類犬。

實例的部份等影片整理好後再獻給大家。

]]> <![CDATA[[Web] 連結分享]]> 2012-01-02T09:59:00+08:00 http://www.jaceju.net/blog/archives/web-link-share-20120102

PHP

Zend Framework

JavaScript & AJAX

jQuery

Backbone.js

CoffeeScript & Sass

CSS

HTML5 & CSS3

Mobile Development

Web Development

Ruby & Rails

Database

Node.JS

Programming

Python

Design

SCM

System

Security

Software

]]> <![CDATA[Octopress Blog Quick Operator]]> 2011-11-26T13:51:00+08:00 http://www.jaceju.net/blog/archives/octopress-blog-quick-operator 在調整 Octopress 的過程中，找到一篇不錯的參考文章：換到octopress 。

不過原作者的指令在操作上比較不適合我，因此我將它稍作了改良：

安裝方法

把它命名為 blog ，並放到 PATH 系統變數可以找到的路徑下，然後設定為可執行即可。

註：上面的程式碼區塊檔名為 blog.sh 其實只是為了要用 Gist 的程式碼變色效果。 :P

用法

建立新文章：

blog post "post title"

僅預覽新文章：

blog preview "post title"

預覽全站：

blog preview

然後再用瀏覽器打開 http://localhost:4000 。

發佈文章：

blog deploy

更新 octopress ：

blog update
]]> <![CDATA[[Web] 連結分享]]> 2011-11-24T10:09:00+08:00 http://www.jaceju.net/blog/archives/web-link-share-20111124

PHP

Zend Framework

JavaScript & AJAX

jQuery

CoffeeScript & Sass

CSS

HTML5 & CSS3

Mobile Development

Web Development

Ruby & Rails

Database

Node.JS

Programming

Design

Manage

SCM

System

Other

]]> <![CDATA[Beginning Backbone.JS X CoffeeScript]]> 2011-11-22T22:28:00+08:00 http://www.jaceju.net/blog/archives/beginning-backbone-coffeescript 因為想同時練習 Backbone.JS 和 CoffeeScript 這兩個熱門的技術，所以在網路上找了一下，剛好看到這篇 CoffeeScript with Backbone.js Example ，所以快速做個筆記。

這篇文章的範例主要是讓我們可以同時更改所有方塊的顏色和尺寸，只要在上方的文字欄位中輸入顏色與尺寸值即可。

以下就針對實做這篇文章時所碰到的一些問題以及實作上的心得，一一做整理。

HTML

首先來看一下 HTML 的組成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html>
<html>
  <head>
    <title>Backbone &amp; CoffeeScript</title>
    <meta charset="UTF-8" />
  </head>
  <body>

    <!-- Interface -->
    <div id="config-input" style="padding: 20px;">
      <div data-role="fieldcontain">
        <label for="text" >Enter Color Value (ex. red, green) :</label>
        <input id="color-input" type="text" value="blue" />
      </div>
      <div data-role="fieldcontain">
        <label for="text" >Enter Width of the box (ex. 50, 70) :</label>
        <input id="width-input" type="text" value="100" />
      </div>
    </div>
    <ul id="color-boxes" style="display: inline; list-style-type:none;"></ul>

    <!-- Template -->
    <script type="text/x-jquery-tmpl" id="color-box-template">
      <div style="margin: 20px; float: left;height:${width}px; width: ${width}px; background-color: ${color}; border: 2px solid;">
      </div>
    </script>

    <!-- Scripts -->
    <script src="js/jquery.js"></script>
    <script src="js/underscore.js"></script>
    <script src="js/backbone.js"></script>
    <script src="js/jquery.tmpl.js"></script>
    <script src="js/app.js"></script>

  </body>
</html>

在這次的範例裡把 HTML 分成三個部份：輸出入介面、樣版、 JavaScript 。

介面有輸入用的 #config-input 及輸出用的 #color-boxes ，樣版 #color-box-template 則是用來輸出方塊用。

JavaScript 的部份有用到：

接下來就一一來分析 app.coffee 的內容。

繼承 Backbone 的類別

原本 Backbone 的類別都已經有提供 extend 這個方法，它讓我們用以下的方法來建立我們的類別：

1
2
3
4
5
6
7
8

ConfigModel = Backbone.Model.extend
    defaults:
    initialize: ->

ColorBoxView = Backbone.View.extend
    tagName: "li"
    initialize: ->
    render: =>

但是它其實跟 CoffeeScript 提供的 extends 敘述做的事是一樣的，所以我們可以將上例改寫成 CoffeeScript 的 class ：

1
2
3
4
5
6
7

class ConfigModel extends Backbone.Model
    initialize: ->

class ColorBoxView extends Backbone.View
    tagName: "li"
    initialize: ->
    render: =>

Model

這個範例的 Model 很簡單，就是一個單純的 Value Object ，並在物件初始化時設定初值：

1
2
3

class ConfigModel extends Backbone.Model
    initialize: ->
        @set 'color': 'blue', 'width': '100', 'height': '100'

或是這樣寫也可以：

1
2
3
4
5
6

class ConfigModel extends Backbone.Model
    initialize: ->
        @set
            color: 'blue'
            width: 100
            height: 100

也可以改用定義 defaults 屬性：

1
2
3
4
5

class ConfigModel extends Backbone.Model
    defaults:
        color: 'blue'
        width: 100
        height: 100

註： initialize 及 defaults 是 Backbone.Model 的屬性，不是 CoffeeScript 的語法。

這裡的 Model 只負責存住值，然後讓 View 可以來更新它的狀態，或是參考它來更新 View 的狀態。

View

這個範例有兩個 View ，一個是輸入設定值的介面，一個是用來呈現方塊的結果。

首先先來看輸入設定值的介面：

1
2
3
4
5
6
7
8
9
10

class ConfigInputView extends Backbone.View
    events:
        'keyup #color-input': "updateConfig"
        'keyup #width-input': "updateConfig"

    updateConfig: (e)=>
        @model.set
            'color': $('#color-input').val()
            'width': $('#width-input').val()
            'height': $('#width-input').val()

ConfigInputView 類別定義了兩個 keyup 事件：輸入顏色，以及輸入尺寸；當這兩個事件觸發時，就會呼叫 updateConfig 這個方法。

而 updateConfig 方法就是用來更新 model 的狀態，相信程式很容易看懂。

ConfigInputView 所對應的 HTML 為：

1
2
3
4
5
6
7
8
9
10

    <div id="config-input" style="padding: 20px;">
      <div data-role="fieldcontain">
        <label for="text" >Enter Color Value (ex. red, green) :</label>
        <input id="color-input" type="text" value="blue" />
      </div>
      <div data-role="fieldcontain">
        <label for="text" >Enter Width of the box (ex. 50, 70) :</label>
        <input id="width-input" type="text" value="100" />
      </div>
    </div>

在輸出的部份，這裡是定義在 ColorBoxView 這個類別裡。

1
2
3
4
5
6
7
8
9

class ColorBoxView extends Backbone.View
    tagName: 'li'
    initialize: ->
        @template = $('#color-box-template').template()
        @model.bind 'change', @render

    render: =>
        $(@el).html $.tmpl @template, @model.toJSON()
        return @

tagName 是告訴 View 物件要輸出哪一種 HTML 元素，這裡為 li 。

而 ColorBoxView 物件在初始化時，會做兩件事：讀取樣版，然後監聽 model 的 change 事件。

當 model 的 change 事件發生時 (也就是值改變了) ， render 方法就會被呼叫，它會用剛剛讀取進來的樣版來重新繪製新的方塊。

ColorBoxView 所對應的 HTML 為：

1
2
3
4
5

    <ul id="color-boxes" style="display: inline; list-style-type:none;"></ul>
    <script type="text/x-jquery-tmpl" id="color-box-template">
      <div style="margin: 20px; float: left;height:${width}px; width: ${width}px; background-color: ${color}; border: 2px solid;">
      </div>
    </script>

No Controller

Backbone 在 0.5.0 版後，把 Controller 改名為 Router 了，因此我們不能再使用 Backbone.Controller 這個類別。

不過這次練習的範例並沒有特別要用到 Router 的功能，因此可以直接建立一個不繼承任何類別的偽 Router 類別，然後在它的 constructor 中初始化我們的 Model 與 View ：

1
2
3
4
5
6
7
8
9

class ColorBoxRouter
    constructor: ->
        model = new ConfigModel
        color_input = new ConfigInputView
            'el': $('#config-input')
            'model': model
        for x in [1..5]
            view = new ColorBoxView model: model
            $('#color-boxes').append view.render().el

註：不過如果未來有需要用到 Router 的功能時，當然還是可以繼承 Backbone.Router 。

在初始化 ConfigInputView 物件時，其中 el 就會指向這個 View 所對應的 DOM Tree ，而 model 就是對應到我們已經初始化好的 ConfigModel 物件。

接著我們建立 5 個方塊，每個方塊都是預設的藍色及 100x100 的尺寸大小；最後把這些方塊一一加到 #color-boxes 這個 UL 元素上。

Run

最後要啟動程式時，只要初始化一個 ColorBoxRouter 物件就可以了：

1

$(-> cbl = new ColorBoxRouter)

心得

Backbone.JS 利用了 Observer 這個 Pattern ，讓我們很容易實作出 Model / View 分離的應用程式。而且在架構上也利用了 MVC 分層，使得程式不會陷在一堆 callback 及 global variables 裡。

而 CoffeeScript 也讓我們可以用簡潔的語法，來撰寫複雜而強大的 JavaScript 程式碼。這兩者的搭配，真的讓我有重新認識 JavaScript 的感覺。

能在有生之年，一直學到新東西，真是太棒了！

]]> <![CDATA[Compass Sprite Quick Start]]> 2011-11-16T16:53:00+08:00 http://www.jaceju.net/blog/archives/compass-sprite-quick-start 用了 Compass Sprite 後，快速做個筆記，免得之後又忘了。

Compass Sprite 可以幫我們快速製作 CSS Sprite ，它有幾個特色：

  • 可以不需要自行把圖檔串連起來， Compass Sprite 會自動幫我們處理。不過可惜它只支援 PNG 格式的圖檔，這點使用上要小心。

  • 自動幫我們產生 Sprite CSS ，我們只要在適當的元素的屬性上加入對應的 class 就可以了。

以下是簡單的使用流程：

首先在專案的 images (在 config.rb 中定義的那個) 底下建立一個目錄，名稱自訂，這邊以 actions 為例。

接著在 images/actions 下放幾個 PNG 圖檔，寬度要一致，因為預設 Compass Sprite 會垂直串接起所有圖檔。

這裡我假設有以下的圖檔：

  • images/actions/create.png
  • images/actions/delete.png
  • images/actions/update.png

然後在你的 SCSS/SASS 中加入以下程式碼：

1
2

@import "actions/*.png"
@include all-actions-sprites

註：注意 all-[folder]-sprites 這個用法，我在這裡卡了很久。

最後在你的 HTML 元素中，使用：

1
2
3

<span class="actions-create">建立</span>
<span class="actions-delete">刪除</span>
<span class="actions-update">更新</span>

這樣就可以了，很簡單吧，快試試看。

]]> <![CDATA[[PHPConf.TW] Beginning PHPUnit 簡報花絮]]> 2011-11-14T23:59:00+08:00 http://www.jaceju.net/blog/archives/secret-of-beginning-phpunit 看了 Ant 和龍哥都各自寫了自己在 PHPConf.TW 簡報的心得，那麼我也來談談我自己的部份好了。

這次自告奮勇跳出來想要講一場，其實也是想試試自己能否有足夠的勇氣站上台。

算是第一次站上這種大場合，老實說我非常非常緊張。以往有辦過最多三十個人的研討會，但心境上完全無法比擬。

簡報大概在一個月前我就做好了，因為我真的沒辦法像高手們一樣，臨時去準備一場非常有料的演講。而且到了當天，我還在改簡報，就知道我在這種大場合的經驗有多麼不足了。

一開始我打算講五十分鐘，不過因為後來有很多前輩也加入了議程，因此我就把自己的時間縮短到四十分鐘。而在以往的經驗裡，四十分鐘要把 PHPUnit 的特色講完是不可能的；因此我挑了幾個比較基本的主題來介紹 PHPUnit ，儘可能把大家一開始會碰到的問題涵蓋上去。

不過在試講的時候，才發現還是講不完；因此我就把其中一段講測試資料庫的部份給刪了，再重新編排流程，就得到了最後大家看到的版本。

龍哥也在簡報上給了我很多非常受用的建議，像是：

  • 配合現場的環境來設計簡報。

  • 不要照著電腦講，試著站出講台，利用遙控來切換簡報。

這些都讓我自己覺得整個簡報專業度變得好高，這是以往我所沒有的感受。

簡報一開始我就用 Keynote 製作，這是因為我比較喜歡以視覺化的方式來自由地安排簡報內容。可惜我的美感稍差，沒辦法做出高水準的簡報；最後只好用一些比較簡單的技巧來美化，像是使用幾種主要顏色來呈現文字，為簡報加上漸層背景等等。

另外一開始龍哥建議我用 Wii 來控制遙控簡報，但我已經有買了 Keynote Remote 這個 App ，想說就試試看吧。沒想到效果出乎我意料之外的好，滑動的效果其實也不比實體按鈕差，讓我信心大增。

當然站上台後，雖然沒有發抖，但是心情上的緊張真的很難掩飾。來回的踱步和前面一段不停地重複贅詞，直到一半才穩下來。

時間也是我沒有拿捏好的部份，主要是因為龍哥有準備一個 iPad 倒數計時器，結果我只看了一次。直到最後講完，我發現它早就已經重設成下一場的時間了。最後連房間號碼都來不及說出口，我就匆匆下台了。

另外哏的部份也是我沒有講得很好的地方，因為趕著把簡報內容講完，沒有好好去營造丟哏之前的氣氛。另外就是要找大家都知道的哏，才會獲得共嗚。因此 jserv 的鋪哏方式真的非常值得我學習；大師幽默的丟哏，大家笑開懷呀。

最後還是有我小小自豪的部份，那就是內容流程的安排。這次我沒有特地講很多專業術語，但其實裡面包含了很多專業的測試概念；像是大家常聽到的 TDD 開發方式，我沒有明確去指出來，目的就是不讓大家陷入那種思維裡，而是自然而然地去習慣它。當然內容上還是有一些瑕疵，不過當下我就直接略過了。

也許沒辦法像 Ant 、強哥和 jserv 講得這麼好，但我一定會常常找機會來訓練自己的！所以一定還會有下次！

再次謝謝大家，讓這次 PHPConf.TW 2011 圓滿落幕。

]]> <![CDATA[[Web] 連結分享]]> 2011-11-04T00:00:00+08:00 http://www.jaceju.net/blog/archives/1976

PHP

Zend Framework

JavaScript & AJAX

jQuery

CSS

HTML5 & CSS3

Mobile Development

Web Development

Ruby & Rails

Browser

Database

Node.JS

Programming

Design

SCM

System

Security

Other

]]> <![CDATA[[Web] 連結分享]]> 2011-10-15T00:00:00+08:00 http://www.jaceju.net/blog/archives/1971

PHP

Zend Framework

JavaScript & AJAX

jQuery

CSS

HTML5 & CSS3

Mobile Development

Web Development

Ruby & Rails

Browser

Database

Node.JS

Programming

Design

System

Software

]]> <![CDATA[[Web] 連結分享]]> 2011-09-28T00:00:00+08:00 http://www.jaceju.net/blog/archives/1966

PHP

Zend Framework

JavaScript & AJAX

jQuery

CoffeeScript & Sass

CSS

HTML5 & CSS3

Mobile Development

Web Development

Ruby & Rails

Database

Node.JS

Programming

Design

SCM

System

Security

]]> <![CDATA[[Web] 連結分享]]> 2011-09-10T00:00:00+08:00 http://www.jaceju.net/blog/archives/1960

PHP

Zend Framework

JavaScript & AJAX

jQuery

CoffeeScript & Sass

CSS

HTML5 & CSS3

Mobile Development

Web Development

Node.JS

Programming

Python

Ruby

Design

SCM

System

Software

]]> <![CDATA[如何將 compass 整合到 Zend Framework 中]]> 2011-09-07T00:00:00+08:00 http://www.jaceju.net/blog/archives/1938 compass 是一個很讚的編譯型 CSS Framework ，它可以幫我們把 scss/sass 格式的樣式表轉換成 css ，並且還加入許多好用的 extension ，讓我們能更快開發出非常亮眼的網頁 (當然還是要有一定的美術天份) 。 compass 因為是用 ruby 寫的，所以也可以輕鬆地跟 rails 整合。但 compass 還是可以用在其他語言所開發的 Web 專案上，只是手續稍嫌複雜了些。 這幾天試著把 compass 整合到 Zend Framework 中，以下就是整合的過程。

安裝 compass

這邊假設大家已經已經安裝好了 Ruby 環境，那麼 compass 的安裝就很簡單了，只需要在命令列模式下輸入以下指令即可：

1

gem install compass

就是這麼簡單。

註： Windows 下的 Ruby 環境安裝請參考：在 Windows 下使用 LiveReload 。

建立 compass 專案

接下來我們要先建立一個新的 compass 專案，請輸入以下指令：

1

compass create -x sass compass_test

compass_test 可以隨意命名，不要跟現有的專案名稱重複即可。上面的命令執行後，會出現以下結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

directory compass_test/ 
directory compass_test/sass/ 
directory compass_test/stylesheets/ 
   create compass_test/config.rb 
   create compass_test/sass/screen.sass 
   create compass_test/sass/print.sass 
   create compass_test/sass/ie.sass 
   create compass_test/stylesheets/ie.css 
   create compass_test/stylesheets/print.css 
   create compass_test/stylesheets/screen.css
...
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>

我們需要的就是那個 config.rb 和 *.sass 檔案囉。

整合至 Zend Framework 專案中

其實目前任何架構的 Zend Framework 專案都可以整合 compass ，不過這邊我以 Portable 的 ZF 專案 來解說。 首先我們要把 config.rb 複製到 ZF 專案的根目錄下，假設 ZF 專案的路徑在 /path/to/compass_zf ，請輸入以下指令：

1

cp /path/to/compass_test/config.rb /path/to/compass_zf

然後再把 sass 目錄複製到 ZF 專案的根目錄下：

1

cp -R /path/to/compass_test/sass /path/to/compass_zf

接著修改 /path/to/compass_zf/config.rb ，原來的內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
preferred_syntax = :sass

我們要修改的就是第二段的路徑部份，請將它們改成：

1
2
3
4
5

http_path = "/"
css_dir = "public/css"
sass_dir = "sass"
images_dir = "public/img"
javascripts_dir = "public/js"

當然也別忘了在 public 下建立好 css 、 img 及 js 等三個目錄。

註：其實只要修改 config.rb 中的路徑，就可以支援各種架構的 Web 專案了，只是要記得把 config.rb 放在專案根目錄。

最後一步，我們要在樣版上加入 CSS 的連結，把剛剛在產生 compass 專案時所建議的 HTML 貼到 ZF 專案的 layout.phtml 的 head 區段中 (或是其他含有 head 標籤的樣版上) ，並將改成：

1
2
3
4
5

<link href="<?php echo $this->baseUrl(); ?>/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->baseUrl(); ?>/css/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
    <link href="<?php echo $this->baseUrl(); ?>/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->

到這邊就完成啦！可以試著用以下指令來試試看 compass 整合後的成果：

1

compass watch /path/to/compass_zf

會產生以下結果：

1
2
3
4
5

>>> Change detected to: ie.sass
   create compass_zf/public/css/ie.css 
   create compass_zf/public/css/print.css 
   create compass_zf/public/css/screen.css 
>>> Compass is watching for changes. Press Ctrl-C to Stop.

現在只要修改 /path/to/compass_zf/sass 下的檔案， compass 就會自動幫你編譯囉。 當然我們可以再搭配 LiveReload 來監看檔案，並將變化即時反應到瀏覽器上，是不是很讚呢？

]]> <![CDATA[精進你的程式碼 - 從取得用戶端 IP 的函式談起]]> 2011-08-29T00:00:00+08:00 http://www.jaceju.net/blog/archives/1913 我想多數從事程式開發的朋友，都曾經在遇到問題時，直接上相關的論壇去詢問前輩，或是想辦法去找尋有沒有人碰過同樣的問題。而幸運的是，通常在網路上也可以找到很多前人所提供的解決方案，甚至有寫好的程式碼供後人參考。 但是很多人都是直接把這些程式碼直接複製過來使用，很少會去探討其中的原理。只要能解決問題，有誰會去在乎程式碼到底是圓是扁呢？然而這就是許多程式開發者無法精進自己能力的主要原因之一。

當然我本身也是曾經是這種人，在不瞭解原理的狀況下，對於能夠運作的程式碼，也曾經抱持著能不改就別改的心態。但是在技術這條路上，如果一直用這種態度去處理問題，那麼跟沒有思考能力的機器人又有什麼兩樣呢？ 來吧！我們就從一個最常見的問題開始，一起來瞭解怎樣才能寫出一個所謂「好」的程式碼。

如何取得用戶端 IP ？

大部份從事 Web 開發的朋友，一定都會遇到需要取得用戶端 IP 的狀況。而在 PHP 中，透過 Google 去搜尋的話，也可以找到很多解決方案。 以下的程式碼應該是最常見的解法：

1
2
3
4

function get_client_ip()
{
    return $_SERVER['REMOTE_ADDR'];
}

然而這個方法有個問題，那就是 $SERVER['REMOTE_ADDR'] 有可能不是真實的用戶端 IP 。 原因是用戶可能是在防火牆之後，也可能是透過 Proxy 上網，而使得 $SERVER['REMOTE_ADDR'] 的值可能不是用戶真實的 IP ；總而言之，我們並不能完全相信 $_SERVER['REMOTE_ADDR'] 所回傳的值。 那該怎麼辦呢？網路上又有了這樣的解決方案：

1
2
3
4
5
6
7
8
9
10
11

function get_client_ip()
{
    if ($_SERVER['HTTP_CLIENT_IP']) { // check ip from share internet
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    } elseif ($_SERVER['HTTP_X_FORWARDED_FOR']) { // to check ip is pass from proxy
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } else {
        $ip = $_SERVER['REMOTE_ADDR'];
    }
    return $ip;
}

其中 HTTP_CLIENT_IP 這個 HTTP Header 表示用戶可能是在防火牆之後，或是在透過 IP 分享器來上網；而 HTTP_X_FORWARDED_FOR 則表示用戶可能是透過 Proxy 過來的。這兩個 HTTP Headers 都會將用戶真實的 IP 記錄下來，轉交給 Web Server 處理。 而在這兩個 HTTP Headers 都沒有的狀況下，我們就只好選擇 $_SERVER['REMOTE_ADDR'] 這個一定會有的值，因為它可能就是用戶真實的 IP 了。

PHP 嚴格開發模式

一般在開發時，我們都會把 PHP 設定成嚴格開發模式來讓程式儘可能不要有基本的錯誤發生，像是變數未定義就使用，陣列索引不存在等等，以確保我們的程式在任何設定下都可以順利執行。 設定嚴格開發模式的方法如下：

1

error_reporting(E_ALL | E_STRICT);

身為一個合格的 PHP 開發人員所開發出來的程式，至少要在這種嚴格的環境中執行，而不會發生基本的錯誤。 然而在打開 PHP 嚴格開發模式後，前面的範例在 PHP 嚴格開發模式下可能會出現 “Undefined index: HTTP_CLIENT_IP in xxx.php on line xx” 的警告訊息，這是因為 HTTP_CLIENT_IP 及 HTTP_X_FORWARDED_FOR 這兩個 HTTP Headers 其實是有可能不會設定在 $SERVER 中的。 可是我們不是有判斷這兩個 HTTP Headers 的值是否存在嗎？是的，只是我們是判斷它們的「值」是否存在，而不是判斷它們是否存在於 $SERVER 陣列之中。正確的方法是要以 empty 敘述來判斷這兩個 HTTP Headers 的索引是否存在於 $_SERVER 陣列裡：

1
2
3
4
5
6
7
8
9
10
11

function get_client_ip()
{
    if (!empty($_SERVER['HTTP_CLIENT_IP'])) { // check ip from share internet
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) { // to check ip is pass from proxy
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } else {
        $ip = $_SERVER['REMOTE_ADDR'];
    }
    return $ip;
}

註：至於為什麼 $_SERVER 中有可能不會包含 HTTP_CLIENT_IP 及 HTTP_X_FORWARDED_FOR 這兩個 HTTP Headers 呢？這其實跟 Web/Proxy Server 與網路設備的運作方式有關，這裡就不再深入討論。

其他有用的 HTTP Headers

事實上，除了 HTTP_CLIENT_IP 與 HTTP_X_FORWARDED_FOR 之外，還有其實可能會是用戶實際 IP 的 HTTP Headers ，分別是：

  • HTTP_X_FORWARDED

  • HTTP_X_CLUSTER_CLIENT_IP

  • HTTP_FORWARDED_FOR

  • HTTP_FORWARDED

因此我們就必須得再多判斷這些 HTTP Headers ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function get_client_ip()
{
    if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } elseif (!empty($_SERVER['HTTP_X_FORWARDED'])) {
        $ip = $_SERVER['HTTP_X_FORWARDED'];
    } elseif (!empty($_SERVER['HTTP_X_CLUSTER_CLIENT_IP'])) {
        $ip = $_SERVER['HTTP_X_CLUSTER_CLIENT_IP'];
    } elseif (!empty($_SERVER['HTTP_FORWARDED_FOR'])) {
        $ip = $_SERVER['HTTP_FORWARDED_FOR'];
    } elseif (!empty($_SERVER['HTTP_FORWARDED'])) {
        $ip = $_SERVER['HTTP_FORWARDED'];
    } else {
        $ip = $_SERVER['REMOTE_ADDR'];
    }
    return $ip;
}

但現實上它們的值還是有可能並非用戶實際的 IP ，因此僅供參考用。

註：很可惜的是，我還沒找到這些 HTTP Headers 的完整解釋，只能從字面上去猜測。如果大家有找到它們所代表的意義，還請不吝告知。

判斷是否為合法的 IP

基於從用戶端所傳過來的值都是不可信任的原則，我們還是要對上述的這些 IP 做合法性驗證；在 PHP 5.2 之後，我們可以透過 filter_var 方法來處理：

1
2
3
4
5
6
7
8

function validate_ip($ip)
{
    return (bool) filter_var($ip, FILTER_VALIDATE_IP,
            FILTER_FLAG_IPV4 |
            FILTER_FLAG_NO_PRIV_RANGE |
            FILTER_FLAG_NO_RES_RANGE
            );
}

其中 FILTER_VALIDATE_IP 表示我們要過濾的是 IP 值，而 FILTER_FLAG_* 的意義可以參考 Filter flags 。 filter_var 函式會回傳驗證過後的值，如果驗證不過，就回傳 false 。因此我們就可以改寫我們的 get_client_ip 函式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function get_client_ip()
{
    if (!empty($_SERVER['HTTP_CLIENT_IP']) && validate_ip($_SERVER['HTTP_CLIENT_IP'])) {
        return $_SERVER['HTTP_CLIENT_IP'];
    } 
    if (!empty($_SERVER['HTTP_X_FORWARDED_FOR']) && validate_ipSERVER['HTTP_X_FORWARDED_FOR'])) {
        return $_SERVER['HTTP_X_FORWARDED_FOR'];
    }
    if (!empty($_SERVER['HTTP_X_FORWARDED']) && validate_ip($_SERVER['HTTP_X_FORWARDED'])) {
        return $_SERVER['HTTP_X_FORWARDED'];
    }
    if (!empty($_SERVER['HTTP_X_CLUSTER_CLIENT_IP']) && validate_ip($_SERVER['HTTP_X_CLUSTER_CLIENT_IP'])) {
        return $_SERVER['HTTP_X_CLUSTER_CLIENT_IP'];
    }
    if (!empty($_SERVER['HTTP_FORWARDED_FOR']) && validate_ip($_SERVER['HTTP_FORWARDED_FOR'])) {
        return $_SERVER['HTTP_FORWARDED_FOR'];
    }
    if (!empty($_SERVER['HTTP_FORWARDED']) && validate_ip($_SERVER['HTTP_FORWARDED'])) {
        return $_SERVER['HTTP_FORWARDED'];
    }
    return $_SERVER['REMOTE_ADDR'];
}

這裡另外改寫的部份就是直接把驗證無誤的 IP 值回傳給函式呼叫者，這樣一來我們就不需要再加上一個暫存變數 $ip 了。

註：也許有人會對一個函式中有多個 return 出口感到不舒服，但在這裡確實是個避免後續程式繼續執行的好方法，這在重構中稱為 Guard Clauses 。

HTTP_X_FORWARDED_FOR 可能的格式

前面的程式碼看起來很長對吧？沒關係，晚點我們會回頭過來處理它；現在要先來看看一個比較重要的問題。 根據 Wiki 對 X-Forwarded-For 這個 HTTP Header 的描述，它的格式有可能是：

1

client1, proxy1, proxy2

換句話說，我們必須對它預先以處理才能得到用戶的 IP ，方法是以 explode 來拆開每組 IP ，程式碼如下：

1
2
3
4
5
6
7
8
9

// 略
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
    foreach (explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']) as $ip) {
        $ip = trim($ip); // just to be safe
        if (validate_ip($ip)) {
            return $ip;
        }
    }
}

將上面的片段加到原有的程式碼後，整個函式就更顯得落落長；雖然可以用，但是如果這樣就滿足，那我們真的就只是程式碼轉貼手了。

精簡的寫法

接下來我們要想辦法把一長串的 if…elseif 簡化，也可以避免寫一堆的陣列元素。既然這些值都是在 $_SERVER 中，那麼我們就可以用迴圈來一一將它們代入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function get_client_ip()
{
    foreach (array(
                'HTTP_CLIENT_IP',
                'HTTP_X_FORWARDED_FOR',
                'HTTP_X_FORWARDED',
                'HTTP_X_CLUSTER_CLIENT_IP',
                'HTTP_FORWARDED_FOR',
                'HTTP_FORWARDED',
                'REMOTE_ADDR') as $key) {
        if (array_key_exists($key, $_SERVER)) {
            // 處理 IP
        }
    }
    return null;
}

相信這樣的轉換應該不難懂，這樣的程式碼雖然比不上其他程式語言的語法來的漂亮，但已經比我們原來的那段範例好看太多了。 至於怎麼處理 IP 呢？除了 HTTP_X_FORWARDED_FOR 需要以 explode 函式處理，其他的值應該都不需要處理呀？我們可以把它們放在一起嗎？ 其實是可以的，我們可以把非 HTTP_X_FORWARDED_FOR 的其他值也用 explode 函式過個水，然後會得到只有一個元素的陣列；這樣一來，我們就不需要再用 if…else 判斷格式上的差異，直接都以陣列來處理即可。 最後完整的程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function get_client_ip()
{
    foreach (array(
                'HTTP_CLIENT_IP',
                'HTTP_X_FORWARDED_FOR',
                'HTTP_X_FORWARDED',
                'HTTP_X_CLUSTER_CLIENT_IP',
                'HTTP_FORWARDED_FOR',
                'HTTP_FORWARDED',
                'REMOTE_ADDR') as $key) {
        if (array_key_exists($key, $_SERVER)) {
            foreach (explode(',', $_SERVER[$key]) as $ip) {
                $ip = trim($ip);
                if ((bool) filter_var($ip, FILTER_VALIDATE_IP,
                                FILTER_FLAG_IPV4 |
                                FILTER_FLAG_NO_PRIV_RANGE |
                                FILTER_FLAG_NO_RES_RANGE)) {
                    return $ip;
                }
            }
        }
    }
    return null;
}

跟前面的程式碼比起來，你是否也覺得最後的這段程式碼比較容易瞭解與維護呢？

註：其實最後這段程式碼也是網路上找得到的，而我在這裡只是讓大家瞭解為什麼高手要這樣精簡程式碼。

心得

在取得用戶實際 IP 這個很常見的功能中，其實也蘊涵了很重要的網路知識，雖然不見得我們能完全瞭解這些 HTTP Headers 的由來與運作方式，但至少也要知道為什麼要把它們加進來的原因。 而在語法上的重構，也是我們程式精進上一個很重要的技能；它能反映出你是否真正瞭解這門程式語言，並且知道該怎麼善用它們來增加你工作上的效率。 手邊擁有的工具越多，就更應該熟悉它們；這樣才能適其位盡所能，發揮它們真正的價值。

]]> <![CDATA[Content Swap 模式]]> 2011-08-26T00:00:00+08:00 http://www.jaceju.net/blog/archives/1899 不曉得大家有沒有遇過一種狀況：當某些資料的快取失效時，需要重新建立，但建立快取需要花費很長的時間；這時如果程式需要讀取這些快取時，就會有一段空窗期。 那麼要如何解決這種問題呢？我想方法應該有很多種，但我個人認為比較容易實作且有效率的方式就是： Content Swap 。

簡單來說， Content Swap 就是「當內容準備好後，就切換過去」，不過前提是我們得先有兩個一模一樣的容器。 使用者一開始只會看到其中一個容器的內容，而當第二個容器的內容有改變時，我們就讓使用者切換到第二個容器上頭；而第一個容器就再重新拿來裝填新的內容，以此類推，讓使用者不會感受到我們在改變容器內容時的延遲。 當然 Content Swap 並不是只適用在程式開發的領域裡，它是一種通用的模式；在硬體、軟體，甚至是生活等方面， Content Swap 模式都可以派上用場。 以下整理一些在我個人的程式開發生涯裡，所遇過使用 Content Swap 的場合供大家參考。

註：因為在程式領域混得不專精，所以 Content Swap 這個名詞是我自己胡編的；如果大家有看過類似的技巧而有更好的命名，還請大家不吝指正。

用於系統升級

雖然通常我們不太喜歡升級正在上線的系統，但有時候因為安全上的考量卻不得不升級它。 所以一般我們會再準備好另一台機器，先行在上面安裝並設定好新的系統；接著再利用切換 IP 的方式 (或是其他能切換機器的方法) ，來達成系統升級的目的。 把時間拉長來看，這樣的系統升級方式就是一種 Content Swap 了。

用於遊戲畫面繪製

以前在我學習開發 DirectX 遊戲時，曾經遇到 Sprite 在畫面上閃爍的問題。這是因為我必須在 Sprite 移動時，重新建立遮罩來將它繪製到新位置上。 後來我學到了一個新的技巧，叫做 Double Buffer 。它主要的概念是在程式中準備兩個繪圖緩衝區，然後先在第一個緩衝區上面繪製所有的物件並輸出；接著當程式計算完所有物件的互動與位置後，在第二個緩衝區重新繪製所有的物件，然後再把輸出的指標指向第二個緩衝區來呈現畫面。如此一來，用切換緩衝區的方式，就可以得到不閃爍的畫面了。

用於資料庫排程

有時候我們會需要取得資料庫中的某些資訊，但這些資訊的處理通常要耗費很多時間，即時取得的話就會拖垮系統效能；因此在這些資訊的即時性不是很重要時，我們通常會透過排程來將處理好的資訊放在一個暫時的快取資料表中。 不過就如文章一開頭所描述的狀況，我們在快取過期後而需要重建時，在這段時間裡會讓系統無法取得快取，導致系統必須即時去取得資訊，徒然耗費許多時間。 解決的方法很簡單，我們可以準備好兩個一模一樣的快取資料表，只有名稱上不同，例如 table_1 及 table_2 。 假設目前系統讀取的是 table_1 中的內容，而快取即將過期時，系統並不是直接清除 table_1 現有的內容，而是把新的快取先建立到 table_2 中 (當然要先清除 table_2 中的內容) ；然後系統再將設定改為讀取 table_2 ，直到下次快取過期時，再對 table_1 重複相同的動作。 而這樣的動作，也不一定只侷限在兩個資料表上，也可以是兩台主機來執行。這樣一來，在前端的使用者就完全無感了。

小結

相信大家知道這個概念後，一定會發現自己平常已經有使用這個模式處理問題了；因為我們很希望讓使用者無感於我們在內容切換上的延遲，這也是這個模式最主要的目的。 而這個模式最大的特色就是以空間換取時間，因此在資源有限的場合，可能就沒辦法使用了。 希望以我個人淺薄的心得，能讓大家對這個模式有更多不一樣的想法。

]]> <![CDATA[[Web] 連結分享]]> 2011-08-22T00:00:00+08:00 http://www.jaceju.net/blog/archives/1895

PHP

JavaScript&AJAX

jQuery

CSS

HTML5&CSS3

Mobile Development

Web Development

Database

Node.JS

Ruby

]]> <![CDATA[初探 Zend_Search_Lucene]]> 2011-08-18T00:00:00+08:00 http://www.jaceju.net/blog/archives/1860 全文檢索一直是內容型網站很重要的功能之一，它讓使用者可以快速透過一些關鍵字來找到網站中符合條件的文章。 在 Zend Framework 裡， Zend_Search_Lucene 就是提供這個功能的套件，它是以 Apache Lucene 專案為參考，而以 PHP 實作。 Zend_Search_Lucene 的說明在官方手冊中已經寫得很詳細，以下我會用較為簡明的方式來介紹重點。

基本觀念

Zend_Search_Lucene 的幾個重點觀念如下：

  1. 建立及檢索索引時，都需要指定文字的 charset ；但套件核心是以 UTF-8 來處理索引。

  2. 建立及檢索索引時，可以自訂分析器來處理中文分詞。

  3. 以檔案方式來存放索引，索引必須先建立才可以使用。

  4. 索引只存放需要被顯示的內容或可以檢索的關鍵字，而不是存放所有內容。

  5. 索引是以 document 為單位，搜索的結果也是以文件集來呈現。

  6. 文件來源可以是文字檔案或資料庫中的內容。

  7. 每個文件可以包含多個 fields ，用以顯示或被檢索。

  8. 必要的 field 有 id 、 score 及 content ，其中 id 與 score 會自動產生。

  9. 可以用特別的 query 語法或是 query API 來找出需要的資訊。

  10. 找出來的資訊稱為 query hit ，可以用來顯示搜尋結果。

基本流程

建立索引

  1. 設定分詞分析器 (如果是英文文件則非必要) 。

  2. 初始化索引，這裡是建立索引相關檔案。

  3. 建立索引文件 (document) ，可以從 HTML 內容或檔案來產生索引文件，或是直接建立一個空的索引文件。

  4. 將可以被檢索的資訊一一加到 document 的 field 中，通常也會把連結或路徑等資訊加到 field 中，這樣在輸出時就可以取得。

  5. 提交索引以完成建立的動作。

檢索索引

  1. 設定分詞分析器 (如果是英文文件則非必要) 。

  2. 初始化索引，這裡是打開索引相關檔案。

  3. 解析使用者給定的查詢字串或關鍵字，以產生必要的 query 物件。

  4. 從索引中找出 query 物件所對應的 query hit 資訊；每個 hit 的屬性，就會對應到 document 的 field ，可以用來顯示。

  5. 以迴圈顯示全部的 hit 資訊，就可以讓使用者看到搜尋結果了。

範例

接下來我們來看看一個簡單的範例：「 HTML 檔案檢索系統」，完整的程式碼可以在 GitHub 上找到。

程式架構

先來看看它的程式架構：

1
2
3
4
5
6
7
8
9
10
11
12
13

search
├── html ; 存放 HTML 檔案
├── include
│   └── Phpbean
│       └── Lucene
│           └── Analyzer.php ; Phpbean_Lucene_Analyzer 類別
├── index ; 存放索引檔案
├── init.php ; 程式初始化引用檔
├── build_index.php ; 建立索引
├── find.php ; 搜尋索引
├── index.php ; 主要介面
├── jquery.js ; jQuery
└── lucene.js ; Ajax 程式

請在 html 目錄下放置幾個你想搜尋的 HTML 檔案 (可以從 Yahoo 新聞中轉存幾則下來試用) ，然後將 index 目錄設定為 WWW 權限可寫入。

初始化應用程式

接著我們需要初始化應用程式，這邊是由 init.php 負責：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
// 設定載入路徑
set_include_path(join(PATH_SEPARATOR, array(
    realpath(__DIR__ . '/include'),
    get_include_path(), // 要包含 Zend Framework 的所在路徑
)));
// 設定自動載入
require_once 'Zend/Loader/Autoloader.php';
Zend_Loader_Autoloader::getInstance()->setFallbackAutoloader(true);
// 設定處理的字元編碼
setlocale(LC_ALL, 'zh_TW.UTF-8');
// 指定路徑
$indexDir = realpath(__DIR__ . '/index');
$htmlDir = realpath(__DIR__ . '/html');
// 設定預設的分詞分析器
Zend_Search_Lucene_Analysis_Analyzer::setDefault(new Phpbean_Lucene_Analyzer());

這裡有個很重要的部份，就是設定預設的中文分詞分析器，因為它會影響如何在索引中建立正確的中文分詞關鍵字。 在網路上搜尋 Zend_Search_Lucene 加上中文分詞的話，大概都可以找到一個 Phpbean_Lucene_Analyzer 的 PHP 類別，其完整內容請參考 Phpbean/Lucene/Analyzer.php (內容太長就不直接列出了) 。 它的三個方法說明如下：

  • setCnStopWords() - 設定中文詞組斷字，基本上很少會去使用這個方法。

  • reset() - 重置被檢索的文件內容，也就是把一些常見的斷字換成空格字元。

  • nextToken() - 包含關鍵的中文分詞演算法，告訴檢索程式如何去找到下一個 token 。

在建立索引前，我們就用以下程式碼來設定預設的分詞分析器：

1

Zend_Search_Lucene_Analysis_Analyzer::setDefault(new Phpbean_Lucene_Analyzer());

註：詳細的中文分詞原理可以在 Google 上找到很多資料。

建立索引

現在我們要撰寫建立索引的程式碼，這裡是由 build_index.php 來負責：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?php
// 初始化
require __DIR__ . '/init.php';
// 在索引目錄中建立索引相關檔案
$index = Zend_Search_Lucene::create($indexDir);
// 取得要建立索引的 HTML 檔案所在路徑
$iterator = new DirectoryIterator($htmlDir);
// 一一為 HTML 檔案建立索引
foreach ($iterator as $entry) {
    /* @var $entry DirectoryIterator */
    if ($entry->isFile()) {
        $file = $entry->getPath() . '/' . $entry->getFilename();
        echo $file, "\n";
        // 載入 HTML 檔案，並產生索引文件
        $doc = Zend_Search_Lucene_Document_Html::loadHTMLFile($file);
        // 加入檔案名稱欄位，但不加入索引 (僅儲存值)
        $doc->addField(Zend_Search_Lucene_Field::unIndexed('filename', $entry->getFilename(), 'utf-8'));
        // 加入建立時間欄位，但不加入索引 (僅儲存值)
        $doc->addField(Zend_Search_Lucene_Field::unIndexed('created', time(), 'utf-8'));
        // 加入更新時間欄位，但不加入索引 (僅儲存值)
        $doc->addField(Zend_Search_Lucene_Field::unIndexed('updated', time(), 'utf-8'));
        // 加入內容欄位，但不儲存 (僅加入索引)
        $doc->addField(Zend_Search_Lucene_Field::unStored('content', $doc->getHtmlBody(), 'utf-8'));
        // 將索引文件加入索引檔案中
        $index->addDocument($doc);
    }
}
// 完成索引的建立
$index->commit();

build_index.php 執行的方式，是在 command line 模式下，輸入以下指令：

1

php build.php

這樣一來就可以將索引建立好了。 建立索引時有幾點要注意：

  • 資料來源不見得一定要是 HTML 檔案，也可以直接從資料庫中取得。

  • 索引欄位 (field) 有分以下幾種：

    • Keyword - 會加入索引並儲存其內容，但不會被分析，而是直接用來做關鍵字。

    • UnIndexed - 不加入索引，但會儲存其內容，所以會在搜尋結果中出現。

    • Binary - 不加入索引，也不會被分析，但會儲存其內容，所以會在搜尋結果中出現。

    • Text - 會加入索引，也會儲存其內容，而且會被分析器分析；一般是用來顯示搜尋的結果，例如摘要。

    • UnStored - 會加入索引，也會被分析器分析，但不儲存其內容；通常是用來處理文章主體 (內容較長的部份) 。

  • 最後一定要做 commit 動作，讓建立索引的動作能正確結束。

搜尋索引

索引建立完成後，就可以用來搜尋了，這邊是由 find.php 來處理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php
// 初始化
require __DIR__ . '/init.php';
// 打開索引檔案
$index = Zend_Search_Lucene::open($indexDir);
// 取得關鍵字
$keyword = $_GET['keyword'];
// 從關鍵字中建立 query 物件
$query = Zend_Search_Lucene_Search_QueryParser::parse($keyword, 'utf-8');
// 搜尋索引
$hits = $index->find($query);
// 如果有找到對應的資訊，就加到結果集中
$result = array();
foreach ($hits as $hit) {
    $result[] = array(
        'id' => $hit->id,
        'score' => $hit->score,
        'title' => $hit->title,
        'filename' => $hit->filename,
        'created' => $hit->created,
        'updated' => $hit->updated,
    );
}
// 以 JSON 格式輸出結果
echo json_encode($result);

find.php 在找到我們所需要的資訊後，會將它以 JSON 格式輸出。

介面

這裡我用了很簡單的搜尋介面，也就是 index.php ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Zend_Search_Lucene Test</title>
    </head>
    <body>
        <form action="find.php" method="get">
            <label>關鍵字： <input type="text" name="keyword" value="" /></label>
            <input type="submit" value="查詢" />
        </form>
        <div id="result"></div>
        <script src="jquery.js"></script>
        <script src="lucene.js"></script>
    </body>
</html>

而 JavaScript 的部份則用上了 jQuery ，處理表單 AJAX 則是由 lucene.js 負責：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

(function ($) {
    $(function () {
        $('form').submit(function (e) {
            $result = $('#result');
            $result.html('');
            $.getJSON(
                'find.php',
                $(this).serializeArray(),
                function (json) {
                    var html = '<ul>';
                    for (var i = 0; i < json.length; i ++) {
                        html += '<li><a href="html/';
                        html += json[i].filename + '">';
                        html += json[i].id + ' - ';
                        html += json[i].score + ' - ';
                        html += json[i].title + '</a></li>';
                    }
                    html += '</ul>';
                    $result.html(html);
                }
            );
            e.preventDefault();
        });
    });
})(jQuery);

測試時，請直接在畫面上的關鍵字欄位中輸入想要查詢的內容，再按下搜尋即可。 希望這樣的介紹能讓大家大致瞭解全文檢索初步的觀念與實作，詳細的資訊就請參考官方手冊的 Zend_Search_Lucene 的套件介紹。

]]>