有了 Gogoro,你會更想搭大眾運輸

抱怨文注意: 這是抱怨文,如果不想看請快點點叉叉關掉。

因為是抱怨文,所以請不要再說甚麼「奧客」或是「車主本人問題很大」之類的話了,抱怨如果還要通情達理那就不是抱怨文了。我也不覺得我付錢就我最大,我抱怨的點是「付了錢卻發現被客服放置 play」這件事。


先講結論,我這兩周發現從我家到公司有至少五條上班動線,每天通勤的平均費用不到 30 元;被 Gogoro 這樣一搞,我甚至還開始考慮騎 uBike 上下班了呢。


更新

剛剛打了客服電話,客服人員承諾會將意見向上反應,我們來等等看接下官方會不會有任何動作吧。 (我心裡覺得他們應該會繼續放置 play)


故事是這樣的,在經過半年的觀望後,今年年初買了自己的 Gogoro。購買這台車的體驗是十分良好的,店頭業務與試乘的體驗都讓人對這台車有許多美好的想像。

不幸地是,就在牽車沒多久後,我的車子因為事故碰撞需要返廠維修。我也沒想到,這會是後續一堆亂七八糟問題的開始。


雖然看起來不是很嚴重的碰撞,但維修時是要把整個車架都換掉的

因為買車的時候有填了推薦的朋友資料,所以我有拿到一個月的免費騎乘,但因為碰撞事故的關係,車子幾乎整個二月都留在車廠。起初問了業務,他說或許會有補償的時間之類的,但最後收到帳單的時候確認,電池方案的費用即便是在維修廠的時間,仍舊是會計費的。雖然沒辦法好好享受免費里程,但事故也是自己不慎造成,也只得摸摸鼻子認了。

車子修好之後,騎乘時又發現車廠組裝似乎有些問題,我的龍頭會發出令人不大舒服的摩擦聲。隔天便又牽回車廠調整,調了半天似乎沒狀況了,但當天回到家仔細一聽,還是有聲音。


(影片連結: https://www.instagram.com/p/BRGPG-AFoXJ)

對於這件事情我也覺得,哎呀可能就是人工組裝的問題吧,再找一天去檢修吧。隔天再去調整,結果更微妙了。


(影片連結: https://www.instagram.com/p/BRKRDcrFCjY)

事情發展至此,我已經開始懷疑是不是哪幾顆行星逆行還是我最近沒有去廟裡拜拜之類的,覺得這台車帶給我的絕望感已經超越當初的期望了。後來決定直接跑到另外一個維修廠去檢查,這才發現,之前的維修廠對於細節的檢查有多麼不仔細。

經過另一個維修廠的檢修,總算找出異音的來源,也確實修正了這個問題。之後又發現後避震有異音,技士說不影響騎乘,所以就另外安排了時間檢修。

我心裡想著,一切災難應該就到此了吧,後面的幾周我便開心地騎著它跑來跑去。

直到我四月初收到了這樣的帳單。


貴貴的

嗯,這也沒甚麼特別好說的,就是超出的里程收費非常精美。是的,這台車的 app 在你超出月租里程時是完全不會通知的──但它卻會跟你計較發動時腳架有沒有收起,有沒有按剎車;催油門時輪子是否在停止的位置以及車子是否正在倒退中──。

我心想,好吧,三月份大概就是我沒注意到,去更改費率吧。

接下來的事情就讓我非常不開心了。

四月份 Gogoro 開放了線上變更費率的服務,在收到帳單的當下我也確實更改了費率了,但可惜的是生效時間是五月。

回頭看看我四月的里程數。


看來是不能再騎了呢

是的,如果我想要省錢,四月份我沒辦法再騎這台車了。關於轉換期這件事情,我向我的業務、騎車的朋友、Gogoro 的論壇與 Gogoro 的客服信箱,甚至是在臉書上 tag 了他們,但除了業務外都沒有收到任何能代表這家公司的回覆。就連業務也只能無奈地回「你要自己看 app」。

我想這就是所謂的放置 play 吧,你們這樣放置我,那我也只好放置你們的產品──雖然很明顯地吃虧的是我,花了大錢買車卻因為愚蠢的原因而不能騎。

對於收費這件事情我一開始其實也沒有甚麼怨言,但讓我很不舒服的是這家公司對於使用者的態度,顯然是非常隨便且不尊重的。

至於前面提到的後避震檢修,因為「超出資費的里程數」這個愚蠢的理由,被我改到五月去了。

有人說這就跟手機收費一樣啊,你封包數太多就是要多付一點,轉換期最長也是一個月不是嗎?喔,是啊,我過去在使用手機上網時確實也遇過這個問題,但是結果非常不一樣啊。

當時是 3G 上網,寫信去問客服之後,很快地電信公司就打電話來關心,在電話中說明收費的模式,並確認是否要在下個月變更費率。而當時手機上網的費率是和電信費用分開的,上網服務是可以直接附掛上去,即刻生效,按照計費周期比例計算破月費。而現在的 4G 上網,在封包數用完之前會有簡訊通知,即使超過了也還能購買額外的封包數,讓你的上網體驗不至於中斷。

這麼高的電池月租費用,卻只有這麼差的客服體驗,這間公司應該是認真不想賺錢吧。

既然要我計算通勤成本,那就來好好算吧。


只計算每公里通勤費用與保養的試算圖

我把購置成本、停車成本扣除,畫了只計算騎 100 c.c. 的油車、Gogoro 不同方案與開車花費的成本折線圖,然後覺得,哎呀 Gogoro 這廠商真的好聰明。

我的車可以加酒精汽油,而每公升的汽油可以開至少 16.5 公里,簡單地除了一下不難發現,每公里的油錢還比 Gogoro 便宜,即便算進每五千公里的保養,也和我選 499 的費率差不了多少。

是,我知道停車費還有輪胎之類的東西加上去就不止這個價格,但我車子開到現在的客服體驗都還沒有 Gogoro 這麼糟糕。即使是我家附近的機車行,有問題把車牽過去都能一次解決,而且服務態度也不比 Gogoro 據點差。

如果要我花這樣貴賓級的價格,卻只能得到像是乞丐的服務,那麼我寧願不騎。

東拼西湊個 webfont service

一直以來,敝社網站面臨著有點令人尷尬的情況:為了閱讀上的美觀,網頁版型的標題應該要是襯線體(明體/宋體),但在不同平台上看到的字體卻總是無法有一致的體驗。為此,我們有幾種可能的作法:

  1. 把各種系統有的襯線體都寫進 CSS,讓瀏覽器自己去 fallback
  2. 直接用 CSS 把整個字體讀進來
  3. 使用 typekit 或是 justfont 這類的動態 webfont service

因為辦公室 90% 以上設備都是 Mac 或是 iOS(辦公室只有我用 PC,孤單寂寞覺得冷),好一段時間我們都使用 solution 1,依序以「冬青體、宋體 TC、儷宋體、新細明體」的順序寫進 CSS。但時不時會因為標題出現了冬青體沒有的漢字,fallback 變成了宋體、儷宋甚至是新細明體時的缺字或是 baseline 歪掉了的問題。baseline 的問題或許可以用 CSS 去解,但兩套不同字體的字重,甚或是不同語系的漢字筆順寫法,總是會在無意間就強暴了閱讀者的眼睛(用 Windows 則永遠都是新細明體,反正一直以來都很醜所以..)。

至於 solution 2,我們曾經嘗試過直接讀入 Google Font 提供的、體積較小的 cwTeXMing,但只有 Big5 字集的結果,是顯示時反而更容易出現缺字的情形,而超過 2MB 的大小,初次讀入頁面的時間與流量成本也是非常可觀的。其他支援 Unicode 的 IPA 明朝或是花園明朝的粗體實在不甚好看,體積也十分龐大,算不上是堪用的解法。

於是我們轉向了 solution 3,直接使用別人提供的解決方案確實是很愉快,把字體設定好,套上 style 便可打完收工,但 script 裝上去兩三天,我們就把免費的 quota 吃完了(typekit 是 25K PV/month,justfont 是 10K PV/month)。要嘛就交個保護費,要嘛就退回到 solution 1。因為服務費用貴貴的,所以我們就繼續讓 Windows 使用者眼睛受傷了(錯)。


精美的思源宋體

這個問題就這樣被我放置 play 了三四個月,直到最近思源宋體的推出。思源宋體在各種字重還有不同語系的筆畫寫法上都有著墨,顯示效果也比其他開源字體來得優異許多。在推出當天便可以用 typekit 所提供的 webfont 服務掛上網頁。但問題依舊,按次計算的費用十分可觀。
如果是在自家網頁顯示思源宋體,到底該怎麼辦呢?快速地想了一下,或許可以這樣:

  1. 付保護費
  2. 寫隻小程式,在 server 端把字體 render 成透明背景的圖片掛進頁面
  3. 自幹 webfont service

solution 1 好貴,我付不起(炸)(醜哭)。網頁整頁只用到標題幾個字,跟整頁字體都使用 webfont 的成本是一樣的,怎麼看都覺得很微妙。
solution 2 已經是行之有年的作法,但遇到 RWD 網頁就會爆炸,不同字體大小或是螢幕解析度也會帶來各種大大小小的問題,實在不是很好。至於一個字一張圖或是把字體轉成 SVG 圖片之類的作法因為太硬派了我們還是當作沒看到好了。

那麼,solution 3 呢?之前曾經看過 timdream 小帥提 – 提姆提拉米蘇 在 IE 6 上(對,不要懷疑,就是 IE 6)實作過中文的 EOT font subset,效果不錯,但印象中似乎是固定的文字集。我也忘了當時他是用甚麼工具去把 font subset 拆出來了(補充:小帥提在 comment 中表示是使用 WangShen Lu 大大提供的 script)。

於是就用 font subset 當關鍵字翻找了一下網路,很快地便找到了 Google 的網頁字體最佳化指南,當中提到了 fonttools 這套工具,其中提供了 pyftsubset 這個指令,可以依照傳入的文字生出不同的 font subset。

那麼,這麼好用的工具要怎麼安裝呢?請點進 GitHub 看一下,因為太簡單了所以這裡也不贅述。

於是我很快速地把 fonttools 裝起來,看了一下 pyftsubset 的說明:


pyftsubset –help

看來只要用 --text 或是 --text-file 就能讓程式生出有那幾個字的 font subset 了。於是便開心地下載了思源黑體的 OTF 檔(我們只用 SemiBold 這個字重),然後打了指令測試:


pyftsubset SourceHanSerifTC-SemiBold.otf –text-file=test.txt

嗯,在 R700 這台老筆電上跑一下就跑完了,看起來沒有錯誤,生出來的 subset 大概 12KB,所以趕緊來寫個 HTML 測試測試:


測試用的 HTML

「唔喔喔!真的會動耶!」


IT’S ALIVE!!

寫到這邊,其實會 Python 的朋友們已經可以自己動手用 fonttools 包個 service 出來了。

但資質駑鈍如我,還是比較孰悉 PHP,所以就用了萬能的 system call 去吐產生的字體檔,輸入的 query string 就是需要使用的文字字元。

作法有很多種,我是直接把輸出導到 /dev/stdout,把結果直接吐出來,因為程式碼太醜了所以我就不貼上來了,大致上就是用 shell_exec("pyftsubset 一大串醜醜的東西") 這樣(遠目)

至於效能問題.. 用 system call 真的.. 會.. 比較.. 慢,不過只要 cache 做得好,除了第一次讀入的人比較悲劇之外,後面的 request 應該堪稱迅速。秉持著一貫地懶惰,我也只用了目前線上機器架構中既有的東西拼湊:對外放個 cache server (Varnish Cache),更外面再放個 CDN (Cloudflare, free tier),防止大量 requests 打爆機器。

嗯,server 端的部分真的就只有這樣,真正有作用的程式碼也大概只有兩行,就算寫得再爛都不會太難讀懂(掩面),需要特別注意的是要送出 CORs header,還有記得防止 XSS 還有 arbitrary code execution 之類的攻擊。

接著就是 client 部分啦。

我採取的是在讀入頁面之後,用 DOM selector 把需要套用字體的物件文字撈出來,sort、unique 之後,送回 server 生出相對應的字集字體,再用 jQuery 套上去的 approach,如此作法有幾個好處:

  1. 對於用到同樣字集的網頁,request uri 會長得一樣,cache 會比較簡單
  2. 產生的 request uri 相對短一點(真的就是短一點點)
  3. script 寫一次就可以到處撒(咦)

那麼,該怎麼動態產生 font-face 的部分呢?嗯,我也不知道(好不負責)

因為我很懶惰,所以用了現成的 FontFace jQuery Plugin 來載入字體。

很快速地讀了一下程式碼,依照需求寫出的 client 端程式碼看起來大概是這樣:


總之就是一坨義大利麵

然後只要打個 loadFont('.someClass'); 就可以動態載入字體了,真是非常愉快呢 ww

需要注意的是,如果在網頁裡要 call 很多次,每次的 font name 要不一樣,否則套用到不同物件時只會讀入第一次載入的 font name 的字集。在這裡我使用了 stack overflow 大法找到了很好很強大的解答,測試了一下會動所以就沒有再多做甚麼修改。

於是這東拼西湊,這個速度不是很快 (!) 而且因為用 query string 所以不能傳太多字進去 (!!) 然後還只能吐一種字體 (!!!) 還弱弱第只支援 modern browser 的 webfont service 就跑起來啦 wwww

從此之後,我們的網頁就有了精美的中文襯線體:


精美啊!

至於讀入字體時的 FOUT, FOIT, FOFT 問題,可以看一下這篇文章,裡面有提供幾個 robust 的解法,加上去就可以解決一些惱人的字體閃爍問題喔 :D

雖然自己 host 還是比不上那些 service provider 的速度,但租台小台 VPS 的成本非常低,加上 CDN 後效能其實沒那麼慘,在用量不大的狀況下就湊合著用吧。

以上就是這次的義大利麵料理指南,大家快去找個小廚房(利益揭示:連結是我的 DigitalOcean 推薦碼,申請成功您可以拿到 USD $10 credit,最小台的機器可以用兩個月喔)來料理一下吧 (?)

補充:剛剛 高偉格 大大說可以直接用 font-spider 來建 service,啊啊啊相見恨晚 QQ