JQuery mobile跟Sencha touch都是蠻完整的mobile web framework, 兩者各有擅長, 比較起來以開發的角度我比較喜歡JQuery所標榜的"Write less, Do more"的哲學下的架構, 而不喜歡Sencha touch把一堆html寫到code裡面去, 但Sencha touch又有比較好的UI look and feel

以tab panel為例,

Sencha touch:

Photo_11-10-21_1_33_28
jQuery mobile:
Photo_11-10-21_12_25_52

這兩個作法大異其趣 

Sencha 的HTML 內容

裡面除了script以外根本就是空的, UI的創建放在app.js(以這範例而言)裡如下:

https://gist.github.com/1301828.js?file=gistfile1

Tabs的內容在哪? items裡分別就是兩個tab, html直接以字串的形態寫在裡面, 老實說, 我覺得這很醜, 也容易出問題, 如果頁面的內容是相當複雜的, 這樣並不是很好

再看看jQuery Mobile的作法:

這份source code有點偷懶, 剪剪貼貼過來的, 不過其實就這麼一個html, 並不需要寫額外的javascript code, 乾淨多了  

如果也可以用類似的寫法寫Sencha touch的UI似乎應該會比較好一點, 像是這樣寫:

做了個實驗, 剛寫下這段code把上面那段轉成跟第一個範例一樣的畫面:

https://gist.github.com/1301855.js?file=gistfile1

看來如果再多層包裝其實也不用醜醜的通通把UI hard code到js codes裡面去

_2011-09-29_12

Looks familiar? It’s not Google+. It’s DIASPORA. An open source project that implements a distributed social networking service. This project was announced on APRIL 24, 2010 (Just right after Facebook f8 2010 that is at APRIL 21). Alpha version was released at NOV 23, 2010 (two days before my birthday :P). 

According to this, Mark Zuckerbug also donated to it just because it’s a cool idea.

It’s built on Ruby on rails. So it might be not so difficult to port it to Heroku platform which is a nice RoR host (althrough it still took me some time). It might be easier than build from scratch on a Linux. 

I’m a newbie to these two (Heroku and DIASPORA). I’m also not familar with RoR. Here records steps I tried. 

create an application on heroku

First, you need to create an application on Heroku. There are several platform stack on Heroku. Cedar stack might be the newest and most powerful one. It supports several languages and frameworks. And It also makes it very easy to deploy RoR applications. 

You need to install heroku CLI before creating an application. And use “heroku login” to login to your heroku account.

Run the following command to create a new cedar application (assume application name is “mysocialy”) –

heroku create –stack cedar mysocialy

After the application created, you’ll have a url “http://mysocialy.herokuapp.com/” for your site. And a git repository: [email protected]:mysocialy.git

import source codes

Get DIASPORA* source codes from git hub:

git clone git://github.com/diaspora/diaspora.git

Get your source codes from Heroku git repository (you’ll get an empty folder):

git clone [email protected]:mysocialy.git

If you have trouble to download from Heroku. Try to use “heroku keys:add” to add your ssh public key and try again.

Copy all files except “.git” folder from “diaspora” to “mysocialy”.

Initial configuration

Make new configuration files from example.

cd config

mv application.yml.example application.yml  

mv database.yml.example database.yml

Edit application.yml. Make “pod_url” to your host. In this case:

pod_url: “http://mysocialy.herokuapp.com/”

Deploy codes

Add and commit files:

git add .

git commit -am ‘initial import’

Push them to Heroku

git push origin master

The coolest thing that Heroku does is that it makes deploy codes so easy. All you need to do is to push your codes to its git repository. And it could also install all related modules for you (that is configured in Gemfile). Super easy.

Ok, I must admit that I lie a little bit. There might be some problems. After I pushes all codes to Heroku, I found there is an error that it couldn’t find 'pg’ (postgresSQL). Looks like it does not install into gem.

I found the answer that it might be problem with gem version. Need to run “bundle install” at local.  This will generate a new Gemfile.lock. Push this new file to Heroku might solve this problem

Ok, that’s all?

Not sure if I missed anything (I might). Anyway, what I did is alive at “http://mysocialy.herokuapp.com/”.

– 前言 –

Safari2Phone做兩天就膩了(天呀, 我無可救藥), 昨天想到玩點別的

第一階段目標, 用"<canvas>“ tag + JQMobile (其實非必要) 做了一個Tocuh Draw, 就是手指在Canvas上畫圖, 像這樣(這是測試結果):

—-

測試平台: Nexus One (Android) + WebView

碰到的問題:

Canvas可以很正常的在Android上跑沒問題, 但主要是event的問題, 本來用addEventListener(‘mousemove’, draw)的方式, 沒想到在mobile環境全部怪怪的

手機上的event應該是touchstart, touchend, touchmove, 其中touchmove跟mousemove有點不同, mousemove不用mousedown就會被觸發, 但touchmove卻是在有touch的狀況下才會發生

touch event的點也不一定只有一點, 所以有event.touches, 而這是一個array, 裡面放每一點座標, 像是clientX, clientY之類的

Canvas的部份, 用moveTo->lineTo來畫這些經過點就可以達成了(筆記: 下一步做一個queue來儲存)

其實這是我自己無聊寫的啦, 這是我第一隻Safari Extension, 不過我不打算publish到Safari extension網站, 放這邊就好, 請點此下載

這是從Chrome2Phone porting來的, 如果不知道Chrome2Phone是啥東西, 可以先看一下這段影片:

要玩這個東西, 首先你必須要有隻Android手機….

然後Android手機上必須裝Chrome2Phone:

裝完後, 你會發現有個烏七媽黑的button 在你的tool bar上(抱歉, 沒做美工… orz)

當你想把正在看的網頁送到手機上, 就按下這個button, 如果沒有登入, 會有一條新的bar上面有顯示訊息叫你登入, 點選連結即可登入

Chrome extension跟Safari extension本質上蠻像的, 所以要po蠻容易的, 基本上花了我一晚上的時間, 從開始看Safari extension的文件開始, 到這個可以正常工作, 今晚回來後又稍微小修點bug再release

Chrome2Phone本身原理也蠻簡單的, 加上也open source, server端跟Chrome extension端都有source可看, extension端其實只是透過XMLHttpRequest把資料傳送過去, 這部份甚至可以原封不動reuse

讓我花比較多時間才發現的是, redirect url居然hard code在server端, 導致我的extension最後登入完只能被導到醜醜的圖, 本來想透過injected script讓他碰到那張圖的url就導到我的page, 但似乎好像沒辦法在tab內開啟extension package裡的一個HTML

總之, 先這樣, 有空再修好了, 繼續找看看有沒其他好玩的來玩..

現在的Browser好像不開放給人家掛一些外掛就落伍了, 大部分的Desktop Browser也都有提供這樣的功能, Apple的Safari也不例外

開發Safari Extension其實不難, 如果有開發過Google Chrome browser extension的話, 可能還更好上手, 架構差不多類似, 文件也沒很多, 大概花個半小時看一下文件就應該可以上手了 

不過, 前置作業的門檻可能就大了一點了!

首先….你必須要有台…. Mac … 光聽到這需求感覺就很鳥, 我沒在Windows底下的Safari開發, 所以我不確定有沒方法解決, 不過我相信, 至少要能找到Keychain的替代方案才可以! 所以, 用Mac是最保險的!

然後你必須上蘋果的開發者網站去申請一個Safari developer的帳號, 好消息是, 這不像iOS developer方案是要錢的, 它是…完全免費

有了帳號後就要申請憑證, 申請憑證先要透過keychain這隻MacOS內建的程式去產生certificate request (CSR)檔, 如下(中文是憑證授權要求憑證…好爛的翻譯):

把CSR檔上傳後就可以產生憑證, 記得下載回來安裝, 不過這邊有點要注意一點, 用Chrome browser上傳總是會失敗, 用Safari就沒問題了, 光這部份搞了我一個晚上… orz

要開發Safari Extension的起始點是Extension Builder(延伸功能建構器), 打開你的Safari然後從"開發人員"->“顯示延伸功能建構器”

打開後從"+“的地方新增新的Extension, 它會讓你指定你Extension要存放的目錄, 之後只要把你的程式還有資源(圖檔等等)都copy到這目錄即可

先設定一下你的Extension的基本資料:

此外別忘了設定存取權限, 如果你的Extension要存取比預設多的資訊

接著設定一下幾個主要的元件, 以及資料庫所需要的容量大小(如果你會需要儲存資料的話)

這邊稍微簡單介紹幾個基本的元件, 以後有空再細寫

基本上一個Safari extension可以由以下的幾種東西構成

  1. Global page : 不會被顯示出來的一個背景頁面, html檔案, 通常用來提供function而非顯示
  2. Tool button : 工具列上的一個按鈕 (由新增工具列項目那邊新增)
  3. Context menu item : 按滑鼠右鍵叫出的選單(中翻譯成特色選單)
  4. Extension bar(中文翻譯成"列”) : 一整列工具列, 可以由一個Html檔案來構成
  5. Injected script : 像是Chrome Browser的content script, 嵌入到網頁的java script
  6. Injected style : 嵌入到網頁的style sheet

基本上這些都可以在extension builder這邊設定, 不過看API, 也應該可以由程式動態控制去設定, 大概組合這六樣就可以簡單寫出一個Safari extension了