分類
好用軟體

WordPress的網站縮圖API-mShots

這個是依附在 akismet 下的透過網址可以成生網站的縮圖, API的語法如下:

https://s0.wp.com/mshots/v1/https%3A%2F%2Fdiary.tw%2F?w=800

其中有兩個部分, API為: https://s0.wp.com/mshots/v1/ 後面直接加上 urlencode 後的網址, 另外有個參數是 w 為指定寬度.

以上面的網址來看, 就是本站的首頁 https://diary.tw/ , 而 urlencode 後就是 https%3A%2F%2Fdiary.tw%2F , 並加上 ?w=800 來產出圖檔囉.

像是

這個專案的 GitHub 連結: https://github.com/Automattic/mShots/

PS: 在 WordPress後台留言管理介面會用到這組 API, 若要停用可以參考這篇: https://wordpress.org/support/topic/how-to-disable-mshots-service/

繼續閱讀:

https://shkspr.mobi/blog/2018/12/using-the-wordpress-mshots-screenshot-api/

分類
程式技術

取得Youtube影片的縮圖

之前介紹過 Youtube Data API (https://diary.tw/archives/2032), 其中利用 part=snippet 可以取得縮圖的網址, 不過仔細看一下, 目前應該都統一了, 其實只需要 videoId 就可以自行組合出對應的縮圖, 清單如這裡:

https://developers.google.com/youtube/v3/docs/thumbnails

其中預設會出現的有: default, medium, high, standard, maxres 共計5組, 不過再觀察 player用的縮圖, 預設也會有 0, 1, 2, 3 共計 4組, 合起來就會有 9組圖檔.

網址也很單純, 也就是:

https://img.youtube.com/vi/[videoId]/[thumbnail_type].jpg

分類
程式技術

Youtube Data API 中的Category ID

上次寫了 Youtube Data API (https://diary.tw/archives/2032) 來看看若要加上分類要如何進行.

當然需要先取得 category id 囉 (API中的欄位是 videoCateogryId), 從網路上找到的資料如下:

https://gist.github.com/dgp/1b24bf2961521bd75d6c

由於各國家/地區的 category 也可能有不同, 在台灣的清單如下(由上傳分類項目取得): 電影與動畫、汽車與車輛、音樂、寵物與動物、體育、旅遊與活動、遊戲、人物與網誌、喜劇、娛樂、新聞與政治、DIY 教學與生活風格、教育、科學與科技、非營利組織與社運活動.

對應上面的網址如下:

id 中文 英文
1 電影與動畫 Film & Animation
2 汽車與車輛 Cars & Vehicles
10 音樂 Music
15 寵物與動物 Pets & Animals
17 體育 Sport
19 旅遊與活動 Travel & Events
20 遊戲 Gaming
22 人物與網誌 People & Blogs
23 喜劇 Comedy
24 娛樂 Entertainment
25 新聞與政治 News & Politics
26 DIY 教學與生活風格 How-to & Style
27 教育 Education
28 科學與科技 Science & Technology
29 非營利組織與社運活動 Non-profits & Activism

所以若是需要找出教育的排行, 可以利用相同的API, 但多加上videoCategoryId=27:

https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&chart=mostPopular&regionCode=US&videoCategoryId=27&key=[YOUR_API_KEY]

這樣即可取得囉.

[2022/2/17 15:30]

實作出國家/地區與分類項呈現方式, 請參考範例:

https://sample.diary.tw/yttrend/detail.php

 

分類
好用軟體

好用的負載測試工具-k6

在找負載測試工具時, 偶然間發現這個工具, k6:

https://k6.io/

可以使用開源版本自行使用, 或付費使用 cloud方案, 價格如下:

https://k6.io/pricing/

由於是全API/CLI結構, 並提供了大量的範例程式碼, 同時可以滿足壓力測試使用外, 還可以做自動化腳本測試與單元測試等功能, 十分適合開發與上線前驗測的作業與準備.

文件十分完整與容易上手:

https://k6.io/docs/

大家可以自行測試看看.

繼續閱讀:

分類
程式技術

Yahoo天氣RSS API需要驗證

之前的一個使用天氣 API 的專案, 因為 Yahoo RSS API 需要驗證, 變成非公開性的 API, 例如:

http://weather.yahooapis.com/forecastrss?u=c&w=2306179

目前會回覆:
Please provide valid credentials. OAuth oauth_problem=”OST_OAUTH_PARAMETER_ABSENT_ERROR”, realm=”yahooapis.com”

而無法順利取得內容, 經查找相關資料, 應該是 3/15 起, yahoo 這組 API 需要做驗證才能使用, 於是找了資料, 可以改用 YQL 的方式來查詢, 相容的查詢指令如下:

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20%20u=%22c%22%20and%20woeid%20=2306179

其中的 YQL 為:

select * from weather.forecast where u=”c” and woeid=2306179

即可獲得相容的天氣 API 回傳結果.

參考之前文章:
https://diary.tw/archives/1215

分類
程式技術

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 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 應用程式.

實作讀取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

有趣的Google Vision API

什麼是 Google Vision API, 先來看看影片吧:

(影片引用自: https://www.youtube.com/watch?v=eve8DkkVdhI)

功能是用 Google 的 Cloud API 來進行視覺辨識的功能, 影片中使用了 GoPiGo (http://www.dexterindustries.com/gopigo/) 來進行影像視覺辨識, 十分有趣而實用的功能, 好厲害呢.

這樣未來的應用就愈來愈多可能了.

繼續閱讀:

分類
程式技術

如何取得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