分類
程式技術

好用Google中文字體

製作網站時, 前端的中文字體真的是很傷腦筋, 又沒有那麼多的選擇, 又需要考慮使用者端是否有對應的字型. Google Font 計畫提供了許多字型可供應用, 也有不少繁體字型可供應用.

先來看看有哪些吧:

https://fonts.google.com/earlyaccess

上面是目前所有新增的 Google Font 的字體(非英文與拉丁文為主的), 我們可以用 Chinese 來查看看有哪些:

楷體 cwtexkai
圓體 cwtexyen
仿宋體 cwtexfangsong
Noto Sans TC notosanstc
明體 cwtexming
黑體 cwtexhei

這6種字體可供應用, 使用方式也很簡單, 直接使用對應的 CSS 即可, 以楷體為例, 可以看到他的 CSS 引入語法如下:

@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);

之後只需要在對應的 class 下 font-family 語法即可, 如下:

font-family: 'cwTeXKai', serif;

為方便一次檢視所有字體, 可以參考範例資料:

http://sample.diary.tw/42/index.htm

繼續閱讀:
http://www.ithome.com.tw/news/108941

分類
程式技術

Google Static Maps地圖實作

Google Static Maps地圖是用在取得地圖資訊時, 最輕量的使用方式, 之前文章: http://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, 以之前文章 (http://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 網址的長度上限, 參考舊文: http://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

分類
WebTrend

有趣的Google Vision API

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

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

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

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

繼續閱讀:

分類
WebTrend

付費空間無上限-Amazon CloudDrive

個人用雲端空間, 大家都很熟悉了.

像是 Dropbox, Google Drive, OneDrive, Box, Mega, Copy 等, 相信大家都不陌生, 不過有個挑戰者來了, Amazon CloudDrive.

先來看看各家方案:
Dropbox: https://www.dropbox.com/plans
免費 2GB/每月USD9.99 1000GB

Google Drive:
免費 15GB/每月USD1.99 100GB/每月USD9.99 1TB

OneDrive: https://onedrive.live.com/about/zh-tw/plans/
免費 15GB/每月NTD60 100GB/每月NTD219 1TB

Box: https://www.box.com/pricing/
免費 10GB/每月USD10 100GB

Mega: http://mega.and1.tw/zh_tw/
免費 50GB/每月NTD399 500GB/每月NTD799 2TB/每月NTD1199 4TB

Copy: https://www.copy.com/page/home;section:plans
免費 15GB/每月USD4.99 250GB/每月USD9.99 1TB

再來就是有趣的 Amazon CloudDrive: https://www.amazon.com/clouddrive/home
沒有免費/每年USD11.99 5GB+Photo無限/每年USD59.99 無限

真的是很破壞性的價格, 當然還有大陸的許多空間沒有列入, 不過以上面個人使用的狀況來看, Dropbox 和 Google Drive 、One Drive、Box都有方便的同步工具, 而目前 Amazon Cloud Drive 僅有上傳工具, 目前尚沒有好用的同步工具.

但就價格來看, 真的是很破壞性的價格, 但使用在工作上, 似乎又不是那麼便利.

若是後面它能有更棒的同步工具, 相信會有另一番競爭力.

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

分類
程式技術

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

分類
WebTrend

Google QRCode Chart API

使用 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=200×200&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

分類
懶得分類

MSN移轉到Skype了

繼 Google Reader 要停後, MSN於今日要正式停止服務了.

死忠派, 最後還是得要換, 不過就是依原本預期的做法, 原 skype 帳號還是 skype 帳號, msn 轉過來的, 也就是獨立的, 不合併.

因為知道群組不會移轉過去, 所以用了這個暗黑執行緒大大的工具來做移轉: http://www.darkthread.net/MSNCatgTool/MSNCatgToolv125.htm

過程順利無痛, 有痛的地方就是沒有 msn 了….

沒有 msn了….
沒有 msn了….
沒有 msn了….

算了, 沒有就沒有了, 繼續用 skype 吧.

不過, 真的很不習慣的介面, 很不習慣的操作, 文字聊天就 msn 最好用, 語音聊天就 skype 最好用, 手機通訊就 line 最好用, 以上純個人感覺啦!

PS. Google talk 咧…. 呃, 很少用耶…

分類
好用軟體

Gmail線上輸入法

這個是 Gmail 的新功能, 可以在寫信時”線上輸入”多國語言, 簡單地說, 就是把輸入法建在 web 介面上, 直接做輸入工具, 方便在沒有對應語言輸入工具的環境下, 可以輸入對應的語言.

如何啟用呢? 登入 Gmail 後, 從[設定](就是右上的齒輸符號), [設定], [一般設定], 最上面的[語言], 後面有個”顯示所有語言選項”, 然後將”啟用輸入工具”打勾, 再自行選取要使用的工具即可, 記得要儲存設定, 再來到撰寫信件時, 會看到右上的齒輸旁邊出現了輸入法的功能區, 如下:

接下來就是使用它囉, 更詳細的介面可以參考官方網頁: http://gmailblog.blogspot.tw/2012/10/communicate-more-easily-across.html

真的還蠻有意思的, Google 在 Gmail 裡很貼心的設定了這個功能, 在沒有安裝輸入法的狀況下, 使用線上輸入法, 還真的很方便!

分類
blog服務

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

相信很多人有用過 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/