分類
Javascript

jQuery Mobile版本

從阿維筆記本這裡 (http://blog.hsdn.net/1465.html) 看來的, 原來 jQuery 也有 mobile 的版本! 官方網址在這裡: http://jquerymobile.com/

隨著手機的效能愈高, 能支援的網頁複雜度及相容性, 也隨著在手機上的行動瀏覽器而提升, 一般早期在做手機網站大多是單純化, 減少不相的 css 及簡單呈現的方式為主, 不過有了 jQuery for Mobile, 相信又有更多的可能.

這個列表是用來說明目前 jQuery Mobile 支援各型手機 os 及瀏覽器的相容狀況, 共分成了 A, B, C, F 4級, A 為品質最好, B 為次之, C 為較差, 而 F 則是無法相容, 圖片引用自: http://jquerymobile.com/gbs/

看起來相容性最好的是 android 方面的瀏覽器.

有 jQuery for Mobile 對於行動網頁開發者來說, 可以節省不少工夫在實作網頁程式上, 不過行動網頁的要求是更精簡, 更容易地操作, 利用這樣的開發工具, 的確也能減低不少負擔. 來看看 ui 上的狀況: http://jquerymobile.com/designs/

相信對於已經上手 jQuery 的 Developer 們, 這個是一個不錯的好工具!

分類
好用軟體

Google縮短網址服務已正式開放了

Google的縮短網址服務, 原本只能給 chrome 的 plugin使用, 還有 google maps 的一個 labs 的功能, 不過現在可以直接使用了. (之前還為了這個尚未開放的功能做個小網頁, 請參閱: https://diary.tw/archives/1014)

這樣一來就方便了許多, 而且還有統計資訊及產生 QR-Code 的功能同時提供. 例如本 blog (https://diary.tw/tim )產生的短網址 url 為: http://goo.gl/AIRC , 而 QR-Code 就是 http://goo.gl/AIRC.qr , 實際上使用就會被 redirect 到 http://chart.apis.google.com/chart?cht=qr&chs=150×150&choe=UTF-8&chld=H&chl=http://goo.gl/AIRC , 其實也就是呼叫 google 的 chart api 來動態產生 QR-Code, 很方便.

這個就是直接把原圖秀出來的結果. 這樣一來, goo.gl 的功能就愈來愈多, 統計也有, qr-code 也有, 真是方便又好用的服務!

相關文章:
http://www.freegroup.org/2010/10/goo-gl/
http://www.zdnet.com.tw/news/web/0,2000085679,20147756,00.htm
http://www.soft4fun.net/website-recommand/google-announced-url-shortener-goo-gl.htm

分類
好用軟體

再調整一下flickrset小工具

之前利用了 YQL 將 Flickr 中的 set 相簿 url 抓出來 (LINK), 方便在寫文章時, 取出整本相簿的相片內容, 也容易引用, 利用產生 html 的方式, 更方便應用.

不過還差了一點點, 就是預覽的功能, 今天花了一點時間, 多加了一些程式把這個功能加上去了, 操作方式很單純:

  1. 先填入 flickr set id
  2. 再選擇 “with html” 選項
  3. 按下 “產生圖片網址”
  4. 若 set id 正確, 下面會出現含 html code 的文字內容及一個新做的”直接秀圖”鈕
  5. 按下”直接秀圖”鈕即可

快來試看看囉, 工具網址在: http://sample.diary.tw/flickrset/

另外加碼送, 直接把 setid 放在 url 後面更方便, 操作就直接是操作上面的步驟而產生秀圖的結果, 方便傳遞相片使用, 例如:
http://sample.diary.tw/flickrset/?setid=72157600079438372

歡迎多多利用!!

ps. 也歡迎大家留言分享好圖好作品的連結!!

分類
.net

使用Regex.Replace中的MatchEvaluator

在 .net 中的 Regular Expression, 是使用這個 namespace: System.Text.RegularExpressions

其中若是要做比對樣式的內容取代, 可以使用 MatchEvaluator, 來進行將比對的內容進行處理再替代回去. 例如將 Server.UrlEncode 後的 %2f 改為 %2F, 而其他部分不要異動大小寫時, 就很實用.

程式碼如下:

using System.Text.RegularExpressions;

string value = "http://www.google.com";
value = Server.UrlEncode(value);
value = Regex.Replace(value, "(%[0-9a-f][0-9a-f])", delegate(Match match) { return match.ToString().ToUpper();});
Response.Write(value);

其中 Server.UrlEncode 出來的結果為: http%3a%2f%2fwww.google.com , 而利用了 Regex.Replace 配合 MatchEvaluator 後, 就改為 http%3A%2F%2Fwww.google.com , 這樣只有改到 %xx 這種的大小寫, 而不會影響原來的大小寫.

其中的 MatchEvaluator 是一個 delegate 就是用來做每個比對到的內容再做加工的處理, 這裡用了類似 javascript 中的暱名函數處理, 把 MatchEvaluator 直接 inline 寫在裡面. 其中的 System.Text.RegularExpressions.Match 還有許多屬性可以, 例如 Index 可以取出是第幾個比對到的, 可以參考: http://msdn.microsoft.com/en-us/library/system.text.regularexpressions.match_members.aspx

這樣一來是不是變得很容易處理字串, 另外也要注意有關的效率問題, 一定要顧及, 否則在大量文字比對後, 又利用了 MatchEvaluator 來進行處理, 若該函數效率不好, 會大打折扣的.

參考資料:
http://dotnetperls.com/regex-replace

分類
好用軟體

線上剪mp3

一般我們在做手機鈴聲時, 可能會需要音樂剪裁, 把中間的副歌, 或是某個段落剪出來, 這時候會用到這樣的工具. 而這個工具剛好是又方便, 又簡單, 而且除了免安裝外, 還是線上的版本呢.

網址: http://cutmp3.net

望網址生義, 看得出來就是用來剪 mp3 音樂用的. 它使用了 flash 的方式, 把音樂做 local 的剪輯, 而非整首歌上傳, 線上拉出要剪裁的位置, 就能方便地剪出自己需要的區塊, 然後存出檔案, 真是方便又好用呢!!

上面的 scrollbar 是用來平移整首音樂的位置, 而下方的兩個三角點, 則是剪裁的開始位置及結束位置, 下方會有整首音樂的時間點, 還要剪出來的時間點, 方便查找, 而中間的音波表, 會有剪出區塊的反白顯示, 整個工具很容易方便上手, 應該是不太需要教學就能自行操作的好工具.

分類
程式技術

利用YQL抓出Flickr相簿中的照片url

在 Flickr 中, 有許多照片(廢話), 而這些照片, 也有放在相簿集(set)裡, 如何把相簿集裡的相片的 url 取出來呢?

首先我們先來看一個工具, 叫做 YQL (Yahoo! Query Language): http://en.wikipedia.org/wiki/Yahoo!_query_language , 這個語言是望文生義, 就是用來進行查詢 Yahoo! 服務的語言, 而我們需要的功能, 剛好裡面有提供, 所以我們就利用這個查詢語言來進行查詢, 先來看看語法, 到這個 YQL Console 來看: http://developer.yahoo.com/yql/console/

來到這裡, 真是開發者的天堂, Yahoo! 的服務查詢, 這裡幾乎都有提供, 而今天我們要查找的正是這個 table: flickr.photosets.photos, 假設今天要查的 photo set 是這個 url: http://www.flickr.com/photos/okilyt/sets/72157600079438372/, 則 set_id 就是 72157600079438372, 於是輸入如下的語法:

select * from flickr.photosets.photos where photoset_id = 72157600079438372

就會生出如下的 xml:

<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
    yahoo:count="10" yahoo:created="2010-08-06T11:19:06Z" yahoo:lang="en-US">
    <diagnostics>
        <publiclyCallable>true</publiclyCallable>
        <url execution-time="141"><![CDATA[http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&photoset_id=72157600079438372&page=1&per_page=10]]></url>
        <user-time>142</user-time>
        <service-time>141</service-time>
        <build-version>8771</build-version>
    </diagnostics> 
    <results>
        <photo farm="1" id="460118008" isprimary="1" secret="4d856aaa72"
            server="239" title="DSC_3989"/>
        <photo farm="1" id="460125135" isprimary="0" secret="15a3d24484"
            server="208" title="DSC_3987"/>
        <photo farm="1" id="460117456" isprimary="0" secret="76bdfd928c"
            server="191" title="DSC_3986"/>
        <photo farm="1" id="460117112" isprimary="0" secret="515535f02e"
            server="253" title="DSC_3983"/>
        <photo farm="1" id="460116928" isprimary="0" secret="68286fc46a"
            server="200" title="DSC_3981"/>
        <photo farm="1" id="460116620" isprimary="0" secret="4245ef4c5a"
            server="183" title="DSC_3980"/>
        <photo farm="1" id="460123637" isprimary="0" secret="68351dfe14"
            server="236" title="DSC_3963"/>
        <photo farm="1" id="460123365" isprimary="0" secret="80edceee74"
            server="243" title="DSC_3961"/>
        <photo farm="1" id="460115832" isprimary="0" secret="80b8d482bf"
            server="246" title="DSC_3958"/>
        <photo farm="1" id="460122569" isprimary="0" secret="2ee7c9e00e"
            server="242" title="DSC_3954"/>
    </results>
</query>

真是方便耶, 不過筆數好像只有十筆, 全部應該要有 18筆才對, 所以查了一下資料, http://developer.yahoo.com/yql/guide/paging.html , 發現可以在 table 後方加上 (0) 來進行全部查出, 於是調整一下語法如下:

select * from flickr.photosets.photos(0) where photoset_id = 72157600079438372

就可以方便地把整個 photo set 中的相片查找出來了, 而相片的 url 就可以利用這些 xml 來組合出來, 語法如下:

http://farm[farm].flickr.com/[server]/[id]_[secret].jpg

很容易吧! 這樣一來, 要取出某相簿的照片 url 就方便多了, 寫成小工具, 放在這裡: http://sample.diary.tw/flickrset/

參考資料: http://www.nakedtechnologist.com/?p=476

分類
好用軟體

Google縮短網址服務-免安裝Chrome

這是個邊練功邊做出來的小玩意.

之前在 Google 上有個服務是縮短網址的, 名為 goo.gl (http://goo.gl/), 不過, 目前僅能用在像是 google maps 的 labs 服務上, 參閱: http://briian.com/?p=7105 , 或是需要安裝 Google Chrome 套件, 參閱: http://sofree.cc/goo-gl/

現在不用這麼麻煩了, 直接線上使用網頁的方式, 就能直接產生給你, 請連結: http://sample.diary.tw/goo.gl/ 或是 http://goo.gl/danL (先縮了), 就可以將需要縮短的 url 透過這個方式來縮短.

程式實作也很單純, 只是利用了一個 web request 到 goo.gl 的 api 服務, 程式碼如下:

include("HttpClient.class.php");

$u = $_GET["u"];

$client = new HttpClient("goo.gl");
$client->setHandleRedirects(false);
if (!$client->post("/api/[email protected]&url=" . urlencode($u), array("a"=>"1") )) {
    die('An error occurred: '.$client->getError());
}
echo $client->getHeader("Location");

利用了 HttpClient 的 php class, (參閱: http://scripts.incutio.com/httpclient/ ), 並 post 資料到 http://goo.gl/api/[email protected]&url=[url], 取回 Location header 即可.

若有需要直接取用的網友, 可以訪問 http://sample.diary.tw/goo.gl/u.php?u=[url] 就可以取得了. 例如: http://sample.diary.tw/goo.gl/u.php?u=https://diary.tw/tim

免安裝, 免外掛, 直接線上使用 goo.gl 的 google shortener url 縮網址服務
http://sample.diary.tw/goo.gl/

[2010/7/23 13:40]
剛發現, goo.gl 的 api, 可以不用帶前面的 [email protected] 參數, 所以整個就只要如下的 url 即可:

...
if (!$client->post("/api/url?url=" . urlencode($u), array("a"=>"1") )) {
    die('An error occurred: '.$client->getError());
}
...

 

分類
好用軟體

Google Maps的圖資

Google Maps, 一直是我很愛的工具, 因為什麼都能找, 幾乎都找得到, 再加上 web 2.0 的功能, 使用者照片, 資訊提供等, 整個就是一個地圖 wiki, 很棒.

今天在用的時候, 發現下方有個圖資提供 KingWay, 就是圖資的提供公司, (當然, 這是台灣的部分), 其他國家還有其他國家的圖資提供者, 而且好玩的是在不同的放大比例時, 顯示的地圖圖資來源也會不同, 簡單地說, Google 和其他圖資商購買圖資供應用, 而在放大不同比例下有不同圖資提供商的地圖來源, 在跨國地區時, 也會有跨國地區的圖資商出現, 很有意思, 以下是幾個擷圖來說明:

1. 在台灣, 應該都是 KingWay:
2. 縮小一點來看: 除了 Kingway 外, 還有 Mapabc, Tele Atlas, ZENRIN 等.
3. 相同比例換成空照時, 就是 TerraMetrics:
4. 縮得更小時, 全球地圖只有 google 耶.
讀者可以自行試著玩看看, google maps 的圖資來源很多, 在不同的地理位置, 會有不同的資訊提供者, 非常有意思. 這裡有 google 地圖的服務條款: http://www.google.com/intl/zh-TW_tw/help/terms_maps.html

分類
TatterTools

TatterTools中的Flash Upload安全性問題

由於 flash 在 10版之後, 透過 flash upload 的安全性有提升了, 不能使用 javascript 去呼叫 flash 的 select upload file dialog box, 所以在 TatterTools 中的發表文章的上傳組件就會因此失效.

解決的方式其實也就是把 browser 的 flash 降級成 flash 9 的版本, 但這個很怪, 因為有新版 flash 不用, 要去用舊的, 而若是升到 flash 10 又要能上傳的話, 一個是 disable browser 的 flash 功能, 但這個也很怪, 另一個則是修改一下 TatterTools 的編輯後台中的 upload module 讓 flash 失效即可.

其實 TatterTools 後台, 使用 flash upload 可以做多檔 upload, 但若沒有透過 flash 的話, 則是走 web upload , 一次只能上傳一個檔案, 雖然會比較麻煩, 不過也算是還可以的解決方案.

需要修改的地方有兩個, 一個是在新發表文章的 /blog/owner/entery/post/index.php 調查其中關鍵字: hasRightVersion , 全文是:

var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

在下面加一行 hasRightVersion = false; 即可.

另一個位置是在修改文章的 /blog/owner/entry/edit/item.php , 一樣調查關鍵字 hasRightVersion, 一樣在偵測 flash version 後, 把該變數設為 false 即可.

修改好後, 在文章編輯後台的上傳區就會是單檔上傳的介面, 如下:
這樣一來就可以順利使用單檔上傳, 也避開了 flash 10 版安全性問題了!

分類
.net

.net中的日曆轉換

在 .net 中有個 System.Globalization 裡, 有許多國家的日曆可用, 像是民國年的轉換, 或是農曆年的轉換, 這個真的很有意思. 也免除了在程式中, 程式設計人員的轉換麻煩.

先來看看民國年的部分, 程式如下:

TaiwanCalendar tc = new TaiwanCalendar();            
int year = tc.GetYear(DateTime.Now); //現在是西元2010年
MessageBox.Show(year.ToString()); // 會秀出 99

有趣的, 我想試看看早於 1911 年(也就是民國還未成立時, 會發生什麼事), 結果如下, 會發生一個 OutOfRangeException 如下圖:

也就是必須是西元陽曆1912/1/1 00:00:00 ~ 9999/12/31 23:59:59 才行, 否則會有 Exception.

這樣當然很合理啦. 也避免一些錯誤輸入的狀況.

另外來看看農曆, (或稱陰曆, 月亮曆), 來試看看今天是農曆的日期:

TaiwanLunisolarCalendar tlc = new TaiwanLunisolarCalendar();            
int month = tlc.GetMonth(DateTime.Now);
int day = tlc.GetDayOfMonth(DateTime.Now);
MessageBox.Show(month.ToString() + "/" + day.ToString());

今天是 2010/6/29, 秀出的結果是 5/18 相當正確, 十分方便. 不過似乎沒有反過來的查法, 但有正向查詢應該就很夠用了, 反向查再稍加手腳即可.

另外也可以取出天干(GetCelestialStem()), 地支(GetTerrestrialBranch())的功能. 還有日本曆(JapaneseCalendar), 很有意思.

參考資料:
http://dotnetmis91.blogspot.com/2010/06/dotnet-systemglobalization.html
http://anita-lo.blogspot.com/2008/03/net_20.html
這篇是日本曆的年號: http://blog.csdn.net/xue1234567890/archive/2009/10/24/4723056.aspx