2013年3月22日星期五

jQuery UI 開發懶人包

為了方便測試 jQuery UI, 我把最新的 jQuery UI 1.10.2, jQuery 1.9.1, 所有的 UI 佈景主題, 與 HTML5 模板 (含 htmlshiv.js) 全部打包, 放在 Dropbox 公用區, 方便在不同電腦下載.

http://dl.dropbox.com/u/68794214/html5_jqueryui_templates.zip

注意, 經過測試發現, 對於 IE6, 匯入外部 Javascript 時務必加上 type="text/javascript" 屬性, 否則會因匯入失敗導致執行錯誤.

<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.10.2.custom.min.js"></script>

2013年3月21日星期四

顯示原始碼的 PHP 程式

上一次整理 jQuery 的 Ajax load 方法時, 為了能顯示原始碼著實傷了一些腦筋. 後來在 "幾個鮮為人知的HTML標籤" 這篇文章發現, 原來 xmp 這個標籤適合用作語法的教學解說, 因為瀏覽器不會解譯它所包含的 HTML 碼與程式. 利用 PHP 的檔案讀取指令 file_get_contents(), 把伺服器中要顯示的檔案路徑傳給它, 很簡單就能做出顯示原始碼的功能 (一般為了安全都想辦法防止伺服端源碼外洩, 但為了教學說明卻是反其道而行). 方法如下 :

<?php $file=file_get_contents($_GET["file"]); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $_GET["file"] ?></title>
</head>
<body>
<xmp>
<?php echo $file; ?>
</xmp>
</body>
</html>

把這個檔案 source.php 放到伺服器中 (注意, 要存成 utf-8 格式, 以免中文變成亂碼), 要顯示 /test/ajax_load_test.htm 源碼的話, 用個超連結就可以了 :

<a href="http://www.myweb.com.tw/source.php?file=test/ajax_load_test.htm" target="_blank">顯示 ajax_load_test.htm 源碼</a>

把要顯示的檔案放在 file 參數中傳給 source.php 即可.

DNA 親子鑑定的原理

中午在 Yahoo 新聞看到這則 "甄嬛與溫太醫…滴血認親認不出親骨肉", 原來所謂 DNA 鑑定, 就是看染色體重複情形是否與父母相同.

"如何鑑定親子關係？馬偕醫院榮譽主治醫師林媽利說，應採科學方法抽血，並比對生物分子「去氧核醣核酸（DNA）」，分析染色體上16個不同位置的DNA重複情形，進一步確認親子關係。如父親DNA有9次及10次重複，母親為5次及4次，因孩子必須分別帶有父母基因，因此重複次數有一個母親的5次，另一項必須是父親的9或10次，如果出現7次重複，代表孩子的爸爸另有其人。"

Wiki 的說明如下 :

"鑒定親子關係目前用得最多的是DNA分型鑒定。一個人有23對（46條）染色體，同一對染色體同一位置上的一對基因稱為等位基因，一般一個來自父親，一個來自母親。如果檢測到某個DNA位點的等位基因，一個與母親相同，另一個就應與父親相同，否則就存在疑問了。
利用DNA進行親子鑒定，只要作十幾至幾十個DNA位點作檢測，如果全部一樣，就可以確定親子關係，如果有3個以上的位點不同，則可排除親子關係，有一兩個位點不同，則應考慮基因突變的可能，加做一些位點的檢測進行辨別。DNA親子鑒定，否定親子關係的準確率幾近100%，肯定親子關係的準確率可達到99.99%。"

關於普郎克常數與量子力學

我常在 Wiki 百科吸取知識, 特別是物理與歷史相關議題, 以下為研讀量子力學與普郎克常數之資訊摘要 (馬克思-普郎克, 德國物理學家) :

普朗克常數記為 h，是一個物理常數，用以描述量子大小，在量子力學中佔有重要的角色。
h=6.626176e-34Js (焦耳x時間)
馬克斯·普朗克在 1900 年研究物體熱輻射的規律時發現，只有假定電磁波的發射和吸收不是連續的，而是一份一份地進行的，計算的結果才能和試驗結果是相符。這樣的一份能量叫做能量子，每一份能量子等於普朗克常數乘以輻無線電磁波的頻率，這關係稱為普朗克關係。
1919 年，索末菲在他的《原子構造和光譜線》一書中最早將 1900 年 12 月 14 日稱為「量子理論的誕辰」，後來的科學史家們將這一天定為了量子的誕生日。
量子力學是描寫微觀物質的一個物理學理論，與相對論一起被認為是現代物理學的兩大基本支柱。量子力學是在20世紀初由普朗克、波耳、海森堡、薛丁格、玻恩、費米、狄拉克等物理學家共同創立的。除通過廣義相對論描寫的重力外，至今所有其它物理基本交互作用均可以在量子力學的框架內描寫（量子場論）。
量子力學可以算作是被驗證的最嚴密的物理理論之一了。至今為止，所有的實驗數據均無法推翻量子力學。大多數物理學家認為，它「幾乎」在所有情況下，正確地描寫能量和物質的物理性質。雖然如此，量子力學中，依然存在著概念上的弱點和缺陷，除上述的萬有引力的量子理論的缺乏外，至今為止對量子力學的解釋存在著爭議。
1926年左右，出現了兩種量子物理的理論，即海森堡，波恩和約當的矩陣力學和薛丁格的波動力學。但隨後薛丁格、狄拉克、約當、與馮紐曼證明了波動力學和矩陣力學的等價性。
愛因斯坦認為「量子力學不完整」，「上帝不擲骰子」。但在多年的、激烈的討論後，愛因斯坦不得不接受不確定原理，這最後導致了今天的哥本哈根詮釋。在量子力學的標準解釋中，測量的隨機性是基本性的，是由量子力學的理論基礎獲得的。量子力學儘管無法預言單一實驗的結果，依然是一個完整的自然的描寫，使得人們不得不得出以下結論：世界上不存在通過單一測量可以獲得的客觀的系統特性。一個量子力學狀態的客觀特性，只有在描寫其整組實驗所體現出的統計分布中才能獲得。

量子力學 : http://zh.wikipedia.org/wiki/%E9%87%8F%E5%AD%90%E5%8A%9B%E5%AD%B8
普郎克 : http://zh.wikipedia.org/wiki/%E9%A9%AC%E5%85%8B%E6%96%AF%C2%B7%E6%99%AE%E6%9C%97%E5%85%8B
薛丁格方程 : http://zh.wikipedia.org/wiki/%E8%96%9B%E4%B8%81%E6%A0%BC%E6%96%B9%E7%A8%8B%E5%BC%8F

關於鈽元素

二哥問我, 美軍二戰時在長崎投的原子彈是鈾彈還是鈽彈, 我不太確定, 所以回來查了一下 Wiki, 原來廣島的是鈾彈, 長崎的是鈽彈, 美國人還真狠, 明明已經勝利在望, 還一次做兩種實驗. 關於鈽這種元素的底細摘要如下 :

鈽 Plutonium ，原子序為 94，元素符號 Pu，是一種具放射性的超鈾元素。屬於錒系金屬，外表呈銀白色，暴露在潮濕的空氣中時會產生氧化物和氫化物，屑狀的鈽能自燃，會於骨髓中富集。
鈽是天然存在於自然界中的質量最重的元素。
鈽最穩定的同位素是鈽 244，半衰期約為八千萬年。
鈽最重要的同位素是鈽 239，是三個最重要的易裂變同位素之一（另外二者為鈾 233 和鈾 235），半衰期為 2.41 萬年，常被用製造核子武器。二次大戰時美軍投於長崎的原子彈即使用了鈽製作內核。
鈽 238 的半衰期為 88 年，它是放射性同位素熱電機的熱量來源，常用於驅動太空船。
核能工業每年約產出 20 公噸的副產物鈽元素。科學家發現，動物組織內只要含達每公斤數毫克的鈽就能致死，鈽在骨骼中擴散的情形危險程度更甚於鐳。
鈽的臨界質量約僅有鈾 235 的三分之一，鈽彈只需 6.2 公斤鈽便可達到爆炸當量，相當於2萬噸的 TNT 炸藥威力。
一般輕水反應爐所產生的核廢料中含有鈽，但為鈽 242、鈽 239和鈽 238 的混合物，它的濃度不足以製作成核武器。
臨界質量是指維持核子連鎖反應所需的裂變材料質量。不同的可裂變材料有不同的臨界質量。純度越低的核燃料，其臨界質量會增加。能夠以最少的物料到達臨界質量的形狀是球形。如果在四週加以中子反射物料，臨界質量可以更少。
鈾 233 : 15 公斤
鈾 235 : 48.8 公斤
鈽 239 : 10 公斤
鈽 240 : 40 公斤
鈽 242 : 100 公斤
剛好可能以產生連鎖反應的組合，稱為已達臨界點。比這樣更多質量的組合，核反應的速率會以指數增長，稱為超臨界。如果組合能夠在沒有延遲放出中子之下進行連鎖反應，這種臨界被稱為即發臨界，是超臨界的一種。即發臨界組合會產生核爆炸。如果組合比臨界點小，裂變會隨時間減少，稱之為次臨界。核子武器在引爆以前必須維持在次臨界。以鈾核彈為例，可以把鈾分成數大塊，每塊質量維持在臨界以下。引爆時把鈾塊迅速結合。
"週期表上的元素(或者可以說原子的種類)還有那些元素的反物質大概就是所有的元素了，畢竟元素的多少這個跟宇宙的大小無關，而是跟原子內部的作用力有關。原子是由整數的質子中子，外圍環繞電子組成。而原子序大於鈾的元素，因為強作用力對距離的衰減甚鉅，所以無法穩定存在。所以這就告訴我們，自然界能夠穩定存在的元素有限，不外乎就是從原子序為 1 的氫，到原子序為 94 的鈾 (註 : 應是鈽)，目前幾億光年之內可見的宇宙也是如此。根據相對論性狄拉克方程式的計算，原子序頂多只能到 137。所以，在現今可驗證的物理範疇下，外星人不太可能用我們不知道的元素打造太空船。" (這則說明是從君曄林的 Youtube 上找到的, 很有意思, 但須更正的是, 原子序 94 為鈽, 鈾是 92)。
理察·費曼表示，根據狄拉克方程式得出的結論，原子序大於137時，電子殼層會發生問題，所以在 Uts 之後不可能存在中性原子，根據電子排佈整理的週期表在此處也因此瓦解。根據玻爾模型的計算，1s 電子殼層中電子的速度 v=ZC/137.036，Z 為原子序，C 為光速，當 Z > 137 時電子的速度超越光速，這在物理上不可能，故這個尚未發現的元素也被稱為 feynmanium (費曼元素)，這很可能是最後的元素。

鈽 : http://zh.wikipedia.org/wiki/%E9%92%9A
廣島小男孩原子彈 : http://zh.wikipedia.org/wiki/%E5%B0%8F%E7%94%B7%E5%AD%A9%E5%8E%9F%E5%AD%90%E5%BD%88
長崎胖子原子彈 : http://zh.wikipedia.org/wiki/%E8%83%96%E5%AD%90%E5%8E%9F%E5%AD%90%E5%BD%88
臨界質量 : http://zh.wikipedia.org/wiki/%E8%87%A8%E7%95%8C%E8%B3%AA%E9%87%8F
週期表 : http://zh.wikipedia.org/wiki/%E9%80%B1%E6%9C%9F%E8%A1%A8

關於放射性元素

姊姊的國二化學最近講到元素週期表, 北韓前陣子核試, 而反核四運動正沸騰, 所以查了一下 Wiki, 原來同位素只是中子數不同而已, 而氫是最簡單的二體系統 (一質子一電子, 無中子, 捕捉一個中子變成氘, 兩個中子變成氚), 這些好像國中都讀過, 但都忘了. 不過稍微複習一下, 我也會計算原子量, 分子量啦, 很簡單啊. 但昨天還是聽姊姊說 : "我恨莫耳". 不過是一些簡單觀念與四則運算而已, 有這麼難嗎?
Wiki 摘要如下 :

原子序數在83（鉍）或以上的元素都具有放射性 (鎝 43 例外, 鎝是第一個人工合成的化學元素, 也是地球上已知的最輕的沒有穩定同位素的化學元素)。
從原子序 93 (Np, 錼) 開始一直到鉳元素都有一個特性：原子序是偶數的，半衰期都特別長。
放射性衰變通常都有一定的周期，並且一般不因物理或化學環境而改變，這也就是放射性可用於確定年代的原因。
同位素是同一元素的不同原子，其原子具有相同數目的質子，但中子數目卻不同（例如氕、氘和氚，它們原子核中都有1個質子，但是它們的原子核中分別有0個中子、1個中子及2個中子，所以它們互為同位素）。同位素可以分為穩定性同位素和放射性同位素。

放射性 : http://zh.wikipedia.org/wiki/%E6%94%BE%E5%B0%84%E6%80%A7
鎝 : http://zh.wikipedia.org/wiki/%E9%94%9D

2013年3月20日星期三

測試 jQuery 的 Ajax 方法 load()

這幾天重拾 jQuery 書本, 複習了 Ajax 的用法, 發覺以前寫自己的個人專案都囫圇吞棗, 只要能用, 會 work 就行, 沒有仔仔細細去玩味一項技術, 其實學再多也沒入味. 交互重看幾本手邊的書, 把 jQuery 的 Ajax 方法中的 load 仔細測試了一番, 印證書中的描述, 我覺得要用 Ajax 只要會使 jQuery 的 load() 方法就行啦, 摘要整理如下.

load() 的語法 :

load(url [, data] [, callback])

load() 是 jQuery 從伺服器非同步擷取資料的最簡單方法, 它跟 get() 與 post() 同樣屬於第二層次的 Ajax 方法 (ajax 函式是第一層, 而 getJSON 與 getScript 是第三層), 但不同的是, load() 乃是包裹集合 (jQuery 物件) 的方法; 而 get() 與 post() 是公用函式 (utility), 屬於 jQuery 的頂層函式.當偵測到成功回應時, load() 會將傳回的資料設定為相符元素的 HTML 內容. 例如 :

$('#result').load("ajaxtest/test.htm");

//從伺服器取回 test.htm 插入到 id=result 元素的 HTML 內容中.

必要引數 url 字串不限於 htm/html 檔, 可以是 asp/jsp/php/aspx 等任何伺服端程式. 若 url 引數為伺服端程式, 可以在後面附帶 http 參數, 例如 :

$('#result').load("test.php?user=tony&pwd=123");

可選引數 data 是發送到伺服器的請求參數, 而 load() 方法的傳遞方式基本上是根據有無 data 引數與其型態來自動決定的. 沒有傳入 data 引數時預設是用 GET 方式傳送, 而有傳入 data 時, 若 data 是以 {key:value} 物件實體表示, 則以 POST 方式傳送, 若是以請求字串表示, 則是用 GET 方式傳送 (在 PHP 中, url 所帶參數要用 $_GET[] 取得, 而物件實體的 data 所帶參數要用 $_POST[] 取得). 例如 :

$("#result").load("test.php?user=tony&pwd=123"); //GET
$("#result").load("test.php",{user:"tony",pwd:"123"); //POST
$("#result").load("test.php","user=tony&pwd=123"); //GET
$("#result").load("test.php?user=tony",{pwd:"123"); //POST

可選參數 callback 是當請求完成 (complete) 時觸發之回呼函式 (不論 Ajax 請求是否成功), 如果有指定回呼的話, 會在 HTML 插入 DOM 後才會執行回呼函式. 回呼函式有 3 個可選參數 : responseText, textStatus, 與 XMLHttpRequest. 例如 :

$("#result").load("http://mybidrobot.allalla.com/ajaxtest/test.php",
function(responseText,textStatus,XMLHttpRequest) {
var msg="載入完成!\n" +
"responseText=" + responseText + "\n" +
"textStatus=" + textStatus + "\n" +
"XMLHttpRequest=" + XMLHttpRequest + "\n";
alert(msg);
});

跟 $.get() 與 $.post() 不同的是, load() 允許對擷取結果進行過濾, 這是透過在 url 參數後面添加 jQuery 選擇器來達成的. 若 url 字串中包含空格, 則第一個空格後面的字串會被視為 jQuery 選擇器. 例如 :

$('#result').load("test.htm .myClass");

此例是取得 test.htm 後進行過濾, 取出所有 class=myClass 元素的內部內容, 插入到 id=result 元素的 HTML 內容中.

$('#result').load("test.htm #myID");

此例是取得 test.htm 後進行過濾, 取出 id=myID 元素的內部內容, 插入到 id=result 元素的 HTML 內容中.

以下實際測試範例以兩個遠端檔案 test.htm 與 test.php 為載入對象, test.htm 內容如下 :

<p style='font-weight:bold;'>Hello World!</p>
<p id='normal'>Hello World!</p>

test.php 內容如下 :

<?php
echo "<p>get :user=".$_GET['user'].", pwd=".$_GET['pwd']."</p>".
"<p>post : user=".$_POST['user'].", pwd=".$_POST['pwd']."</p>".
"<p style='font-weight:bold;'>Hello World!</p>".
"<p id='normal'>Hello World!</p>";
?>

範例 1 : 載入 test.htm [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title>Ajax load test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="result"></div>
<input type="button" id="load" value="load">
<script>
$(function(){
$("#load").click(function() {
$("#result").load("test.htm");
});
});
</script>
</body>
</html>

此例只是單純載入一個 htm 檔.

範例 2 : 載入 test.php 並過濾結果 (只提取 id=normal 之元素) [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title>Ajax load test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="result"></div>
<input type="button" id="load" value="load">
<script>
$(function(){
$("#load").click(function() {
$("#result").load("http://tony1966.xyz/test/ajaxtest/test.php #normal");
});
});
</script>
</body>
</html>

此例是載入一個 php 檔, 並驗證 url 字串中的 jQuery 選擇器. 伺服器回傳內容中有兩個 p 元素, 利用 "test.php #normal" 過濾出第二個 p, 因為其 id 為 normal.

範例 3 : 載入 php 檔並在 url 中帶參數 ( GET) [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title>Ajax load test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="result"></div>
<input type="button" id="load" value="load">
<script>
$(function(){
$("#load").click(function() {
$("#result").load("test.php?user=tony&pwd=123");
});
});
</script>
</body>
</html>

此例主要是不傳入 data 引數, 但在 url 字串中傳送要求字串 "test.php?user=tony&pwd=123", 在伺服端用 $_POST[] 將讀取不到參數, 要用 $_GET[] 才行, 證實用 url 字串傳送要求字串時, Ajax 引擎是以 GET 方式傳送.

範例 4 : 載入 php 檔並在 data 中帶 {} 參數 (POST) [看原始碼]

範例 5 : 載入 php 檔並在 data 中帶字串參數 (GET) [看原始碼]

範例 6 : 載入 php 檔並分別在 url 與 data 中帶參數 (POST) [看原始碼]

範例 7 : 載入 php 檔並設定回呼函式 [看原始碼]

範例 8 : 載入不存在的 php 檔並設定回呼函式 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title>Ajax load test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="result"></div>
<input type="button" id="load" value="load">
<script>
$(function(){
$("#load").click(function() {
$("#result").load("test_not_exist.php",
function(responseText,textStatus,XMLHttpRequest) {
var msg="載入完成!\n" +
"responseText=" + responseText + "\n" +
"textStatus=" + textStatus + "\n" +
"XMLHttpRequest=" + XMLHttpRequest + "\n";
alert(msg);
}
);
});
});
</script>
</body>
</html>

此例主要是測試當欲載入的檔案 test_not_exist.php 不存在時 (非同步請求失敗), 回呼函式仍會被觸發, 證實 load() 的回呼函式不論 Ajax 請求是否成功都會被觸發, 因為它的觸發條件是 Ajax 請求完成時 (complete). 由於載入失敗, 所以 id=result 的 div 元素內容不會更新, 而 Ajax 引擎傳入回呼函式的 responseText 為空, textStatus 為 error.

2019-12-14 補充 :

今天重新整理這份筆記, 主要是貼上原始碼.

2019-12-25 補充 :

測試完 $.ajax() 後回頭重新審視這篇, 發現上面的參數傳遞測試中漏掉了一個組合, 即參數一部分在 url 查詢字串, 另一部分在 data 查詢字串的情況, 這時 HTTP 請求會以 GET 方式傳送, 後端全部參數都要用 $_GET 捕捉, 為此增加了如下測試 6-1 :

範例 6-1 : 載入 php 檔並分別在 url 與 data 中帶參數 (GET) [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
</style>
</head>
<body>
<div id="result"></div>
<input type="button" id="load" value="load">
<script>
$(function(){
$("#load").click(function() {
$("#result").load("test.php?user=tony","pwd=123");
});
});
</script>
</body>
</html>

這樣全部組合都有了 (真是不可自拔的完美主義者!), 綜合上面測試結果, 呼叫 load() 方法時在 url 與 data 參數中 HTTP 請求參數的表示方式與送出的 HTTP 請求方法摘要如下表 :

url 參數	data 參數	HTTP 請求	後端 PHP 讀取參數
test.php?a=1&b=2	無	GET	$_GET["a"] 與 $_GET["b"]
test.php	{a:1, b: 2}	POST	$_POST["a"] 與 $_POST["b"]
test.php	"a=1&b=2"	GET	$_GET["a"] 與 $_GET["b"]
test.php?a=1	{b: 2}	POST	$_GET["a"] 與 $_POST["b"]
test.php?a=1	"b=2"	GET	$_GET["a"] 與 $_GET["b"]

可見對於 load() 方法而言, 只要 data 是物件, 則 HTTP 請求一定是 POST, 後端擷取參數的方式則只與參數形式有關 : url 查詢字串攜帶的參數必須用 $_GET[] 讀取; data 如果是查詢字串也必須用 $_GET[] 讀取; data 如果是物件則必須用 $_POST[] 讀取.

如果覺得要判斷用 $_GET[] 還是 $_POST[] 很麻煩, 則可用 $_REQUEST[], 不管參數用查詢字串或物件形式表達, $_REQUEST[] 都可以捕捉到.

2013年3月16日星期六

jQuery UI 升級 1.10.2 版

不久前才整理 jQuery UI, 今日連上官網, 發現又從 1.10.1 升到 1.10.2, 異動詳見 Change log, 主要是取消了 base 這個佈景, 修改了一些 bug. 所以在 CDN 上不能再使用 base 主題了. 不過搭配的 jQuery 仍然是最新的 1.9.1 版.

從 Google CDN 匯入 : (實際範例)

<!DOCTYPE html>
<html>
<head>
<title>jQuery UI 測試</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
</head>
<body>
<input type="text" size="20" name="date" id="date" />
<script language="JavaScript">
$('#date').datepicker();
</script>
</body>
</html>

從 jQuery UI CDN 匯入 : (實際範例)

<!DOCTYPE html>
<html>
<head>
<title>jQuery UI 測試</title>
<link type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
</head>
<body>
<input type="text" size="20" name="date" id="date" />
<script language="JavaScript">
$('#date').datepicker();
</script>
</body>
</html>

2013年3月13日星期三

GAE 的 Cron Job

網路上有許多提供免費 PHP 主機的公司, 提供至少 1G 以上的程式空間, 所以其實一些中小型專案都可以利用這些免費的東東, 雖然免費方案不保證系統穩定運轉, 但只要定期備份資料庫就好了. 這裡 http://www.free-webhosts.com/reviews/removed.php 就有一狗票的免費主機可申請, 我最常用的是 000webhost, 1freehosting, x90x.net 這三家, 因為它們都有 Cpanel, 完全用 web 方式傳檔, 甚至要直接在檔案管理介面上直接 coding 也沒問題. 但是有一點很煩惱, 這些免費主機通常會統計每個月的流量, 如果申請後一直沒用, 或者沒有公開, 使得到訪流量太低的話, 帳號可能會被凍結 (通常一個月至少要有 30 個 visits 以上較保險), 我申請的五六個網站每個月都會收到停權信, 這時趕快申請復權即可, 但若太久沒收信, 超過時限可就會被註銷帳號了.
為了避免這種困擾, 可以用 Google App Engine 的 Cron Job 來定期拜訪這些網站, 機械式地製造流量來避免. GAE 的 Cron Job 可是非常穩定與準時的喲 !
首先, 先寫個簡單的 PHP, 例如 hello.php :

hello.php

<!DOCTYPE html>
<?php
echo "hello";
?>

把 hello.php 上傳到目前閒置中的免費 PHP 主機上. 例如我的 mybidbot 網站.

然後在 GAE 上新增一個應用程式, 修改其中的 cron.yaml 如下 :

cron.yaml

cron:

- description: mybidrobot.allalla.com job

url: /hello1

schedule: every 32 minutes

timezone: Asia/Taipei

其中重要的是 url 與 schedule 設定, url 設定為自動呼叫在 main.py 中的 URL 要求處理程式 hello1, 而 schedule 是每 32 分鐘呼叫一次, GAE 最低只能設 1 分鐘一次. 注意, 每一分鐘是 every 1 minutes, 每一小時是 every 1 hours, 每一天則是 every 1 days, 要用複數 .

最後是修改 main.py 如下 :

main.py

# -*- coding: utf-8 -*-

import sys

import webapp2

from google.appengine.api import urlfetch

import urllib

class hello1(webapp2.RequestHandler):

def get(self):

url="http://mybidrobot.allalla.com/hello.php"

result=urlfetch.fetch(url)

if result.status_code == 200:

self.response.write(result.content)

else:

out="urlfetch failed"

self.response.write(out)

class MainPage(webapp2.RequestHandler):

def get(self):

self.response.headers['Content-Type'] = 'text/plain'

self.response.write('Hello, webapp2 World!')

app = webapp2.WSGIApplication([('/', MainPage),

('/hello1', hello1)

debug=True)

如果有多個網站, 就在 ('/hello1', hello1) 後面加一逗號, 再複製一項例如 ('/hello2', hello2), 複製 hello1 的 class 改為 hello2, 並修改其中的 url 網址即可, 這樣 GAE 就會週期性拜訪這些網站下的 hello.php 製造流量了, 好像 heartbeat 一樣. GAE Cron job 詳參 :

https://developers.google.com/appengine/docs/python/config/cron?hl=zh-tw

如果要更新 cron 服務設定, 只要把 cron.yaml 修改好, 然後打開 DOS 視窗, 切換到應用程式目錄上一層, 例如 gaebuilder 執行下列指令即可更新 cron 服務設定 :

appcfg.py update_cron gaebuilder

更新完成後, 若要確認 cron 內容是否已修改, 可用下列指令顯示目前所設定之排程服務, 到應用程式目錄上一層執行 :

appcfg.py cron_info gaebuilder

如果要刪除全部 cron 排程設定 (即停止 cron 運作), 只要留下 cron.yaml 裡的第一行 "cron:" 其餘刪除, 再以上述指令更新 cron 服務設定即可.

注意喔, GAE 對 cron 服務是有限制的 :
(1). 最短執行週期為 1 分鐘
(2). 一個應用服務最多可設定執行 20 個 URL (只能透過 http/https 協定).

2013年3月10日星期日

悠閒的大咪

今日一整天大咪都在家，沒跑出去鬼混，媽說昨晚也沒出去，在棚架上睡，一大早就在那邊喵啊喵的討東西吃。你叫它的話，它也會用喵的回應呦！

2013年3月8日星期五

日本與台灣大地震的關聯性

我在上下游新聞這網站看到 "是芥末日後台灣的挑戰（1）" 這篇文章, 探討了一百多年來日台大地震之間的關聯性, 發現日本發生大地震後, 大約 10 年內台灣也發生大地震, 由於日台均位於東亞板塊邊緣, 其中應該存在某種關聯性. 我查了 WIKI, 發現發生於 1896 年的日本三陸大地震與 2011 年的東北大地震, 都是發生於日本東北岩手縣外海的淺層地震, 同樣都引起大海嘯, 但差別是 100 年前的明治時代還沒有核電廠, 所以沒有發生福島核災的雪上加霜案外案. 我把這些地震列表整理如下, 可見自關東大地震後, 日本過了一甲子, 才發生阪神大地震, 但 4 年後台灣就發生了 921 大地震. 是否能量蓄積太久, 連動性的間隔變短了?

地震	發生年	日台差距	死亡
日本三陸大地震	1896 (明治 29 年, 光緒 22 年)		21915
台灣梅山大地震	1906 (明治 39 年, 光緒 32 年)	10 年	1258
日本關東大地震	1923 (大正 12 年, 民國 12 年)		100000~142000
台灣竹苗大地震	1935 (昭和 10 年, 民國 24 年)	12 年	3276
日本阪神大地震	1995 (平成 7 年, 民國 84 年)		6434
台灣集集大地震	1999 (平成 11 年, 民國 88 年)	4 年	2444
日本東北大地震	2011 (平成 23 年, 民國 100 年)		15875

2013年3月5日星期二

福島核災是怎麼發生的

這是轉載自今天自由時報回顧福島核災始末文章. 清楚了吧, 人類對核能的了解與控制是沒有問題的 (要不然核彈部隊應該會睡不著覺), 有問題的是管理能力, 人謀不臧與無法預期的天災, 會讓自以為天衣無縫的控制系統完全破功, 而這種來自上帝的權柄, 是絲毫隙縫都不能有的, 一破功就完蛋. 沒有三兩三就上梁山, 還真是大膽. 不要以為能變些戲法, 就能當上帝顯神蹟啊!

13公尺大海嘯釀福島核災

"二○一一年三月十一日下午二時四十六分，日本東北外海發生芮氏規模九．○強烈地震。位於福島縣的東京電力公司第一核電廠，偵測到地震發生，運轉中的一到三號機組啟動自動停機程序，四到六號機組則正處於停機定檢中。反應爐自動停機後必須持續進行冷卻，但用來驅動冷卻和控制系統的外部電源，卻因地震遭到破壞而中斷供電，廠方只能依賴柴油發電機組緊急供電。但在地震後席捲而來的十三公尺高大海嘯，卻跨過核一廠五．七公尺的堤防，淹沒緊急供電用的柴油發電機。
地震發生後一小時，反應爐冷卻系統因供電中斷而停機，爐心空燒而出現「爐心熔毀」，並產生大量氫氣。一號、三號及四號機組密閉廠房數日內相繼發生氫爆，大量輻射物質外洩。二十日，儘管恢復供電，各機組陸續重獲自動冷卻功能，但爐心熔毀與輻射外洩災難已無法挽救。"

ExtJs 環境部署

請先連到 ExtJs 官網的下載頁, 點選開源的 GPL 版本下載, 目前 (2013-01-02) 為 4.1.1a 版.
解開 ext-4.1.1a.zip 後, 將其中的 ext-all.js, ext-all-debug.js, bootstrap.js 檔與 resources 目錄複製到專案目錄下.
其中 ext-all-debug.js 是開發階段使用的版本, 程式若有問題可看到錯誤資訊, 而 ext-all.js 則為專案完成後的使用版, 是利用 YUI Comressor 壓縮 (消除空白, 換行與註解) 與混淆 (所有區域變數重新命名為短的名稱) 的版本. 而 bootstrap.js 則是會依據環境動態載入 debug 或完成版.
將專案目錄下欲取用 ExtJs 的網頁的標頭中加入如下標籤即可 :

產品版部署方式

<link rel="stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>

部署 ext-all.js 將匯入完整的 ExtJS 框架, 適合正式服務使用.

開發版部署方式

<link rel="stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all-debug.js"></script>

部署 ext-all-debug.js 將匯入未壓縮版的 ExtJS, 適合開發時用.

自動部署方式

<link rel="stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript" src="bootstrap.js"></script>

部署 bootstrap.js 時, 若為下列三種情形會動態匯入 ext-all-debug.js, 否則匯入 ext-all.js :
(1). 主機名稱為 localhost
(2). 主機名稱為 IPv4 位址
(3). 協定為 file

Sencha CDN 部署方式

<link rel="stylesheet" href="http://cdn.sencha.com/ext-4.1.1-gpl/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all.js"></script>
如果不自行部署, 可以利用 Sencha 公司的 CDN 來匯入 ExtJS4 (參考 : Sencha 論壇). 上面是產品版的 CDN 位址 :
http://cdn.sencha.com/ext-4.1.1-gpl/resources/css/ext-all.css
http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all.js
同樣地, 開發版用的是 :
http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js
而動態部署則是 :
http://extjs.cachefly.net/ext-4.1.1-gpl/bootstrap.js

以上部署 ExtJS 後, 即可在本機目錄上測試開發 ExtJS 專案, 除了 Ajax 應用之外 (因為 Ajax 功能需要網頁伺服器才能顯示結果). 對於 Ajax 相關的專案, 必須將以上之 ExtJS 檔案與目錄部署到網頁伺服器. 若在本機測試, 以 AppServ 安裝 PHP 為例, 可將 ext-all.js, ext-all-debug.js, bootstrap.js 檔與 resources 目錄複製到 C:\AppServ\www\extjs 的專案目錄下, 如此便可用 http://localhost/extjs 來測試網頁了.
測試範例 (訊息盒) :

訊息盒範例

<html>
<head>
<title>ExtJS4 Test</title>
<link href="resources/css/ext-all.css" rel="stylesheet"></link>
<script src="ext-all.js" type="text/javascript"></script>
</head>
<body>
<script>
Ext.onReady(function() {
Ext.MessageBox.alert("訊息", "您好! Hello World!");
});
</script>
</body>
</html>

2014-07-09 補充 :
Sencha 公司的 ExtJS CDN GPL 版本最新僅支援到 4.2.0 版, 加上繁體中文化如下 :

Sencha CDN 部署方式

注意, 這裡統一由 cdn.sencha.com 提供資源, 也可全部改為 extjs.cachefle.net 提供.

2013年3月4日星期一

關於核四

最近廢核鬧得沸沸揚揚, 擁核的又搬出那一套 "核能最乾淨最便宜, 火力造成污染, 廢核就要限電漲價" ... 普羅大眾, 不管懂不懂核能是啥東西, 都能講出一套道理來, 呵呵, 看報紙說報紙罷了. 我反對核四, 不講別的, 光是工程弊案就夠了, 這不是列車出軌, 橋樑斷裂, 死個幾百人就能搞定的事情. 連做事態度最認真的日本人, 都能把地震導致的核災搞成這樣, 你摸摸良心, 我們的話會怎樣? 唉喲, 別擔心啦, 馬先生說核四不安全的話, 絕不運轉, 能聽嗎? 能信嗎? 呵呵, 我寧願去甲賽啦.
"人類玩得太過火, 核能這東西是上帝的權柄, 愛因斯坦晚年很後悔向羅斯福提出研發原子彈的建議...別說核電廠跟原子彈不同那種鳥話, 他們的差別只在於, 是不是 "轟轟烈烈" 的死去罷了 ... "

jQuery UI 執行環境配置

好久沒整理 jQuery 筆記了, 到官網一看, 哇, 都已經升到 jQuery 1.9.1, 而 UI 也升到 1.10.1 版了. 順便更新一下筆記中的環境配置如下, 這是針對內部網站使用才需要, 外部網站可直接使用 Google 或 jQuery 官網的 CDN :

下載 jQuery 與 jQuery UI : 目前是 1.10.1 版
雖然 jQuery UI 1.10.1 已將最新的 jQuery 1.9.1 版打包在內, 但是卻不是壓縮檔.
到 jQuery UI 官網 : http://jqueryui.com/download/
網頁拉到最底下按 Download 即可.
再把網頁拉到最上面, 在 stable 後面有個 Themes, 可下載打包好的全部佈景主題 zip 檔.
再到 jQuery 官網 : http://jquery.com/download/
下載壓縮版 jquery-1.9.1.min.js : Download the compressed, production jQuery 1.9.1
將下載的 jquery-ui-1.10.1.custom.zip 檔解開, 裡面有三個目錄與一個檔案 index.html.
(1) css : 佈景主題 Theme, 預設只有 ui-lightness
(2) js : Javascript檔, 包括 jquery-1.9.1.min.js 與 jquery-ui-1.10.1.custom.min.js, jquery-ui-1.10.1.custom.js.
(3) development-bundle : 開發時的原始檔
只要保留 css 與 js 這兩個目錄就可以讓 jQueryUI 運作了, development-bundle 目錄可以刪除. 如果需要切換主題, 可以將 css 目錄也刪除, 解壓縮布景主題 jquery-ui-themes-1.10.1.zip 檔, 裡面有一個 themes 目錄, 把 themes 目錄複製到 jQuery UI 的目錄下 (共有 25 個主題). 另外把下載的 jquery-1.9.1.min.js (91K) 複製到 js 目錄下, 刪除非壓縮版 jquery-1.9.1.js (263K) 與 jquery-ui-1.10.1.custom.js (430K).
製作 HTML 檔 :
<head><title>jQuery 測試</title>
<link type="text/css" href="themes/smoothness/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js"></script>
</head>
下列例子是在名為 date 的文字欄位上加入 jQuery 的日期選擇器功能 :
<input type="text" size="20" name="date" id="date" />
<script language="JavaScript">
$('#date').datepicker();
</script>
從 Google 或 jQuery CDN 匯入 :
如果是外部網站, 可以直接從 Google CDN 匯入框架 :
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js">
或者從 jQuery CDN 匯入 :
<link type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
</head>
我的主題布景測試網頁 :
這是我將官網下載 index.htm 測試網頁改裝成 PHP, 可以用下拉式選單切換主題 :
http://mybidrobot.allalla.com/jquerytest/jqueryui_test_all.php (jQuery UI 1.10.2 已去除 base)
這是在 PHP 檔一開頭先判斷有無傳出 theme, 沒有預設為 hot-sneaks :
<?php
if (is_null($_POST["theme"])) {$theme="hot-sneaks";}
else {$theme=$_POST["theme"];}
?>
再加上一個拉霸 :
<form method=post action="jqueryui_test.php">
<select name="theme" onchange="javascript:this.form.submit();">
<option value="base"<? if($theme=="base") {echo " selected";}?>>base
<option value="black-tie"<? if($theme=="black-tie") {echo " selected";}?>>black-tie
<option value="blitzer"<? if($theme=="blitzer") {echo " selected";}?>>blitzer
<option value="cupertino"<? if($theme=="cupertino") {echo " selected";}?>>cupertino
<option value="dark-hive"<? if($theme=="dark-hive") {echo " selected";}?>>dark-hive
<option value="dot-luv"<? if($theme=="dot-luv") {echo " selected";}?>>dot-luv
<option value="eggplant"<? if($theme=="eggplant") {echo " selected";}?>>eggplant
<option value="excite-bike"<? if($theme=="excite-bike") {echo " selected";}?>>excite-bike
<option value="flick"<? if($theme=="flick") {echo " selected";}?>>flick
<option value="hot-sneaks"<? if($theme=="hot-sneaks") {echo " selected";}?>>hot-sneaks
<option value="humanity"<? if($theme=="humanity") {echo " selected";}?>>humanity
<option value="le-frog"<? if($theme=="le-frog") {echo " selected";}?>>le-frog
<option value="mint-choc"<? if($theme=="mint-choc") {echo " selected";}?>>mint-choc
<option value="overcast"<? if($theme=="overcast") {echo " selected";}?>>overcast
<option value="pepper-grinder"<? if($theme=="pepper-grinder") {echo " selected";}?>>pepper-grinder
<option value="redmond"<? if($theme=="redmond") {echo " selected";}?>>redmond
<option value="smoothness"<? if($theme=="smoothness") {echo " selected";}?>>smoothness
<option value="south-street"<? if($theme=="south-street") {echo " selected";}?>>south-street
<option value="start"<? if($theme=="start") {echo " selected";}?>>start
<option value="sunny"<? if($theme=="sunny") {echo " selected";}?>>sunny
<option value="swanky-purse"<? if($theme=="swanky-purse") {echo " selected";}?>>swanky-purse
<option value="trontastic"<? if($theme=="trontastic") {echo " selected";}?>>trontastic
<option value="ui-darkness"<? if($theme=="ui-darkness") {echo " selected";}?>>ui-darkness
<option value="ui-lightness"<? if($theme=="ui-lightness") {echo " selected";}?>>ui-lightness
<option value="vader"<? if($theme=="vader") {echo " selected";}?>>vader
</select>
</form>
最後把官網的 index.htm 內容貼上即可.

2013年3月2日星期六

Google Calendar 簡訊功能

今天忘記一件非常重要的事情 : 二哥的入學審查會, 前幾天就已經把證件都準備好了, 結果放在書櫃被一堆文件掩蓋, 這幾天又忙寫程式, 直到中午去接二哥時, 他問我國中入學之事, 我還沒想起來, 還進去 Yamaha 問佳潁讀哪一所, 回到家二哥才問哪天審查, 我說三月二日呀, 姐姐說就是今天啊, 趕緊跑去學校, 早已解散了, 不過警衛說下週一可以補交, 還好.
對 schedule 非常注重的我來說, 這真的是非常嚴重的一次失誤, 沒有落實馬上辦, 直接在手機設提醒或鬧鐘的結果, 要深刻檢討與反省. 生活中還有很多事情也都是如此, 像美元保費, 一拖再拖, 結果逾期還買得比較貴, 也不是搞不清楚輕重緩急呀, 就是因循苟且, 被眼前事物拖住, 不肯馬上處理緊急事項, 非要燒到屁股才處理.

回來馬上找出 Google 的書, 裡面有提到 Google Calendar 可設定 SMS 提醒, 以前就知道了, 但就是沒善用. 設定方法如圖所示 :

2013年3月1日星期五

Google Chart API 的必要參數

上一篇整理了 Google Chart API 的基本使用方法, 提到要利用此 API 繪圖至少要有三個必要參數 : cht (圖表型態), chs (圖表大小), 以及 chd (數據參數), 說明如下 :

圖表大小參數 chs (s=size)
此為必要參數, 用來設定 png 圖片的大小 :
chs=寬度x高度 (單位為 px)
Google 對圖片解析度是有限制的, 最大為 30 萬平方像數, 地圖最大 440x220.

圖表類型參數 cht (t=type)
此為必要參數, 有的圖表類型還細分為多個子型 :

圖表類型	cht 參數值
折線圖 line chart	lc (可多組折線), lxy (一條折線), ls (無座標軸 sparklines)
長條圖 bar chart	bvg (垂直並列=直條圖), bhg (水平並列=橫條圖), bvs (垂直堆疊圖), bhs (水平堆疊圖)
圓餅圖 pie chart	p (2D 圓餅), p3 (3D 圓餅), pc (2D 同心圓餅)
地圖 map chart	t
散佈圖 scatter chart	s
維恩圖 Venn chart	v
雷達圖 radar chart	r (直線型), rs (曲線型)
Google-o-meter	gm
QR code	qr
數學公式 (formula)	tx

其中 QR code 與 Formula 列在 infragraphics 中, 另外 Chart API 還有一個製作動態圖檔之 chst 參數, 可製作各種可愛小圖檔.

數據參數 chd (d=data) 與 chds (s=scale)
此為必要參數, 是 API 繪圖的數據來源, 它有三種格式 (建議使用文字格式) :

格式	語法	範例
文字格式	chd=t:圖表數據字串	chd=t:32.3,5.6,7.7\|44.2,34.1,67.5
簡單編碼格式	chd=s:圖表數據字串	chd=s:Wno\|RjK
擴充編碼格式	chd=e:圖表數據字串	chd=e:

文字格式為明碼, 意即直接以字串數列來表示數值, 可讀性高但字串較長.
有效範圍為 0~100 之浮點數, 超出 100 會被視為 100, 小於 0 或底線會被視為無值.
如果要完整呈現圖形避免被截掉, 可用 chds 參數設定, 其格式如下 :
chds=<series_1_min>,<series_1_max>,...,<series_n_min>,<series_n_max>
每一組數據要找出其最大值與最小值分別依序填入 (漏掉的會準用最後所列之 min/max 值), 實際上比較多組數據時, 只要找出全部數據之一組最大值最小值即可, 例如 chds=-10,150. 或者也可設定為 chds=a 由 API 自動計算.
每個數列以逗號分隔, 若無值則以 "-1" 表示, 若有多組數列, 則以管線符號 "|" 隔開.
例如下列直條圖, -30 與 "_" 一樣被視為無值, 150 超出範圍被截掉為 100 :<img src="http://chart.googleapis.com/chart?chxr=0,0,5|1,0,100&chxt=x,y&chs=300x150&cht=bvg&chco=76A4FB&chd=t:50,-30,10,_,65,150&chg=100,20&chm=N,000000,0,-1,11">

簡單編碼格式則用 A~Z, a~z, 0-9 共 62 個字元來代表 0~61 之數值, 適合數值小於 62 時用. 若無值則以底線 "_" 表示, 若有多組數據, 則以逗號 "," 隔開. 其可讀性差但字串較短. :

A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T	U	V	W	X	Y	Z
0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25

a	b	c	d	e	f	g	h	i	j	k	l	m	n	o	p	q	r	s	t	u	v	w	x	y	z
26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51

0	1	2	3	4	5	6	7	8	9
52	53	54	55	56	57	58	59	60	61

範例中 chd=s:Wno|RjK 即相當於 chd=t:22,39,40|17,35,10.擴充編碼格式則用雙字元組合來編碼, 共有 63x63=3969 種組合, 用來代表數字, 包括小數點, 可以表示浮點數. 詳細說明參考 : https://developers.google.com/chart/image/docs/data_formats
不論是簡單編碼格式或擴充編碼格式, 只要是編碼, 可讀性都較差, 又不是機密, 幹嘛要編碼.

Google Chart API 簡介

忙了兩天終於把 Google Chart API 筆記整理好了, 部分是參考官網翻譯的, 供以後備忘參考.

Google Chart API 簡介

特色 :

免費且不需要密鑰 (Google Map 與 Ajax Search API 則需密鑰).
使用 URL 回傳 png 檔.
透過 Google 提供的 Chart Wizard 可以快速產生所需之 URL 字串.

使用限制 :

Y 軸數值只能介於 0~100, 若值可能超出 100 須按比例縮小.
輸出 png 圖檔解析度最高 300000 平方像數, 地圖最大 440x220.
Google 的 URL 長度限制 : 2K (GET), 16K (POST).
Google 已取消每日 API 呼叫 25 萬次之限制, 但若濫用仍有可能被 Google 仍封鎖.
Google Chart API 已於 2012-03-20 被 Google 列為棄用產品, 改為 Chart Tools, 但仍將繼續提供服務至 2015-03-20 (見棄用政策).

Google Chart API 使用方法

呼叫 Chart API 的 URL 字串格式 :
使用 Google Chart API 只要在標籤的 src 屬性中指定 Chart API 的位置與繪圖相關參數即可. Chart API 會回傳 PNG 圖檔顯示在網頁上. 其格式為 :

src="http://chart.apis.google.com/chart?參數1=值1&參數2=值2&參數3=值3 ...." 或者
src="http://chart.googleapis.com/chart?參數1=值1&參數2=值2&參數3=值3 ...."

主機位址用 chart.apis.google.com 或 chart.googleapis.com 均可.
參數是一個 GET 查詢指令, 基本上可分為兩類, 一是繪圖相關屬性, (例如圖檔大小, 統計圖類型等), 二是統計數據 (即繪圖所需數據). 以 3D 圓餅圖為列 :

<img src="http://chart.googleapis.com/chart?chs=400x120&
cht=p3&
chd=t:78,22&
chco=7777CC|76A4FB&
chdl=Windows|Linux&
chl=Windows|Linux">

其中 chs (圖表大小), cht (圖表類型), 與 chd (圖表數據) 這三個參數是必要參數, 其他參數為備選.
chs=400x120 表示 png 圖檔大小為寬 400px, 高 120px;
cht=p3 表示 3D Pie chart;
chd=t:78,22 表示兩個統計數據 78 與 22

src 屬性值中的特殊符號 & 與 |, Google 建議分別以 & 與 %7C 代替.

訂閱：文章 ( Atom )

A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T	U	V	W	X	Y	Z
0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25

a	b	c	d	e	f	g	h	i	j	k	l	m	n	o	p	q	r	s	t	u	v	w	x	y	z
26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51

A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T	U	V	W	X	Y	Z
0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25

a	b	c	d	e	f	g	h	i	j	k	l	m	n	o	p	q	r	s	t	u	v	w	x	y	z
26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51

2013年3月22日 星期五

2013年3月21日 星期四

2013年3月20日 星期三

2013年3月16日 星期六

2013年3月13日 星期三

hello.php

cron.yaml

main.py

2013年3月10日 星期日

2013年3月8日 星期五

2013年3月5日 星期二

產品版部署方式

開發版部署方式

自動部署方式

Sencha CDN 部署方式

訊息盒範例

Sencha CDN 部署方式

2013年3月4日 星期一

2013年3月2日 星期六

2013年3月1日 星期五

忙了兩天終於把 Google Chart API 筆記整理好了, 部分是參考官網翻譯的, 供以後備忘參考.

Google Chart API 簡介

Google Chart API 使用方法

2013年3月22日星期五

2013年3月21日星期四

2013年3月20日星期三

2013年3月16日星期六

2013年3月13日星期三

2013年3月10日星期日

2013年3月8日星期五

2013年3月5日星期二

2013年3月4日星期一

2013年3月2日星期六

2013年3月1日星期五

A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T	U	V	W	X	Y	Z
0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25

a	b	c	d	e	f	g	h	i	j	k	l	m	n	o	p	q	r	s	t	u	v	w	x	y	z
26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51