– 前言 –

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來儲存)

好久沒po個幾篇胡言亂語了

這陣子聽了不少觀念, 也想了不少東西, 也開始抽時間做一些自己想study的, 很久沒去做這類的事了

昨天去了Trend Micro, 也趁機跟老弟聊了一下, 交換經驗

又開始想, 自己到底想要做些什麼? 又是想以什麼樣的態度來處事?

一天過去, 其實也還沒啥結論, 不過有幾個字一直在腦海繞來繞去…. Simple, Creative, Fun

或許, 如果做事可以just for fun應該可以快樂很多, 如果做事情可以用更creative的方式來做, 也應該會快樂很多, 至於生活, 簡單, 或許才可以多活幾年吧….

其實這是我自己無聊寫的啦, 這是我第一隻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了

之前申請iOS的certificate, 因為是用XCode直接產生完的, 並沒注意到這問題, 昨天想到要申請一下Safari的, 沒想到搞半天, 用keychain產生好幾個不同的csr檔都沒過…..快氣死了!!

沒想到後來改用Safrai連developer網站申請, 一次就過…

用來問題在於:

我用Chrome Browser呀!!!

真是OOXX….