少年幃禿的煩惱

2008/12/25

很久沒更新了...

其實本來就是想拿 Blogger 來記錄一些心得...
後來發現使用 Google Sites 似乎比較符合我的需求
所以之後寫的東西都搬到 http://sites.google.com/site/summerwxy/去了
至於這邊呢等我想到用途的時候還是會繼續寫的...

2008/11/01

Link Within a YouTube Video

Link Within a YouTube Video 又提到了, 現在的 YouTube 網址可以接受參數, 讓影片可以從某個時間點開始播放. 只需要在網址的最後加上 #t=XXmYYs, XX 是分鐘, YY 是秒數.

http://www.youtube.com/watch?v=UfDr9eD7wKY#t=1m39s

2008/10/22

the answer to life, the universe, and everything

Google 有答案

2008/10/16

Embed a Part of a YouTube Video

Embed a Part of a YouTube Video 中提到, 有些時候在 YouTube 的影片, 只需要比較有趣的中間段落, 這時候有個方法可以使用. YouTube 撥放器有一個參數可以指定影片要跳過的秒數. 只需加上 &start=[秒數] 到 Embed code 的兩個 URLs 後面就可以了.

因為 YouTube 網站本身不接受這個參數, 如果需要網址的話, 可以直接指到撥放器上
http://www.youtube.com/v/UfDr9eD7wKY&start=99
因為並沒有 end 這種參數, 如果需要截取 YouTube 片段的話, 可以試試看 Splicd 這網站上的功能

2008/10/15

say "hello" to Blackbird

Blackbird 是一個蠻容易使用的 logging 工具.

首先在網頁上放入 .js 與 .css 這兩個檔案:

- 隱藏/顯示 Blackbird
- 左上, 右上, 左下, 右下 Blackbird 依序移動到四個位置
- 放大/縮小 Blackbird
- 清除 Blackbird 內容
- 新增 debug 訊息
- 新增 info 訊息
- 新增 warn 訊息
- 新增 error 訊息
- 開始/結束 time profiler

另外還提供了三個熱鍵來控制:

Hide/show: F2
Move: Shift + F2
Clear: Alt + Shift + F2

Demo 1: Output all message types
log.debug('this is a debug message'); log.info('this is an info message'); log.warn('this is a warning message'); log.error('this is an error message'); (記得按F2把Blackbird顯示出來)

Demo 2: Collect and show local anchors
log.profile( 'local anchors' ); var anchors = document.getElementsByTagName( 'A' ); for ( var i = 0; i < anchors.length; i++ ) { if ( anchors[ i ].name ) { log.debug( anchors[ i ].name ); } } log.profile( 'local anchors' ); (記得按F2把Blackbird顯示出來)

2008/10/10

url.camouflage.js

因為朋友的公司會監控 MSN, 而且傳送/接收網址都會被擋掉, 所以作了一個簡單的 Bookmarklet 用來偽裝網址. 作品在這邊: (我只有測試過 Firefox 3.0 跟 IE 6)

網址偽裝

另外還發現一件事情, IE 6 的 Bookmarklet 有大小上的限制, 我算了一下長度大概是 504 bytes, 所以內容稍微多一點的時候, 就必須做成 .js 檔案來處理, 否則放到 bookmark 的時候會沒有反應, 為了找這個原因, 還花了一點時間. 而 Firefox 上面則沒有這個限制.

2008/10/08

google.loader.ClientLocation

找 ip to location 解決方法的時候, 看到了這篇: APIs for Finding Location

原來 Google 提供了兩種找使用者位置的 APIs, 第一種是比較簡單的使用 ip address 去換. 使用的是 Google AJAX API 裡面多了一個 google.loader.ClientLocation 可以獲得位置的資料.

第二種比較精確的則是使用 Gears 0.4 之後的 Geolocation API 可以透過 ip/GPS 等方式來取得, 不過缺點是要安裝 Google Gears 目前並非每種瀏覽器都可以使用.

google.loader.ClientLocation 與 Google Maps 使用範例:

HTML : <div id="map" style="width: 600px; height: 350px;"></div> Javascript: <script type="text/javascript"> (function() { google.load("maps", "2"); google.setOnLoadCallback(function() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng( google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude), 12 ); var address = google.loader.ClientLocation.address; var str = '你在這裡: '; str += '<br/>城市 - ' + address.city; str += '<br/>國家 - ' + address.country; str += ' (' + address.country_code + ')'; str += '<br/>區域 - ' + address.region; map.openInfoWindowHtml(map.getCenter(), str); }); })(); </script>

2008/09/19

Feed43 - FEED FOR FREE

今天跟朋友聊到了 Mobile01 的時候, 突然想起自從 2007 年改版之後, 就一直沒有提供 RSS feed 了. 稍微找了一下站內討論區, 看看站方有沒有計畫要加回來, 然後在一篇公告的討論之中, 看到了這一篇.

回文裡面提到了 Feed43 這個服務, 這個服務可以將任意的 HTML page, 轉成 RSS feed.
只需要簡單的四個步驟:

指定網頁來源的 URL
定義擷取的規則
指定輸出格式
完成RSS Feed

另外還可以修改 Feed 名稱, 更方便辨識.

操作起來不算困難, 我試做了一個 Mobile01 時尚生活的 Feed : http://feed43.com/0_o-mobile01-vogue.xml
下次再把其他有趣的主題也補上.

2008/08/18

GM_xmlhttpRequest & overrideMimeType

最近在寫 user script 的時候不小心發現, 原來 GM_xmlhttpRequest 可以拿來處理 corss-domain 的 request.

不過有個地方需要特別注意一下, 取得其他 domain 的 request 之後, 想使用 DOM 來處理, 在使用 innerHTML 的同時, 瀏覽器會向當時畫面的主機請求 href="this/is/a/link" 或是 src="this/is/a/file.jpg"
等資料, 所以要特別注意, 必須要先經過處理才可以使用 innerHTML.

另外因為 GM_xmlhttpRequest 取回 request 預設是使用 UTF-8 來處理的, 如果取回的資料是其他語系的話, 可以使用 overrideMimeType 來處理, 這樣文字就可以正常顯示了.

GM_xmlhttpRequest({ method: "GET", url: "http://cross.domain.com/index.html", // 處理非 UTF-8 字型 overrideMimeType: "text/html; charset=Shift_JIS", onload: function(t) { // 將 href/src 內容裡, 非 http:// 開頭的全部加上原本的 domain. var foo = t.responseText .replace(/(href|src)\=[\"\'](?!http\:\/\/)(.*?)[\"\']/ig, '$1="http://cross.main.com/$2"'); var bar = document.createElement("DIV"); // 寫入的同時會向主機要求 href/src 的內容. bar.innerHTML = foo; } });

2008/08/06

Google Chart API (12) - Scatter plots

用法: cht=s
散點圖使用不同的方式來處理多組資料. 散點圖只允許顯示一組資料在圖表上. 儘管是使用了三組資料來指定每個點的 x 位置, y 位置, 與選用的大小.

參數:
cht=s

說明:
需提供兩組資料: 第一組指定 x 座標, 第二組指定 y 座標.
預設的形狀是小圓點. 可以使用 chm 參數來修改形狀, 參考 Shape markers.
顏色預設是藍色. 可參考 Colors 來修改顏色.
本範例中, 你會注意到每個資料有不同的大小. 達到這樣效果, 只需要指定第三組資料.

範例:

cht=s

Google Chart API (11) - Venn diagrams

用法: cht=v
只支援一組資料:

前三個值指定 A, B, C 三個圓的相對尺寸.
第四個值指定 A 與 B 的交叉區域
第五個值指定 A 與 C 的交叉區域
第六個值指定 B 與 C 的交叉區域
第七個值指定 A 與 B 與 C 的交叉區域

參數:

cht=v

說明:
本範例中三個圓分別是 100, 80, 60. 每個圓之間的重疊是 30.
維恩圖其他可用參數可參考 Optional parameters by chart type.

範例:

cht=v

chd=t:100,80,60,30,30,30,10

Google Chart API (10) - Pie charts

用法: cht=<pie chart type>
其中 <pie chart type> 是 p, p3:

只支援一組資料, 其餘的全部會被忽略

注意: Google Chart API 會依照指定的長寬(chs)來計算圓周半徑. 如果圖表內包含了標籤, 最好是將寬度設定為高度的兩倍.

參數:
cht=p

說明:
二維圓餅圖.
除非額外指定, 否則圓餅上每個部分的顏色將由深橘色到淡黃色顯示. 指定顏色請參考 Colors.
可使用 chl 來指定標籤, 詳細請參考 Pie chart labels.

範例:

cht=p

chs=200x100

參數:

cht=p3

說明:
3D圓餅圖.

範例:

cht=p3

chs=250x100

Google Chart API (9) - Bar charts

用法: cht=<bar chart type>
其中 <bar chart type> 可以是 bhs, bhg, bvs 或 bvg:

根據不同類型的圖表, 多組資料可能是堆疊在一起或是在同一組的條型圖

參數:
cht=bhs | cht=bvs
分別是水平跟垂直方向的條型圖, 同位置的資料會堆疊在一起

說明:
一組資料

範例:

說明:
兩組資料
如圖所顯示的, 不同組的資料會堆疊在一起, 所以必須將每組資料指定不同的顏色. 當然也可以替每個資料加上各自的顏色. 細節部分請參考 Colors.
還有此範例並沒有指定資料比例, 所以超過 100 的資料並沒有顯示出來.
範例:

說明:
把上個範例指定了資料比例, 長條就會依照比例正常顯示

範例:

參數:
cht=bhg | cht=bvg

說明:
分別是水平跟垂直方向的條型圖, 同位置的資料會放在一起做比較

範例:

注意: 這裡只有顯示出一小部分

參數:
chbh

說明:
條型圖的圖形大小比其他種類的圖形難處理.
不論是橫的 bhs 或 bhg 或是豎的 bvs 或 bvg, 圖形大小都是決定於 chs 參數. 但是當尺寸指定太小時圖表就會被剪裁掉.
因為這個原因所以你可以參照 bar width and spacing 來指定額外的參數


chbh=
<bar width in pixels>,
<optional space between bars in a group>,
<optional space between groups>

注意: 假如沒有提供第三個參數, 則預設為每組之間空格的一半.

範例:

省略了 chbh 所以圖形有被剪裁掉一些

chbh=10

Google Chart API (8) - Sparklines

用法: cht=ls

波型圖的參數跟折線圖一樣. 唯一不同的是波型圖預設不顯示出軸線.
另外參考 Multiple axis labels 你也可以自己替圖表加上軸線.

Google Chart API (7) - Line charts

用法: cht=<line chart type>
其中 <line chart type> 可以是 lc 或 lxy:

lc: 有多少組資料就會繪製成多少條線
lxy: 每條線需要提供一對資料

參數:
cht=lc

說明:
基本折線圖, 每個資料平均的分佈在 x 軸上.

範例:

參數:
cht=lxy

說明:
每條線必須提供兩組資料, 第一組指定 x 軸座標, 第二組指定 y 軸座標.
如果提供一個未定義的數值, 會將資料平均的分布在 x 軸上. 所謂未定義的數值在本範例使用 Text encoding 所以使用 -1. 而 Simple encoding 就是 _, Extended 就是 __ 帶定義.
另外可以使用 chm 指定資料點的形狀, 請參考 Shape markers 章節.
指定線條顏色可參考 Colors 章節.

範例:

2008/07/31

How to play nicely with jQuery and Greasemonkey

jQuery & Greasemonkey 提供了一小段 Javascript code, 如何在 Greasemonkey 裡面使用 jQuery.

Code:

// Add jQuery var GM_JQ = document.createElement('script'); GM_JQ.src = 'http://jquery.com/src/jquery-latest.js'; GM_JQ.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(GM_JQ); // Check if jQuery's loaded function GM_wait() { if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); } else { $ = unsafeWindow.jQuery; letsJQuery(); } } GM_wait(); // All your GM code must be inside this function function letsJQuery() { alert($); // check if the dollar (jquery) function works }

2008/07/30

Using parameters in setTimeout()

DOM:window.setTimeout 的語法:

timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); timeoutID = window.setTimeout(code, delay); 當中:

timeoutID

window.clearTimeout

func

delay

code

delay

delay

注意: 第一個額外傳遞參數的語法, 在 IE 上無法執行.

底下解釋在 IE 上遇到了這種問題應該如何處理
通常要執行 window.setTimeout 時, 都是寫成這樣 window.setTimeout(myFunction, 10000); function myFunction() { // do something } 但是遇到要傳遞參數的時候, 格式就要稍微改變一下了 var arg1 = 'i am a value'; window.setTimeout(function() {myFunction(arg1);}, 10000); function myFunction(arg1) { // do something } 詳細說明, 還可以參考這篇文章

JavaScript:Array:splice

Core JavaScript 1.5 Reference:Global Objects:Array:splice

用途:
改變陣列的內容, 可以在移除舊元素的同時, 加進新的元素.

語法:

array.splice(index, howMany, [element1][, ..., elementN]);

參數:

index
howMany

howMany

element1, ..., elementN

splice

說明:
如果移除跟新增的元素個數不同時, 呼叫完此方法後, 陣列的長度會改變.
splice 方法會回傳一個陣列, 裡面包含了被移除的元素. 就算只有一個元素被移除, 回傳的就是包含一個元素的陣列.

範例:
var myArray = ['001', '002', '003', '004']; alert('myArray: ' + myArray); // myArray: 001,002,003,004 var removed = myArray.splice(2, 0, 'aaa'); alert('第一次加入後: ' + myArray); // 第一次加入後: 001,002,aaa,003,004 alert('移除的: ' + removed); // 移除的: removed = myArray.splice(3, 1); alert('第二次移除後: ' + myArray); // 第二次移除後: 001,002,aaa,004 alert('移除的: ' + removed); // 移除的: 003 removed = myArray.splice(2, 1, "bbb"); alert('第三次取代後: ' + myArray); // 第三次取代後: 001,002,bbb,004 alert('移除的: ' + removed); // 移除的: aaa removed = myArray.splice(0, 2, "ccc", "ddd", "eee"); alert('第四次取代後: ' + myArray); // 第四次取代後: ccc,ddd,eee,bbb,004 alert('移除的: ' + removed); // 移除的: 001,002

2008/07/24

Google Chart API (6) - Chart Type

目前可用的圖表有:

Line chart: 折線圖
Sparkline: 波型圖
Bar chart: 條形圖
Pie chart: 餅圖
Venn diagram: 維恩圖
Scatter plot: 散點圖
Radar chart: 雷達圖
Map: 地圖
Google-o-meter: Google 指數

2008/07/21

Google Chart API (5) - Chart data

在產生圖表之前必須將資料進行編碼, 轉成 Chart API 認識的格式. 使用下列其中一種格式:

Text encoding: 使用正數浮點數字串, 從 0 ~ 100
Text encoding with data scaling: 使用任何的正負數浮點數字串與縮放比例參數的組合. 注意這個對 map 無效.
Allowing five pixels per data point, integers (1.0, 2.0, and so on) are sufficient for line and bar charts up to about 500 pixels. Include a single decimal place (35.7 for example) if you require a higher resolution. Text encoding is suitable for all types of chart regardless of size. Note this type of encoding generally results in the longest URL for a given data set.
Simple encoding: 使用字母數字(A 到 Z, a 到 z, 0 到 9), 其中 A 代表 0, B 代表 1, 一直到 9 代表 61, 提供 62 個不同數值的轉換.
Allowing five pixels per data point, this is sufficient for line and bar charts up to about 300 pixels. This type of encoding results in the shortest URL for a given data set.
Extended encoding: 使用一對字母數字(還有一些其他的稍後討論) 其中 AA 代表 0, AB 代表 1, 一直到兩個句號(..) 代表 4095, 提供了 4,096 個不同的數值轉換.
Extended encoding is best suited for large charts with a large data range. This type of encoding results in a URL twice the length of simple encoding for a given data set.

Note: 你可能想要計畫性的將資料進行 Simple/Extended 編碼. 可參考 JavaScript snippet for encoding data 這篇說明. 同樣的, 也有好幾位 Chart Group 成員貢獻 API - 可以在 Group 裡面慢慢找或是直接參考 Useful links to API libraries 這個文章.

Text encoding
需要使用這種格式來指定編碼資料
chd=t:<chart data string>
其中 <chart data string> 是由正數浮點數從 0.0 到 100.0, 還有一個負數 -1, 以及分隔符號 | 所組成的.
注意:

0.0 = 0, 1.0 = 1, 一直到 100.0 = 100
使用 -1 來指定一個無效的數值
如果資料多於一組時, 每組資料之間使用 | 符號分隔開來.

舉例: chd=t:10.0,58.0,95.0|30.0,8.0,63.0

注意: 在 text encoding 中, 會以資料裡最大的值, 將資料轉成百分比, 來當比例.

Text encoding with data scaling
需要兩個參數

chd=t:<chart data string>

chds=<data set 1 minimum value>,<data set 1 maximum value>,<data set n minimum value>,<data set n maximum value>

其中:

<chart data string> 由正負浮點數組合而成
<data set 1 minimum value> 是第一組資料的下限.
<data set 1 maximum value> 是第一組資料的上限, 指定 100 時可省略.
<data set n minimum value> 是第 n 組資料的下限.
<data set n maximum value> 是第 n 組資料的上限, 指定 100 時可省略.

如果你提供了比資料組別還要少的比例參數, 則剩下的資料組別會延用最後一個比例參數. 所以你可以在單一範圍的圖表上提供只有一對的比例參數.
注意:

此參數對於 map 是無效的
使用範圍外的值來指定無效的數值
如果多於一組資料時, 每組資料使用 | 分隔開來

舉例: chd=t:30,-60,50,120,80&chds=-80,140

Simple encoding
使用這種格式來編碼
chd=s:<chart data string>
其中 <chart data string> 包含了: A ~ Z, a ~ z, 0 ~ 9, 底線(_), 與當分隔符號的逗號(,).
注意:

大寫字母 A = 0, B = 1 一直到 Z = 25
小寫字母 a = 26, b = 27 一直到 z = 51
零(0) = 52 一直到 9 = 61
底線(_) 代表指定一個無效的數值
如果多於一組的資料時, 使用逗號(,)將每組資料分隔開來

兩組資料範例: chd=s:ATb19,Mn5tz 其中的第一組資料裡面, A 代表 0, T 代表 19, b 代表 27, l 代表 53, 9 代表 61.

注意: 更詳細的介紹請參考 Simple encoding character values

Extended encoding
使用這種格式來編碼
chd=e:<chart data string>
其中 <chart data string>
包含了一對一對的字元: A ~ Z, a ~ z, 0 ~ 9, 連字號(-), 句號(.), 底線(_), 還有當分隔符號的逗號(,).
注意:

AA = 0, AZ = 25, Aa = 26, Az = 51, A0 = 52, A9 = 61, A- = 62, A. = 63
BA = 64, BZ = 89, Ba = 90, Bz = 115, B0 = 116, B9 = 125, B- = 126, B. = 127
.A = 4032, .Z = 4057, .a = 4058, .z = 4083, .0 = 4084, .9 = 4093, .- = 4094, .. = 4095.
使用兩個底線(__)來指定無效的數值
如果多於一組的資料時, 使用逗號(,)將每組資料分隔開來

注意: 更詳細的介紹請參考 Extended encoding character values

JavaScript snippet for encoding data
這段 JavaScript 可將實際資料編碼成 Simple encoding. 將要編碼的資料放在陣列裡. 其中如果資料是負數時會自動變成底線(_).
Code:
var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; function simpleEncode(valueArray,maxValue) { var chartData = ['s:']; for (var i = 0; i < valueArray.length; i++) { var currentValue = valueArray[i]; if (!isNaN(currentValue) && currentValue >= 0) { chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue))); } else { chartData.push('_'); } } return chartData.join(''); }
假如將 maxValue 設定的陣列裡最大的數字稍微大一點, 則在產生圖表時, 最大值跟圖表上方就會保留一小段空間. var valueArray = new Array(0,1,4,4,6,11,14,17,23,28,33,36,43,59,65); var maxValue = 70; simpleEncode(valueArray,maxValue);

Guidelines for granularity
小心不要在一個圖表裡表現過多數量的資料. 如果顯示過去十年的每日資料, 就大於 3600 的值了. 這樣子會在 URL 裡面傳入過多的值, . 在一個 1024 像素寬的螢幕裡面, 每個資料只有四分之一的像素. 底下用幾個範例來說明這個問題點.
20 個資料在 200x100 的圖表裡(每個資料 10 像素): 輕易的分辨每個資料, 在 x 軸上都分的很開