Pages

2013年10月2日

[ Google Docs ] 解釋為什麼能用 Google Docs 的試算表,建立與維護你的 QR code 圖片

Title
今天(本文發佈日期)在網路上讀到 JORDIORLANDOGoogle Docs and QR Codes ,原來用 Google Docs 的試算表搭配 Google Chart API 的 Infographics產生 QR code 圖形的功能,就可以自己產生 QR code 圖形,而且方便管理。再也不用去尋找其他網路服務來處理相關需求,非常方便。網路上應該開始陸續有文章介紹這個功能了。所以如果這篇也只是單純的介紹就太無趣了,不如介紹之外也解釋一下原理。


Google Chart API 的 Infographics 雖然已經被 Google 列入「待棄用」,但是被除役那是 2015 年 4 月的事情了,在那之前依然可以使用。

網路上教導如何使用 Google Chart API 產生 QR code 圖形的文章一大堆,而 JORDIORLANDOGoogle Docs and QR Codes 則是將這個功能與 Google Docs 的試算表結合。
實做前,需要先解釋一下如何用 Google Chart API 產生圖形。
https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=http://www.google.com/
呼叫 Google Chart API 開頭就是 《 https://chart.googleapis.com/chart? 》後面接 chs,cht 與 chl 三個參數。參數與參數之間用 ? 連接。將內容傳遞給 Google Chart API 後會得到回傳的 PNG 圖檔(可以點上面那組 URL 看看結果)。
  • chs:希望回傳的圖形的尺寸,單位是像素。一般 QR code 圖形都是方形的,所以這邊的尺寸 x 軸與 y 軸數字應該一致。
  • cht:由於這邊是希望產生 QR code,因此固定為 qr
  • chl:這是希望轉成 QR code 的文字內容。
但是這樣的 URL 直接貼入試算表內是不能用的。因為試算表不是瀏覽器,所以無法直接處理 URL。所以需要做一點變化,讓試算表將設定好的 URL 丟給 Google Chart API 處理,並且將回傳得到的 PNG 圖檔直接顯示出來。所以如果要貼入試算表內,需要先指定顯示的內容為圖形,然後包含要給 Google Chart API 的 URL。例如
=image("https://chart.googleapis.com/chart?chs=400x400&cht=qr&chl=http://www.google.com")
這時候如果把上面這一串複製後貼上試算表的任意單元格內,就可以看到 QR code 圖形了!
但是這邊要做的並不是這麼簡單的事情。而是要將 chl 後面的內容放置在獨立的單元格內。只要這個單元格的內容變更,QR code 的圖形也會跟著變化。

這邊提供幾個實做的例子,從簡單的 URL,文字到 vCARD,逐一做給大家看。


產生嵌入 URL 的 QR code 圖形

一開始先來實做嵌入 URL 的 QR code。
  1. 開啟一個 Google Docs 的試算表。
  2. 在 A1 填入 http://www.google.com/
  3. 在 B1 貼上 =image("https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=" & A1 & "")
00001

此時會發現 B1 的 QR code 圖形很小。這是因為單元格沒有跟著放大的緣故。重新調整 B 欄的欄寬跟 1 列的列高為 200 之後,圖形就很清楚了。
00002

現在來看看貼入 B1 的內容:
=image("https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=" & A1 & "")
chl 後面被置換成 “ & A1 & “。這個意思就是「帶入 A1 的值」。所以這邊就是帶入了 http://www.google.com/ 。此時 B1 的 QR code 圖形會跟直接貼入 =image(https://chart.googleapis.com/chart?chs=400x400&cht=qr&chl=http://www.google.com) 是一樣的。

如果此時將 A1 的內容換成別的,就會發現 B1 的 QR code 圖形會一直變化。

此時 A1 可以放入任何文字內容,然後再使用 smartphone 的 QR code read app 讀取圖片看看會得到什麼內容?

此時產生另外一個問題,「圖形產生出來了,可是我按右鍵不能儲存啊!」別急,看完下面這個章節,後面就有解釋如何儲存圖形了。如果猴急的話跳過下面這一段往下找「如何儲存 QR code 圖形」。


產生嵌入 vCARD 的 QR code 圖形

其實 QR code 的內容就是一串文字,高興塞什麼就塞什麼。vCARD(電子名片)的內容其實也是文字:格式化過的文字。因此也可以把 vCARD 的內容轉成 QR code 圖形。只要讓人用 QR code read app 掃過去,就可以加入他的聯絡人當中。但是由於 vCARD 的內容格式有一定的規矩(如下圖,取自維基百科)
00003
所以需要將 chl 後面的內容產生一點變化,才能正確的產出 vCARD 的 QR code(這也是 JORDIORLANDOGoogle Docs and QR Codes 這篇文章內用來做範例的內容)。
  1. 開啟一份 Google Docs 的試算表。
  2. 在 A1 填入 “First name”,在 B1 填入 “Last name”,在 C1 填入 “Phone number”,在 D1 填入 “Email”。
    00004
  3. 在 A2 與 B2 隨意填入一些名字,在 C2 隨意填入一些數字,在 D2 隨意填入一組 email 位址。
  4. 在 E2 貼上下面這段文字:
    =image("https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=BEGIN:VCARD%0AN:" & A2 & "%20" & B2 & "%0ATEL;CELL:" & C2 & "%0AEMAIL:" & D2 & "%0AEND:VCARD")
00005

這時候如果掃描這張 QR code,app 應該會顯示這是「BUSINESS CARD」,而且可以直接開啟對應的聯絡人 app,將這份通訊資料加成新的聯絡人。將來如果有任何變動(例如電話號碼或是 email 位址變更),只需要變更單元格內的內容,QR code 圖形就會自動更新,下一個掃描的人就可以自動取得新的內容。

實際上,在第四步中 chl 後面的內容其實就是
BEGIN:VCARD
N: A2 B2
TEL;CELL: C2
EMAIL: D2
END:VCARD
將 A2 B2 C2 D2 帶入其中的值之後就變成了
BEGIN:VCARD
N: John Lennon
TEL;CELL: 1111-111111
EMAIL: jlennon@mail.com
END:VCARD
這就是 QR code read app 實際讀到的內容。

接著來對應貼入 E2 的連結中,chl 後面的敘述與上述的 vCARD 內容的關係。
BEGIN:VCARD%0AN:" & A2 & "%20" & B2 & "%0ATEL;CELL:" & C2 & "%0AEMAIL:" & D2 & "%0AEND:VCARD
BEGIN:VCARD
N:" & A2 & " " & B2 & "

TEL;CELL: " & C2 & "
EMAIL: " & D2 & "
END:VCARD

%0A%20 是轉成 UTF-8 碼之後的斷行與空白。



如何儲存 QR code 圖形

上面用 Google Docs 試算表產出了 QR code 圖形,可是不能儲存啊!有幾個方法。
  • 按鍵盤上的 PrnSc 按鈕,然後開個小畫家貼上後剪裁。
  • 用螢幕擷取工具,擷取圖形。
  • 用 Google Docs 下載功能,直接取得圖形。
前兩種方法就不另外敘述了,這邊來講講第三種。
  1. 在產生出 QR code 圖形的試算表畫面,依序點擊《檔案》→《下載格式》→《網頁》
    00006
  2. 此時 Google Docs 會開啟一個新網頁
    00007
  3. 將游標移到 QR code 圖形上,按右鍵,就可以將圖形儲存起來啦。


QR code 可以存些什麼東西?

數字,文字,日文,中文(當然有字數限制)…任何可以文字化的內容都可以轉成 QR code。所以可以用這個方式產生任何可以用文字表現內容的 QR code。如果遇到像 vCARD 那種需要空白或斷行格式的內容,可以使用 %0A 或 %20 這種 UTF-8 碼,調整 chl 後面的內容以符合格式,以產生實用的 QR code 。


我沒有 smartphone 可用,怎麼驗證我的 QR code 內容?

可以利用 http://zxing.org/w/decode.jspx ,這個網站可以解碼 QR code 的內容,可以用來驗證 QR code。

沒有留言: