pCloud Partner Program

Yahoo天氣RSS API需要驗證

程式技術 2016/05/18 15:16
views: 52294 times
之前的一個使用天氣 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 回傳結果.

參考之前文章:
http://diary.tw/tim/1007

top
TAG api, Weather, yahoo, YQL

Google Static Maps地圖實作

程式技術 2016/03/22 18:10
views: 38430 times
Google Static Maps地圖是用在取得地圖資訊時, 最輕量的使用方式, 之前文章: http://diary.tw/tim/1141 使用的 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=320x240&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, 以之前文章 (http://diary.tw/tim/1141)為例, 座標點如下:
    {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=360x360&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 網址的長度上限, 參考舊文: http://diary.tw/tim/64, 在文件內說明也有, 不要超過 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
top

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

程式技術/Javascript 2016/03/10 18:06
views: 37526 times
有個需求是要檢查某地址是否在某特定區域內, 於是思考使用 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

主要程式碼為:


接下來就是由指定的地址查找座標, 這個部分會用到 Google Maps API 中的 geocoder, 只需要將地址傳入, 就可以取得對應的座標了, 參考資料:
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingStatusCodes

程式碼不多, 參考範例:
http://sample.diary.tw/36/map2.htm
輸入地址就可以取得座標(經緯度)

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


最後就是利用一個很重要的判斷式來判斷某地址(已取得座標)是否在指定區域內, containsLocation() 參考: https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation

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

來改寫一下程式碼, 就可以達成判斷指定的地址是否在指定的區域內了, 如範例:
http://sample.diary.tw/36/map3.htm

主要程式碼:


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

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

實作讀取twitter內容的方式

程式技術/PHP 2016/03/09 17:58
views: 45383 times
今天有個需求, 是要讀取某 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, 程式碼如下:

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


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

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

有趣的Google Vision API

WebTrend 2015/12/04 16:12
views: 81540 times
什麼是 Google Vision API, 先來看看影片吧:



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

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

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

繼續閱讀:
http://googlecloudplatform.blogspot.co.uk/2015/12/Google-Cloud-Vision-API-changes-the-way-applications-understand-images.html
http://www.bnext.com.tw/ext_rss/view/id/1122812
top

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

程式技術 2015/03/08 23:50
views: 73798 times
繼上次 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

top
TAG api, avatar, Google, id, plus

Facebook Avatar - 大頭圖取得

程式技術 2015/01/30 00:03
views: 79607 times
可以利用 Facebook 的 Graph API 進行即可.

facebook avatar api:

http://graph.facebook.com/[user-id]/picture default: 50x50

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

其中的 [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
top

Google QRCode Chart API

WebTrend 2014/08/26 12:16
views: 173855 times
使用 Google Chart API 來產生 QRCode 很方便, 可以參考這裡的資料:
https://developers.google.com/chart/infographics/docs/qr_codes

一般來說會用到的參數共有以下:
1. cht=qr
2. chs=[width]x[height] (產生的長寬)
3. chl=[data] (要產生的內容, 可以放文字或網址等資訊)

所以以本站網址為例, QRCode 為:
http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http%3A//diary.tw/tim

以圖片顯示為:

Google Chart API 產生 QR Code還真的蠻方便的.

[2014/8/27]
補充, 若是需要大量產生, 可以利用這個網站服務, 一次可以免費批次產生100個QRCode, 也十分方便好用.
http://www.qrexplore.com/generate/

另外也有個線上辨識Barcode、QRCode的服務, 可以用圖片網址或是傳送圖片的方式進行, 方便大家在產生QRCode的驗證.
http://zxing.org/w/decode.jspx
top

使用Facebook FQL查詢留言資料

程式技術 2013/10/25 13:56
views: 262107 times
用 Facebook 的網頁/網站很多, 應該是已經過了大流行的階段, 但是使用 Facebook 的地方還是很多, 如何利用程式將公開性的 Facebook 資料找查出來, 有方便好用的工具可供應用, 就是使用 FQL 查詢. 這裡介紹一般常用在網頁上留言的資料, Comment Plugin, 查找留言資訊.

先來看這篇: https://developers.facebook.com/docs/reference/fql/comment

這篇介紹 FQL 的 comment 資料查找方式, 我們以這個網頁作為例子:
http://sample.diary.tw/18/maps.htm

這裡裝了 Facebook 的 comment plugin, 那我們要查找該頁中 comment 的資料要怎麼查找呢? 首先要先找到該 comment 的 object_id, 該 id 可以利用這頁來找:
https://developers.facebook.com/tools/debug

將上面的 http://sample.diary.tw/18/maps.htm 輸入後, 按下[除錯]鈕, 在最下面的網址可以得到該 comment 的 object_id 為: 10150561101545602, 這個就是在 FQL 中, 查詢 comment 的 object_id. (在 Facebook 中, 會給定的各 object id)

再來就要下 FQL 查找資料了, 語法如下:
SELECT id, text, time, fromid FROM comment WHERE object_id='10150561101545602'

問題是從哪裡下呢? 從這裡 Graph API Explorer:
https://developers.facebook.com/tools/explorer
(若無法使用, 會引導登入 Facebook, 使用 Graph API Explorer需要登入 Facebook)

再將中間原來預設為 Graph API 的功能切到 FQL Query, 接下來把上面的查詢指令輸入, 就會得到目前的留言資料, 以 json 的方式來顯示.
用戶插入圖片

接下來的使用, 相信大家就應該容易多了, 就是解析 json 把資料取出來即可.

那如何使用呢? 在程式中如何呼叫這個查詢, 而不是用 Graph API Explorer, 有沒有看到瀏覽器上方的 url 已經變了, 如下:
https://developers.facebook.com/tools/explorer?fql=SELECT%20id%2C%20text%2C%20time%2C%20fromid%20FROM%20comment%20WHERE%20object_id%3D%2710150561101545602%27
也就是說, 其實就是把查詢放到 url 中的 q 參數即可, 但使用上, 前面的 Graph API Explorer 得改成如下:
https://graph.facebook.com/fql?q=SELECT%20id%2C%20text%2C%20time%2C%20fromid%20FROM%20comment%20WHERE%20object_id%3D%2710150561101545602%27
使用 Graph FQL 查詢即可, 這是不用登入就可以使用的, 也就是說, 在程式中只需要透過 webget 等方法, 就可以取得到內容.

應該會有人問, 這個查詢結果, 其中的 text 是留言沒錯, 但沒有人名, 大頭圖, 那怎麼辦, 很簡單啊, 就再回 FQL 查詢就可以了, 不過若是有 100篇留言就要查 100次耶, 或是 smart 一點, 100篇留言, 共 30 個人在留, 那也需要做 30次的 user 查詢, 怎麼想都很難處理, 所以接下來要介紹的是多重查詢.

多重查詢, 有點像是 SQL 中的子查詢, 在面對這種 FQL 查詢時, 可以利用的技巧, 我們將查詢改一下, 改為如下:

{
"comments": "SELECT id, text, time, fromid FROM comment WHERE object_id='10150561101545602'",
"commenters": "SELECT uid, name, pic_square FROM user WHERE uid IN (SELECT fromid FROM #comments)"
}

對, 正如你看到的, 使用一個 #comments 代替前一個查詢結果, 並代入下一個查詢, 利用 json 格式, 將多重查詢放到 FQL 中, 就可以一次查詢把留言和人帶回來, 忘了說, user FQL 參考資料在這裡:
https://developers.facebook.com/docs/reference/fql/user

第二個查詢中的 uid, name, pic_square 就是常用的使用者代碼, 名稱, 大頭圖資訊.
查詢回傳結果就會有兩個 fql_resulte_set, 分別就是 comments, commenters, 如下:

用戶插入圖片

中間略...
用戶插入圖片

就把留言和留言者一次查回來了.

再來, 如何利用程式 parse json 的回傳結果, 就不用多說了吧, 應該就簡單多了, 快去實做看看吧.
top

從Google Reader API中獲得RSS Cache的資料

blog服務 2012/09/06 17:49
views: 131348 times
相信很多人有用過 Google Reader, 其中有趣的地方, 是今天要介紹的 Google Reader API 中, 把 RSS Cache 的資料讀出來的部分, 先來參考一下文件:

http://code.google.com/p/pyrfeed/wiki/GoogleReaderAPI

其實很容易使用的, 例如:

http://www.google.com/reader/atom/feed/http://diary.tw/tim/rss?n=20
(需要 Google Account 登入)

就可以取得 http://diary.tw/tim/rss 下的資料, 什麼樣的應用情境呢? 例如某網誌的 RSS 只有提供 20 篇最新的資料, 但需要取得舊的資料(當然前提是有其他人在 Google Reader 中訂閱過才行, 也就是 Google Reader 有 cache 過它的 RSS 資料的狀況下), 就可以使用這個 API 了.

又或是原始的網站找不到了, 但在 RSS 中有資料, 就可以利用 RSS Cache 的資料來將原本的網站資料找出來.

使用方式就是上面的說明, 而要換頁的方式, 是使用 more token 的方式, 在 response 的內容中, 會有個 gr:continuation, 這個 tag 就是再下一頁的內容使用, 使用方式是用 c 參數, 如下:

http://www.google.com/reader/atom/feed/http://diary.tw/tim/rss?c=CLK9-LPAya0C

該 token 會依實際狀況改變, 請自行調整. 這樣就可以一直翻頁下去, 直到沒有 gr:continuation tag 時就是沒有更多的最後回應了.

[2012/9/14 18:24]
這裡有 Google Reader API 的資料可供參考:
http://blog.martindoms.com/2009/10/16/using-the-google-reader-api-part-2/

top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...