分類
PHP

使用PHP上傳圖片至Azure Storage供圖檔應用

使用 PHP 將圖檔上傳至 Microsoft Azure 雲端空間供圖檔應用, 有以下幾個步驟:

1. 建立 Azure 的 Storage Account , 並取得 key 與建立 container (也可以使用程式建立)

2. 安裝 Azure PHP Client: http://azure.microsoft.com/en-us/documentation/articles/storage-php-how-to-use-blobs/

2-1. 先安裝 Git
2-2. 依說明建立 composer.json 與下載 composer.phar (http://getcomposer.org/composer.phar), 並進行安裝: php composer.phar install
2-3. 完成程式下載

3. 在 php 程式碼中引入對應程式碼, 以上傳圖檔為例, 程式碼如下:

require_once 'vendor/autoload.php';
use WindowsAzure\Common\ServicesBuilder;
use WindowsAzure\Common\ServiceException;
use WindowsAzure\Blob\Models\CreateBlobOptions;

$connectionString = "DefaultEndpointsProtocol=https;AccountName=[storage account name];AccountKey=[storage access key]";

$blobRestProxy = ServicesBuilder::getInstance()->createBlobService($connectionString);

$content = fopen("myfile.jpg", "r");
$blob_name = "myfile.jpg";
$createBlobOptions = new CreateBlobOptions();
$createBlobOptions->setBlobContentType("image/jpeg");

try {
    //Upload blob
    $blobRestProxy->createBlockBlob("[container name]", $blob_name, $content, $createBlobOptions);
    echo "ok";
    echo "<img src='http://[storage account name].blob.core.windows.net/[container name]/".$blob_name."' />";
}
catch(ServiceException $e){
    // Handle exception based on error codes and messages.
    // Error codes and messages are here: 
    // http://msdn.microsoft.com/library/azure/dd179439.aspx
    $code = $e->getCode();
    $error_message = $e->getMessage();
    echo $code.": ".$error_message."<br />";
}

其中範例中的程式, 並沒有指定對應 blob 中的 Content-Type, 會使用預設的 application/octet-stream , 其實在網頁使用並無影響, 但若是直接連結會變成是下載的狀況, 比較不適合, 而且也應該是指定為正確的 Content-Type 較佳.

若有需要使用到 php 上傳圖檔至 Azure storage, 可以參考上面做法進行上傳應用.

相關資料:
Put Blob: https://msdn.microsoft.com/library/azure/dd179451.aspx

使用 ASP.NET 版本參考這篇:
http://blogs.msdn.com/b/ericsk/archive/2013/12/18/php-on-windows-azure-windows-azure-blob-storage.aspx

分類
Database

Mysql的字串轉型問題

Mysql 在字串欄位比對上, 有個奇妙的狀況. 當然, 在正常一般狀況下不太容易發生.

某欄位 f1 為 varchar 或 char , 而在 where 條件下, 使用了

where f1=’sometext’

這樣沒有問題.

但若是使用了

where f1=0

會發生什麼事呢? 結果是全部成立.

根據 f1=0 來看, mysql 會先將 f1 欄位轉為數字, 而將字串轉為數字, 在 mysql 中, 會是 0 的結果, 導致會全部成立. 檢查以下語法:

SELECT cast( 'test string' AS SIGNED )

結果會是 0 , 也就解開了這個問題.

另外可以參考一下 cast 的語法:
http://dev.mysql.com/doc/refman/5.6/en/cast-functions.html

其 case ( data as type ) 中的 type, 可以為以下幾種:
BINARY[(N)]
CHAR[(N)]
DATE
DATETIME
DECIMAL[(M[,D])]
SIGNED [INTEGER]
TIME
UNSIGNED [INTEGER]

供各位在不小心, 使用了等於零在判斷條件時, 發生問題的參考.

分類
程式技術

如何取得Google Plus的user avatar(大頭圖)

繼上次 facebook 取得大頭圖 (link)後, 這次來說明取得 Google Plus大頭圖的方式.

需要先取得一個 Google Plus API 的 key (目前共有4種, server、browser、android、ios), 依實際需求來使用, 若要方便測試, 可以建立 server api key, 並設限 ip 0.0.0.0/0 全開放, 或是 browser api key 並設限為不限網域全開放.

接下來我們將使用的 Google Plus Api 是這個: plus.people.get, 參考以下網址:
http://developers.google.com/apis-explorer/?hl=zh_TW#p/plus/v1/plus.people.get

由於我們要取得大頭圖, 所以 fields 是使用 image, 可以獲得 api 存取需要以下網址:
https://www.googleapis.com/plus/v1/people/{user_google_plus_id}?fields=image&key={YOUR_API_KEY}

接下來訪問這個 url:
https://www.googleapis.com/plus/v1/people/106189723444098348646?fields=image&key={YOUR_API_KEY}

就可以取得如下回應:

{
 "image": {
  "url": "https://lh3.googleusercontent.com/-Y86IN-vEObo/AAAAAAAAAAI/AAAAAAADO1I/QzjOGHq5kNQ/photo.jpg?sz=50",
  "isDefault": false
 }
}

這個大頭圖的 url 就會出現囉. 大家猜一下是哪位呢?

參考資料:
http://stackoverflow.com/questions/17962759/is-it-possible-to-create-an-avatar-profile-picture-link-from-a-google-id
https://developers.google.com/+/api/oauth?hl=zh-tw

分類
程式技術

Facebook Avatar – 大頭圖取得

可以利用 Facebook 的 Graph API 進行即可.

facebook avatar api:
http://graph.facebook.com/[user-id]/picture default: 50×50

http://graph.facebook.com/[user-id]/picture?height=100&width=100 for 100×100

其中的 [user-id] 直接拿驗證後的 fbid 值即可, 原始的 fbid 也是可以正常使用的, 另外有設定自訂名稱的亦可.

參考資料: https://developers.facebook.com/docs/graph-api/reference/v2.2/user/picture?locale=zh_TW

例如:

http://graph.facebook.com/4/picture
http://graph.facebook.com/zuck/picture
http://graph.facebook.com/4/picture?height=300&width=300

分類
程式技術

雙斜線的使用方式

今天在幫一個網站處理加上 SSL 時, 發現有個使用 jQuery 的效果消失了, 經檢查後, 發現其實是因為該網頁使用了 http://code.jquery.com/jquery-latest.min.js 的 jQuery library.

為了解決這個問題, 當然就是再加上 https 就可以了. 不過有沒有更好的方式呢? 答案是有的, 使用 // 雙斜線來處理.

//code.jquery.com/jquery-latest.min.js

這樣的語法, 是告訴瀏覽器, 使用”繼承”的 protocol, 也就是說, 主 url 上使用是 http, 這裡就用 http, 而原本是走 https , 這裡就用 https.

簡單來說, 一種方式就是 library 就都用 https 的方式, (當然原本的 library 網站要有支援 https, 目前絕大部分的 cdn library 都有), 否則使用這種 double forward slash 也是很不錯的方式, 解決開發環境只用 http, 而 production 環境使用 https 的狀況.

分類
Javascript

[json]如何讀取含有減號的json key

剛在撰寫程式碼時, 發現要取回 aws cloudsearch 中的搜尋使用時間, 其傳回的 json 參數中, 使用了減號, 該鍵值為 time-ms , 其實很直覺地要使用, 但又覺得怪怪的, 一執行馬上就有問題.

因為原來的 jsonObj.time-ms 會被視為 jsonObj.time – ms , 所以必須調整寫法, 正確寫法如下:

jsonObj["time-ms"]

這樣就可以了, 當然, 該回應的 json 中, 該鍵值(key)也必須是使用引號包起來的, 否則該 json 物件也會有問題.

測試程式碼如下:

var a = { 
  "mykey": "value1", 
  "my-key": "value2",
}
alert(a["my-key"]);

會回應 value2 這樣就對了.

參考資料:
http://stackoverflow.com/questions/13869627/unable-to-access-json-property-with-dash

分類
ASP

[ASP]過濾非BIG5編碼字元

這篇文章利用了之前的單字元判斷是否為 BIG5 的 ASP程式進行實作 (link), 由於是一個字一個字判定, 所以效率不會太好, 但可以快速解決有關在 UTF-8轉到 BIG5時, 不在該字元集的文字內容, 以過濾掉這類特殊的問題. 程式碼如下:

Function IsBig5(strChar) 
    ' check A440~C67E 常用字, C940~F9D5 次常用字 
    session.codepage="950"  
    Dim lngAsc  
    lngAsc = Asc(strChar)  
    IsBig5 = (lngAsc >= -23488 And lngAsc <= -14722)  
    If Not IsBig5 Then IsBig5 = (lngAsc >= -14016 And lngAsc <= -1579)  
    session.codepage="65001"  
End Function

Function TrimNonBig5(strUTF8)
    For i=1 to Len(strUTF8)  
        charTemp = Mid(strUTF8,i,1)  
        If IsBig5(charTemp) Then
            TrimNonBig5 = TrimNonBig5 + charTemp
        End If
    Next  
End Function

str1 = "桃之雫果凍"
response.write TrimNonBig5(str1)
' output 桃之果凍

str2 = "洋風和菓子零食"
response.write TrimNonBig5(str2)
' output 洋風和子零食

str3 = "游錫堃王建煊"
response.write TrimNonBig5(str3)
' output 游錫王建

以上的程式可以有效地將非在 Big5 字元集中的文字過濾, 避免與傳統編碼程式溝通時的問題.

[2014/11/10 11:12]
若是有需要再補上 ASCII 字元集區段的部分, 可以使用 ASC 於 32~126 的 ASCII Printable 即可(參考資料: http://en.wikipedia.org/wiki/ASCII#ASCII_printable_code_chart), 記得是在轉 code page前測試 ASCII, 程式碼如下:

Function IsBig5Asc(strChar)
    ' check A440~C67E 常用字, C940~F9D5 次常用字, asc printable 32~126
    Dim lngAsc
    lngAsc = Asc(strChar)
    IsBig5Asc = (lngAsc >= 32 And lngAsc <= 126)
    session.codepage="950"
    lngAsc = Asc(strChar)
    If Not IsBig5Asc Then IsBig5Asc = (lngAsc >= -23488 And lngAsc <= -14722)
    If Not IsBig5Asc Then IsBig5Asc = (lngAsc >= -14016 And lngAsc <= -1579)  
    session.codepage="65001"  
End Function

Function TrimNonBig5Asc(strUTF8)
    For i=1 to Len(strUTF8)  
        charTemp = Mid(strUTF8,i,1)  
        If IsBig5Asc(charTemp) Then
            TrimNonBig5Asc = TrimNonBig5Asc + charTemp
        End If
    Next  
End Function

str1 = "桃之雫果凍1200G(1.2公斤)"
response.write TrimNonBig5Asc(str1)
' output 桃之果凍1200G(1.2公斤)
分類
Javascript

身份證字號產生器/檢查器

身份證字號檢查可以參考這裡:
http://zh.wikipedia.org/wiki/%E4%B8%AD%E8%8F%AF%E6%B0%91%E5%9C%8B%E5%9C%8B%E6%B0%91%E8%BA%AB%E5%88%86%E8%AD%89#.E9.A9.97.E8.AD.89.E8.A6.8F.E5.89.87

主要是依照第一碼英文的代碼, 加上後面的個別數字運算而來, 其中第一碼是申報登記戶籍的地點, 共有26個英文字, 第二碼則是性別, 之後則是流水號.

驗證方式如上面連結的說明, 利用該說明, 進行程式實作後, 可以參考這個範例:
http://sample.diary.tw/pid/

上面網址使用純 javascript 撰寫, 並也製作了產生器, 配合 html download blob 語法, 可以下載內容, 十分方便, 可以參考看看.

html download blob 語法可以參考:
http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

較複雜的下載方式, 可以參考這個 FileSaver.js 工具:
https://github.com/eligrey/FileSaver.js

分類
Javascript

在nodejs中發起json post的字元長度問題

在 nodejs 專案中, 若是需要對外發起使用 application/json 的 http post , 若有中文字, 需要注意計算字串長度的問題. 一般發起的程式碼請參考:

http://tech.pro/tutorial/1091/posting-json-data-with-nodejs

不過該範例是使用英文字, 所以沒有問題, 若是要發起中文字的 json http post, 需要調整計算 Content-Length 的方式, 使用 new Buffer(str).length, 如下:

var obj_json = { name: "王大頭", age: 25 };
var json_string = JSON.stringify(obj_json);

var req = http.request({
        host: 'host.example.com',
        port: 80,
        path: '/upload',
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Content-Length': new Buffer(json_string).length
        }
    }, function(res) {
    res.setEncoding('utf-8');
    var responseString = '';
    res.on('data', function(data) {
        responseString += data;
    });
    res.on('end', function() {        
        console.log(responseString);
    });
});

req.on('error', function(e) {
  // http post error
});    

req.write(json_string);
req.end();

參考資料: http://cnodejs.org/topic/50616f5301d0b801482695cf

分類
Javascript

lable標籤包住的問題

在現在使用手機瀏覽網頁愈來愈普遍的時候, 著重對手機網頁的效果也愈來愈重要.

最近測試到一個問題, 被 label 包起來的多個 input box 時, 會發生即時點到後第二或第三個 input box 也會 focus 到第一個 input box 的問題. 如下面的 html

<label>
  <input type=text size="3">-
  <input type=text size="3">-
  <input type=text size="3">
</label>

其實這個問題的原因很單純, 因為 label 是用來強化使用者輸入便利性的標籤, 拿來包多個 input 會發生只會指向第一個 input 是因為原始的設計導致, 目前測試在桌機的 firefox 、android 原生瀏覽器、android chrome瀏覽器、iphone/ipad safari瀏覽器, 都會有這樣的現象, 但桌機的chrome, 桌機的IE11則不會, 原因可能和取得物件焦點的順序有關.

無論如何, 包多個 input 在一個 label 不是一個正確的作法, 要避免這個狀況, 就是不在把多個 input 放在一個 label 中即可.

測試網頁 http://sample.diary.tw/35/label.htm

html label標籤的用法, 可以參考這裡: http://www.w3schools.com/tags/tag_label.asp