Articles

地點：鹿港‧天后宮

機身：Sony A550

鏡頭：Carl Zeiss 135mm T* F1.8

快門：1/100s

光圈：F2.8

ISO：200

曝光補償：-0.7步

這張照片其實是今年的端午節在鹿港所拍攝的，直覺看起來要拍這張照片似乎沒有太多的困難~ 然而事實卻並非如此~

首先~ 這個角度當時在我的心中早就已經構圖好了，所以當我站在那個角度之後~ 接下來就是等一位位民眾在進行插香的動作時，而我同時瞬間按下快門即可~ 但問題就來了~ 因為整張圖的左半邊暗色系偏多~ 所以我希望插香民眾「手」的肢體是呈現較白皙的皮膚色~ 當然這完全無法控制.. 同時要注意到整張圖我不希望有「多餘」的事物出現在畫面當中~ 光這兩點我就必須站在原地持續拍攝到滿意為止~

而上圖就是我最滿意的一張，不僅滿足上述所提到的條件~ 同時手的肢體胖瘦適中而且還戴著「佛珠」，所以直到最後拍到這張我才滿意的離去。

圖片來源：http://www.dailymail.co.uk/news/index.html

剛剛看到一篇網路蘋果新聞，該新聞的標題為：「5歲小女孩　隨手挖出1.6億年前化石」，重點就在於該化石為何物？點進去看會發現該名小女孩挖到了1.6億年前的「鸚鵡螺」化石，這對一般人來說或許沒什麼值得注意的，但如果你有在玩攝影或是設計相關背景的話，我想當你看到「鸚鵡螺」時應該也會馬上聯想到「黃金分割比例」(golden section proportions)，那何謂黃金分割比例？有無實際例子？當然有，而且生活上隨處可見~ 不過在介紹實例之前，先來了解一下何謂黃金分割比例？根據「設計幾何學」一書的解釋，在19世紀的一位德國心理學家「費希納」(Gustav Fechner)，還有1908年的拉羅(Édouard Lalo)都曾對於不同比例的「矩形」偏好進行了實驗，測試人們對於不同比例的矩形偏好，結果在「最喜歡的矩形」項目中由「5:8」比例的矩形勝出，也就是「1:1.618」俗稱所謂的「黃金分割比例」。

對Apple的iCloud icon有印象嗎？它就是採用黃金分割比例所設計出來的~

圖片來源：iCloud Logo Infused With Golden Ratio

而且不只是設計，就在數學程式裡的「費氏數列」(Fibonacci Number)中兩兩相鄰的數字也存在著黃金分割比例的比值，例如：「0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 …」，此數列裡兩相鄰數字的比值會逐漸接近黃金分割比例，也就是「1:1.618」。

若再從攝影構圖的角度來看，其實只要掌握簡單的黃金分割構圖，基本上都能獲得一張還不錯看的照片，不過這當然是在有準焦的前提之下!

圖片來源：Golden Section and Photography

最後為何看到「鸚鵡螺」化石會聯想到「黃金分割比例」呢？因為「鸚鵡螺」體腔內的生長紋路也是相當接近「黃金分割比例」，當然還有許多關於黃金分割比例的實例，如電影、建築、音樂等...。

圖片來源：浅谈apple设计中的黄金分割

所以身為工程師的你，仍然覺得設計師就是畫畫圖而已嗎？其實可以多請教他們為何採用這樣的設計方式？為何箭頭的方向在上方？為何採用溫暖的色系？.....

PhoneGap 最初是由「Nitobi」這間位於加拿大的公司在2008年8月所發起的，而到2010年中IBM也開始參與投入研發。它是一套能讓你選擇採用「New BSD」或「MIT」license的Open Source Mobile Framework，它主要的目的在於能讓開發人員透過一些Web技術(HTML+JavaScript)來存取行動裝置的Native API，而且它支援了Android、iOS、Blackberry、WebOS、Windows Phone 7等平台的支援，就在上個月的29日它發佈了PhoneGap 1.0.0。

開發人員只需要撰寫一份HTML+JavaScript的程式，就可以在這些平台上存取這些行動裝置所提供的功能，如：Camera, Compass, Contacts等...，然而為何需要有這個Framework的存在呢？這最大的原因就在於我們現階段仍無法透過Web來存取上述這些裝置功能，而W3C雖然正在針對行動裝置制定標準的Device APIs，不過現階段仍無法透過Web來存取照相機或相簿等功能(Android 3.0將支援Media Capture API)，所以你可以將PhoneGap當做是一個「過渡性」的產品，或者等未來Web都已支援這些Native APIs，但卻有一致性或相容性等其它問題時，也許那時PhoneGap仍然是一個好的選擇，這就像是HTML5與Flash現階段的情況，看看Google+首波合作的遊戲商就可以知道了.. 16款遊戲中有15款採用Flash來開發。

探討 PhoneGap 1.0.0 for Android

本文並不是一篇教你如何使用PhoneGap建立HelloWorld的無痛上手，而是將深入探討PhoneGap 1.0.0在Android平台上如何扮演Web與Native API之間的橋梁角色，有興趣的朋友請至Github - phonegap下載。

本文會採用Notification.alert這個簡單的API來說明這之間的流程，至於為什麼JavaScript上早已經有alert功能，為何還需要Notification.alert呢？這兩者之間最大的差別就在於Notification.alert可以讓你「客製化」一些資訊，如：標題(title)或按鈕上的文字(buttonLabel)。

下述是PhoneGap所定義的Notification.alert的API

navigator.notification.alert(message, alertCallback, 〔title〕, 〔buttonName〕)

用法如下：

function alertDismissed() {
    // do something
}
navigator.notification.alert(
    'You are the winner!',  // message
    alertDismissed,         // callback
    'Game Over',            // title
    'Done'                  // buttonName
);

JS - Notification.prototype.alert

接著直接將PhoneGap的JS原始碼翻來看(phonegap-1.0.0.js)，它會執行「PhoneGap.exec」。

Notification.prototype.alert = function(message, completeCallback, title, buttonLabel) {
    var _title = (title || "Alert");
    var _buttonLabel = (buttonLabel || "OK");
    PhoneGap.exec(completeCallback, null, "Notification", "alert", [message,_title,_buttonLabel]);
};

JS - PhoneGap.exec

這部份就是JavaScript如何和Native API溝通的橋梁，這裡有個「callbackId」，它是由「service name + counter」所組成的，例：Notification2，並以此callbackId為key，以callback funcation為value先暫存在PhoneGap.callbacks的陣列。

PhoneGap.exec = function(success, fail, service, action, args) {
    try {
        var callbackId = service + PhoneGap.callbackId++;
        if (success || fail) {
            PhoneGap.callbacks[callbackId] = {success:success, fail:fail};
        }
        
        var r = prompt(PhoneGap.stringify(args), "gap:"+PhoneGap.stringify([service, action, callbackId, true]));

而重點就在於下面這一行：

var r = prompt(PhoneGap.stringify(args), "gap:"+PhoneGap.stringify([service, action, callbackId, true]));

「prompt」？沒錯~ PhoneGap 1.0.0 for Android就是透過JavaScript的「prompt」function將相關參數傳到原生的Java程式中，為何能這樣達成？原因就在於Android所設計的WebView元件，它讓開發人員能夠透過WebChromeClient來自訂JavaScript中的alert, confirm, prompt等功能的處理方式，而上述函式實際傳送到Java中的參數其實就如下圖所示：

DroidGap.java - onJsPrompt

上述所提供的「prompt」實際上就是呼叫DroidGap.java中的「onJsPrompt」函式(line:868)，更確切的說「onJsPrompt」是被宣告在GapClient(inner class)中，詳細的細節請參考Source code。

public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

而「onJsPrompt」處理的方式就是先判斷所傳進來的「defaultValue」是否為「gap:」字串開頭，以本文的為例就是將「gap:['Notification','alert','Notification2',true]」進行拆解，再透過「pluginManager.exec」去執行。

if (reqOk && defaultValue != null && defaultValue.length() > 3 && defaultValue.substring(0, 4).equals("gap:")) {
       	JSONArray array;
        try {
        	array = new JSONArray(defaultValue.substring(4));
        	String service = array.getString(0);
        	String action = array.getString(1);
        	String callbackId = array.getString(2);
        	boolean async = array.getBoolean(3);
        	String r = pluginManager.exec(service, action, callbackId, message, async);
        	result.confirm(r);
        } catch (JSONException e) {
        	e.printStackTrace();
        }
}

PluginManager.java

基本上在PhoneGap for Android的原始碼中，它所提供的各式API也都稱為Plugin，意指為：Notification、Compass、Camera..等都稱為Plugin，實際上這些一個個的功能也都繼承於Plugin class(它實作IPlugin介面)，所以該PluginManager就是用來管理這些Plugin。

在「pluginManager.exec」的函式中，主要就是取得這些特定的Plugin物件，並透過「plugin.execute」來執行。

PluginResult cr = plugin.execute(action, args, callbackId);  //line:119 in PluginManager.java

Notification.java

由於本文以Notification為例，所以上述函式(plugin.execute)會執行「Notification.execute」。

public PluginResult execute(String action, JSONArray args, String callbackId) {
		PluginResult.Status status = PluginResult.Status.OK;
		String result = "";		
		
		try {
			if (action.equals("beep")) {
				this.beep(args.getLong(0));
			}
			else if (action.equals("vibrate")) {
				this.vibrate(args.getLong(0));
			}
			else if (action.equals("alert")) {
				this.alert(args.getString(0),args.getString(1),args.getString(2), callbackId);
				PluginResult r = new PluginResult(PluginResult.Status.NO_RESULT);
				r.setKeepCallback(true);
				return r;
			}

從「Notification.execute」可以得知，它同時處理了Notification中的「beep」、「vibrate」、「alert」等功能，而實際的「alert」功能實現如下：

public synchronized void alert(final String message, final String title, final String buttonLabel, final String callbackId) {

	final PhonegapActivity ctx = this.ctx;
	final Notification notification = this;
		
	Runnable runnable = new Runnable() {
		public void run() {
	
			AlertDialog.Builder dlg = new AlertDialog.Builder(ctx);
			dlg.setMessage(message);
			dlg.setTitle(title);
			dlg.setCancelable(false);
			dlg.setPositiveButton(buttonLabel, new AlertDialog.OnClickListener() {
				public void onClick(DialogInterface dialog, int which) {
					dialog.dismiss();
					notification.success(new PluginResult(PluginResult.Status.OK, 0), callbackId);
				}
			});
			dlg.create();
			dlg.show();
		};
	};
	this.ctx.runOnUiThread(runnable);
}

實際上透過Android原生的「AlertDialog」來呈現對話框的介面。

至於點擊按鈕之後的callback應用就留待有興趣的朋友自行研究了~ 不過簡單來說它就是透過前端的Ajax(採用Recursive function)不斷地向原生Java中的CallbackServer.java(ServerSocket)請求，若有資訊(callbackId等)就回傳給前端的Ajax。

最近試著研究了一下jQuery Mobile，發覺它目前(Beta1)沒有針對listview元件提供Swipe to Delete的效果，還好jQuery Mobile所支援的Touch Event已經包含了Swipe Event，如此~ 雖然官方尚未正式支援該效果，不過我們可以自行手動撰寫出這樣的效果!

下述程式已在iOS和Android行動裝置測試過：

實際測試範例

部分程式

function delItem(e)
{
        $(e).remove();
}
$(function()
{
        $('div').live('pageshow',function(event, ui)
        {
                if ( event.target.id.indexOf('swipedelete') >= 0)
                {
                        $('.aDeleteBtn').remove();
                        $('ul li.t').bind('swipeleft', function(e)
                        {
                                $('.aDeleteBtn').remove();
                        });
                        $('ul li.t').bind('swiperight', function(e)
                        {
                                var $li = $(this);
                                $('.aDeleteBtn').remove();
                                var id = $li.attr('id');
                                var $aDeleteBtn = $("<a href=\'javascript:delItem("+id+")\'>Delete</a>").attr({'class': 'aDeleteBtn ui-btn-up-r'});
                                $li.prepend($aDeleteBtn);
                        });
                }
        });
})

至於Touch-Event有沒有正式規格呢？其實是有的，可以參考W3C - Touch Events Specification，而且iOS 2.0以後早就均支援這些Touch Event(Safari Web Content Guide: Handling Events)

厭倦了針對任一行動平台就需要撰寫特定的程式碼了嗎？如果是的話~ 可以試試jQuery Mobile。

參考資源

Adding iPhone style swipe to delete button to a listview component in jQuery Mobile

先來談談為什麼我決定下手買下它... iPad2？

這最大的原因在於我有在玩攝影...

反過來想~ 那為何有在玩攝影需要它？

因為我需要一台輕巧、方便攜帶、能同步照片並呈現在較大的螢幕上來檢視，這裡我點出了我的需求了...

現在重新思考這個需求~

1. Notebook？不適合我.. 因為重量太重了些，而且我不需要鍵盤。

2. Android平板？我覺得它的效能和價格比沒有iPad2來的好。

3. 等iPad3內建USB？不... 當我看到有iPad Camera Connection Kit之後，我就覺得iPad3會內建USB的機率不高了...。

考慮上述這三個關鍵，所以我下手帶它回家了...

而且iPad Camera Connection Kit提供了SD卡和USB插槽，這不僅解決照片同步的問題，帶著它還能將朋友拍的照片同步到我的iPad2，就不需要請對方回到家後再傳照片了~ (心想這有多麼方便!)

重點.. 它居然還支援了Sony的RAW檔格式!! 真是佛心來的... Orz

如果你也有在玩攝影~ 強烈推薦帶它回家吧!!

除了上述所提到的... 就算你有iPhone，你還是會比較喜歡用iPad來瀏覽網頁、看YouTube~

雖然它就是一台「大」iPhone，但這個「大」幾乎會讓你忘掉你的iPhone的...