分類
懶得分類

Yahoo大聯盟服務是要停止了嗎?!

今天發現所有的 Yahoo大聯盟推薦購物都破圖了, 檢查一下, 原來是 SSL 憑證到期了, 不過 Yahoo 怎麼會沒有更新這個憑證呢, 真是奇怪. 到期日為 2016/5/4 7:59:59, 如下圖:

所以大聯盟網站也就進不去了, 把訊息貼出來:

親愛的會員朋友您好:

 

Yahoo!奇摩購物中心的大聯盟計畫服務因應Yahoo全球政策,在維運系統軟硬體無法符合現行系統規範考量下,將於2016/5/25起進行服務調整,將停止挑選廣告/挑選商品/推薦清單功能,影響範圍>及說明詳情請參閱大聯盟計畫 服務調整暨帳戶請款說明。

 

若您的推薦方式不受限於商品挑選/廣告挑選/推薦清單功能,相關推薦訂單記錄及成效查詢與線上請款功能仍可持續使用。也歡迎您利用相關功能繼續推薦購物中心商品給更多的使用者。

其中的”大聯盟計畫服務調整暨帳戶請款說明” 連結為: http://ypp-blog.tumblr.com/post/143204425299/大聯盟計畫-服務調整暨帳戶請款說明

看起來也不是會停掉, 不過不知公司內部的狀況如何, 只是沒有 SSL 要怎麼服務就不知道了, 真是奇妙.

帳戶還有餘額的朋友們也快去請款吧(只是請款還是需要透過那個 SSL 到期的網站進行, 也是很難處理), 不知之後還會不會繼續提供服務. 奇怪的處理方式, 真不像 Yahoo 這樣大公司的作法, 只能說一個怪.

另外因為全部破圖(因為SSL到期的關係), 所以在下方的Yahoo大聯盟推薦購物的部分, 也只好全部都下架了, 唉….

[2016/5/5 9:25]
今天早上來檢查一下, 憑證更新了:
當然網站也就可以正常使用了. 快來把推薦購物商品再放回去吧.

[2016/6/1 15:19]從上週四開始, 又破圖了, 而且後台介面中選商品的功能也都全部拿掉了, 看起來離停止這個服務的時間可能就不遠了. 只好再把下面的推薦商品整理一下.

分類
程式技術

如何取消Chrome瀏覽器會出現藍色邊框的狀況

同事問到, 在 Chrome 瀏覽器中, 一些特定的連結(應該是某些已自訂的 class 狀況下), 在點擊時, 會有藍色邊框(就是 focus時), 要如何取消這個功能, 這個部分在 Firefox 與 IE 都不會發生.

模擬的狀況如下:
上圖的左邊是都還沒有 focus 時, 右邊則是 pink button 在 chrome 瀏覽器下的 focus 狀態, 會出現藍框. 範例連結: http://sample.diary.tw/39/index.htm

如何取消這個藍框, 可以使用以下語法:

.b2:focus{
  outline: 0;
}

也就是在 focus 時, 把 outline 設為 0即可. 上面的範例連結, 其中 pink 為 b1 class, lightblue 為 b2 class, 所以 pink 會有藍框, 而 lightblue 在 focus 時, 不會出現藍框.

參考資料: http://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

分類
FreeBSD/Linux

使用wget進行網站用戶驗證方式

今天在設定一個排程作業, 要起動一支程式, 不過該 url 有限定使用 www 驗證的方式, 所以在排程中, 就要給定對應的帳號密碼.

查了一下資料, 可以使用以下語法:

wget [ur] --user=[user] --password=[password]

這樣就可以了, 其實還蠻容易理解與設定.

參考資料:
http://stackoverflow.com/questions/4272770/wget-with-authentication
http://www.ewdna.com/2012/04/wget.html

PS. 若是不要下載檔案, 可以使用 -O (大寫)用來指定輸出檔案至 /dev/null 即可.

分類
好用軟體

好用的Android APP-Llama定位與自動化程式

這個應用程式除了自動化外, 最厲害的地方是利用了基地台定位的方式來進行使用者所在環境的偵測, 為什麼這麼說呢, 相信用過許多自動化程式的朋友們應該知道, 若是要更省手機的用電, 於特定時間或特定地點的特定事件下, 可以關閉藍芽, WIFI 或 Data 與 GPS 等連線, 若要在這樣的條件下偵測地點進而變成 Profile 時, 這個 Llama 就很厲害了.

它是利用了基地台定位方式來判定使用者所在位置, 再來決定地點, 例如工作, 或家中, 就有不同的使用情境, 外出, 或咖啡館, 或圖書館等, 又是不同的情境, 再加上時間條件判斷, 就有組合出許多有用的功能了.

Android 手機下載: https://play.google.com/store/apps/details?id=com.kebab.Llama&hl=zh_TW

這麼強大的功能, 又能強化手機自動化的作業, 真是厲害的設計, 看他的評價就可以知道是很棒的一個軟體.

話說這款軟體好用歸好用, 不過介面可是十分 Geeker 的呢, 深入操作學習, 可以參考以下幾篇教學文:

[Android] 好用的 Android Llama – Location Profiles
http://ephrain.pixnet.net/blog/post/46812060

功能強大的位置設定軟體 – Android Llama
http://darkstorageroom.blogspot.tw/2012/01/llama.html

[教學] Llama – 讓草泥馬幫你完成手機自動化
http://apk.tw/thread-286109-1-1.html

分類
程式技術

Google Static Maps地圖實作

Google Static Maps地圖是用在取得地圖資訊時, 最輕量的使用方式, 之前文章: https://diary.tw/archives/1503 使用的 Google Maps Javascript API 需要引入 javascript library 進行程式操作, 在 Google Static Maps 則僅需要用到 img src 的方式取得圖片即可.

雖然只有圖片, 但是功能還是很強大, 而且應用在低階或網路環境不好的地方特別有用, 尤其是和地圖不互動的狀況下, 只是呈現結果的應用情境, 使用 Google Static Maps 是非常方便好用的.

Google Static Maps 資料可以參考官方網站:
https://developers.google.com/maps/documentation/static-maps/intro

記得一樣要先申請 Google API Key 來使用, 這裡用的就是 Google Static Maps API:

取得 API Key 之後, 就可以來應用了. 基本型如下:

https://maps.googleapis.com/maps/api/staticmap?parameters

其中 parameters 就是要繪製地圖的參數了, 以在地圖上某一地點畫一個座標為例,

https://maps.googleapis.com/maps/api/staticmap?center=25.052019,121.513987&zoom=15&size=320×240&language=zh-TW&maptype=roadmap&markers=color:red|label:A|25.052019,121.513987&key=[your api key]

其中 center 為地圖中心點, zoom 為放大層級, 以台北市為例, 15級或16級都OK, 看應用的狀況, size 為產出的圖片尺寸, 而 language 為地圖的語系, maptype 為地圖的格式, roadmap 為街道地圖(另有 satellite, terrain, hybrid), markers 為要標註的位置, 其中 color 為顏色, 用 | (pipe符號)區隔 marker 的參數, label 為單英數字標籤, 最後則是位置, 再來是最重要的 key 就是要輸入你的 api key, 效果如下:

這個地圖不能互動, 不過可以呈現所需要的資訊, 十分方便, 另外若是希望自訂 marker 的 icon, 可以將 markers 參數改為 icon:[url]|[position]的方式即可, 如下:

markers=icon:http://maps.google.com/mapfiles/kml/shapes/schools_maps.png|25.052019,121.513987

以上圖放到地圖中的效果如下:

另外, 若是想要畫出區域圖, 也可以用這個 Google Static Maps, 以之前文章 (https://diary.tw/archives/1503)為例, 座標點如下:
{lat: 25.0416515, lng:121.5437222},
{lat: 25.0333111, lng:121.543529},
{lat: 25.033116700000004, lng:121.5526271},
{lat: 25.036052399999996, lng:121.55267000000002},
{lat: 25.0374716, lng:121.55146840000002},
{lat: 25.038016, lng:121.5513396},
{lat: 25.0415348, lng:121.5474987},
{lat: 25.0416515, lng:121.5437222}

使用的參數就是 path, 語法如下,

path=pathStyles|pathLocation1|pathLocation2|… etc.

其中 pathStyles 有 wight, color, fillcolor, geodesic 4種參數, 其中 color 與 fillcolor 都是用 0xRRGGBBAA 其中 AA 由 00(不透明)到 FF(全透明) 這樣設定即可.

可以參考: https://developers.google.com/maps/documentation/static-maps/intro#Paths

產生的結果如下:

程式碼如下:
https://maps.googleapis.com/maps/api/staticmap?center=25.037789,121.547375&zoom=15&size=360×360&language=zh-TW&maptype=roadmap&path=color:0xFF0000|fillcolor:0xFF000033|25.0416515,121.5437222|25.0333111,121.543529|25.033116700000004,121.5526271|25.036052399999996,121.55267000000002|25.0374716,121.55146840000002|25.038016,121.5513396|25.0415348,121.5474987|25.0416515,121.5437222&key=[your api key]

十分好用, 但要注意不要超過 url 網址的長度上限, 參考舊文: https://diary.tw/archives/455, 在文件內說明也有, 不要超過 2048bytes: https://developers.google.com/maps/documentation/static-maps/intro#url-size-restriction

另外, 這組 API 每日免費上限為 25,000, 若要更多可以付費方式使用.

[2016/4/20 10:15]
補充一下自訂 marker 的部分, 必須是用 http 而非 https 的方式, 否則將無法正常輸出該自訂 marker, 參考資料:
http://stackoverflow.com/questions/12324996/custom-marker-icon-not-showing-google-static-maps-v2

分類
好用軟體

使用Google Spreadsheets進行自動翻譯

在開發軟體時, 若有多國語系的需求時, 可以請人翻譯, 當然也可以請 Google 翻譯, 不過一則一則翻譯太慢以外, 也不夠系統化, 有沒有更快速的方式呢? 有的, 可以使用 Google spreadsheets進行自動翻譯.

熟悉 excel 的朋友們, 應該不難理解使用公式來計算小計, 加總, 統計等功能, 在 Google spreadsheets 中, 有個 GOOGLETRANSLATE 函數, 可以用來做”計算”翻譯的結果, 使用方式如下:

GoogleTranslate(文字, 來源語言,目標語言)

所以若是要做自動翻譯也就容易了, 如以下畫面的設計:

其中的B2翻譯內容公式為:

=GOOGLETRANSLATE($A3,”zh-tw”,B$2)

其他B2:E9就只是複製這個公式就可以得到結果了. 範例檔案可以參考這個線上連結:

https://goo.gl/bejxJP

如何發揮更多功能, 看你的巧思了.

其中支援語言與代碼參考這裡:

https://cloud.google.com/translate/v2/using_rest#language-params

繼續閱讀:
http://www.playpcesor.com/2015/12/google-excel-translate.html

分類
Javascript

實做使用Google Maps API進行指定位置是否在指定區域內

有個需求是要檢查某地址是否在某特定區域內, 於是思考使用 Google Maps API 來實做, 判斷的部分可以不需要 Google Maps 顯示, 但在測試或開發時, 若有可視的地圖會比較容易理解狀況, 也比較明白指定區域與指定位置的關係, 以下分為幾個部分來進行.

首先需要能繪製指定區域, 這個和程式沒有直接關係, 但透過 Google 的 MyMaps 比較好進行:

http://mymaps.google.com/

進入後, 建立新地圖, 出現 Google Maps 之後, 使用”畫一條線”的”新增內容或形狀”工具來進行區域的繪製:

一點一點地把區域點好後, 點回起點, 就可以產生一個封閉區域了, 再給予命名, 如以下範例:

這個部分可以隨時再進行區域的調整, 到自己滿意為止, 之後我們需要的其實是這個區域的多邊形座標點, 如何取得呢? 點擊新增圖層邊的三個點, 出現選單後, 選匯出成 KML:

就可以取得對應的 KML 檔案了, 打開 KML 檔中, 最重要的是找到座標點, 內容會是這樣的文字:
<coordinates>121.5437222,25.0416515,0.0 …… </coordinates>
這些座標點就是用來做這個指定區域的座標位置了, 接下來才真正要準備實作程式.

寫了一個小程式, 把這些座標點輸出成一串之後 Google Maps API Geometry 會用到的格式:

http://sample.diary.tw/36/tools.htm

我們將上面的 <coordinates> 中的字串, 填入上面小程式的 textarea 之後, 按下”產生區域多邊形座標”, 就可以得到像是這樣的內容:

{lat: 25.0416515, lng:121.5437222},
{lat: 25.0333111, lng:121.543529},
.....

先準備好到這裡, 之後參考這個部分可以進行多邊形繪製:

https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

可以看到其中會需要的陣列就由上面小程式產生的內容填入即可, 記得, 在參考 google maps 的範例程式時, 在 initMap 中, 有個 center 參數和 zoom 參數, 要填入實際上你地圖的位置附近, 不然不會出現在地圖上, 如 google maps 範例內, 是百幕達三角洲地帶, 而且 zoom 是 5, 若是以台北市來看, 大約 zomm 是在 15或16 左右.

如範例: http://sample.diary.tw/36/map1.htm

主要程式碼為:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 25.037828, lng: 121.547204},
  zoom: 16,
});

var testAreaCoords = [
    {lat: 25.0416515, lng:121.5437222},
    {lat: 25.0333111, lng:121.543529},
    {lat: 25.033116700000004, lng:121.5526271},
    {lat: 25.036052399999996, lng:121.55267000000002},
    {lat: 25.0374716, lng:121.55146840000002},
    {lat: 25.038016, lng:121.5513396},
    {lat: 25.0415348, lng:121.5474987},
    {lat: 25.0416515, lng:121.5437222}, 
];

testArea = new google.maps.Polygon({
    paths: testAreaCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.05
    
});
testArea.setMap(map);

接下來就是由指定的地址查找座標, 這個部分會用到 Google Maps API 中的 geocoder, 只需要將地址傳入, 就可以取得對應的座標了, 參考資料:

https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingStatusCodes

程式碼不多, 參考範例:

http://sample.diary.tw/36/map2.htm

輸入地址就可以取得座標(經緯度)

主要程式碼如下(注意, geocoder 是用 callback 方式回傳):

function initMap() {
    geocoder = new google.maps.Geocoder();
}

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            alert("lat=" + results[0].geometry.location.lat() + ",lng=" + results[0].geometry.location.lng());
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

最後就是利用一個很重要的判斷式來判斷某地址(已取得座標)是否在指定區域內, containsLocation() 參考:

https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation

上面的範例是用點擊地圖的方式, 看點擊的位置是否在百幕達三角洲內, 是的話就是紅色 marker, 不是的話, 就用綠色 marker.

來改寫一下程式碼, 就可以達成判斷指定的地址是否在指定的區域內了, 如範例:

http://sample.diary.tw/36/map3.htm

主要程式碼:

// check if position in polygon
if(google.maps.geometry.poly.containsLocation(results[0].geometry.location, testArea)){
    alert("在指定區域內");
}else{
    alert("不在指定區域內");
}

總結一下:

  1. 先製作指定區域座標陣列(多邊形用)
  2. 使用 geocoder 取得指定的地址轉換為座標
  3. 使用 google.maps.geometry.poly.containsLocation 來判斷2.是否在1.裡面

PS. 記得要先到 https://console.developers.google.com/ 建立一個可以使用 Google Maps API 的應用程式, 並建立對應的 browser key 放到上面的程式碼中, 以順利執行你的 web 應用程式.

分類
PHP

實作讀取twitter內容的方式

今天有個需求, 是要讀取某 twitter 帳號的內容, 該帳號內容原本也就是公開的, 所以也就不用 follow 就可以讀取. 以下簡單介紹程式讀取的方式:

1. 先需要有個 twitter 帳號, 而已必須提供手機號碼並驗證
2. 到 https://apps.twitter.com/ 建立一個應用程式, 建立的時候也會通知你的帳號必須滿足上面 1. 的條件
3. 在建立好的應用程式中, 取得兩個重要的參數, key 與 secret (會在 Keys and Access Tokens 頁籤上)
4. 開始實作程式, 先參考這裡:
https://dev.twitter.com/oauth/reference/post/oauth2/token
https://dev.twitter.com/oauth/application-only
使用 oauth 取得 access token, 程式碼如下:

$key = "[your application key]";
$secret = "[your application secret]";
$access_token = "";

$b64 = base64_encode($key . ":" . $secret);

$url = 'https://api.twitter.com/oauth2/token';
$data = array('grant_type' => 'client_credentials');

$options = array(
    'http' => array(
        'header'  => "Content-type: application/x-www-form-urlencoded\r\nAuthorization: Basic " . $b64 . "\r\n",
        'method'  => 'POST',
        'content' => http_build_query($data),
    ),
);
$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);

if ($result === FALSE) { 
    /* Handle error */ 
}else{
    $json = json_decode($result);
    $access_token = $json->{"access_token"};
}

5. 取到 access_token 後, 就可以利用這個 user_timeline API 進行取得對應帳號的 tweeter 內容:
https://dev.twitter.com/rest/reference/get/statuses/user_timeline
程式碼如下:

$url = "https://api.twitter.com/1.1/statuses/user_timeline.json?count=[筆數]&screen_name=[twitter account]";

$options = array(
    'http' => array(
        'header' => "Authorization: Bearer " . $access_token . "\r\n",
        'method' => "GET",
    ),
);
$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);

if ($result === FALSE) { 
    /* Handle error */ 
}else{
    $json = json_decode($result);
    for($i=0;$i<count($json);$i++){
        echo $json[$i]->{"text"} . "<br>";
    }
}

這樣就可以順利取得對應的 twitter 帳號發表的內容了.

這篇使用了 PHP5 不使用 curl 方式的程式內容, 參考這篇(CURL-less method with PHP5):
http://stackoverflow.com/questions/5647461/how-do-i-send-a-post-request-with-php

分類
Database

MS SQL Server將可在Linux環境下執行了

這篇文章: http://blogs.microsoft.com/blog/2016/03/07/announcing-sql-server-on-linux/ 提到了, 即將在 linux 上執行 SQL Server 了.

這個微軟的當家資料庫服務器, 終於跨出了微軟的作業系統了, 有用過的應該都說好, 但到了 linux 下又是另一番風貌, 姑且不論效能如何, 微軟能走出這一步, 真的很值得肯定. 當然相信也能大幅拓展這個在微軟作業系統以外的其他平台市場, 讓 SQL Server 的優點發揮出來.

還蠻期待的.

繼續閱讀:
http://www.bnext.com.tw/article/view/id/38871

分類
WebTrend

智慧家庭還是恐怖家庭

這篇文章很有意思: http://www.bnext.com.tw/article/view/id/38864

提到科技進步到哪裡, 惡意駭客就往哪裡去.

的確, 隨著科技進步, 許多因應而生的問題也就接踵而來, 看看這篇文章的情境, 真的是如此, 大家除了要小心惡意的連結外, 其實麻煩的還有即使是官方的 APP 下載, 有時也會有可能有一些問題在, 無論如何, 小心防範很重要.

其中, 智慧家庭還恐怖家庭, 完全擊中我的笑點, 真的, 若是安全性有疑慮, 也會造成一定的風險與問題, 就像是最近很熱門的 FinTech, 隨著新穎進步的支付方式, 也就有更新的詐騙手法, 工具與科技的進步一定是兩面刃, 提高警覺才是重點啊.