標籤: Google

好記又好用的DNS服務IP

繼 Google DNS 服務 8.8.8.8, 8.8.4.4 兩組好記的 IP 之後(https://zh.wikipedia.org/wiki/Google_Public_DNS), 又有好記的 DNS Service IP 囉.

IBM 的 Quad9 服務, DNS Service IP 為 9.9.9.9, 除了提供 DNS 服務外, 還多了檢查安全性的功能呢. (https://www.techbang.com/posts/55177-ibm-announces-free-dns-referral-service-quad9-as-long-as-the-dns-server-is-set-to-9999-to-block-malicious-web-sites)

另外是知名快取服務供應商 Cloudflare 提供的 1.1.1.1, 提供了最快速的 DNS 服務.(https://www.ithome.com.tw/news/122215)

有這麼好記又好用的 DNS 服務真是太棒.

標籤 cloudflare, dns, Google, IBM

好用軟體

Google線上學習數位課程

Google 推出了線上學習的數位課程, 有中文版本, 很棒呢, 對於想學習數位, 而又不得其門而入, 或是想要了解更多數位領域的資訊, 是很好的學習資訊, 中文版本:

https://learndigital.withgoogle.com/digitalgarage-tw/

原英文版本:

https://learndigital.withgoogle.com/digitalgarage/

利用影片與教材和課後測驗, 來進行學習, 十分有趣又可以增加數位資訊學習, 很不錯呢.

標籤 Digital, Google

好用軟體

使用Google Spreadsheet產生條碼(Barcode)

文章作者作者: tim
文章發佈日期 2018-01-30
在〈使用Google Spreadsheet產生條碼(Barcode)〉中尚無留言

使用 Google 的 Spreadsheet 產生條碼, 其實是使用外部 API 來達成, 配合 Spreadsheet 中的函數:

=image(url, [mode], [width], [height])

來進行. 函數說明可以參考: https://support.google.com/docs/answer/3093333

這裡使用了兩家 API, 1 為 barcodesinc, 2 為 tec-it 這兩個 api.

1. https://www.barcodesinc.com/generator/
2. https://barcode.tec-it.com/

以舒潔衛生紙為例, 國際條碼為: 4710114813019

若生成 CODE 128 使用 barcodesinc 使用 url:
https://www.barcodesinc.com/generator_files/image.php?code=4710114813019&style=196&type=C128A&width=200&height=100&xres=1&font=3

若生成 EAN13 使用 tec-it 使用 url:
https://barcode.tec-it.com/barcode.ashx?data=4710114813019&code=EAN13&dpi=96&dataseparator=

若資料為變數儲存格, 則使用以下語法:
=image(“http://www.barcodesinc.com/generator/image.php?code=” & C3 & “&style=196&type=C128A&width=200&height=100&xres=1&font=3”)

以下為範例結果:

填入即可, 參考範例文檔:
https://goo.gl/v6rc4L

標籤 2D, barcode, Code128, EAN13, Google, image, Spreadsheet

程式技術

使用Google Drive API讀取文件內容供前端應用

有時在做一些小型的前端介面, 需要 CMS (內容管理系統) 的上稿功能, 來進行內容管理, 不過實做上稿系統需要相當的時間與設計, 若能使用更簡便的方式, 將能大量節省維護的成本, 例如使用 WordPress 或今天要介紹的 Google Drive API.

使用共用文件的方式來管理內容, 除了介面不用再實做外, 也可以透過權限管理來做一些設限, 方便存取與更新. 這次介紹的 API 是讀取 Google Docuemnt 的內容來供應前端應用, 所以就是讓程式讀取內容, 而使用者則是使用 Google Document 來更新內容.

會使用到的 API 為 Google Drive API 中的 file export, 目前已是 v3 的版本了, 可以參考:

https://developers.google.com/drive/v3/reference/files/export

如何使用呢, 首先在 Google Drive 新增一個 Google文件(Document)檔案, 並開放為擁有連結的人都可以檢視, 並取得該檔案的 fileId, fileId 就是在 URL 上會看到或是 share link 上會看到的一串英數, 有區分大小寫, 如:

https://docs.google.com/document/d/18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA/edit?usp=sharing

其中的 18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA 即為 fileId.

接下來在 google developer console 新增一個專案, 啟用 Google Drive API 功能, 並建立 API key 即可透過以下 API 進行檔案內容存取:

https://www.googleapis.com/drive/v3/files/18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA/export?mimeType=text/plain&key=[your api key]

其中 fileId 即為該文檔的 fileId, 而 export 為讀取, 後面的 mimeType 可以有以下幾種:

而最後的 API key 則為在 Google Developer Console 專案內建立的 API Key, 就可以順利讀取內容, 以下則為一個簡單的範例:

http://sample.diary.tw/43/readdoc.php

程式碼如下:

$url = "https://www.googleapis.com/drive/v3/files/18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA/export?mimeType=text/plain&key=[your api key]";  
  
$data = file_get_contents($url);  
  
echo $data;

如此一來可以方便使用者上稿又能快速更新到前台, 十分方便.

Quota 的部分如下:

每日 10億次, 每 100秒每使用者 1000次, 每 100秒 1萬次, 三個計算基礎以下為免費.

標籤 CMS, Drive API, Google, Google Document

WebTrend

台大G Suite for Education申請使用

太棒了, 終於出來了, 原在去年底有消息, 台大準備要和 Google 合作的 G Suite for Education , 在 4/26 公告可以進行申請了, 快去看看吧:

https://www.cc.ntu.edu.tw/chinese/spotlight/2016/a105038.asp

申請下來的帳號為: 學校帳號@g.ntu.edu.tw

也就是說, 原本若您的帳號為 [email protected] 則申請 G Suite for Education 則為 [email protected], 重點是有了一個超大的空間可以應用, 十分方便, 若為台大學生, 教職員與校友, 都可以申請, 真的是太棒了.

大家可以多多利用.

不是台大人, 還有其他學校的朋友, 可以參考:

中山大學: https://g-mail.nsysu.edu.tw/
台灣科技大學: http://www.cc.ntust.edu.tw/files/11-1005-6317.php?Lang=zh-tw
台灣師範大學: http://www.itc.ntnu.edu.tw/page1/super_pages.php?ID=page101&Sn=122
彰化師範大學: https://olis.ncue.edu.tw/ct.asp?xItem=7779&ctNode=1158&mp=1
清華大學: http://alumni.web.nthu.edu.tw/files/14-1221-104770,r4272-1.php?Lang=zh-tw
淡江大學: https://dm.tku.edu.tw/gms/faq/
東吳大學: http://web-ch.scu.edu.tw/alumni/file/3265
輔仁大學: http://www.cc.fju.edu.tw/resource.jsp?labelID=30
環球科技大學: http://gm.twu.edu.tw/
高雄師範大學: https://lis.nknu.edu.tw/zh/g-suite_account
台灣體育運動大學: http://www.ntupes.edu.tw/cht/index.php?code=print&ids=79&article_id=3430
高雄醫學大學: http://www.gap.kmu.edu.tw/
中興大學: http://gapp.nchu.edu.tw/
華梵大學: http://googleapps.hfu.edu.tw/
蘇澳海事: http://www.savs.ilc.edu.tw/files/14-1000-9598,r32-1.php

[2021/12/15]

由於之前 google suite for education調整了使用權益, 各校總量只剩下 100TB, 所以對應的服務也都限縮了使用量, 以台大為例:

https://www.itc.ntnu.edu.tw/index.php/2021/02/23/2021-02-23google-workspace-for-education-storage-policy-changes/

目前是建議使用量於 30GB 以下, 其他學校應該也有對應的措施, 請有在使用的朋友們務必檢查並另尋存放或放置於自己的硬碟備份.

標籤 education, g suite, Google, ntu

程式技術

好用Google中文字體

文章作者作者: tim
文章發佈日期 2016-10-12
在〈好用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

標籤 chinese, css, font, Google, Web

程式技術

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