五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar

Cover Letter ，又稱自薦信，是左右投履歷時面試官第一個接觸你印象的重要工具。
教求職者寫履歷的文章很多，教寫自薦信的相對卻少了不少。其實自薦信對於是否能獲得面試邀約至關重要，五倍紅寶石今天就來幫你揭秘，為什麼自薦信如此重要。

自薦信正如同你在認識新朋友時，給對方的第一印象。他是履歷的精華版，必須要一眼就讓要約面試的人資對你產生好奇。

常見的自薦信錯誤如下：
## 1.太過求職者角度出發

![post-面試攻略(二) 藏在自薦信 (Cover letter) 裡的魔鬼 / sample-2](//images.ctfassets.net/8er52l3j5u76/3KjkNCrMpJMPk3mJIYXjkn/58259de28ea3cf67cfcded987da4afc3/sample.png)

撰文時只著重於自己的感覺：「有興趣」「很好玩」，會給人資一種「訊息與本職缺無關」的感覺。要表達對本職缺熱情的時候，不要忘記加上「對這個職務的不可或缺性」，才能抓住人資的眼球，願意點開你的履歷，用更多時間來認識你，甚至發出面試邀請。
 

## 太短或太長

對人資來說，一天會收到的履歷從幾十封到上百封都有可能。太短的自薦信無法讓人印象深刻，而太長的自薦信則是為人資增加閱讀的困難。若再合併下一點的問題，就很容易讓人資直接跳過。記住，自薦信最長也請落在300字，如果沒有辦法在30秒內朗讀完，那就是太長的自薦信。
 

## 自薦內容與職缺需求沒有直接相關

這裡我們用幾個合格範例和危險範例來說明：
 
 
《範例一》
> 目前任職OOOO，累積 2 年 B2C 、 B2B 電商行銷經驗。負責經營的渠道平均成長率最低可達 OO% 以上（詳情請見中文履歷或作品集）。除此之外我對 OOO（求職公司的領域）也有著極大的興趣。除了額外進修了本領域的知識外，也希望能有機會瞭解 OOO（求職公司的產品）。甚至期許自己能發揮所長，將這個產品（求職公司的領域及產品）推廣給跟我一樣有這種需求的初學者。
> 由於有平台端的行銷經驗，對產品安排宣傳、規劃廣告預算，甚至是使用 HTML 編輯 EDM 等，我相信我皆能在短時間內掌握這些工作內容。也希望有機會面試貴公司的「 OOOO 」一職，與貴公司一同打造最棒的服務，成為本產業的領航者。

以上這個範例，非常具體寫出他的專長以及與本職缺相關的興趣。且文章不會過長，很好閱讀。
 
 
《範例二》
> 主管您好，我叫 OOO，過去有超過三年的時間都在教授語言。大學的寒暑假期間做過許多行銷業務的工作，如：販售商品、展擔任銷售人員、資訊公司業務。對於科技新知一直都非常有興趣，貴公司是一個非常棒的環境能夠讓我學習。我願意發揮所長在貴公司擔任 OOO 一職，謝謝

人資心裡話：謝謝你願意發揮所長，可是我還沒有看到你的所長...
 
 
如果沒有相關經歷，切勿在自薦信裡曝露弱點，而是應該在自薦信裡提出為什麼你（雖然經歷不足），卻是最有潛力成為本職缺的適任者。可以主打你的人格特質，畢竟認真又積極的工作態度，再加上勤奮，沒有公司會不喜歡。
 
 
《範例三》
![post-面試攻略(二) 藏在自薦信 (Cover letter) 裡的魔鬼 / sample-2](//images.ctfassets.net/8er52l3j5u76/47RpiMcQHodNRs4L3CfTee/09dfd332de7fca59a45657ef6ca37a0e/sample2.png)
這種訊息雖然看似罐頭，卻用普世認可的成功價值當釣鉤引起人資好奇：「該求職者如何讓公司的收穫大於在他身上的投資？」因而點開了履歷。
 
 
《範例四》
有些人試圖加入一些創意，反其道而行：
> 關於OOO職位，我認為應有以下能力： 
> 一、文書作業能力 
> （下略300字，說明自己擁有的證照與文書作業能力） 
> 二、溝通協調能力 
> （下略二百字，說明如何溝通協調） 
> 三、積極求知、學習能力 
> （下略一百五十字，說明他的學習能力） 
> 四、團隊合作能力 
> （下略一百字，說明團隊合作學習能力） 
> 五、加分的英文能力 
> （下略五十字）
> 六、保持冷靜的能力
> （下略五十字）

這樣雖然也能吸引人資「喔？我來看看你的想法吧！」但因為落落長，簡直把自傳帶到自薦信裡來，也是需要盡量避免的。且如果人資不同意你提出的見解，也很容易造成「應該不適合」的先入為主觀念。

總而言之，自薦信磨的是「化繁為簡」、「抓重點」的功力，有些面試官也會從自薦信來判斷求職者的人格特質如何。不妨為每個機會各寫幾個版本，一方面磨練功力，一方面測試看看成效吧！

系列文章：

- [面試攻略(一) 初心者的三大面試攻略心法](/posts/3skills-of-interview)
- [職涯原力：善用企劃力，為自己的生命校正](/posts/career-power-planning)
- [職涯原力：解開千千結的邏輯力](/posts/career-power-logic)
- [想當工程師？學寫程式，只有這件事最重要！](/posts/to-be-an-engineer)

post-面試攻略(二) 藏在自薦信 (Cover letter) 裡的魔鬼 / cover

面試攻略(二) 藏在自薦信 (Cover letter) 裡的魔鬼

本文章同步刊載於[高見龍](https://kaochenlong.com/2020/03/24/equipments-for-video-recording-and-live-streaming/)的個人 blog。

網紅、Youtuber 當道，連我家讀小學的小朋友都請我幫他開通 Youtube 帳號，他說想要拍遊戲影片上傳（給誰看？）。就連我們自己做教學，也經常收到「請問你們的課程會有線上版本嗎？」的詢問，這表示「線上」這件事需求量只有增加沒有減少。

除了寫程式之外，我目前主要的工作是教學，線上課程跟線下教學都有，偶爾有校園演講及企業內訓。而這一波肺炎疫情的確也衝擊了我們線下實體課程，原本已經報名的同學有些人因不想冒險出門而取消報名，我相信這也讓更多同業想把教學的管道轉變到線上。

首先，要跟各位說的是，並不是請講師坐在電腦前面，接上麥克風跟鏡頭再打開軟體開直播就叫做「線上課程」了，實際上「線上課程」跟「直播教學」除了在製作的流程上稍有不同外，難度也有所不同。

台灣的學生本來就不太喜歡也不太習慣問問題，有經驗的講師通常可以在現場根據同學們的表情或肢體反應，得知道同學們是不是有卡關，但變成影片課程或線上直播之後，這個難度大大增加了，不僅同學可能更不會問問題，講師也沒辦法第一時間抓到誰有問題。但我想本文主要先介紹硬體設備篇，下一篇介紹軟體時再順便跟大家分享這方面的心得。

以下跟大家介紹我目前（或曾經）使用的硬體，但在往下看之前，請記得把重點放在「教學的內容」上。對於大部份的線上課程來說，即使聲音、影像沒那麼完美，只要畫面看得清楚、聲音聽起來不要太大聲或太小聲或是聽起來破破的，對「教學」這件事來說影響並不大。不要一昧的追求高檔設備，如果有夠水準的教學內容，即使只是用手機附的耳麥，或是直接用手機錄音再後製合上去也沒問題（事實上效果沒想像中的差）。

聲明：

1. 本文沒有廠商業配，以下提到的設備都是自己正在或曾經使用過的，但廠商如果想要給我錢，我會很樂意把錢捐給動物保護協會。
2. 因為我不是專業的音響設備達人，所以內文也不一定是客觀的評測或數據，而是我曾經或目前正在使用的設備。

## 聲音

### 麥克風

麥克風常聽到的種類，主要有「電容式」與「動圈式」這兩種分類，實際的的運作原理我就不特別探討（其實我也不懂），網路上應該可查到許多更深入的介紹文章。這兩種麥克風我都使用過，並沒有好壞的分別，而是用途不同。

「電容式」的麥克風靈敏度高，Gain 值不用開太高就能收到音。「[Yeti 雪怪](https://bluemic.com.tw/yeti/)」就是一隻電容式的麥克風，價位大概 5,000 ~ 6,000 之間，以麥克風來說不算太便宜但也不算太貴。而且因為是 USB 接頭，所以只要接到電腦就能使用，相當方便，早期的課程影片我都是用它錄的，效果還不錯。

然而，也正因為靈敏度較高，這表示相對容易收到不想要的環境音，例如冷氣或是電風扇運轉的聲音。把冷氣或電風扇關掉也是個選項，我也曾為了效果好一點而這樣做，只是如果在空氣不流通的地方或是天氣悶熱的時候就比較麻煩一點。不過還好雪怪有「心型指向」的收音，對麥克風正面的音源收得滿清楚的，只要環境音不要太明顯，後製的時候都還是能用軟體處理掉。

相對的，「動圈式」麥克風的靈敏度比較低，所以環境音比較不會那麼明顯。跟電容式麥克風比起來，我個人認為動圈式麥克風的音色顯得較為柔潤，也讓人的聲音更飽滿圓潤，或者說更好聽（我一直想要有像廣播電台的廣播員那樣的好聲音）。

動圈式麥克風，我選擇的是 [SHURE SM58](https://www.shure.com/en-US/products/microphones/sm58)：

![post-線上直播與錄製線上課程 - 硬體篇 / shure-sm58](//images.ctfassets.net/8er52l3j5u76/17d87HFzhEFvWtLjA4jJJc/db1bc282b0c7f89ea8a8126df968400f/shure-sm58.jpg)

價格大概台幣 3,000 左右，跟那些隨隨便便就破萬的高檔麥克風比起來，SM58 的價格算是相當親民。我後期錄製課程還有直播的時候都是用它，因為我的聲音頻率算是比較高而且聲音聽起來比較扁（就不是那種渾厚的嗓音啦），改用這隻麥克風之後，聽起來真的是比較好聽一點（自以為）。但整體來看，就以它的表現以及它的價位來說，我相當滿意。

不過要注意的是，SHURE SM58 的接頭是 XLR 的，也就是大家常說的 Cannon 頭，所以沒辦法像 USB 接頭直接接到電腦使用，通常會需要再接個外部的混音器或是有 XLR 錄音介面卡才能使用。

### 麥克風架

因為我在錄製課程的過程常常需要空出雙手敲打鍵盤，所以有個麥克風架就很重要了。常見的麥克風架有直接放在桌上的，也有懸臂式的，我兩個都有試過，桌上型的使用簡單，而懸臂式的因為沒有直接與桌面接觸，所以比較不會讓麥克風收到因為敲打鍵盤而讓桌子與鍵盤之間發出「咚咚咚」的撞擊聲（不是鍵盤聲）。

如果我是要做廣播錄音間或錄 Podcast，我會選擇懸臂式，因為它比較容易調整角度，但就以我自己錄製課程來說，我需要看著電腦螢幕，它懸在空間可能會剛好擋著我的視線。至於哪個比較不佔空間，我覺得這得先定義什麼叫「佔空間」，對我來說，一個立在桌上的跟一個懸在空中、要用的時候再拉下來，我覺得立在桌上的比較「不佔空間」，所以最後我就隨便在 PCHome 上選了一隻看起來底盤夠重的來用，目前仍然服役中。

那前面提到的桌面撞擊聲怎辦？後來想想，有鍵盤的敲打聲有 live coding 的真實感，其次好像這個聲響也不是那麼大聲，所以就這樣了。

### 防噴罩

在使用麥克風錄音的時候，有些字的發音比較容易有「噴氣音」，例如「PHP」的「P」或是「破壞」的「破」，因為在發這些音的時候從嘴巴產生的氣流比較大，容易在錄製的過程中產生「爆音」，產生的爆音即使在後製軟體裡也不容易處理掉。

所以常會在專業的錄音間看到歌手們跟麥克風之間還會卡一層像網子之類的東西，主要就是希望可以透過它減少噴氣音造成的爆音。（防噴罩也可以減少因為口水直接噴進麥克風而造成麥克風零件壽命縮短）。防噴罩常見的有尼龍製也有金屬製，我兩個都用過，我比較偏好金屬製，因為如果把手放在防噴罩後方，還是可以感受到氣流通過，但是被金屬網稍稍改變方向，比較不會直接灌進麥克風；相對尼龍製的防噴罩是「過濾」或「減低」氣流，所以我個人覺得錄出來的聲音聽起來有一點點悶悶的（但也沒很明顯就是）。

但不管是金屬製或是尼龍製，重點是它在我跟螢幕中間常會擋到視線，我覺得這樣有點礙事，所以後來就兩種都沒用。除了我在講話的時候有意識控制自己的噴氣音之外，也會把麥克風稍微側一個角度，讓講話時的氣流不會直接灌到麥克風裡造成爆音。

### 無線麥克風

如果是在電腦前面錄製課程，不管是電容式或動圈式麥克風，只要是有線麥克風就足夠了，但如果是現場授課或是在現場訪問其它來賓或學員但不想讓麥克風入鏡，無線麥克風就比一般有線麥克風更適合，也就是大家常會說的「小蜜蜂」麥克風。

無線麥克風我們使用的是 [Saramonic UwMic9](https://www.saramonic.com.tw/shop/wireless/saramonic-uwmic9/)

![post-線上直播與錄製線上課程 - 硬體篇 / saramonic-uwmic9](//images.ctfassets.net/8er52l3j5u76/3itBs0TJDv2TE3JzubqyET/cacb8d478e65ba24475fc05440b0fa35/saramonic-uwmic9.jpg)

由於我們的教室偶爾會有社群活動，所以我們在教室放了一組一對二的，而我自己家裡放了一組一對一的，使用機會不多，但如果有要在戶外拍攝就會派上用場。

另外，有專業的推坑朋友曾經建議我可試試槍型的指向麥克風，但就我們實際使用情境來說，可以別在身上的「小蜜蜂」會更適合一些。

### 混音器 Mixer

在最早錄課程的時候，我真的以為只要麥克風透過 USB 接口接到電腦，然後軟體開下去就可以錄了...嗯，是也可以錄沒錯啦，我當時也的確就是這樣錄，直到後來加了一台混音器之後才發現新世界。

我用混音器是 [YAMAHA AG03](https://tw.yamaha.com/zh/products/music_production/interfaces/ag_series/ag03.html)：

![post-線上直播與錄製線上課程 - 硬體篇 / yamaha-ag03](//images.ctfassets.net/8er52l3j5u76/6Hscn4MCItDoWKtcgVSfHZ/eea962d016db9800a93dbfe6279ae835/yamaha-ag03.jpg)

AG03 的價格大概是台幣 6,000 塊，另外有一個 AG06 型號，有兩個 XLR 接頭，其它的功能差不多，但價格稍微高一些，所以如果你只有一個 XLR 接頭設備的需求，AG03 應該是很夠用的。

它的面板單純，至少它的推桿數跟旋鈕數量不會多到太誇張。XLR 接頭剛好可以接我的 SM58 麥克風，上面也有可以接耳機或喇叭，在聲量太小的時候可以把推桿跟 Gain 值調高（不過調太高也容易收到雜音）。

同時它也可透過 USB 介面收到電腦來的聲音，所以如果電腦在播放背景配樂或是音效也能直接一併收進去。這個電腦來的音效有個旋鈕可調整混入的電腦音量大小，例如在直播開場等待時可把音量開大聲，準備開始時可以慢慢把音量轉小聲或關掉，相當方便，有機會後續我再另外拍影片操作一次給大家看。

另外，這款混音器有給電容式麥克風用的幻象電源，不過因為我後來都改用 SM58，所以也用不上它。

### 監聽設備

在後製線上課程的時候，為了不吵到旁邊的人，在剪片時常會戴上耳機。我自己平常工作時會戴著 QC-35（最近在外面會用 AirPods），戴上抗噪耳機的確很安靜，但就剪片來說反而不是好事，因為線上課程的觀眾不一定有抗噪耳機。為了避免我在課程製作過程與觀看者的感受差太多，我找了監聽耳機來解決這個問題。

監聽耳機跟一般耳機的差別：一般耳機為了滿足消費者，所以在輸出聲音的時候會做一些修飾或美化，讓聲音聽起來更好聽，而監聽耳機則是儘量不做修飾，比較能聽到「原始的聲音」。

因為我的頭比較大，所以頭戴式的耳機不太好挑，最後我選了鐵三角的 [ATH-M20x](https://www.audio-technica.com.tw/proddetail.php?id=717) 監聽耳機：

![post-線上直播與錄製線上課程 - 硬體篇 / ath-m20x](//images.ctfassets.net/8er52l3j5u76/uy5gd1F7lzx57ujV5E4xq/37b048240c0fd1e8a178da5e9fa37f2f/ath-m20x.jpg)

價位大概在 2,000 台幣左右。舒服感是比不上平常在戴的 QC-35，但這就不強求了。

監聽設備除了監聽耳機之外也有監聽喇叭。為什麼有耳機不夠還要喇叭？因為耳機是貼在耳朵上，跟讓聲音透過空氣傳輸之後的樣子可能有些不同（老實說我這木耳聽不出來什麼差別），專業音樂製作人可能還需要使用監聽喇叭來聽聽效果。

現在在自己家裡服役的是好多年前買的便宜喇叭（應該是幾百塊台幣），本來也想敗一組監聽喇叭，但掙扎到現在都還沒下手，主要是因為監聽喇叭的價位隨便就破萬之外，就以我只是要做線上課程的用途來說，大部份的學員應該都是戴著耳機收聽，這樣光是使用監聽耳機進行後製應該就很足夠。

我曾經發生過錄了快一小時的課程影片，結果才發現麥克風沒開，只好整段重錄。所以如果各位有看過我後期錄製的線上課程或直播，就會發現我現在大多會戴著耳機講話，主要原因就是可以即時聽到收音的音量，錄課程的時候比較不用擔心收音問題，同時在直播的時候也不用一直問觀眾有沒有聽到聲音。

## 影像

在錄製影片課程的時候，講師要不要露臉是個問題。這並沒有標準答案，如果是錄製寫程式的過程，因為有編輯器的 live coding 的畫面，所以倒還好（露臉的講師反而有時候還會不小心擋到畫面）；但如果錄製的課程只是靜態的投影片，可能比較容易讓收看的人覺得悶而容易睡著。

但不管如何，我都會露臉，畢竟教學是我主要的工作，站上台在人前講話這件事也沒什麼好逃避的，趁這個機會多少訓練一下也不錯。

我的筆電（Macbook Pro）雖然有內建鏡頭，但它被綁死在筆電上，遠近跟角度都不太好橋，雖然我也想過用更專業的 DV 來拍，但想想其實我並不是要賣臉（也不是靠臉吃飯的），即使解析度沒那麼好倒也不是什麼問題，所以最後我是選用羅技的 [C930e](https://www.logitech.com/zh-tw/product/c930e-webcam) Webcam，價錢大概 3,500  ~ 4,000 台幣之間，它的設計可以讓我不需要另外準備腳架，直接就掛在電腦螢幕上還能調整角度：

![post-線上直播與錄製線上課程 - 硬體篇 / logitech-c930e](//images.ctfassets.net/8er52l3j5u76/6uQFF412fVYDFbCLHDIyGe/21e0bc57a8da8f7755b2ed599620cab0/logitech-c930e.jpg)

這台本身也有麥克風可以收音，但因為通常 Webcam 的擺放位置比較遠，加上我已經有其它麥克風，所以就沒用它收音了。它有附一個鏡頭的蓋子，平常沒用的時候可以蓋起來，可以防塵還能避免不小心開到直播然後就播出不該看的東西出去了。

## 其它外掛設備

基本上以線上課程錄製來說，聲音跟影像的應該就上面這些設備就已經足夠了，但我們還另外加了一些外掛設備，讓畫面跟操作流程更好一些。

### 燈光

我錄製課程的地方（公司及家裡），燈光原先都不是為了錄製課程而設計的，所以可能會有太亮或太暗的問題，為了解決這個問題，我們在公司擺了一台俗稱的「網美燈」（全名是樂華 ROWA RL-288A 環形 LED 補光燈）：

![post-線上直播與錄製線上課程 - 硬體篇 / rowa-rl-288a](//images.ctfassets.net/8er52l3j5u76/12yckLcphtLR1TjsA5CA9c/c84abdf94bc0eee2fabfbb509a747ac4/rowa-rl-288a.jpg)

加購腳架大概 5,000 台幣，原本想說可以在講者的瞳孔有個漂亮的圈圈，但因為我有戴眼鏡，所以沒辦法漂亮的呈現，反而會在眼鏡上造成環形燈的反光。

而我在家裡擺了另一組補光設備，型號是 [Viltrox VL-200T](http://viltrox.com/en/index.php?m=index&a=show&cid=152&id=197)：

![post-線上直播與錄製線上課程 - 硬體篇 / viltrox-vl-200t](//images.ctfassets.net/8er52l3j5u76/41PksU6P94JKEsMeeU26zF/d9f6b983dcab94065a16b9f23b9d581c/viltrox-vl-200t.jpg)

最後入手價格忘了（Amazon 上應該可以查到），這是跟網紅講師 Amos 一起團購的。一套 2 組燈，分別放在我座位左右的斜前方。

而且它有附遙控器，我不需要站起來就能控制燈光的開關、亮度跟色溫，挺方便的。

![post-線上直播與錄製線上課程 - 硬體篇 / viltrox-vl-200t-remote](//images.ctfassets.net/8er52l3j5u76/4teUhaRXLdBvMztSUgl6Qx/7f72d11bf5eb197834115426cd7096fb/viltrox-vl-200t-remote.jpg)

整體來說，如果錄製的影片講師有露臉的話，有適當的補光，畫面看起來會好一些。(看看我比較早期的影片整個臉都死白）

### 直播輔助設備

在錄製課程或直播的過程中偶爾會需要切換軟體（投影片、瀏覽器、終端機、編輯器畫面等等），或是偶爾想要播放音效或背景音樂，在以前都是手動切換或是播放，直到幾個星期前才入手一台很多遊戲實況主都有在用的「直播神器」，就是 elgato 的 [Stream Deck](https://www.elgato.com/en/gaming/stream-deck)：

![post-線上直播與錄製線上課程 - 硬體篇 / stream-deck](//images.ctfassets.net/8er52l3j5u76/4NtAuAdxDPGbeIq7ooOHTX/bec1b74e52922cceffbf29ad369f2a1d/stream-deck-1.jpg)

我用的是 15 顆按鈕的，價格大概是 5,000 台幣，但 15 顆按鈕其實已經相當足夠，32 顆版本對我來說反而太花，會讓我有選擇障礙。

一開始我想說這個大概就是硬體版的按鍵精靈之類的東西（的確也是沒錯），但實際用了才發現這可讓我省不少事，不只不會切換畫面（我相信大家應該不會想在直播的時候不小心切到聊天軟體的畫面...），而且還能很快的播放設定好的背景跟音效，有點相見恨晚的感覺。

![post-線上直播與錄製線上課程 - 硬體篇 / stream-deck2](//images.ctfassets.net/8er52l3j5u76/2ttxQvOwTIWwWAJMVSyVOS/38e81343ed433f81eb611c2ad67c6b6d/stream-deck-2.jpg)

我下回也可再拍段影片跟大家介紹（推坑）會比較有感。雖然大家說這是直播神器，但在現場教學也相當方便，所以現在我在公司跟家裡各放一台，免得帶來帶去，而且也讓我們的講師使用。

## 錄音環境

前面介紹了這麼多，其實漏了一個很重要但可能不容易改善的環節，就是錄音環境。有再高檔的麥克風，如果在糟糕的環境底下，錄出來的品質也會大打折扣。

如果原本就有安靜的錄音環境，那很好，但如果沒有的話呢？密閉且靜止的車子也許是個不錯的選項，但可能要注意電源還有穩定度的問題，千萬不要邊開車邊錄，安全第一。

如果沒有車子，可以試著把家裡的衣櫃，把錄音設備放在裡面然後對著它講話，因為麥克風的週圍都是布料，所以收音效果挺好的。我自己試過，其實這效果挺好的，但因為我的衣櫃不大，所以在裡面要再放電腦或是其它螢幕就沒辦法了。

或是，也可考慮找一些隔音板或隔音棉在錄音設備週圍隔一個小空間出來也是一種做法，生命總是能自己找到出口。

## 小結

不管使用的設備高檔或入門，請記得把重點放在「內容」上，即使用一般等級的筆記型電腦內建的麥克風跟鏡頭，或即使是一隻已經用了三、五年的智慧型手機搭配用自拍棒，都可以錄出好的內容，不要追求高檔設備，你並不是要弄一間專業的錄音工作室。

能夠錄出好的內容的設備，那就是好設備。

下一篇，再來跟大家分享我在直播或錄製影片時所使用的軟體以及心得。

--待續--


post-線上直播與錄製線上課程 - 硬體篇/cover

線上直播與錄製線上課程 - 硬體篇

相信大家都聽過這種話：

學長姐或老師說，第一份工作最重要，會決定未來職涯。因此職場新鮮人在面試時很容易緊張，給自己過多的壓力。

也有人在給求職者的面試建議說，履歷得精準扼要，才能夠獲得面試的門票，但對沒有經驗的社會新鮮人來說，可以講的內容已經不多，再「簡」下去自己看了也怕，面試時反而無法有自信地表現。

關於面試技巧，在網路世界總是眾說紛紜，沒有準則，不知道參考誰才好。

究竟在找工作或轉職時該用什麼技巧來為自己面試加分？
五倍紅寶石程式教育機構綜合多年經驗，歸納出三點攻略心法，分享給剛入社會，或準備轉職、在新領域從零開始的你，為求職者揭開面試官心理，幫你在面試中順利晉級。
 

## 心法一：給面試官「可投資」的想像

當面試官請新手來面試，他們某種程度就是願意投資，願意培育新鮮人。

新手沒有實戰經驗很正常，所以面試官將更看重過去的學習曲線，以及面試中未來表現出積極規劃自己的成長慾望。

比如說，假設你今天應徵的職位是網頁設計師，面試官就會想知道你過去在學或私人生活上，是否都有主動加入網頁設計專業相關的規劃？甚至延伸一點，因為經驗只能靠時間累積，而你是否願意去進修累積知識，表達強化技能的學習意願？

學習主動性代表熱情，而熱情代表成長更可預期。

所以沒有面試官不喜歡願意進修的員工，願意進修不只代表該員工的工作表現比別人更可能從 A 到 A+，更展現對工作負責的態度。

### 在面試時，請多多提到你將如何努力去補足經驗的不足，給面試官更多信心，讓他們覺得你就值得投資！
 

## 心法二：展現可「移動」的能力

工作上有許多超乎專業技能之外，但跟專業同等重要的能力，例如抗壓度、邏輯性、協調性。

這種能力與人格特質有關，大都由性格決定能力強弱。但常能決定一個人在組織裡的地位，以及升遷時是否能卡到更好的位置。這些能力還有一個特點：各行各業各種位置都適用。

### 對於缺乏實戰經歷的新人來說，不妨好好思考如何讓面試官感受到你人格特質的強大，讓面試官能想像你加入團隊後，如何讓團隊產生正面化學效應。

譬如過去在學校或其他工作時，如何化解團隊意見矛盾，如何排解挫折與摩擦，這些都是在面試時能讓面試官對你人格特質更有信心的回答。

面試跟戀愛很像，如果你覺得跟這個人在一起有機會變得更好更快樂，你又怎能不被對方吸引呢？
 

## 善用「問題」搜集情報

工作不只為生活，更為如何讓你的人生活出自己想要的樣子。

為了找到無論組織文化或職位發展都最符合你需求的工作，善用問題，不但能抓到更多面試官沒說的資訊，也能讓面試官留下深刻的印象，覺得你對工作的積極熱情和其他面試者不同。

讓人印象深刻的問題有什麼呢？

舉例來說：

* 「未來三年公司的發展目標」：問這個問題會讓面試官覺得你有遠見，願意放眼未來，和公司一起思考如何達成遠大目標。不論身處任何位置，對主管來說，員工是為了要幫助主管達成任務，所以讓對方感覺到你願意為他的使命努力，會是一大加分。

* 「這個職位未來發展的可能性」：這個問題面試者該為自己而問。在新領域求職時，往往因為經驗不夠，很難知道自己『想要』什麼，但判斷什麼『不要』則相對簡單。用問題去釐清你的『要』以及『不要』吧！如能釐清有多想要 / 或是不要這個職缺，你職涯的下一步將會更清晰。你也可以藉此判斷這個職位公司怎麼看待，該如何適應，是否符合生涯規劃。

* 「過去這個職缺都是什麼特質的人呢？」：這個問題有助你判斷該職缺需要的能力。如果面試官的答案讓你發現這個能力是你正要培養 / 已經具備的，就能用這個問題借力使力！假設面試官的回答和你期待的 / 擁有的不同，你也將更能判斷自己還有什麼進步空間。然後下一步，就用心法二去解！

面試是一個互相了解的過程，即便你身為新手，自覺實戰經歷不夠，也要勇於問問題，善用聰明的問題幫自己加分。每次面試都是讓你升級的機會，勇敢去試，勇敢發問，勇敢讓面試官記住你吧！

系列文章：

- [面試攻略(二) 藏在自薦信 ( Cover letter) 裡的魔鬼](/posts/3skills-of-interview-2)
- [職涯原力：善用企劃力，為自己的生命校正](/posts/career-power-planning)
- [職涯原力：解開千千結的邏輯力](/posts/career-power-logic)
- [想當工程師？學寫程式，只有這件事最重要！](/posts/to-be-an-engineer)

post-面試攻略(一) 初心者的三大面試攻略心法 / cover

面試攻略(一) 初心者的三大面試攻略心法

> 圖片來源：Steve Johnson

 

## 前言
> 色彩可以區分出品牌的獨特性、資訊的層級性，抑或是影響使用者瀏覽的感受。
> 此篇文章將分享色彩的重要性、如何學習配色。

 

### 為什麼色彩這件事很重要？

接續上一篇[如何著手設計你的第一個網站？](https://5xruby.tw/posts/design-first-website/)我們談到該如何想像你的客戶、蒐集靈感等，這一篇將會更近一步的談**『色彩』**這件事。
如果你是非設計本科或是正在轉職成設計師的新人，應該很難想像設計或藝術相關科系為什麼會將**『色彩原理』**獨立成一門課，甚至有專門研究**色彩**的公司。
打開你最常使用的 APP ，想像他們的介面只有黑線像 Wireframe 沒有任何顏色，只有黑和白、線和文字，那會是蠻令人崩潰的事。

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / none color](//images.ctfassets.net/8er52l3j5u76/1u7cZwSAnMqWYnHiLOaMaL/d0d21f11c35b72658102fc45c720dcb8/none_color.jpg)

>在沒有色彩之前，這時我們可以留意到線條的粗細、文字的大小、多寡、留白等，但加上色彩後，它就變得有個性、獨特而活潑的。
這也是我們接下來要談的，該如何適當的配色，使得畫面有趣、具有品牌獨特性。

 

 

## 第一步 | 色彩意象，顏色也是有感覺的？
色彩意象，就像是深藍色想到的是憂鬱、沈穩、經典的，而黃色則是活潑、年輕的、充滿活力的這樣的描述；但這些描述不是絕對，有時也會因為配色或環境、時間而有所不同，像是紫色在過去是象徵帝王的顏色，因為過去紫色較難採集和生產的顏色，所以只在貴族或帝王的服飾才能使用；但在現代紫色卻有不同的意象，像是前衛、流行、大膽的。 [註1]

抑或是電影『[藍色是最溫暖的顏色](https://zh.wikipedia.org/wiki/%E9%98%BF%E9%BB%9B%E5%B0%94%E7%9A%84%E7%94%9F%E6%B4%BB) 』跳脫了一般人認為藍色是冷的、憂鬱、沈靜的意象，對女主角來說藍色是最溫暖的顏色。

這些都說明了顏色在不同的情境、時間、文化脈絡下，會有截然不同的意象。所以千萬不要和設計師說：我要一個<del>憂鬱的紅色或藍色</del>。

設計師只能盡力營造出憂鬱的氛圍，但不一定會使用藍色，也許是黑色也不一定，再者**沒有一個色彩意象是絕對**，意思是上述對於色彩意象的描述如：藍色是憂鬱、黃色是活潑等，是一個大部分的人同樣擁有的感受，你可以透過不同顏色配色、情境等方式，營造出完全不同的意象。

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / blue and yellow](//images.ctfassets.net/8er52l3j5u76/2YDmKJdO5zYoUempltvM5y/61886c9b729ea10f5f75f7780b3728de/blue_and_yellow.jpg)

 
 

## 第二步 | 如何選擇適合的顏色？
當你已經知道顏色是具有畫面、感覺的，那麼究竟我們要怎麼選色呢？或配色呢？
你將要設計的網站或 APP 他是哪類的產品？他的目標族群是誰？有他的企業品牌色嗎？

一般來說，如果是設計企業的官網、APP 或延伸產品，通常會沿用企業的品牌色去加深使用者對品牌的形象，讓使用者在不同的情境下，接觸到產品都能連結到品牌，常見的例子有 foodpanda ( APP 主色到司機的外送袋)、Starbucks 的深綠色、LINE 的亮綠色等等；這些品牌只單純描述文字，你的腦中或多或少都會有品牌的 Logo 形象，這些都是品牌顏色使用的成功案例。
但你應該也會想到某些品牌，很難描述他的品牌色，像是 Google / Microsoft 這樣多色系的品牌，通常象徵著多元、創造、豐富的，無法用單一顏色涵蓋品牌的特性。

因此，如果你在設計時已經有品牌的產品，請先確認品牌的主色、輔色的使用規範，然後在設計時加入，以維持品牌一制性，至於這些顏色應該怎麼使用，將在下一個步驟介紹。

如果，你是一個 Side Project 或是你將創造一個新的品牌，可以嘗試以下這幾個步驟：

#### 1. **定義你的網站或假設你的 Side Project 是給哪些使用者？**
這部分可以回到[上一篇文章](https://5xruby.tw/posts/design-first-website/)將想到的形容詞、圖像畫面寫下來。他的使用者是男生？女生？年輕族群？小資族？還是青少年？

#### 2. **你想要給使用者什麼樣的感覺？**
依據上面想到的形容詞和畫面，我們可以深入地想像，我想要給這些使用者什麼樣的感覺？是活潑的？專業的？還是熱情的？

#### 3. **蒐集這些感覺讓你聯想到的圖、電影或畫面**
這算是我在做品牌設計或網站顏色定調一個很重要流程，如果我不確定畫面的氛圍、形象，要怎麼營造，我會想著我看過什麼樣的電影、影集或品牌給我一樣的感覺？他們的顏色氛圍是什麼？

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / The Grand Budapest Hotel Colors](//images.ctfassets.net/8er52l3j5u76/2egHkqT0Xhoesr1wxm8xSn/8c5883cbb28b0df359c2f5590af7ccb7/The_Grand_Budapest_Hotel_Colors.jpg)
> [歡迎來到布達佩斯大飯店 (The Grand Budapest Hotel)](https://www.imdb.com/title/tt2278388/?ref_=tt_mv) 中的場景因為和諧的配色和構圖，像是使用粉色系或高飽和色系，以及對稱構圖、 使得每個鏡頭都有一種精緻感。



![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Ready Player One](//images.ctfassets.net/8er52l3j5u76/3TGzb0kAtTz1wlWd8QJNNg/7da2ee9f582361bddd2586a869eac253/Ready_Player_One.jpg)
> 相較於布達佩斯大飯店，[一級玩家 (Ready Player One)](https://www.imdb.com/title/tt1677720/?ref_=ttmi_tt) 大量使用[賽博龐克 (Cyberpunk)](https://zh.wikipedia.org/wiki/%E8%B5%9B%E5%8D%9A%E6%9C%8B%E5%85%8B) 風格的配色，這樣的配色具有科技、前衛、未來感。

 

除了電影外，也可以透過 [Pinteset](https://www.pinterest.com/) 或 Google 搜尋你想到的設計作品或藝術作品，為什麼這些作品給你這些感覺呢？試著觀察他們的配色和主色。
或者你也可以瀏覽下面這些色彩部落格，作者將照片歸類出顏色，下次你也可以嘗試將你蒐集的照片歸類出配色！

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Color Palette](//images.ctfassets.net/8er52l3j5u76/3IMPeqBkzmSxbTS2JIKS7p/4bb3750f533e5c5bd467618d94df8b20/Color_Palette.jpg)

* [Design Seeds](https://www.design-seeds.com/blog/)
* [Ave Mateiu](https://avemateiu.com/color-palettes/)
* [Pinterest | Color Palette](https://www.pinterest.com/search/pins/?rs=ac&len=2&q=color%20palette&eq=color&etslf=4930&term_meta[]=color%7Cautocomplete%7C1&term_meta[]=palette%7Cautocomplete%7C1)

 
 

## 第三步｜主色、輔助色，是什麼呀？我該如何配色？
當你確立好你想要的顏色，接下來就是配色！
配色在色彩學當中是相當重要的一環，生活上也經常會使用到，像是衣服的配色、室內裝潢的配色等。

#### 首先決定主色！
主色顧名思義就是「主要的顏色」他是代表品牌的顏色，可能是單一個顏色、雙主色或漸層色，如果你沒有品牌色彩的話，翻翻前一步你蒐集到最多的顏色是什麼？這個顏色符合你所想要表現的感覺嗎？
有的話將它找出來吧！決定他是主色。

#### 還有輔色！
輔色又作「輔助色」，輔助色的存在是為在讓主色與品牌更完整的顏色，是屬於次要的、一般性的。單色、多色、灰階色、彩色都有可能。

輔助色可以引導使用者區分出主要和次要的資訊，除了讓品牌形象完整外，也讓使用者瀏覽時具有層級性。

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Starbucks color](//images.ctfassets.net/8er52l3j5u76/7fcccBp08zo3cq9PxWzKrt/b1fa8286125082ee18fa745e085bb0c2/Starbucks_color.jpg)
> 關於品牌色彩應用，可以參考 [Starbucks 提供的品牌視覺規範](https://creative.starbucks.com/) ，這邊可以看到 Starbucks 如何將品牌色運用在網站、店面、產品上。

更詳盡的色彩意象、色彩專有術語，可以參考：[設計配色完整攻略：色彩意義、色彩理論、色彩心理學讓您一次擁有！](https://www.shutterstock.com/zh-Hant/blog/complete-guide-color-in-design)

 

 

## 第四步｜先別急著上色！使用灰階稿引導你。
當你已經決定了主色和輔色時，這時你可能會有超過 3 個以上的顏色，那麼你該怎麼決定哪些顏色應該大量使用？哪些顏色又應該減量使用？

 

### 1. 使用灰階稿區分資訊、視覺重心。

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Add colors step-1](//images.ctfassets.net/8er52l3j5u76/4XqlLGq3t1fO40E6DpqCmb/fce50dc23674a46cbb9fc4d4e628f3ec/Add_colors_step-1.jpg)
>你可以先將網站的其中一頁或 App 其中一頁，先製作灰階稿，依據資料的重要性，重要到一般資訊，區分出三至五個層級，分別先用不同深淺的灰色排版。

 

### 2. 加入顏色與圖片

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Add colors step-2](//images.ctfassets.net/8er52l3j5u76/3np2Zd2cTfVCn4mOiG3NmS/8d94e276065a3f000f2bbfa31b8d91ae/Add_colors_step-2.jpg)

>這時你可能會意識到，有些區塊加上主色可能反而不好閱讀，抑或是反而太多主色導致無法區分主要或次要性；接著我們再適時的拿掉主色換成深灰色或黑色呢？

 

### 3. 重複試驗到完成

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Add colors step-3](//images.ctfassets.net/8er52l3j5u76/24VjSEK1h8BZZr8J1uWA0w/b2e1213cdaab52b7d0d8efae64b042ac/Add_colors_step-3.jpg)

> 經由這樣一步一步的嘗試、修改，你將會多種的配色可能；盡可能的想像這樣的配色主要和次要的資訊是可以區分出來的嗎？是否符合這個品牌、是否符合你想要營造的氛圍？

 

#### 會不會有例外的規範顏色？
屬於例外的規範，可能是需要考慮像是 `狀態性` 的顏色，像是表示警告、禁用等狀態顏色呢?

這邊可以參考 [Bootstrap](https://getbootstrap.com/docs/4.4/components/buttons/) / [Tailwind](https://www.tailwindcss.cn/components/alerts) 的按鈕或狀態顏色設定，這是一般常用的顏色設定，你可以依據你的品牌做調整，讓這些顏色出現在你的網站或 APP 時不至於突兀。

![post-網站當中的色彩學｜如何選擇網站的顏色定調？ / Bootstrap alert color](//images.ctfassets.net/8er52l3j5u76/2J4GqkwO6KqwTld5a6JlJi/f2fc2cfcb7c86b56767b06dec6102919/Bootstrap_alert_color.jpg)
> 仔細想想我們常見的 `狀態結果顯示` 代表顏色，是不是也在生活中也有相同象徵？

 
 

## 第五步｜多練習、嘗試，配色沒有絕對的公式和規範。
在你嘗試第一次配色，可能會花很多時間都覺得哪邊怪怪的，這是很正常的，因為配色沒有一套絕對的公式、答案。
你可以先從一個畫面或是一張卡片進行小範圍的配色，再嘗試多個畫面；過程中你可能會想要所有顏色都使用，也有可能使用太少顏色導致畫面留白太多或過於呆板，但只要多嘗試、多蒐集靈感、多看，就能對配色越來越上手。

這邊分享我常用的選色或配色工具：

1. [Color Hunt](https://colorhunt.co/) ：很多美麗的配色。
2. [WebGradients](https://webgradients.com/) : 將漸層色建立成色票，可複製 CSS 並有 Sketch / Photoshop 外掛。
3. [Gradient Backgrounds](https://cssgradient.io/gradient-backgrounds/) : 漸層色工具集。
4. [Nippon Colors - 日本の伝統色](https://nipponcolors.com/#mizu) : 日本傳統色。
5. [HTML color codes](https://htmlcolorcodes.com/) : 可線上選色產生色碼。
6. [Adobe Color](https://color.adobe.com/zh/trends) : 可在探索連結內看到網友建立的配色外，也可以在趨勢看到色彩的流行趨勢。
7. [Awsmcolor | Instagram](https://www.instagram.com/awsmcolor/) ：配色分享。
8. [colours.cafe | Instagram](https://www.instagram.com/colours.cafe/) ：配色分享。

---
最後，謝謝你/妳的閱讀，如果對於上述配色有任何問題或是你有自己的配色流程、蒐集顏色的方式，都歡迎在以下留言！ :)

 

相關連結：

- 註1: [【色彩，原來如此】魔幻神秘又奢華！皇室御用色—紫色的故事](https://www.beautimode.com/article/content/84595/)

post-網站當中的色彩學｜如何選擇網站的顏色定調？/ cover

網站當中的色彩學｜如何選擇網站的顏色定調？

你有看過深色的便條紙嗎？

坊間好像比較少看到深色系的便條紙耶，雖然還是有，但大多數的便條紙都是以提醒效果比較好的、較醒目的亮色、淺色系為主，又或者是因為藍、黑、紅色的原子筆（文字顏色預設：黑）比較通用的緣故？總之，便條紙的顏色我要自己決定！！ <del>(任性)</del>

既然要自己決定背景色，那麼如何自動搭配較適合的文字顏色便是關鍵，試想如果選擇黑底又配上預設的黑字，大概要用全選反白或是開 DevTools 才能一探究竟了，如果要手動更改文字顏色又覺得好麻煩...本篇文章主要透過便條紙的自動配色，來介紹 SASS 的一些應用。

> Photo by AbsolutVision on Unsplash

## 首先，刻出一個基本的便條紙樣式

以下就背景色、文字、button 底色的搭配設定相關的部分來說明：

```html
// HTML
<div class="memo memo--bg-black">
 <header class="header">
 <a class="btn-change-bg-color btn"></a>
 <a class="btn-close btn">&nbsp;</a>
 </header>
 <div class="content">
 </div>
</div>
```

```scss
// CSS
$primary-color: #000;
$text-color: #fff;

.memo--bg-black {
 color: $text-color;
 background-color: $primary-color;

 .header {
 border-bottom: 1px solid $text-color;

 .btn-close {
 background-color: lighten($primary-color, 20%);

 &:before, &:after {
 background-color: $text-color;
 }

 &:hover {
 cursor: pointer;
 background-color: $text-color;

 &:before, &:after {
 background-color: lighten($primary-color, 20%);
 }
 }
 }

 .btn-change-bg-color {
 background-color: lighten($primary-color, 20%);

 &:hover {
 color: lighten($primary-color, 20%);
 background-color: $text-color;
 }
 }
 }

 .content {
 @include textarea($primary-color, $text-color);
 }
}

```

目前看起來的 memo 會是這樣：

![post-用 Sass 玩出自己的 Memo Style / memo-sample](//images.ctfassets.net/8er52l3j5u76/3p1RngNPF34eX0uQMFCkx8/05e472e854b7904f19bac02901dba8cd/memo-sample.png)

## 實作過程

接下來，就是我們要透過選擇背景顏色，自動產生適合文字顏色的實作過程：
 

### Step.1 - 決定基本文字顏色
1. 用來搭配深色背景的白色 `#fff`
2. 用來搭配亮色背景的深灰色 `#333`
 

### Step.2 - @function、@if、@else
1. 定義一個 `@function`，將背景色當做參數傳入
2. 在 `@function` 裡，以 CSS 的 lightness 數值為基準，再用 `@if`、`@else` 去判斷，`@return` 回傳符合條件的文字色碼

```scss
@function set-text-color($bg-color) {
 @if(lightness($bg-color) > 50) {
 @return #333;
 } @else {
 @return #fff;
 }
}

//使用方式：
background-color: $primary-color;
color: set-text-color($primary-color);

```
 

### Step.3 - @mixin
1. 重複的動作一次都會做 2 個：設定背景色、設定文字顏色
2. 使用 `@mixin` 將他們包在一起吧

```scss
@mixin set-background($bg-color) {
 background-color: $bg-color;
 color: set-text-color($bg-color);
}

//使用方式：
@include set-background($primary-color);
```
 

### Step.4 - 調整 button 的底色
1. button 底色設定為 $primary-color 再提高亮度 20%
2. 如果 $primary-color 本身亮度就很高的話，就將 button 底色改為降低亮度 10%
3. 將 `.btn-close` 以及 `.btn-change-bg-color` 關於顏色設定的部分歸納為同一個 class `.btn`，在 HTML 的部分要記得補上這個 class 哦

```scss
@function set-btn-bg($bg-color) {
 @if (lightness($bg-color) > 50) {
 @return darken($bg-color, 10%);
 } @else {
 @return lighten($bg-color, 20%);
 }
}

@mixin set-button($bg-color) {
 background-color: set-btn-bg($bg-color);

 &:before, &:after {
 background-color: set-text-color($bg-color);
 }

 &:hover {
 background-color: set-text-color($bg-color);

 &:before, &:after {
 background-color: set-btn-bg($bg-color);
 }
 }
}
```
其他區塊的背景跟文字設定，跟上述的整理方式差不多，就不再贅述。 
到這邊為止，我的 `.memo--bg-black` 的內容修改過後如下：

```scss
.memo--bg-black {
 @include set-background($primary-color);

 .header {
 .btn {
 @include set-button($primary-color);
 }
 }

 .content {
 @include textarea($primary-color);
 }
}
```

其他透過 `@function`、`@mixin` 設定跟顏色有關的部分：

```scss
@function set-text-color($bg-color) {
 @if(lightness($bg-color) > 50) {
 @return #333;
 } @else {
 @return #fff;
 }
}

@function set-btn-bg($bg-color) {
 @if (lightness($bg-color) > 50) {
 @return darken($bg-color, 10%);
 } @else {
 @return lighten($bg-color, 20%);
 }
}

@mixin set-background($bg-color) {
 background-color: $bg-color;
 color: set-text-color($bg-color);
}

@mixin set-button($bg-color) {
 background-color: set-btn-bg($bg-color);

 &:before, &:after {
 background-color: set-text-color($bg-color);
 }

 &:hover {
 background-color: set-text-color($bg-color);
 color: $bg-color;

 &:before, &:after {
 background-color: $bg-color;
 }
 }
}

@mixin textarea($primary-color) {
 @include set-background($primary-color);
}
```
 

### Step.5 - @each
 到這邊，基本上只要把 $primary-color 指定為其他顏色，就可以看到我們要的效果：**只要改變底色，其他地方顏色配置就會自動完成！** 
 以上都是以黑色背景的 `.memo--bg-black` 做範例，接下來的步驟就是要產生更多的 class：

1. 將自己喜歡的顏色個別用變數去指定
2. 定義一個 map，以 name: value 的格式指定顏色名稱及相對應的變數
3. 運用 `@each`，將顏色變數們的名字透過處理變成 class name，並且將對應的顏色變數傳入 `@function`

```scss
// 1. 用變數指向顏色色碼
$color-white: #fff;
$color-red: #F50057;
$color-cyan: #18FFFF;
$color-yellow: #FFEE58;
$color-green: #69F0AE;
$color-purple: #6A1B9A;
$color-black: #000;
$color-gray: #ccc;

// 2. 定義一個 map，以 name: value 的格式指定顏色名稱及相對應的變數
$theme: (
 white: $color-white,
 red: $color-red,
 cyan: $color-cyan,
 yellow: $color-yellow,
 green: $color-green,
 purple: $color-purple,
 black: $color-black,
 gray: $color-gray
);

// 3. 使用 @each 遍歷 map 裡的所有元素，將 $theme 的 name 及 value 使用在 class 的命名以及函數套用
@each $color, $value in $theme {
 .memo--bg-#{$color} {
 @include set-background($value);

 .header {
 .btn {
 @include set-button($value);
 }
 }

 .content {
 @include textarea($value);
 }
 }
}

```
 

### Step.6 - 套用
 這時候就可以把 `.memo--bg-black` 換成其他的 class 了，看看轉譯後的 CSS，多了 `.memo--bg-purple`、 `.memo--bg-cyan` ...等等的 class 可以套用了呢，之後要增加這個 memo 的顏色設定 class 的話，基本上只需要在 map 裡增加 name 跟 value ，像是 `pink: #ffc0cb` 就可以囉，但如果先用變數指定色碼的話會更有利於管理哦

最後，把剛才設定的 memo 都列出來吧：

![post-用 Sass 玩出自己的 Memo Style / memo-total](//images.ctfassets.net/8er52l3j5u76/SQDU1oj6VOeuq2sr4ILmn/70ba998f04dcc0b0fde68712c449c25a/memo-total.png)

post-用 Sass 玩出自己的 Memo Style / cover

用 Sass 玩出自己的 Memo Style

post-React Native 升級教戰手冊 — 以 0.60 + AppBundle 為例 / cover

React Native 升級教戰手冊 — 以 0.60 + AppBundle 為例


Stripe 是全球知名的線上金流服務，由於針對各種主流語言的支援度極高，加上清楚明瞭的開發者文件，使得 Stripe 也使許多知名公司，例如 Slack 以及 Booking.com 成為他們金流收費服務的使用者。遺憾的是，礙於法規緣故，目前在台灣仍然無法使用 Stripe 來處理境內交易。

在五倍紅寶石的期間，由於合作的公司使用 Stripe 作為他們的訂閱收費服務，因此筆者也有機會一探究竟 Stripe；然而，在 2019 年的 10 月，由於日本的消費稅進行全國性的調整，因此訂閱的收費也必須變更，卻也因此遇到了幾個麻煩，這篇文章將隱蔽合作公司的名稱及服務，闡述我們在更新訂閱稅率時遇到的一些問題。

也許是日本的服務經常使用 Stripe 來收費，針對稅率提升這個部分 Stripe 的官方文件有提出該如何調整消費稅率：https://support.stripe.com/questions/2019-10-1。簡單說一下作法：透過 API 在每個使用者的訂閱項目追加新的 Tax Object，並且利用 “upcoming invoice” 來確認是否有順利修改使用者在十月過後的消費稅。

由於更新稅率的時間點非常難以掌握，為了避免空窗期導致收取錯誤的消費稅額，因此我們執行兩次更新：第一次更新在九月三十以前，調整所有次回訂閱付款時間為十月以後的使用者稅率；而第二次則在十月一號當日進行所有使用者的調整。

倒上我們遇到了兩個狀況：取消訂閱的會員因為稅率提升而被重新訂閱，以及使用 Coupon 的會員遇到重複收費的情況。

## 明明取消了卻再次被收費？

十月的不久後我們便收到從客服的來信，有使用者表示他們明明已經取消了訂閱，卻又在十月的時候被收取了訂閱的費用。我們從後台清查，發現確實有數位使用者取消了訂閱之後，卻在更新稅率的時間點被重啟了訂閱。因此我們推測是更新稅率這個行為導致了預期外的結果。

正當我們清查程式碼以及 Stripe 後台時，我們發現了一件事情，Stripe 在 2018-02-28 的 API Patch Note 裡面提到：

```
Updating a subscription set to cancel on a future date no longer clears the cancellation status. In order to clear the cancellation status, specify `cancel_at_period_end=false` when updating a subscription.
```

這意味著原本只要更新訂閱的物件，將會恢復使用者的訂閱。但當下是 2019 年的十月，怎麼還會發生這件事情呢？接著我們便發現了，原來 Stripe 的 API 可以選擇不要升級版本！由於客戶的服務在早期就已經導入 Stripe，而開發其他功能的過程中也沒針對訂閱收費機制修改，因此我們並沒有發現 API 使用舊的版本。雖然說收費的功能一切正常，但很顯然參照最新的開發者文件來操作舊版的 API 是有風險的，即使我們一直都有關注 Client 端的版本升級，但卻遺漏了伺服器的 API 版本。

## Coupon 失效？怎麼一回事？

Stripe 提供了折價功能，可以輕鬆地在使用者的訂閱上賦予各種折扣，客戶也因為商業需求提供免費訂閱一個月的 Coupon Code 給使用者。在清查被恢復訂閱的使用者的時候，我們發現有部分使用者的 Coupon 失效了，甚至在次月的訂閱被收取了比單月訂閱還要高的費用。

在調閱使用者的發票的時候，我們發現這些使用者的發票中都被註記了一條額外的費用：”Remaining time on \[Plan Name\] after 30 Sep 2019“；沿著這條線索我們找到了 Stripe 的 Proration 欄目：

```
Prorations come into play when a customer receives service for only part of the billing cycle. There are several cases where this can occur, notably when upgrading or downgrading a subscription during the billing cycle. Proration is only applicable to licensed (per-seat) subscriptions, as they are billed in advance–at the start of each cycle.

When a customer’s plan changes during a billing cycle, a proration line item is applied on their next invoice. If a customer whose subscription is billed on the first of the month changes to a more expensive plan, they receive a credit for the unused portion of the old plan and are billed for only the remainder of the month for the new plan.
```

Proration 主要會發生在當你的使用者有不同 Plan 選擇的時候，在訂閱期間倘若使用者更改成不同費用的 Plan，那麼 Stripe 將會依照比例來計算使用者必須額外付出的費用或者是可以得到的退費。

然而，由於 Stripe 針對 Proration 的文件說明有些曖昧不明，當時我們並不曉得更改稅率也會造成 Proration，事實上，更改稅率不應該被算在 `upgrading or downgrading a subcription` 裡頭，因此我們認為，由於使用者利用 Coupon 的關係，在 Stripe 計算過程當中，它將使用 coupon 的使用者判斷為免費的 Plan 切換到付費的 Plan，因此額外加算了 Proration 須付出的費用。

這樣的問題也相當容易解決，當你確信修改使用者訂閱時，你不會想要去計算使用者是否應該獲得退費或額外繳費，可以將 Proration 的功能關閉，便不會造成這樣的遺憾發生。

```
Prorating the costs of plans is the default behavior but you can disable proration by setting proration_behavior to none when making a subscription change:
```

雖然為了這次消費稅更新我們詳閱了許多官方文件和部落格資料，但很顯然並不是官方文件都能涵括所有的狀況，有些部分是開發者方的疏忽（例如利用舊版的 API 版本），而有些則是特殊的情況造成意外的結果。而這次更新也給我一個教訓，當開發者在整合外部服務與自己的應用程式時，應該更謹慎地對待兩者之間的契合度，並且隨時準備面對意外的發生以進行應對。

後記：事實上在發生 Proration 超收費用的時候，我社的負責人有寫信向日方的 Stripe 客服人員詢問 Proration 發生的原因，然而來回信件數次之後似乎都沒有得到有用的資訊，因此我們無法得知 Proration 真實的發生原因，因此上面提及的只能是說是最接近的推論。

post-Oopsy! 一個頭兩個大的 Stripe 開發經驗 / cover

Oopsy! 一個頭兩個大的 Stripe 開發經驗

> Photo by [Jude Al-Safadi](https://unsplash.com/@judesaf?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

## 前言
為了增加資訊安全，很多線上服務如購物網站或銀行使用[二階段驗證](https://en.wikipedia.org/wiki/Help:Two-factor_authentication)加強保護使用者個資。目前市面上較知名提供簡訊寄送/驗證的服務有 Twilio（與 Authy 同公司）、Nexmo、Message Bird ... 等，提供的服務內容大同小異，各自也都有大型企業採用。

個人較為偏好 Authy 的主因是可以將使用者電話號碼在 Authy 平台註冊獨一的 `Authy ID` 而無需將電話號碼敏感資料儲存在自站。另外，除了完整的 API 說明與範例文件， Authy 提供多種語言的套件，有助於開發速度與便利性。

以下範例將使用 Authy 搭配 Rails 在會員註冊流程中加入簡訊二階段驗證，並且限制一手機號碼僅限一有效會員。大致流程是：

1. 使用者填寫 email、電話號碼
2. Authy API 判斷號碼是否有效，如是，註冊為 Authy User 並回傳 Authy ID
3. Authy API 寄送簡訊驗證碼至使用者電話
4. 使用者輸入驗證碼
5. Authy API 判斷驗證碼是否有效，如是，使用 email 與 Authy ID 建立 user

### Authy 環境設置
註冊 [Twilio](https://www.twilio.com/try-twilio) 後前往在 dashboard 底下的 `Authy` 、建立一新的應用程式後取得 API Key。因為使用簡訊驗證實作，非相關的預設設定建議一併更改掉，例如禁止使用電話通話與 Authy App 驗證。

![](https://i.imgur.com/LbryWfH.png)

### Rails 環境設置
起始一新的 Rails 專案後在 Gemfile 內加入 authy 與 simple_form 套件，別忘了下 `bundle` 指令安裝。

```ruby
# Gemfile

gem 'authy', '~> 2.7.5'
gem 'simple_form'
```

在 `config/initializer` 底下建立 `authy.rb`，並在 `api_key` 的部分貼上 Authy Production API Key（如上圖）。

Api key 建議使用 ENV 或 [Config](https://github.com/rubyconfig/config) 之類套件存取，不管怎麼做，別將 key 裸露在非相關的人看得到的地方。

```ruby
# config/initializer/authy.rb

Authy.api_uri = 'https://api.authy.com'
Authy.api_key = 'YOUR_API_KEY'
```
### 建立 users routes、model、controller
因本文主要介紹內容為二階段驗證，將大幅簡化 user 部分。如要完整的功能，建議使用 Rails 社群中廣為使用的套件 devise，相關設置請參考[devise](https://github.com/heartcombo/devise)與 [authy-devise](https://github.com/twilio/authy-devise)。

路徑部分只需要 index 頁面呈現所有成功建立的使用者。

```ruby
# config/routes.rb

Rails.application.routes.draw do
 resources :users, only: :index
end

```

建立 User model。

```
$ rails g model user email authy_id
$ rails db:migrate
```

在 User model 內加上 `presence` 與 `uniqueness` validation。當中 `authy_id` 也使用 `uniqueness` 是為了確保使用者無法使用同一號碼註冊多個帳號，在後面流程中會有相關說明。

```ruby
# app/models/user.rb

class User < ApplicationRecord
 validates :email, presence: true, uniqueness: true
 validates :authy_id, presence: true, uniqueness: true
end
```

Controller 與 View 的部分相當簡易，query 所有 users 並逐一印到 index 頁面。

``` ruby
# app/controllers/users_controller.rb

class UsersController < ApplicationController
 def index
 @users = User.all
 end
end

# app/views/users/index.html.erb

<% @users.each.with_index do |user, index| %>
 <div><%= "#{index + 1}: #{user.email}" %></div>
<% end %>
```

### 使用者輸入 email 與電話號碼
下一個步驟需要建立一個表單讓使用者填寫 email 與電話號碼，後端部分要處理的是檢查號碼是否有效並以該資料使用 Authy API 建立 Authy User 後發送簡訊驗證碼到該用戶號碼。由於不打算儲存電話號碼在資料庫內，使用 [form object](https://railsbook.tw/chapters/26-organize-your-code-advanced.html#form-object) 設計模式來處理，也便於驗證輸入資料正確性。

在 routes 內新增這個階段所需要的兩個路徑。 `/sms_auth/registration/new` 用來放置表單、 `/sms_auth/registration` 用來處理註冊 Authy User 與發送簡訊驗證碼。

``` ruby
#config/routes.rb

Rails.application.routes.draw do
 resources :users, only: :index

 namespace :sms_auth do
 resource :registration,
 controller: :registration,
 only: %i[new create]
 end
end

```

新增 `SmsRegistration`，三個屬性是註冊 Authy User 所需要的資料。當中 `country_code` 與 `cellphone` 除了檢查必填外，增加 validation 檢查使用者輸入的確定為整數。

``` ruby
# app/forms/sms_registration.rb

class SmsRegistration
 include ActiveModel::Model

 attr_accessor :email, :country_code, :cellphone

 validates :email, presence: true
 validates :country_code, presence: true, numericality: { only_integer: true }
 validates :cellphone, presence: true, numericality: { only_integer: true }
end
```

Controller create action 部分， `register_authy_user` 使用 Authy 套件的 `register_user` 方法，帶入使用者輸入的 email 與電話資料註冊 Authy User，Authy API 判斷號碼有效後會回傳 `id`。

在 Authy 端，如果一個號碼從來沒註冊過，Authy 會建立一個並回傳新的 ID。如果嘗試用已註冊過的號碼再次註冊，Authy 回傳第一次註冊的 ID。

確認 Authy User 註冊成功後，將回傳的 ID 與使用者輸入的 email 寫入 session 供後面建立使用者階段使用。最後，使用 authy 套件的方法 `request_sms` 傳送驗證碼後帶使用者前往簡訊驗證頁面。

``` ruby
# app/controllers/sms_auth/registration_controller.rb

module SmsAuth
 class RegistrationController < ApplicationController
 def new
 @registration = SmsRegistration.new
 end

 def create
 @registration = SmsRegistration.new(registration_params)

 if @registration.valid?
 register_authy_user(@registration)
 redirect_to new_sms_auth_verification_path
 else
 render :new
 end
 end

 private
 def register_authy_user(registration)
 authy = Authy::API
 response = authy.register_user(
 email: registration.email,
 country_code: registration.country_code,
 cellphone: registration.cellphone
 )

 if response.ok?
 session[:authy_id] = response.id.to_s
 session[:user_email] = registration.email
 authy.request_sms(id: response.id)
 return
 end

 redirect_to new_sms_auth_registration_path
 flash[:error] = '請確認手機號碼有效'
 end

 def registration_params
 params.require(:sms_registration).permit(:email, :country_code, :cellphone)
 end
 end
end
```

如果使用 simple_form 套件處理表單，需要稍微留意 `country_code` 的部分。simple_form 自動判斷 `country` 相關欄位命名應為 select 然後就抱怨 `undefined method 'country_select' for ...`。 相關討論請見其官方 [issue](https://github.com/heartcombo/simple_form/issues/757)。為了 demo 便利，在這直接將欄位設為 `as: :string` 改為一般文字輸入。

``` ruby
# app/views/sms_auth/registration/new.html.erb

<%= simple_form_for @registration, url: sms_auth_registration_url do |f| %>
 <%= f.input :email %>
 <%= f.input :country_code, as: :string %>
 <%= f.input :cellphone %>
 <%= f.submit '送出' %>
<% end %>
```

### 使用者輸入驗證碼與建立 User
到這個階段，測試用的手機號碼內應該已經收到一組七位數驗證碼（可在 Authy console內調整位數），尚未完成的部分為前端表單供輸入驗證碼，後端處理查詢驗證碼是否正確與最後建立 user。

在 routes.rb 內新增這個階段所需要的兩個路徑。 `/sms_auth/verification/new` 用來放置輸入驗證碼表單、 `/sms_auth/verification` 用來處理檢查驗證碼正確性與建立 user。

``` ruby
#config/routes.rb

Rails.application.routes.draw do
 resources :users, only: :index

 namespace :sms_auth do
 ... 略 ...

 resource :verification,
 controller: :verification,
 only: %i[new create]
 end
end
```

驗證碼表單內只需要一個 `pin_number` 欄位，一樣用 form object 方式處理。Validation 除了 `presence` 外檢查輸入值是否為七碼整數。

``` ruby
# app/forms/sms_verification.rb

class SmsVerification
 include ActiveModel::Model

 attr_accessor :pin_number

 validates :pin_number, presence: true
 validates :pin_number,
 numericality: {
 only_integer: true,
 message: 'PIN碼錯誤'
 }
 validates :pin_number,
 length: {
 is: 7,
 message: 'PIN碼錯誤'
 }
end

```

驗證 controller 部分，在 `verify_pin` 中使用 Authy 所提供的 `verify` 方法，帶入使用者輸入的驗證碼與前一個階段設置的 `session[:authy_id]` 值。如果 Authy 回覆該驗證碼無效，將使用者帶回驗證碼輸入頁並提示錯誤，若正確，使用 `session[:user_email]` 與 `session[:authy_id]` 建立 user。

這裡使用 `create!` 的用意是刻意在建立使用者時如果有重複 `eamil` 或 `authy_id` 的情況時的例外能夠使用 `rescue_from` 處理，要求使用者提供其他 email 或電話號碼，而不是 silent fail，另外也確保使用者無法使用一個手機號碼申請多個帳號。

``` ruby
# app/controllers/sms_auth/verification_controller.rb

module SmsAuth
 class VerificationController < ApplicationController
 rescue_from ActiveRecord::RecordInvalid do |_exception|
 redirect_to new_sms_auth_registration_path
 flash[:error] = 'Eamil 或號碼已由其他帳號使用'
 end

 def new
 @verification = SmsVerification.new
 end

 def create
 @verification = SmsVerification.new(verification_params)

 if @verification.valid?
 verify_pin(@verification)
 create_user
 redirect_to users_path
 else
 render :new
 end
 end

 private

 def verify_pin(verification)
 authy = Authy::API
 response = authy.verify(
 id: session[:authy_id],
 token: verification.pin_number
 )

 return if response.ok?

 redirect_to new_sms_auth_verification_path
 flash[:error] = '驗證碼無效'
 end

 def create_user
 User.create!(
 email: session[:user_email],
 authy_id: session[:authy_id]
 )
 end

 def verification_params
 params.require(:sms_verification).permit(:pin_number)
 end
 end
end
```

最後表單的部分。

``` ruby
# app/views/sms_auth/verification/new.html.erb

<%= simple_form_for @verification, url: sms_auth_verification_path do |f| %>
 <%= f.input :pin_number %>
 <%= f.submit '送出' %>
<% end %>
```

做到這裡，使用 Authy 實作二階段驗證的基本功能已經完成。然而，還有很多可以進一步優化的部分，例如：非 ok 的 Authy response 處理、將使用到 api 相關的 method 包裝成 service，以免 controller 越來越複雜肥大 ... 等。

最後，除了本文使用到的 Auhty 套件，如果會員系統使用的是 Devise，可以參考也是 Twilio 官方做的 [authy-devise](https://github.com/twilio/authy-devise) extension。

---

> 👩‍🏫 __課務小幫手：__
> 
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>

五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

面試攻略(二) 藏在自薦信 (Cover letter) 裡的魔鬼

線上直播與錄製線上課程 - 硬體篇

面試攻略(一) 初心者的三大面試攻略心法

網站當中的色彩學｜如何選擇網站的顏色定調？

用 Sass 玩出自己的 Memo Style

React Native 升級教戰手冊 — 以 0.60 + AppBundle 為例

Oopsy! 一個頭兩個大的 Stripe 開發經驗

安安你好給電話嗎？使用 Authy 快速打造二階段驗證

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款