地鐵暗棋開發日誌: 3月 2013

2013年3月30日星期六

解決連結清單的「請修正此表單中的錯誤」問題

這幾天編輯Blogger的連結清單，應該都會顯示「請修正此表單中的錯誤」的字樣，如下：

解決方法很簡單，示範如下：

2013年3月28日星期四

減少Windows Phone系統上PhoneGap專案的應用程式需求

當你將Windows Phone APP第一次上架，或許會糾結於介紹頁面那一大串應用程式需求：

但天可憐見，你明明沒有使用到這些功能，卻要使用者吐出這些權限，雙方難免都心有疙瘩，為了避免這樣的尷尬事，以下便簡單示範如何縮減Windoes Phone的PhoneGap專案所要求的權限：

Visual Studio 2010專案的編譯版本改為Release

如果你跟我一樣沒有趕上升級Windows 8的限時特賣列車，又想開發Windows Phone APP的話，那麼勢必只能將就地使用Visual Studio 2010 for Windows Phone。基本上可以選擇編譯Debug版或Release版，預設為Debug，以下簡單示範如何改為Release：

2013年3月26日星期二

若你也有在開發遊戲APP，請先瀏覽這篇文章。其中大意是說從去年開始，台灣推行一項新的法令，要求所有市面上的遊戲都需要做分級並線上登陸到官方分級網站，否則將可能被強制下架。

Google Play沒有審核制度，因此尚未看到對此條法令的反應，但Windows Phone市集則否，當你提交遊戲應用時，市集會提醒你各國的分級要求（可參考這篇文章：Windows Phone 遊戲分級設定），其中特別提及台灣的此條特殊法令，需要開發者自行備案。基於我們都是守法的好公民，以下簡單示範分級登陸的流程：

2013年3月25日星期一

申請BlackBerry World的開發者帳號

以下簡單示範如何申請黑莓世界（BlackBerry World）的開發者帳號：

解決"The connection to the server was unsuccessful"的問題

Android的PhoneGap專案有可能會遇到"The connection to the server was unsuccessful"此一錯誤訊息，解決方法是在MainActivity.java檔的onCreate()內盡可能加大timeout時間，如下：

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
        
    // 解決 "The connection to the server was unsuccessful" 的問題
    super.setIntegerProperty("loadUrlTimeoutValue", 900000000); 
        
    super.loadUrl("file:///android_asset/www/index.html" );
}

2013年3月24日星期日

取得Google Code的使用者帳號和密碼

Google Code的界面不是很友好，之前為了找SVN的使用者帳號密碼翻來覆去，好不容易才找著（或者是我特別笨拙？），特別在此紀錄，避免日後又重蹈覆轍。

音效檔播放的問題

PhoneGap提供的播放音樂API似乎存在一些效能和相容性問題，在Windows Phone上會明顯延遲；在Android上的播放次數有限制，超過便無法播放；在IOS上則是單純播放都有問題（1.8.1版）。因此須另找替代方案：

Windows Phone上的專案若只有播放單一音效的需求，可考慮採用播放系統提示聲的API，因為此API不會造成延遲問題，而且可以自行更換提示聲音效檔：

navigator.notification.beep( 1 );  // 播放提示音效一次

至於其他平台，可以先將要播放的音效檔定義在html檔，而後再呼叫使用。譬如說要播放click.wav這個音效檔，可以在html檔這麼定義：

<audio id="clickAudio" src="click.wav" preload="auto"></audio>

然後在要播放的地方加入下面這一句：

document.getElementById( "clickAudio" ).play(); // 播放物件

如此便能播放了。實測下來，在Chrome和Firefox OS上播放順暢，不過在IOS上第一次播放會略有延遲，仍不夠理想，需要再想辦法改進改進。

至於Android系統，很遺憾不支援上面的做法，需要呼叫PhoneGap API，操作如下：

1. 撰寫取得檔案路徑的javascript funciton：

// 取得Phonegap可識別的檔案路徑 .
function getPhoneGapPath() 
{
    var path = window.location.pathname;
    path = path.substr( path, path.length - 10 );
    return 'file://' + path;
}

2. 撰寫透過PhoneGap API播放音效的javascript function：

// 藉由PhoneGap API來播放音效檔
function playAudio( url )
{    
    // Play the audio file at url
    var my_media = new Media( url,
                          // success callback
                          function()
    {
        console.log( "playAudio():Audio Success" );
    },
    // error callback
    function( err )
    {
        console.log( "playAudio():Audio Error: " + err );
    } );

    my_media.play(); // 開始播放

    //my_media.stop();
    //my_media.release();
}

3. 將音效檔（範例中的檔名為click.wav）丟入存放index.html的資料夾，而後在需要播放音效的地方呼叫剛剛寫的function：

playAudio( getPhoneGapPath() + "click.wav" );

2013年3月23日星期六

提交APP到Firefox OS Marketplace

延續上一篇，現在來示範如何提交APP到Firefox Marketplace，簡易步驟如下：

1. 首先登入Firefox的開發者帳號，而後進入提交頁面：

建立Firefox OS的APP專案

基於嘗鮮心理，稍微摸了一下Firefox OS的APP專案製作，初步感覺與Chrome應用程式大同小異，皆以一個manifest檔為核心，且都有區分Hosted Apps和Packaged Apps，以下僅列簡易製作步驟：

IOS上的觸摸事件

IOS上沒有滑鼠事件（Mouse Event），只有觸摸事件（Touch Event），因此若要將Windows Phone或Android的PhoneGap專案移植到IOS，須稍做修改，簡易步驟如下：

1. 先找到程式碼中的滑鼠事件定義，譬如說：

// 滑鼠左鍵按下的事件 for Windows Phone, Android, ...
document.onmousedown = function( event )
{
    try
    {
        var x = event.pageX + document.documentElement.scrollLeft;
        var y = event.pageY + document.documentElement.scrollTop;
        mousedown( x, y ); // 在(x,y)位置點擊後的事件處理
        
    }
    catch ( err )
    {
        errorMessage.innerHTML += "發生錯誤: " + err.stack + "<br>";
    }
}

2. 在此滑鼠事件定義的旁邊添加相對應的觸摸事件：
（touchstart對應mousedown、touchmove對應mousemove、touchend對應mouseup）

// 對應滑鼠按下的觸摸事件 for IOS
document.ontouchstart = function( event )
{
    try
    {
        var touch = event.touches[0];
        var x = touch.clientX + document.body.scrollLeft;
        var y = touch.clientY + document.body.scrollTop;
        mousedown( x, y ); // 在(x,y)位置點擊後的事件處理
        
    }
    catch ( err )
    {
        errorMessage.innerHTML += "發生錯誤: " + err.stack + "<br>";
    }
}

3. 測試是否可行，打完收工。

MAC OS X Snow Leopard上建立Xcode的PhoneGap專案

由於我本身用的是MAC OS X 10.6.8，沒有繼續升級，Xcode僅支援到4.2版，因此以下僅示範4.2版的Xcode如何建立PhoneGap專案：

1. 首先當然是下載並安裝Xcode，若你的作業系統版本跟我一樣是Snow Leopard，可直接使用以下BT連結：

http://thepiratebay.se/torrent/6721955/

不依賴PhoneGap API前提下設置IOS系統語言

若你跟我一樣，MAC OS X的版本停留在10.6.8，那麼勢必也只能使用4.2版以下的Xcode，進一步說，也就是只能加載1.8版以前的PhoneGap專案。不幸的是，1.8版的PhoneGap API尚未成熟，其中一項，便是無法獲得系統當前語言。

然而山不轉路轉，我們依然有辦法獲取系統語言，只是需要碰觸到一丁點的原生程式碼（對我來說，Object C完全是火星文般的存在，非萬不得已，最好是眼不見為淨），簡易步驟如下：

1. 開啓Classes裡頭的MainViewController.m。

2. 在webViewDidFinishLoad()內加入數行程式碼，如下：

- (void) webViewDidFinishLoad:(UIWebView*) theWebView 
{
     // only valid if ___PROJECTNAME__-Info.plist specifies a protocol to handle
     if (self.invokeString)
     {
        // this is passed before the deviceready event is fired, so you can access it in js when you receive deviceready
        NSString* jsString = [NSString stringWithFormat:@"var invokeString = \"%@\";", self.invokeString];
        [theWebView stringByEvaluatingJavaScriptFromString:jsString];
     }
     
     // Black base color for background matches the native apps
     theWebView.backgroundColor = [UIColor blackColor];
    
    // ------------- 加入開始 -----------------
    
    // 取得系統語言 
    NSString * language = [[NSLocale preferredLanguages] objectAtIndex:0];
    
    // 組合呼叫用的字串
    NSString * front = [NSString stringWithFormat:@"setDefaultLanguage(\""];
    NSString * back = [NSString stringWithFormat:@"\");"];
    NSString * temp = [front stringByAppendingString:language];
    NSString * jsFunctionString = [temp stringByAppendingString:back];
    
    // 呼叫設置語言的javascript funciton
    [theWebView stringByEvaluatingJavaScriptFromString:jsFunctionString]; 
    
    // ------------- 加入結束 -----------------

    return [super webViewDidFinishLoad:theWebView];
}

3. 一樣是編寫設置語言的javascript function：

// 設置預設語言
function setDefaultLanguage( language )
{
    if ( ON_DEVICE ) // 實機
    {
        if ( language.toUpperCase().match( "TW" ) ||
            language.toUpperCase().match( "HK" ) ) 
        {
            gLanguageIndex = ZH; // 繁體中文
        }
        else if ( language.toUpperCase().match( "CN" ) )
        {
            gLanguageIndex = CN; // 簡體中文
        }
        else if ( language.toUpperCase().match( "EN" ) )
        {
            gLanguageIndex = EN; // 英文
        }
        else if ( language.toUpperCase().match( "JA" ) ||
                  language.toUpperCase().match( "JP" ) )
        {
            gLanguageIndex = JA; // 日文
        }
        else if ( language.toUpperCase().match( "KO" ) )
        {
            gLanguageIndex = KO; // 韓文
        }
        else
        {
            gLanguageIndex = EN; // 實機的預設語言
        }
    }
    else // 非實機
    {
        gLanguageIndex = TW; // 非實機的預設語言
    }
}

4. 編譯後即可看到成果。

2013年3月22日星期五

IOS和Android上取得系統語言

IOS和Android平台，可以利用PhoneGap(2.2版以上)所提供的API來獲取當前系統語言，簡易步驟如下：

1. 設置 device ready事件：

// 初始化動作，啓動程式時呼叫
function init()
{
    if ( ON_DEVICE )
    {
        document.addEventListener( "deviceready", onDeviceReady, false );
    }
}

2. 定義device ready事件發生時所呼叫的function：

var gLocaleName; // 取得的區域名稱

function onDeviceReady()
{
    // 因為Windows Phone 7不支援此API，所以做個區隔
    if ( gDeviceName == ANDROID || gDeviceName == IOS )
    {
        navigator.globalization.getLocaleName(
            function ( locale ) { gLocaleName = locale.value; },
            function () { alert( "Error getting locale\n" ); }
        );
 
        setDefaultLanguage( gLocaleName ); // 以區域名稱來設置語言
    }
}

3. 定義設置語言的function：

// 設置預設語言
function setDefaultLanguage( language )
{
    if ( ON_DEVICE ) // 實機
    {
        if ( language.toUpperCase().match( "TW" ) ||
             language.toUpperCase().match( "HK" ) ) 
        {
            gLanguageIndex = ZH; // 繁體中文
        }
        else if ( language.toUpperCase().match( "CN" ) )
        {
            gLanguageIndex = CN; // 簡體中文
        }
        else if ( language.toUpperCase().match( "EN" ) )
        {
            gLanguageIndex = EN; // 英文
        }
        else if ( language.toUpperCase().match( "JA" ) )
        {
            gLanguageIndex = JA; // 日文
        }
        else if ( language.toUpperCase().match( "KO" ) )
        {
            gLanguageIndex = KO; // 韓文
        }
        else
        {
            gLanguageIndex = EN; // 實機的預設語言
        }
    }
    else // 非實機
    {
        gLanguageIndex = TW; // 非實機的預設語言
    }
}

4. 每次啓動可取得當前語言gLanguageIndex，再隨之做調整即可。

2013年3月21日星期四

Windows Phone應用市集提交結果告知信

當我們將APP提交到Windows Phone應用市集後，會轉入上面的訊息頁面，它告訴我們此時能做的，就是耐心等待。

等待三至五天後，會收到從開發者中心寄來的通知信件，裡頭可能有兩種結果。

2013年3月20日星期三

利用Google Drive來擺放Chrome App的網頁

Chrome APP分兩種，一種是Packaged Apps，一種是Hosted Apps。前者是本地端應用，可以將所有文件都包覆在壓縮檔內，無須上網便能直接啟動；而後者則是遠程端應用，壓縮檔內可以只放描述檔manifest.json，啟動後會直接連往指定的首頁，簡而言之，可以視為一種封裝後的書籤。

我後來選擇包裝成Hosted App，因為一來包裝簡便，二來更新容易，只需要更新伺服器端的js檔，便能同步更新用戶端。

而若要製作Hosted App，首先有個問題：上哪找網頁存放空間？js檔好解決，因為js檔可當作檔案被存取，但html檔不能被當作檔案，否則瀏覽器會直接顯示html的原始碼。

探訪了幾個免費存放網頁的服務，較著名的Google Site和DropPages都不能擔負此重責大任，前者僅能提供格式受限的網頁，後者則會擅改html和js檔。探查結果，大概只有GitHub Pages和Google Drive符合需求。在這邊我選擇使用後者來存放html檔，而js檔則置放於Google Code，以提醒自己不至於疏忽更新。

Google Drive原則上屬於網路硬碟，若要存放公開網頁，需要一些步驟，簡易流程如下：

Windows Phone改寫回上一頁的行為

因為PhoneGap天生侷限，對換頁反應比較遲鈍，因此地鐵暗棋所有頁面轉換都在同個檔案的canvas上進行。而這麼做雖然有效避免頁面切換的延遲時間，但也會造成一些問題，主要是回上一頁的預設行為與我們預期將不再相符。

譬如說我們希望不論身處何處，只要按上一頁的按鈕，都能回到程式主頁，但系統並不知曉程式還有頁面之分，所以會一律跳回Live Title頁面，導致程式結束。

所幸，我們可以藉由改寫回上一頁的行為，來達到符合預期的頁面切換。PhoneGap有提供回上一頁的API，在Android系統上可直接呼叫使用，但並沒有很好的支援Windows Phone 7，因此還是直接修改原始碼會比較具有彈性。簡易流程如下：

1. 我們可利用InvokeScript()容易丟出例外的特性，在任一js檔撰寫一個回上一頁的function：

// 進行回到上一頁的處理
function goBack()
{
    if ( isStartPageNow() )
    {
        navigator.app.exitApp(); // 以InvokeScript執行此句會造成例外
    }
    else
    {
        showPage( START_PAGE ); // 秀出開始頁面
    }
}

2. 開啟專案中的CordoveView.xaml.cs，修改page_BackKeyPress()：

void page_BackKeyPress( object sender, CancelEventArgs e )
{
    try
    {
        CordovaBrowser.InvokeScript( "goBack", "" ); // 若有例外發生代表正處於開始頁面
        e.Cancel = true; // 取消預設回到上一頁的行為
        return;
    }
    catch ( Exception ex )
    {
        // 代表正處在開始頁面，故不處理繼續執行，以結束程式。
    }
    
    // ------ 以下程式碼不動 ------

3. 重編譯後即可見到效果。

訂閱：文章 (Atom)

2013年3月30日 星期六

2013年3月28日 星期四

2013年3月26日 星期二

2013年3月25日 星期一

2013年3月24日 星期日

2013年3月23日 星期六

2013年3月22日 星期五

2013年3月21日 星期四

2013年3月20日 星期三

2013年3月30日星期六

2013年3月28日星期四

2013年3月26日星期二

2013年3月25日星期一

2013年3月24日星期日

2013年3月23日星期六

2013年3月22日星期五

2013年3月21日星期四

2013年3月20日星期三