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

今天（本文發佈日期）在網路上讀到 JORDIORLANDO 的 Google 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 圖形的文章一大堆，而 JORDIORLANDO 的 Google 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 & "")

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


現在來看看貼入 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 的內容格式有一定的規矩（如下圖，取自維基百科）

所以需要將 chl 後面的內容產生一點變化，才能正確的產出 vCARD 的 QR code（這也是 JORDIORLANDO 的 Google Docs and QR Codes 這篇文章內用來做範例的內容）。

1. 開啟一份 Google Docs 的試算表。
2. 在 A1 填入 “First name”，在 B1 填入 “Last name”，在 C1 填入 “Phone number”，在 D1 填入 “Email”。
   
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")

這時候如果掃描這張 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 圖形的試算表畫面，依序點擊《檔案》→《下載格式》→《網頁》
   
2. 此時 Google Docs 會開啟一個新網頁
   
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。