/

一段關於剛被我大國軍摧殘完的找工作辛酸血淚史，找的是我的第一份全職工作，從 2018 年 6 月參加了 Yourator 辦的快速面試，然後口試、畢業、入伍、退伍再花 30 天面試了 11 個職缺後拿到滿意的 offer 準備過年。

由於面試期間受惠於 ptt 及各式部落格面試心得文，因此決定也來寫一篇順便做個紀錄。

• 背景
• 職缺選擇
• 期望薪資
• 面試清單
• 面試準備
• 面試問題彙整
• 結論

背景

國立中(後)段大學資管學碩畢，從大二下開始接觸網頁，一不小心走偏愛上前端，然後一寫就是四年。期間有在小公司實習四年做全端、國泰金控 CIP 暑期實習、校內工讀體驗血汗工程師，平常沒事的話就會找一些 side project 來做，所以算是有一些作品。

除了前端的部分也摸過一些後端、資料庫、Linux、區塊鏈、CMS、React Native，不過都不熟，導致面試中很常被問到我是投前端還是全端的職缺。

職缺選擇

因為興趣以及自己目前最熟的部分是前端，所以履歷全部都是投前端工程師的職缺，再透過職務說明過濾掉技術落後、工作內容無聊、寫明用非 React 的職缺。

選團隊 > 選公司
所投遞的履歷包含了大小公司、新創，甚至是多種產業類別，主要因素是在工作選擇上以團隊作為最主要的考量，作為評斷的條件像是團隊人數架構、開發項目、專案運作、技術使用等，希望團隊中有許多強者可以交流且樂於學習、導入新技術，再來考慮公司福利與薪資的部分。

當然，我也只是個新鮮人，不知道選錯公司或產業別會不會發生什麼事。

當兵會改變一個人
在入伍前我只打算找新創，因為新創給人的感覺就是活潑、自由、技術都很潮，通常薪水也都比較敢給。

但在軍中每天被長官洗腦

你各位想想看十年後你的公司還在嗎？
有哪間公司會提供早餐午餐外散宿還見紅就休？
結婚有補助嗎？
生小孩有補助嗎？
看醫生有補助嗎？
我每年特休xxx天還有xxx天慰勞假

於是開始研究公司福利通常會有哪些，然後找一些穩定成長的中小公司或大公司中帶有新創味道的職缺。

期望薪資

身邊不少朋友應屆就是年薪百萬的人生勝利組，但弱弱如我不敢奢求太多，目標年薪設定在 800 ~ 900k，月薪的話則是期望在 50 ~ 65k，再依照面試表現以及薪資結構開價。

(記得在還沒畢業的時候覺得有點實習經驗然後有一些作品月薪拿個 70k 合情合理吧。

面試清單

總共投了 25 個職缺，14 個有得到面試機會，其中 2 個為 Yourator 快速面試；1 個 hunter 提供；5 個主動邀約，所以自行投遞履歷的面試率為 6/17。

註：以下所提及之薪水 N 為我新訓時期某個做了十多年的班長當時月薪 (k)。

2021.04 更新:
2 年過去了，也換了份工作，在此揭露已過時的上述薪資 N 為 48k

畢業前的快速面試

1. PRO360 達人網
2. 活動通

退伍後的面試 (有拿到 offer)

3. QNAP
4. 雷技
5. Yahoo
6. Synology

退伍後的面試 (沒拿到 offer)

7. 台達電 (台達研究院)
8. 17 Media
9. 風傳媒
10. 趨勢 x2
11. 利頡
12. 宇匯
13. 研華

1. PRO360 達人網

Yourator 快速面試

在 Yourator 快速面試活動中獲得面試機會，是當天兩場面試的第一場，也是人生的第一場，怕。

是間新創公司，服務內容就不贅述，面試過程大概 15 分鐘，面對的是一位 lead，過程中滿輕鬆的，主要就是自我介紹、講解自己的專案 (面試官説事前有先玩過我的作品，覺得用心)，然後問一些 React 相關的問題以及個人專案用 React 的架構設計如何實作，最後就是提問時間。

由於是快速面試所以沒有被問到太多問題，而最後我也有主動提及還有四個月的兵役需要，所以猜是因此沒有下文。

因為是第一次面試為求慎重所以穿了正裝到場，結果發現整個場子只有 3 位左右的面試者著正裝，於是之後面試穿著都走休閒路線XD

結果：無聲卡

2. 活動通

Yourator 快速面試

一樣是在 Yourator 快速面試活動中獲得的面試機會。

快速面試
在快速面試的場地，時間也大約是 15 分鐘，面試官是一位 PM 與一位 HR，照樣是一套自我介紹、實習經歷、個人專案介紹的起手式。

因為時間因素也沒被問到太多問題，大概都是些基本的 js、React、React 跟 Vue 的差異，其中印象最深刻的問題是「做過最瘋狂的事是什麼」。

on-site interview
本來不抱持著什麼希望然後就接到的 HR 打來的電話跟我約 on-site 面試。

到現場後 HR 先來了份像是性向測驗的 google 表單，然後再填一張個人資料表包含期望薪資，接著開始面試。

在面試的前/中有一份紙筆測驗，但我忘記是哪個時間點了XD
筆試是一張紙共 5 題左右，考的題目滿簡單的，像是寫出 for 迴圈裡 setTimeout 去印出 index 的結果以及做字元轉換 (AABBACDC => WWXXWYZY 的概念)。

面試官是一位 PM、一位前端工程師、一位後端 (好像是) 遠端參與，問題包含 SEO、多國語系處理經驗、GA 使用經驗、過往工作的團隊合作經驗 & 角色分配 & 專案運作方式、技術學習的經驗與方法以及針對實習專案提出問題等。

在整個面試過程中覺得相當有機會拿到 offer，但還是因為兵役問題 HR 表示再聯繫。

phone interview
我很聽話的有「再聯繫」，於是退伍的前一個月 HR 來信告知仍有前端的職缺，詢問我的意願與期望薪資，在我回覆後 HR 表示要再請顧問與我 concall。

面試官是活動通的顧問並任職於 Appier 的資深前端工程師，主要是協助活動通的技術問題與 code review 的部分。

面試過程大約一小時，一樣是先自我介紹然後開始問問題，包含：

• 如何在有限制大小的元素內用 scrollbar 來顯示內容
• 如何隱藏 scrollbar
• 解釋 flex
• flex-grow, flex-shrink, flex-basis
• css grid
• mongoDB 使用經驗、為何選擇 mongoDB or NoSQL
• NoSQL 與 RDBMS 比較
• React 生命週期 & 16.3 生命週期改變的原因
• React hooks
• React 優缺點
• ES6 語法相關問題
• array map & reduce
• closure
• curry

結束後又跟 HR 來信討論了一兩個禮拜，然而我開的薪資無法被接受，又 HR 表示可以給到 junior 的頂，但都沒有給出明確數字，最終無法達到共識故婉拒。

結果：婉拒

3. QNAP

104 投遞

當時在投 QNAP 的時候看到職缺列表總共有 14 個前端職缺差點傻住，認真的從中挑了 2 個工作內容跟技術比較符合期待的投遞，然後獲得其中一個的面試邀約，地點在汐止的總部。

是一場費時的面試，總共花了四個多小時才結束，包含筆試、技術團隊面試、主管面試、白板題、人資，其中有不少時間是花費在等待下一關的面試官到來。

紙筆測驗限時一個半小時 (應該是，有點忘了)，有性向測驗、智力測驗 (我覺得滿難的，可能我智商過低QQ) 和一份超級簡單的 js css 考題，寫完後就到櫃檯交卷然後等待下一階段的面試官到來。

技術面試的部分來了三位看起來跟我年紀差不多的工程師，兩位前端一位後端，面試官人非常好，一直很怕在提問的時候為難了面試者，也是很用心的有先玩過我的作品、看過 code。首先先是面試官們介紹這個部門主要在做什麼以及這個職缺會需要負責什麼部分，接著自我介紹後就開始問一些像 React 生命週期、this.setState() 跟 this.state.a = 'something' 的差異、簡易的 css 排版、水平/垂直置中、styled-components 利弊、Redux 概念、過往專案的問題，在問答過程中若沒有答的很完美面試官也會順便做補充。

再來換部門主管進來介紹 & 小聊一分鐘，然後就被帶到一間有白板的會議室等待，而後進來了一位我也不知道是誰反正就是負責來考白板題的面試官，題目是 leetcode 第 20 題。由於沒有白板題經驗，所以沒跟面試官有什麼互動就開始動筆了，完成後面試官表示「好像沒什麼問題」然後拍張照就走了。

最後就是跟 HR 聊天然後收工回家。

結果：面試後 2 ~ 3 天 offer get，(N + 2) * 17 (HR 表示 17 是表現普普通通的人能拿到的數字)

4. 雷技

104 投遞

位在南軟的接案公司，同時也有開發自己的產品。

收到面試邀約的同時得知要先寫作業，用 Angular 做出一個跟 這個 一模一樣的頁面，在此時才知道這邊可能是以 Angular 做主要開發工具，但我還是接受了這個挑戰邊嗑官方文件邊刻 TODO List。

到了現場先由 HR 帶去會議室做紙筆測驗，題目主要是考 ES6 特性如：

• var, let, const
• spread operator
• arrow function 跟 this
• hoist, TDZ

其他還有像是在 Promise 內外呼叫 console.log() 判斷印出的先後順序，另外有 4~5 提的加分題都是 RxJS，不過我技能樹還沒點到那邊所以都留白。再來還有兩題英文測驗，主要是能夠解讀客戶所寄來的英文 email，再依題目指示以英文撰寫回信內容。

接著則是跟一位工程師與一位主管進行面談，過程中不需要自我介紹，直接從 TODO List 的作業開始討論起，關於架構或是寫法有疑慮的地方，以及如果要透過 TODO List 的概念延伸成記帳系統要怎麼實作，又若要加入 undo、redo 功能會怎麼實作。其他問題則像是 Redux 概念、過往專案及實習經驗、最有成就感的專案、對這份工作的期望，再換面試官介紹團隊與開發項目。

技術面試完後換總經理 (沒聽錯的話) 來聊天，人非常的親切，這個階段主要在整個公司的架構、營運、發展以及談薪資，整個過程都有說有笑，還看著我在 104 上填的對低期望薪資開完笑的說前端是不是都很敢開薪水，但還是説試用期後可以達到這樣的水準，最後表示會在兩天內給予回覆。

整個過程大概花兩個小時，HR、面試官、總經理人都很好，面試體驗相當不錯，也是一家算敢給的公司，唯一缺點就是辦公室感覺略小有點擁擠，若是不排斥接案且有興趣往全端發展的話可以來投投看。

結果：面試隔天 offer get，(N + 4) * 13 + 績效 + 專案獎金，試用期後 N + 7

5. Yahoo

主動邀約

還沒退伍的時候就有看到 Yahoo 的職缺，並且對於福利的部分相當心動，但因為覺得自己準備還不夠、面試經驗還太少而且尚未完成英文履歷所以就還沒投遞。結果很幸運的在後來收到了面試邀約的信，此次職缺是電商 team，面試包含 phone interview 及 on-site interview。

phone interview
大約一小時的時間，一開始先簡短自我介紹，然後面試官會給一個 CodeSandbox 的連結，裡面有兩個用 react 做出來的頁面。第一個頁面是列出了數個題目，需要口頭回答或是直接改 code 修改頁面中的元素，而 css 的部分都是使用 styled-components，題目主要是一些 css、事件觸發、前端安全相關的。

第二個頁面是一個樣式不完整的商品卡片，就是一個 container 中會有商品名稱、照片、資訊、價格、按鈕，需要修改 css 以及加入 click 事件與修改 state 等。

coding 的過程都可以自由 google 或是跟面試官討論，氣氛滿輕鬆的，最後則是跟面試官小聊以及提問時間，然後我說我等 on-site 的時候再一起問，面試官回了「哦～這麼有把握會過就對了」，我才意識到好像有這麼一回事XD，不過如果問了一堆結果沒過好像也沒什麼用。

on-site interview
在面試前就有先提醒會花掉整個下午的時間，過程包含了 HR、技術、主管三個階段，並且需要自備筆電因為需要 demo 及 coding。

一開始先由 HR 帶我大略參觀一下有吃不完的食物和飲料的地方，然後被帶到會議室做基本的訪談，只能說 HR 超親切然後一直要我不要緊張，過程就像在聊天討論一些過往經歷、公司福利、薪資結構等等。

下個階段進來了四位工程師，其中一位是 phone interview 的面試官，而接下來的面試流程也都是由這位面試官作主導，直接不囉唆開始分享螢幕畫面 demo 自己的作品，之後就針對這些作品做提問。在處理完作品後就由面試官輪流出題，包含口頭回答以及實作程式，主要在考對 JS、React、styled-components 的熟悉度，另外也有幾題演算法、前端安全相關的題目。

最後一階段是由 phone interview 的面試官與另兩位主管進行面試，整個過程比較像是在聊天然後了解我的過往經歷以及部門概述，中間也穿插了一些問題像 Restful api、HTTP status code、React hooks、JSON v.s. XML 等。

此次面試花了四個多小時，但過程很輕鬆沒什麼壓力，反而是都帶著愉悅的心情，所以就沒有覺得面得很累或燒腦。

結果：面試後 2 天 offer get，(N + 21) * 13 + 績效 + RSU

6. Synology

104 主動邀約

在拿到 QNAP 的 offer 後就收到 Synology 的面試邀約，這是巧合嗎？我不這麼認為。

因為號稱是白板題大魔王，面試前特別緊張，也去惡補了些資料結構、演算法、時間複雜度的題目，希望不要被電得太慘。

公司位在板橋亞東醫院旁的台北遠東通訊園區，面試共五個階段，一開始會先被帶到小會議室填寫基本資料與筆試，內容以 css 為主，再加上一些簡單的 HTML、JS 題以及多國語系、過去工作經驗的題目，到後來才知道這是設計部門難怪這麼重 css。第二階段就由 HR 進行訪談，但關於薪資的部分是直接跟最後一關的部門主管談，不過 HR 的說法害我一直以為下一關就是主管，結果進來的都不像主管，搞得我好亂R。

第三階段的面試官是一位工程師，帶著一本筆記本開始逐一提問，但面試官的手抖得像他才是面試者(?!)，問題也是圍繞在 css、多國語系處理，都是一問一答，不太有問題延伸或反問的狀況。

第四階段是由一位前端與一位後端負責，先是自我介紹再換面試官介紹部門及職缺接著換我提問，過程中面試官沒有多問一些作品、工作經歷、技術的問題。然後就是期待已久的白板題，不過只有考一題 sort，再來就由面試官問一些實際應用會遇到的問題，像是在手機上要用什麼方式呈現很多欄位的表格、實作多國語系時候可能不同語言的文字長度會差很多則頁面要怎麼設計、如何實作如網路銀行頁面的「300 秒後登出」並能同步其他分頁。

最後一關終於等到了部門主管，主要就是在談薪資的部分，主管看了我在一開始的表單上填了期望月薪 N + 5 就開始介紹薪資結構然後說明這邊月薪都是比較低的，接著開了個 N - 3 的數字給我並表示完全可以達到我的期望年薪，所以我也就欣然接受了。不過主管也表明這邊是設計部門有許多追求完美的設計師，在頁面排版上會被叼得很精，以及在開發過程中可能會有很多「等待」或是與設計師大量往來的狀況，另外是主管好像也是走設計的，從對話中感覺分不太清前端跟後端呢QQ

最後的最後又給了份作業，附有 spec 跟一堆圖片，要做頁面的排版。

面試時間大約三小時，面試強度不像爬文所看到的那樣可怕，可能因為是設計部門的關係，另外面試官也透露在這幾乎不加班。

結果：面試當場口頭 offer，(N - 3) * 20 (部門主管説年薪這個數字沒什麼問題，算了一下至少 20)，雖然月薪很低，但可預期的年薪應該是有拿到的 offer 中最高的。

不過績效的部分拆在隔年四季發放，分成 40%、20%、20%、20%。

7. 台達電 (台達研究院)

104 投遞

透過 104 投履歷後兩天左右就接到面試邀約，地點在內科法拉利對面。面試一開始由 HR 帶到小會議室填基本資料跟期望薪資，然後聊一些人格特質、過去經歷的部分，接著就換技術面試。

面試官是兩位前端，看起來都很年輕，一樣先是自我介紹然後開始輪流問問題，主要是問 React 相關如生命週期等、列舉 ES6 有哪些新功能(語法)、討論過去實習的開發經驗。兩位面試官也很用心的有先玩過我的作品、看過 code，就順便討論作品的架構、細節，然後要我 demo 一個有做 RWD 的作品。

總共花了約一個小時，整個過程都聊的很和諧，並告知若有通過會有第二次面試。

結果：無聲卡

8. 17 Media

f2etw 投遞

很早就有在 f2etw 上看到 17 的職缺，但覺得自己實力不夠所以遲遲沒有投，可是 104 丟了一堆都還沒有反應只好硬著頭皮先投個 17 了，結果當天就得到面試邀約的回覆。

在面試前 HR 會先寄人事資料表來填寫再於當場簽名，接著就由前端主管來進行面試。總共花了近 5 個半小時包含一份免費的便當當午餐，在技術的面試部分都只有前端主管一人負責。

一開始面試官會先詳述此職缺的背景、內容等並告知面試流程且便當已經訂好了，接著換我自我介紹然後就進行 live coding，會是由面試官提供一台 macbook 做使用，在 30 分鐘內解完題目，且重點是程式的可讀性。這次的題目是輸入一 number 輸出三位一逗號的 string (123456 => '123,456')，解完後就如同其他心得文中看到的一樣面試官會細心的一起討論解法、邏輯、演算法、可讀性，會針對有疑慮的地方再進行改善。

接著則是 code review，這邊面試官打開一支 JS 給我要我找出裡面需要改善的地方，大致是：

• 變數命名
• 全域變數
• if (a = 1) {}
• function 回傳格式不可預期
• if else if 語法
• 多餘判斷式
• 架構設計

這邊可以是邊看 code 邊回答或是先看完再回答，面試官一樣會一起討論每個回答的理由，或是可能有其他種更好的做法。

午餐的部分在辦公室的公共空間跟前端團隊一起用餐，順便聊一些比較輕鬆的問題。個人覺得有免費午餐跟飲料機是很誘人的福利R。

下午場則繼續技術問答，主要是問對於 this、closure、prototype chain、scope (var, let, const) 的了解程度以及效能問題，再穿插著一些非技術問題像是自我人格特質描述、期望的工作環境、工作目標、特別排斥的工作狀況，為了讓面試者能更了解 17 的環境是否與期待相符。

最後就換 HR 一連串的福利介紹、背景 & 人格調查、提供期望薪資的部分，並表示會在兩個禮拜內給予回覆。

結果：面試後 1.5 週收到感謝信

在收到感謝信的隔天 17 就發生了大規模的人事異動，而此職缺的狀態暫停招募(而非已招到人)。然而面試過才發現原來 17 規模這麼大，非常大的開放式辦公室，電梯門口還有人高馬大的保全，工程團隊就 80 逾人，其中光前端就 21 人，但這已是人事異動前的數據了。

9. 風傳媒

hunter 提供

在內科洲子街，由 hunter 安排的面試機會，整個面試過程都是跟一位工程師及 CTO 互動，一樣是先自我介紹然後問問題，大致如下

• 論文內容、架構
• 近期對前端的趨勢觀察
• 近期所學的技術
• 何謂 PWA
• 是否知道 polymer
• 為何使用 React 開發專案
• 實習經驗、專案
• 何謂 CORS
• 何謂 XSS
• 何謂 CSRF
• 何謂 Restful API
• 何謂 Redux
• 何謂 GraphQL
• 何謂 JSONP
• HTML element id & class 差異
• 以 id or class 選取 element 的效能差異

不過對這邊而言前端開發的需求只是去少量的維護官網，然後會希望能跨足 React Native 以及後端開發，也表示可以漸進學習慢慢增加非前端的項目，但我仍然是以「前端工程師」的角度談薪資，所以我想應該不會有人會開這種薪水聘一個半殘的全端。事後 hunter 也表示若有通過面試通常會告知有作業或二面的部分。

結果：無聲卡

10. 趨勢

104 主動邀約

其實本來是透過 104 投遞 A 單位的前端缺可是遲遲沒有下文，結果某天收到 HR 來信邀約面試後端職缺，但全職後端我實在無法勝任，於是回覆婉拒並詢問是否有相關前端職缺，然後就收到 B 單位的前端面試邀約了。

前端職缺面試前不用做 codility 測驗但需要寫一個作業如 此，簡單來說就是要依照所提供的 spec 做出一個 datepicker component，然後附上文件，且要支援 IE11，另外若有處理 RWD 或不使用 create-react-app 這類工具則有加分。

到了現場後被 HR 帶去小會議室做紙筆測驗，然後再此時被告知待會有 B 及 C 兩個單位的面試。筆試的部分滿簡單的，考的是 js、css 的基本概念以及 ES6 的特性。

第一個 team 的面試官是一位主管一位前端，而第二個 team 是 TIC (luwak)，面試官是一位主管與兩位前端，TIC 的這場面試應該是我所有面試經驗中最硬然後被電最慘的一場，兩個 team 的問題統整大致如下：

• 如何不用 !important 覆寫原有樣式
• 論文內容
• 在過去專案中遇到最大的困難，如何解決
• Redux
• React 優缺點
• React 生命週期
• 過往專案從 jQuery 重構成 React 有什麼好處
• 說服面試官從 Angular 7 轉跳到 React
• 本來要問 Promise 但面試官說我應該不會所以沒問 (?!
• 在過往團隊中遇到不合理的需求要怎麼解決，詳述當時狀況
• 何謂 firebase，了解得多深 (因為我有提到專案有用到 firebase)
• 前端安全性問題，XSS 之類的

最後就是 HR 來講解福利、薪資結構然後問期望薪資跟比較喜歡哪個團隊，整個面試過程大概花了兩個半小時。

結果：面試後 1.5 週收到感謝信

11. 利頡

104 主動邀約

直接講在前頭，這間的面試體驗是所有經驗中最差的，但很推薦來面試針對自己在比較原理層面的知識做健檢。至於原因則是面試內容很死，像在期中考考名詞解釋一樣，而其中比較活得題目卻像在幫他們寫作業，因為是他們正面對到的客戶需求。

這是一間做接案的新創，其實本來有打算主動投遞，就在我把它記錄到我的已投遞清單後就忘了按下應徵按鈕，結果一陣子後收到邀約通知害我愣了一下。

面試只有一關，由前端主管 + 後端主管 + PM + 一位從頭到尾都沒有出聲的工程師進行面試，PM 負責面試流程與薪資福利的部分以及一些通常是 HR 在問的問題，問題的部分都是由前端主管與後端主管提出。一開始一樣自我介紹，而當我在介紹個人專案的部分就被打斷並說待會會實際 Dome 讓我很期待，但到最後還是沒有給時間 Demo。

首先前端主管問說有沒有過去實習、工讀的專案可以 Demo，接著就開始問些名詞解釋，如：

• this
• closure
• hoist
• event loop
• bind, call, apply
• scope (var, let, const)
• stack, 舉出以 stack 實作的案例
• queue, 舉出以 queue 實作的案例
• Map, Set
• Restful api
• cookie, session
• 時間複雜度
• Design pattern
• HTTP stateless
• 前端如何縮短呼叫 API 所花費的時間

中間穿插了一題紙筆測驗，要將原本的 code 重構並增加通用性，且限時五分鐘。系統需求是計算機功能 (僅處理 operand operator operand 的算式)，而題目的 code 是透過 switch case 去判斷 operator，但日後客戶會提供上百種非正規的 operator，依此條件重構。

另外一題則是考 pass by reference 的概念，題目大致像這樣

let a = { a: 1 };
let b = 1;
let c = { a: 1 };
let d = { a: 1 };
function change(a, b, c, d) {
    a.a = 2;
    b = 3;
    var c = { a: 100 };
    d = { a: 999 };
}

change(a, b, c, d);
console.log(a);
console.log(b);
console.log(c);
console.log(d);

過程中面試官也都很友善，對於回答不出來的問題大多也會給予解釋或線索，可以回家再好好研究。

結果：面試後 2 週收到感謝信

12. 宇匯

主動投遞 + 內推

由朋友推薦然後自行投遞履歷給用人主管，在一開始就遇到了認知落差，主管要我看過 104 的職缺內容且認定我會看到其中「完成 hw0 並回傳」而開始寫作業，但我以為那是求職者透過 104 投遞履歷的流程所以就略過了，直到過了一個禮拜還沒有回音我才意識到了什麼。

這裡的面試流程相當的特別，首先繳交 hw0 後主管們覺得有哪裡回答得不好或有改空間會被要求再回答一次，接著就被加到一個面試用的 slack channel，而之後的流程包含了線上 coding 測驗、作業、現場面試與程式實作、與 CEO 聊天。

線上 coding 測驗的部分是透過 slack 分享畫面的方式進行，總共三題，分別是考

• 讓同個 function new 兩個 instance 並有相同的 reference
• 使用 native javascript 操作 DOM
• 給一個數字陣列與一數字 k，找出陣列中有幾對數字相差為 k

另外只能使用 ES5，且會要求時間複雜度，過程中氣氛非常的自在，遇到問題可自由 google 或與面試官討論。

然後...就沒有然後了，因為已拿到滿意的 offer。不過滿推這間的，面試的感覺很舒服，起薪也算不錯高 (55k+)，另外據說是沒在加班的而且似乎充滿了強者，至少在裡面的朋友都很強 <(_ _)> 。

不過缺點是面試流程拖的很長，有興趣的話可以早點丟履歷。

結果：中離

13. 研華

104 投遞

投了近一個月才收到面試通知，不過面試前就收到滿意的 offer 惹。

面試準備

你各位有空就把單戰拿出來背啊，還發呆啊
我在退伍後的第五天開啟了面試的旅程，為了早點找到工作上工領錢所以不像有些人會在退伍後先玩或先準備個一個月再開始找工作，因此我只剩在軍中的時間同時要吸收新知和努力讓腦袋不要退化。

可是雖小如我，新訓時沒得用手機，二階段時一週只一次使用手機的時間，所以不可能靠一些現代的方式來複習&準備面試，但從新訓結束後每天醒著的時間大概有 1/4 ~ 1/2 的時間在發呆，剩餘的時間都在做跟昨天一樣的事，想想再這樣下去不行，於是造就了平時沒有讀書習慣的我居然讀完了四本書 (歐萊禮 JS、網頁、css、UIUX 相關的書 & clean code)。

放假的話就是吸收一些新知、努力跟上陽間的趨勢，然後很重要的是找東西來寫，不論是 leetcode 或改改自己的專案，維持手感。

Leetcode
不一定要刷，但如果你手邊沒有正在進行的專案，可以刷刷 leetcode 來維持手感，就算都只刷 easy 的也好。

考古
面試心得文、考古題必須爬過，除了面試題目很容易命中，也可以先大略了解面試流程，讓自己對整場面試更有把握、信心，然後順便蒐集題目當準備的內容。

不慌不忙
我習慣在面試前一小時到離面試地點最近的超商休息、悠閒吃早餐午餐然後順一下待會要講到的內容與題目的準備，並在面試前十分鐘抵達現場。

主動出擊
自己習慣是把所有學經歷、擅長技術、實習經驗及專案、個人專案介紹全部在自我介紹的階段全部講完，就算面試官只是叫你「簡短」的介紹自己或是說只給你五分鐘，帶著自信的眼神與口條把專長與優勢展示出來，以免面試官沒有問到可以展現自己能力的部分。

不要講沒把握的東西
在面試中主動提及的任何內容都必須是有深刻理解的，如擅長技術、使用過的工具、開發過的專案等。

累積題目
把每場面試所遇到的題目都記錄下來成為下一場面試的準備內容。

面試問題彙整

非技術類

• 你上來台北面試那要住哪裡
• 團隊開發經驗
• 過往開發上遇到不合理的需求如何處理
• 過往專案的團隊人數、分別是什麼角色、自己是擔任什麼角色
• 有沒有與設計師合作的經驗
• 選擇工作的條件與排序
• 對這份工作有什麼期望或規劃
• 最有成就感的專案
• 開發上遇過的困難，如何解決
• 過往如何學習一個新技術
• 形容一下你自己
• 別人都是怎麼形容你的
• 自己的優缺點
• 過往開發專案時團隊如何運作與分工
• 最近學了什麼技術

技術類

JS

• ES6 feature
• this
• closure
• hoist
• event loop
• Promise
• performance

CSS

• box model
• selector priority
• float
• flex
• css grid
• media query
• inline, block, inline-block

Web

• event bubbling
• SEO
• browser rendering
• RWD
• CORS, XSS, CSRF
• cookie, session
• restful
• HTTP status code

React

• Pros & Cons
• compare with Vue / Angular / jQuery
• lifecycle
• Redux
• styled-components

結論

在一個月面試了十幾個職缺說多不多，但心滿累的。面試時間安排上都是以面一休一為原則，這樣有比較多時間可以休息並充分準備下一場的面試，也避免一天安排兩場結果第一場延誤到第二場時間的狀況。

運氣重於實力
就像有興趣但還沒投履歷的公司突然找上門，或是可能在某場面試的表現意外的優異然後就拿到 offer 之類的，請把握好每次面試的機會並做足準備，且不要對面試結果得失心太重。

感謝發感謝信給你的公司
沒有昨天的感謝信，沒有今天的 offer。
基本上前期的面試都算是在累積題目跟經驗，拿到感謝信是常有的事，就算有拿到 offer 但不夠完美的都可以考慮放掉，而當你把自己後路都斷了也會更認真看待及準備後續的面試。

不要投沒興趣的職缺
有些人會建議多投履歷增加面試經驗，但我覺得光奔波面試有興趣的職缺就夠累了，如果還不小心拿到 offer 然後腦波弱就尷尬了，所以請把心思放在準備下一場你有興趣的職缺面試。

碩論做什麼好像不一定很重要
印象中只有兩三場左右的面試有問到關於論文的部分，而且重點也主要在 React Native 上 (我的碩論是以 RN 實作)，不過可能也是因為我幾乎沒有主動提及論文的部分，就如同上面提到的「不要講沒把握的東西」。

最後感謝你的觀看，希望有幫助到對前端職缺有興趣的你。
(本文同步發表於 Medium)

其他前端文章

• JavaScript: Clipboard API | 不用監聽鍵盤事件，還能複製非文字項目
• JavaScript: Proxy 與 localStorage
• z-index 與 stacking context
• [筆記] JavaScript: document.referrer
• [筆記] JavaScript History API
• 2020 失敗的前端工程師面試全記錄
• 筆記一下 CSS collapsing margins 重疊問題
• Svelte 初探筆記 (上)
• 用 CakeResume 寫履歷的新姿勢
• Carousel 輪播、CSS grid 與 CSS scroll-snap | 用 React 造輪子
• webpack 打包的 node modules 版本不正確?!
• Userscript：用 React 升級你的 Dcard，喜歡圖片蓋樓文的有福了
• 如何針對 contenteditable 元素做簡易 get/set value，以 React 為例
• React Hooks 新手筆記：
• Userscript：碗都敲破了還沒有新功能，那就自己做吧！
• reCAPTCHA v2 Invisible，不用再把「我不是機器人」列入頁面設計考量
• 使用 JSON-LD 處理 SEO，並讓 Google 針對不同形式網站做獨特的搜尋結果呈現
• [筆記] 使用 CSS Grid 來做 RWD 排版

前言

其實在一天以前，我沒買過網域，沒設定過 SSL，更別說深入了解什麼是 DNS (現在也還是不了解呢)。但反正我成功買了網域套在 GitHub Pages 上並使用 Cloudflare 讓他有綠綠的鎖，所以就順便紀錄、分享一下吧。

是說一切的起因都來自學長的一張 Gandi .tw 網域一年免費優惠序號。

事前準備

1. 建立 GitHub Pages
2. 購買網域 (這邊以 Gandi 為例)
3. 註冊 Cloudflare 帳號

建立 GitHub Page 並設定 Custom domain

簡單來說，首先你需要有一個任意名稱的 repo，或以 {{yourAccount}}.github.io 為名的 repo，然後進入 repo 頁面上方 Settings 並找到 GitHub Pages 區塊，在此可設定要將哪個 branch 設定為 GitHub Pages。

或者你可以直接在 repo 中加入 gp-pages branch，即會被預設為 GitHub Pages 的內容來源。

(詳細操作請參考: https://pages.github.com/)

設定好後便可以在原本的 GitHub Pages 區塊找到 Custom domain 欄位，並填入你所購買的網域，如下圖：

當你按下 Save 時，在你所選定的 branch 下會自動多出一個以你設定之域名為內容的 CNAME 檔案，好讓 GitHub 知道當你連上你的 GitHub Pages 時要導向哪裡。

採買

開始採購網域，然後就先放著。

註冊 Cloudflare

首先先有帳號，
然後找到 Add site 並填入你所購買之域名，

接著在過程中你會需要選擇方案，選免費的即可，
然後他會提供給你兩組 Cloudflare Nameservers，不小心錯過了沒關係，
可以從管理頁面上方 DNS > Cloudflare Nameservers 找回

再來你需要回到網域供應商將 nameservers 設定為 Cloudflare 所提供的兩組。

設定 Gandi nameservers

管理介面 > 域名 > {{你的域名}} > 名稱伺服器
填入 Cloudflare 提供之 nameservers，如下圖：

設定 Cloudflare DNS

接著回到 Cloudflare 管理介面 > DNS，
在這邊你會看到 Cloudflare 幫你抓來的域名供應商預設 DNS 設定，
首先先刪除 Type 為 A 的設定，
再加入 4 筆 Type 為 A、Name 為 @、IP 分別為 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153 的設定，如下圖：

然後就靜待 DNS 生效。

設定 Cloudflare SSL

進入 Cloudflare 管理介面上方 Crypto > SSL，
右邊下拉式選單選擇 Full。

接著就，等待，基本上算大功告成了。

參考資料

• https://help.github.com/articles/setting-up-an-apex-domain/
• https://blog.cloudflare.com/secure-and-fast-github-pages-with-cloudflare/
• https://blog.dmoon.tw/github-pages-custom-domain/index.html
• https://blog.chairco.me/posts/2017/06/Github.io Pages redirect to domain name and add HTTPS.html
• https://blog.yang-hong-xin.com/github-pages-custom-domain-on-https-use-cloudflare/

前言

GitHub 身爲全球最大男性交友平臺，你可能會在上面放許多大大小小專案讓其他人認識你，這些都是公開在整個網路上的，而有時候僱主並不希望程式碼公開，或是自己的一些邪惡計劃怕被查水錶，則可以將 Repository 設定爲 Private，不過這時候 GitHub 就要跟你收 $$ 了，如果你還是學生的話，別怕，快啓用 Student Developer Pack，無限個 Privete Repository 任你開。此外，也有許多合作廠商提供給學生免費的開發工具授權，通通透過 Student Developer Pack 一次搞定！ P.S. 個人私心喜歡 GitKraken 這個跨平臺的 Git GUI 工具。

開始申請囉

首先到 這邊 點擊 Get your pack，到填寫資料頁面

這邊請選擇你的學校信箱

不能是 @mail1.ncnu.edu.tw 這樣會核准失敗，如果沒有的話去新增一個吧～
沒意外的話，驗證信會被學校的 NOPAM 檔垃圾信軟體過濾掉，請到 這邊 登入去找找你遺失的信件
帳號爲 s學號，密碼則是你的密碼

搞定後 Student Developer Pack 頁面其他資料就照實填寫，plan 簡短填一下說想要試用看看 GiuHub 或是學習專案開發之類的都行，記得用英文寫。這邊給個英文校名方便你複製貼上 National Chi Nan University

大功告成

幾小時內你應該會收到信告知你有沒有通過審核，想當初我申請了四次後才知道是信箱問題一直無法通過 ORZ

現在，你可以盡情開 Private Repository 啦～ (￣▽￣)/‧☆"`'-.,_,.-'`"*-.,_☆

題外話，學生也可以去申請 JetBrains 公司的學生方案，如此 PhpStorm, PyCharm 等軟體也可以免費使用，我自己在 Mac 及 Ubuntu 上面都有裝，所以應該不限一臺機器而已。

在 KKStream 實習了半年左右（2017/07~2018/02），分享一下半年下來的心得及想法，回想當初真的是很意外的緣分。

這篇不會有太多的技術成分，主要是分享一下半年來學到的網頁自動化測試及心得，可能文章會有點長，我寫完自己也很感動⋯⋯

文章內使用 Ruby code 代表用 Ruby 寫的舊自動化測試系統， Webdriver.io 代表用webdriver.io 開發的新自動化測試系統。

實習過程記錄

簡而言之我在這半年的實習中做了兩件事情，一件是維護前一位實習生 Frank 寫的自動化測試（Ruby + Selenium），包含四種瀏覽器（Chrome、Firefox、Safari、IE）；第二件是建置新的自動化測試 （Webdriver.io），目前涵蓋到兩種瀏覽器（Chrome、Firefox），以下將分成 「維護 Ruby code 架構」 、 「建置 webdriver.io 架構」 這兩個部分來論述。

維護 Ruby code 架構

剛開始，先練習照著寫好的測試計畫書來做測試練習，主要測試的環境為 Web、Android、iOS 三大平台，但實際上我們的產品還有在 WebTV、Android TV、tvOS 等等平台運作。等到比較熟悉產品的內容及運作方式之後就開始接觸了神秘的自動化測試，這也是我第一次接觸到 Ruby 語言與 Selenium Grid 這個工具，還好 Ruby 跟 Python 撰寫起來很類似，不是太難上手，也因為不太有時間讓我慢慢去學 Ruby，所以學習的方式是看到程式碼有什麼不懂，就去網路上翻資料。

網頁架構：Page Object Pattern

網頁系統的架構，我們採用的設計方式是 Page Object Pattern。

Page Object Pattern:

Within your web app’s UI there are areas that your tests interact with. A Page Object simply models these as objects within the test code. This reduces the amount of duplicated code and means that if the UI changes, the fix need only be applied in one place.

採這個設計的好處，可以讓我們減少重複的程式碼及更好維護、簡潔。

以 Videopass 網站的這個頁面（ www.videopass.jp/unlimited ）為例：

我們將每頁可共用的區塊拆成各自獨立的元件，實作成 Ruby 的 module，如此就不用重複維護同樣的程式碼；至於 module 跟 class 的差異就請參考這篇。以下舉例使用 Page Object Pattern 時，可以共用的 module：

• header

• item_group

• bottom

這幾個部分在別的頁面也可以使用到，因此把他們抽出來實作，再來把每一頁的 Page Object 實作出來。

自動化測試：Selenium Grid

Selenium Grid 是一個 Hub-Node 的架構，我們對 Hub 下指令，Hub 會基於我們的指令對要求的 Node 進行測試，運用 Selenium Grid 可以讓我們對遠端 Browser 下指令執行、平行化測試、集中化管理、跨平台等優點。（這邊不多作介紹，預知更詳細可以到Selenium Grid wiki上查看）

之前的實習生 Frank 有建置一個 Selenium Grid 的測試環境（如下圖），假設要測的是 Firefox 瀏覽器，透過 Jenkins 去對 Hub（架在 iMac 上）下達執行測試的指令，Hub 會再對連接上的 Node2（Windowns 10）下 request，在 Node2 上啟動 Firefox 做測試，我們就可以看到 Firefox 自動開啟並執行測試。

Jenkins 上各種瀏覽器的自動測試 jobs 狀態：

但因為 iMac 上同時也有其他裝置（iPhone、iPad）的自動化測試在運行，為了減輕 iMac 上的壓力，我們便把 Jenkins、Hub 改接到另一台 Windowns 10 機器上面：

這一切看似很美好，但可能是對 Windows 信仰不足，遇到了編碼問題：

在網路上找了各式各樣的解法還是沒辦法解決，於是決定再次改版：

到這邊，我們整個網站自動化測試的系統可以穩定地運作，不會再有太多人使用而導致測試被干擾的狀況，也沒有編碼的問題。

建置 Webdriver.io 架構

在講我建置的 Webdriver.io 架構之前，先簡單介紹一下 Webdriver.io

它是一個 End to end 的Testing Framework，由Node.JS開發，而且是以同步的方式來去執行我們的測試程式，也支援了多樣的hooks來更方便地讓我們寫測試程式，可以用來跑手機、網站的測試，像我們這邊測網站的話，它會透過 Selenium 的 RESTful API 來做溝通。

特性

Extendable:
我們可以輕易的擴充指令，像是我們想要增加一個指令就能拿到 url 及 title，我們可以運用 browser.addCommand('getUrlAndTitle') 方法來去新增（參考 addCommand.js），下面使用 browser.getUrlAndTitle() 就能一次拿到 url 及 title（參考 example.js）。

Compatible:
整合了大部分的 TDD 及 BDD 測試框架，像是本篇我們用到的 cucumber 以及常見的 mocha、Jsamine。

Feature-Rich:

支援多種 Cloud Services：
（指的是可以不用自己購買硬體的設備，直接透過網路來操作運用雲端服務提供的測試設備）

支援多種 Reporters（不同的測試結果格式）：

測試請求的流程

這邊舉個流程的例子，假設我們要透過 webdriver.io 去開啟 http://example.org 這個網址，寫一段 code browser.url('http://example.org') 並執行，webdriver.io 會透過Selenium 的 RESTful API 發送請求， Selenium server 接到後會在對應的 node 開啟瀏覽器並連到 http://example.org 這個網址，接著再將結果回傳到 webdriver.io。

建置 webdriver.io + cucumber 架構

Webdriver.io 在這邊告一個段落，以下是我建置的 webdriver.io + cucumber 架構：

先看到 features 的這個資料夾， 裡面總共 13 個 features：

而 step-definitions 裡面有 4 個 steps

Feature Introduction

Every .feature file conventionally consists of a single feature. A line starting with the keyword Feature followed by free indented text starts a feature. A feature usually contains a list of scenarios. You can write whatever you want up until the first scenario, which starts with the word Scenario (or localized equivalent; Gherkin is localized for dozens of languages) on a new line. You can use tagging to group features and scenarios together independent of your file and directory structure.
Every scenario consists of a list of steps, which must start with one of the keywords Given, When, Then, But or And. Cucumber treats them all the same, but you shouldn’t. Here is an example:

Step definitions

For each step Cucumber will look for a matching step definition. Each step definition consists of a keyword, a string or regular expression, and a block.
This step definition uses a regular expression with one match group — (\d+). (It matches any sequence of digits). Therefore, it matches the first line of the scenario. The value of each matched group gets yielded to the block as a string. You must take care to have the same number of regular expression groups and block arguments. Since block arguments are always strings, you have to do any type conversions inside the block, or use Step Argument Transforms.
When Cucumber prints the results of the running features it will underline all step arguments so that it’s easier to see what part of a step was actually recognised as an argument. It will also print the path and line of the matching step definition. This makes it easy to go from a feature file to any step definition.

簡單來說，Feature 為模仿使用者操作的我們網站功能的流程，而 Steps 為描述一個步驟。

再來看到 pages 資料夾，裡面是我們 Page Object Pattern 與 module 的程式碼：

這邊用網站中的其中一頁來舉例：

對應的架構是：

對應的程式碼就是：

再來介紹最後一個比較重要的資料夾， lib/web_element_table ，裡面放著網頁上面 DOM 物件的 xpath，用來取得該 DOM 物件。

以上就是建置 webdriver.io 整體大架構的設計，忙了我一個多月 XD。

實際 run 一次測試：

最後來秀一下我建置的成果：

完成了 Chrome、Firefox 的自動測試 job：

讓測試執行的更穩定、更有效率：

最後的雷

再來的最後兩個月就是在穩定、維護舊跟新的這兩個系統，然而這幾個月下來也有採到一些雷，最後再做這一個分享：

瀏覽器 driver

每一家瀏覽器 driver 實作的操作不太一樣，基本上都會發摟 W3C Webdriver 所制定的標準走，但是這就造成有一些 webdriver.io 的 API 無法在特定的瀏覽器上運行，像是我們想要用滑鼠拖拉物件，使用 webdriverio 的 API： browser.dragAndDrop() 在 Chrome 上就可以順利拖拉，在 Firefox 、 Safari 上就會說 moveTo() 這個功能無法執行。為了要讓每一個瀏覽器都可以順利跑我們測試，沒有實作的功能我們只能用 browser.execute() 裡面塞入前端網頁可以跑的 JavaScript Code 去讓它執行。

認證

再來一個是我們測試的網站有使用 HTTP Authentication，但是在輸入帳號密碼這一步在 Safari 上無法透過 Selenium 去執行，所以 Safari 有好一段時間無法被測試⋯⋯最後的解法是跟 RD、PO 溝通，把 HTTP Authentication 拿掉，改成用 IP 白名單的方式，去測試我們的網站。

後記

如果想要這個實習機會的話可以看看 KKStream 的官網，或是 KKBOX 的 104 頁面，另外我也有分享一些面試心得在這裡。

最後我想要謝謝在這半年來照顧我 QA team 的大家，其中要特別感謝 Jersey、Louis、Paul 三位大大，沒有你們就不會有這半年來美好的回憶，謝謝！

前言

許多人再升級或是重灌 macOS 的時候，都會花費許多的時間等候從網路上邊下載 image 檔案，一邊安裝，而往往也因為學術網路關係而耽擱了許多時間。

本文將會介紹分享如何製作 macOS Live USB 及透過分享 image 檔案方式來進行安裝或更新系統。

下載作業系統

不論是製作 Live USB 或是分享 image 方式，第一件事都得先下載好作業系統（附圖部分是已經先下載好的），如果是在學術網路環境之下，建議使用 VPN 可省下不少下載時間。

找出該檔案位置

在 macOS 有一內建 Storage Management.app，透過應用程式（Applications）內找到，或使用 Spotlight 開啟。

左側欄中點選 Applications 後找到 Install macOS High Sierra.app 檔案，並點選放大鏡的圖示會自動幫你開啟該資料夾位置。

確認隨身碟位置

開啟終端機（terminal）輸入 diskutil list，此指令可以列出目前系統上所有掛載的硬碟清單。

本例子為 /dev/disk3，在 NAME 欄位中可以找到這支隨身碟名字為 NO NAME。

製作 Live USB

終端機輸入以下指令，請記得更換 USB 位置：
sudo /Applications/Install\ macOS\ High\ Sierra.app/Contents/Resources/createinstallmedia --volume /Volumes/[YOUR_DISK_NAME] --applicationpath /Applications/Install\ macOS\ High\ Sierra.app

本範例為：sudo /Applications/Install\ macOS\ High\ Sierra.app/Contents/Resources/createinstallmedia --volume /Volumes/NO\ NAME --applicationpath /Applications/Install\ macOS\ High\ Sierra.app

按下 Y 確認後，會開始製作 Live USB～

等候約 5～10 分鐘後，製作完畢！

另一方法，複製檔案

可以回到找出該檔案位置步驟，可將 Install macOS High Sierra.app 透過 AirDrop 或丟到 NAS 等分享方式。將該檔案複製到該對應路徑，也可以點開後安裝喔～

記得在本機更新前複製檔案，倘若是直接點選安裝，安裝後程式會自動刪除喔

更新 iOS 也行

首先分享者必須透過 iTunes 下載 iPhone 更新檔。一樣回到找出該檔案位置步驟，左側欄點擊 iOS Files，剩下就是複製對應路徑和透過 iTunes 安裝的動作了。

舉個例子：/Users/focaaby/Library/iTunes/iPhone\ Software\ Updates/iPhone_4.0_64bit_11.0_15A372_Restore.ipsw

參考來源

1. 官網：為 macOS 製作可開機安裝程式
   

前言

這篇文章是紀錄我第一個爬蟲任務的 writeup。在之前我只能說自己對爬蟲有點概念，但開始做這個比較 general crawling 的任務之後，對於學習爬蟲的過程有了一點脈絡。這次被要求的爬蟲內容為取得上千個網站中的所有圖片、影片與文件，但為了減少我們儲存資料的容量，我們設計成圖片與影片只抓取其來源，而文件因功能需求抓取完整檔案。

從網頁到網站

Python 新手剛學習爬蟲時，網路上一堆教學都會教你如何透過最基本的 requests 與 BeautifulSoup4 爬取網頁。基本的流程是透過 requests 送 HTTP 請求到目標網站主機，取得頁面的 HTML 檔案後再透過 BeautifulSoup4 分析之，經由這兩個簡單步驟，我們基本上可以拿到我們想要的資料。

從單一網頁爬蟲到網站爬蟲，通常只是簡單的判斷 following link，也就是透過 BeautifulSoup4 分析出 <a href="..."> 之後再重新對 href 中的新 URL 送 HTTP 請求，看起來很簡單，但卻有幾個問題必須特別注意，以下說明之。

Domain 的判斷

通常在對 href 屬性的值送請求之前，我們都會透過 urllib.parse.urljoin 等方式將相對路徑轉成絕對路徑，接著再對絕對路徑送出請求。但在送出之前，如果沒有考慮到 domain 問題，很有可能會把大半個網路的內容全部都抓回來，尤其像這種爬多個網站的任務，其沒有非常明確的爬蟲目標，如果某個網站在你沒有注意到的地方把一些大型網站的網址附上，如 google.com、facebook.com、youtube.com⋯⋯等。

要判斷這種完全不同的網域，我們可以簡單的透過 urllib.parse.urlparse 將 URL 的格式 parse 出來，透過 source code 你可以觀察到他解析出來的格式是 <scheme>://<netloc>/<path>;<params>?<query>#<fragment>，透過其中的 netloc 就可以知道是否為相同的網域。

但是上面這種判斷方式會將子網域的網站排除在外，舉例來說，學校的網站與各系所的網站（如：台大首頁的網址是 www.ntu.edu.tw，台大中文系的網址是 www.cl.ntu.edu.tw）透過 urlparse.parse.urlparse 的 netloc 你會判斷 "www.ntu.ed.tw" != "www.cl.ntd.edu.tw"。

如果子網域的網站也在你的爬蟲目標內，我們可以透過另外一個 tldextract 來當 urlparser。tldextract 會維護一份頂級域名的字典，所以可以透過 tldextract.extract 將 URL 拆解並回傳 ExtractResult 物件（source code），可以透過存取 ExtractResult 物件取得拆解後的 URL 片段，包含 subdomain、domain 與 suffix，基本上可以視為 neloc = subdomain.domain.suffix。

HTML5 structure v.s. non-HTML5 structure

原本以為圖片只要分析 <img> 元素，影片只要分析 <video> 元素，文件只要分析 <object> 元素，但是後來才發現這一切都太異想天開，網路中還是有大部分的網站，使用的是以前 IE 時代的寫法，所以要判斷的元素變得非常的多。

對此，我們決定採用正向原則，也就是我們有定義的元素才爬，下面列出我後來實際上有爬的：

• <img src="...">
• <video src="...">
• <object data="...">
• <picture srcset="...">
• <source src="...">
• <source src="...">

然後有判斷 following link 的元素為：

• <embed src="...">
• <iframe src="...">
• <frame src="...">
• <a htef="...">

過濾 href

透過分析元素取得的資料來源，有可能是 internal file，也有可能是 external file。影音如果是 YouTube 之類的影音串流平台，雖然 domain 不同，但其實也只需要獲取資料來源就好；至於 internal file，其路徑有可能是相對路徑或是絕對路徑，建議透過 urllib.parse.urljoin 統一轉成 URL 再做處理。

另外，處理 <a href="..."> 時，資料來源有可能會包含錨點 # 或是 JavaScript code，要記得排除這些 pattern。

動態網頁

動態網頁，換句話說，就是經過程式碼改變網頁內容的網頁，但是透過 requests 送出請求所拿回來的 HTML 會是靜態網頁，也就是打開瀏覽器透過 「檢視網頁原始碼」 看到的內容，但我們通常希望 「What the user sees, what the crawler sees.」，也就是希望爬蟲拿到的內容是透過瀏覽器的 「開發者工具」 看到的內容，為了這個目的，目前被廣為使用的工具是 Selenium。

Selenium 其實是用來做網頁自動化測試的工具，可以模擬使用者操作瀏覽器的行為；額外安裝 driver 就可以操作我們一般在使用的瀏覽器，可以透過程式操作 Chrome 或是 Firefox 等瀏覽器檢視網頁操作是否正確。也因為它可以模擬瀏覽器行為，所以他也就有能力拿到 JavaScript render 之後的 HTML（通常稱之為 HTML Snapshot）。

因為 Selenium 是透過程式操作瀏覽器行為，所以比起靜態爬蟲速度會比較慢. 雖然有另外一個 driver PhantomJS 是沒有圖形化介面的，速度上來說會比 Chrome、Firefox 等 driver 還要快，但這邊可以的話，還是先嘗試攔截 AJAX 直接爬蟲會更快。

加速爬蟲

回頭檢視爬蟲需求，我們的目標是上千個網站，一個一個慢慢爬的時間成本太高，且往後如果要做定期更新的話，根本不是一個實際可用的程式，以下會從各個層面來討論爬蟲效率。

HTML parser

BeautifulSoup 以前也是因為速度太慢所以被捨棄，目前速度最快的 HTML parser 是 lxml，而 BeautifulSoup4 出來之後可以選擇背後實作的 parser，這邊建議選擇 lxml。

requests timeout

雖然說減少 request timeout 的時間長度也可以變相加速，但個人不太建議這麼做，單純縮短timeout 的時間，也就代表你送請求的頻率變高，如此目標網站的 loading 會上升，一來有可能癱瘓對方，二來有可能一下子就被認為是 crawler 然後被 ban。

async or multithreading

雖然 Python 因為 GIL 的關係所以 multithreading 的實作效果不怎麼好，但還是比不做更好。但因為送請求這種任務，大多時候是在網路等待中空轉，所以比起 multithreading 其實使用 async 更好。

更新流程

考慮到往後，我們希望手上的資料盡可能的是最新資料，所以程式會放入 crontab 中做定期爬蟲的排程，這個時候針對下載檔案這件事情，我們應該先判斷該文件是否有更新。

參考 Google Web Developer 文章，比起考慮 response header 中的 Last-modified，不如考慮 ETag 更適合，又因為我們在下載之前需要的，僅僅只是檢查文件是否有更改，所以比起送 HTTP GET/POST，送 HEAD 其實就夠了，相較之下可以減少更多頻寬。

p.s. 這邊其實我覺得這種作法並不是很好，如果有大大覺得有更好的作法，再麻煩聯絡我，像是再這種任務底下實作 notify 架構。

toolkit v.s. project

如果只是一次性的爬蟲，上面那些考慮完基本上就差不多了，但是討論到更新流程時，這是一個要持續使用的程式，workflow 必須定義的更明確，而且還有一個沒被討論到的問題：「要透過甚麼方式防止 IP 被網站 banned？」

IP 被 banned 這件事情其實有很多種處理方法：

• 動態改變 User-Agents
• 不要使用 cookies
• download delay
• Google cache
• VPN、Proxy、tor
• 分散式爬蟲

不過，我後來把上面那些東西全部放棄，然後引入 Scrapy。

Scrapy 是一個爬蟲框架，workflow 也非常完善，送 request 跟 download 的部份以 Async 實作，因此爬蟲流程的速度還可以再稍微加快一點，只是我們剛剛上面提的東西可能都要換另外一種實作方式。

我們導入框架之後主要的任務是寫一個 spider，他的工作內容就是爬蟲，基本上只要把送 request 跟 parse HTML 的邏輯搬過來以 class 的方式實作就可以，而我們原本要紀錄與下載檔案的部份，則是到 item pipeline 處理，其他功能的替換如下：

• 動態渲染網頁：Selenium → scrapy-splash
• HTTP cache & Etag validation：設定 downloader 採用 RFC2626 policy

除此之外，downloader 這邊我們可以根據需求再增加其他 middleware，像是上面提到的更改 user agent、建立 IP pool 來防止 IP 被 banned，還有檢查同樣的 URL 是否已經送過 request。

不過 multiprocessing 的解法呢？

StackOverflow 上面有人解釋，Scrapy 本身是建立在 Twisted 這個 Event-driven networking engine 的基礎之上，他本身就有處理 Async 的方式，如果在 Scrapy 中使用 multiprocessing 可能會有無法預知的錯誤，比較好的作法是參考 Run Scrapy with Scrapy 的方式額外寫一支 script，把剛剛寫的 Scrapy spider 引入再實作。

雖然可以透過撰寫 Twisted 使用 spawnprocess 達到 multiprocessing 的功用，不過若是專案中沒有需要處理 spider 以外的操作，scrapy 也提供了 scrapy.crawler.CrawlerProcess 這個 API 讓開發者可以更方便使用。

後記

這其實是我第一次接觸的爬蟲專案，也算是因此一次性的接觸了很多工具，上面這些也只是討論一些很基本擋 bot 的方法，而且後面紀錄 record 之後我也沒有紀錄直接存入資料庫的方式。

但也算是對於整個瀏覽器的操作跟網路送 request 的流程有更進一步的認識，整個從頭到尾大概花了我一個月 pick up + implementation，但是是很有趣而且門檻不會太高的一次實作。

• 然後這邊有後來開課的投影片與 slideshare，可能會不定期更新，歡迎各位大大指教。

Cover photo by David Marcu / Unsplash

台/政/交/成/山 資管所．資結組考試心得

這篇來分享我考資管研究所的心路歷程，你將會看到我的個人背景、心路歷程、唸書規劃、各科準備方式、心得⋯⋯等。

背景介紹

國立暨南國際大學資管系，大學四年平均系排名 11/54，大一、大二成績很爛大約都在二十幾名，大三開始知道自己要的是什麼，於是努力充實自己和成績。自己對於 MIS 沒什麼興趣但也不排斥，喜歡 coding 多一點，自己也會做一些小程式方便我的生活，平常都有在關注資訊的新科技，不管是技術面還是管理面的。

大學實期有過實習的經驗、考過多益 770、參與過滿多資訊活動、有接過實驗室研究計畫但後來太忙主動放棄。

目標

原本的目標是能夠中山或是中央資管我就滿足了，因為我當初準備的很混，太多事情要忙，後來越準備越覺得政大不是夢 XD（我的第一志願）

報考結果

• 台大資管 一階段錄取 二階面試沒上
• 政大資管 計概：39 資結：65 英文：75 資料審查：85.2 口試 84.8 總分 68.48 正四
• 政大數位 計概：98 資結：70 資料審查：82.8 口試：91.2 正一
• 交大資管 計概：47 資結：42 英文：56 書審成績：84.4 正取
• 成大會資 計概：90 資結：74 英文：47 正取二
• 中山資管 正取
• 中正資管 備取一（考這間我完全沒心情寫，因為中山放榜了）
• 北大資管 備取四（理由同上）

各科準備方式

計概

正課：劉逸的面授班，老師講的東西都很基礎，會讓你很好懂，但缺點就是步調有點慢，建議可以額外再多看點計概更深入的內容，也要隨時注意新的科技新聞，都有可能會考在計概中。

題庫班：劉逸的面授班，基本上下面提到的科目都會上到（網路、資料庫、程式語言、作業系統），但是不要期望你在題庫班能夠上到像正課一樣豐富的東西，因為是「題庫班」顧名思義老師會著重在重要題目的講解，所以題庫班之前建議先把該科複習完成，再來上題庫班會更有感覺。

網路

網路這科基本的 TCP/IP、OSI 模型要很熟，每層至少要記兩個以上的 protocol，基本的 port 也須要記起來，再來是資安也是很熱門的重點（中央、政大資管組都愛考）必須要會。再來網路很多很深的東西，建議看學校準備（中央、交大）。

資料庫

資料庫正規化、ERD、交易控制這三大重點必須要會，再來可以看一下 SQL、NoSQL 的差異，而要考交大的有一些 SQL 題較難也建議至少都能夠有寫過甚至實際打 SQL 指令 run 看看，有很多線上可以跑 SQL 的網址，我是用 SQL fiddle，不過用起來跑有點久就是了。

程式語言

這科應該算是我最有把握的科目，把物件導向四大特性（抽象、封裝、繼承、多型）要熟記，建議就是平常多寫程式能夠訓練自己的邏輯能力，有一些有考過的程式我有把它放在我的 GitHub repo ( https://github.com/YYSU/Ds-algo ）建議大家先自己打過一遍再看看我的寫法（不見得是最好的，但可以參考看看，只是現在目錄還有點亂，我有持續再整理XD），強烈建議要考政大科技組的同學今年可以看看 Python 這個程式語言哈哈哈。

作業系統

這科近幾年的趨勢好像都是考選擇題居多，還是能熟記就熟記吧。

資結

正課：TKB的洪逸，這科我也不用多說了，網路上夠多心得狂推洪逸，記得一定要帶夠多的紙去上課，上完課記得複習，照著老師的進度走能夠很有效地讀完資結。建議資結組準備的資結只要是洪逸老師上課有教的都要會，畢竟資結這科大家差異不大，而且不要覺得冷門不會考，像今年政大資結就出了個30分 Splay tree，考場上看到嚇都嚇死了，還好還有點印象，ＭＩＳ組的我就不太清楚了，可能要看看別人的心得分享。

題庫班：TKB 的洪逸，一樣跟著老師的進度走，能做多少本就做多少本吧（總共7本題庫），做完你會很有成就感。

英文

英文我是買別的補習班（高Ｘ）出的歷年研所試題來寫，不過我沒寫多少就要考試了，建議要養成閱讀英文的習慣，平時可多看看英文雜誌、每天背幾個單字，畢竟英文不是短時間能衝起來的。

讀書規劃

我們班有同學在大二下接近暑假時，就開始補習了。我在大三上才去報名補習班。因為知道自己未來有需要繼續就讀研究所，去補習班上課都很認真。可是回家我還有接一些 case 要忙，所以那段期間我都沒再複習（強烈建議一定要複習，至少上完課兩天內），然後永遠不要嫌自己太晚開始準備啊！只要有照著自己的規劃走永遠不嫌晚。

7～8 月暑假

我自己沒有好好把握這段時間，因為我的事情太多，也有在幫老師做研究計劃忙不過來（後來有跟老師說先暫停，不然我要讀書要補習要專題太崩潰了），也不建議這時候去實習或是上班，因為你要能夠把目標想好，到底這時候實習重要還是能考上研究所重要，在這邊要先感謝 ken90242 這位 ptt 的版友，那時候我也有同樣的困擾，套一句他回覆我的話「你現在每增加一個變數，就是在增加你投資的失敗率」，不過要是你時間規劃安排的妥當我也不反對。

強烈建議
這段時間很重要，也是你唸書要把握的時間，因為這時候比較有時間能夠完整的念，而且補習班主要的正課都集中這時候開始，建議這段期間能夠把講義唸過兩遍以上。

11 月中旬前

這時候正課都應該結束、題庫班開始了，專題這時候應該也告一個段落了。這時候就是不停的複習正課教的，題庫班要注意跟上進度做完題目，考古題這時後可以開始寫了，建議從久遠的題目寫到新的題目，這樣你能夠比較了解整體出題的趨勢及方向。這段期間開始我早上 10 點到圖書館至少讀到晚上 9 點。最重要的不是時間久，而是你有沒有專心念到東西。

2 月考試前

要考的學校一定要至少做完 5 年的考古題，你會比較清楚每間學校偏愛哪些題目。在這次的準備中，政大科技組前兩年都有考到程式，但是今年完全換了一個方向；交大資管我有準備新的金融趨勢名詞解釋（fintech, block chain...）與機器學習相關的題目，但是也完全沒考（乙組好像有考到 block chain)。

心得

首先先謝謝幫助過我的 ptt 版友們 bluewindscott、booray，提供給我面試的建議，也讓我能在這邊分享下去。還有一起考資管所的戰友，很累也很充實，考前也到處奔波。再來謝謝我的家人，讓我考研所無後顧之憂，最後謝謝考前跟我加油的朋友們。

給學弟妹一些報考上的建議，就是不要報太多間學校。我報了 7 間 8 個科系，考到後來超級疲憊，而且有些學校上了也不會去讀，不知道自己那時候在衝動什麼，建議報幾間你想讀的 +1～2 間備胎即可。

啊啊啊啊我這篇心得文打得很亂想到什麼就寫什麼，有任何問題想問的，歡迎在下面留言問我，請注意禮貌，如果有任何可以幫到你的地方，我都會儘量回答。

口試分享

台大口試

有四關

1. 生涯關
   一分鐘自我介紹、問以後要做什麼研究、從研究計畫問問題。

2. 技術關 系主任
   如何找 inorder successor（台大今年計概題目），又額外問了台大資管跟暨南資管課程有什麼不一樣。

3. 不知道屬於何者關
   五張紙任意抽一張，我是抽到 What is database schema? What does it use for?
   然後回答之後，教授還會繼續問你為什麼？再回答再問為什麼⋯⋯無限迴圈。
   最後問到你不知道為什麼就時間到了。

4. 統計關
   這關我是被問 z-value 相關的，但我不會，有待其他高手補充。

政大資管口試

先由教授指定每個人唸一段英文句子，做翻譯，會問你其中一個單字是什麼意思。再來兩個教授會針對研究計畫問問題，我是想做理財機器人相關平台建置，被問到資產配置及投資組合有什麼不一樣，有一位教授問到如何做到精準。再來一位教授是問程式題，是用 Scala 撰寫，不過教授有先講解，問你程式意義，以搶答方式進行。最後一位教授是問 MIS，是問跨界結合對於臺灣中小企業有什麼挑戰。

政大數位

先作 5 分鐘的 Slide 報告，包含自我介紹、作品、研究計畫。接著有 10 分鐘的提問，會針對你簡報的內容來做提問，像我研究計畫想做 AR 相關的行動裝置程式，就被問到什麼類型、有什麼商業價值。再來有老師會查你的榜單，你要想好你的報考動機是什麼，為什麼來念等等。

補充

Ｑ：有人問我為什麼不考資工所？
Ａ：因為資工要多考現代或離散、計算機組織，我不想增加我唸書的負擔，所以選擇我熟悉的資管所考，畢竟我對 MIS 也不排斥。

Ｑ：最後你去了哪一間？
Ａ：我去了政大。

Ｑ：怎麼選研究所?
Ａ：這個問題也困擾了我許久，個人建議還：先想想自己讀研究所的動機是什麼？是真的想要再多學點東西，還是想要增加自己得到面試的機會，亦或是盲目地跟隨別人讀研究所？確認好自己想要的是什麼，你才有動力去拚、去讀。可以先從有興趣的研究領域來去找學校或老師，例如交大資訊很強，就可以去旁聽資工系的課，若剛好想要加強寫程式的能力，那麼交大就很適合你；或是像中山資管的電子商務很厲害，而這又是你的有興趣，那就適合；或是你知道某大學某某老師是一個研究領域的佼佼者，那也可以考慮進入該大學，找某某老師擔任指導教授。總而言之，知道自己想要的是什麼，最重要。

Ｑ：要不要讀研究所？
Ａ：這個問題你問我，我回答什麼都不對，只好分析有念研究所跟沒唸研究所的優劣給你。以下是本人的觀點僅供參考：首先有念研究所，在履歷上是一定有加分的，得到面試的機會也相對的比學士的機會多，起薪也會有差別（根據職業類別不同而有差異）。試想一般公司企業在求職潮時，收到一堆履歷之後要怎麼做篩選？學歷較高的先篩出來，再來頂大的學校再塞一些出來，再來非頂大的學校⋯⋯以此類推，講到這邊，應該也知道碩士學歷在職場上的優勢了。當然念研究所也不是件輕鬆的事情，除了需要閱讀 paper、接實驗室的研究、協助教授處理雜務，還不能放棄研究所的課程。研究所需要修滿一定的學分、寫出論文才能畢業，在這兩年的期間，大學畢業的同學可能已經升到一定的職位，你也落後了別人兩年的工作經驗。所以我說回答什麼都不對，重點真的是你想要什麼。

前言

聽說 Ghost 已經 1.2 了，預設主題 Casper 就滿厲害的了，不僅有 RWD 還有進度條顯示閱讀進度，當初還想自己寫一個主題呢。

不過依照過往經驗，原預設主題沒有 code syntax highlight，就得自己手動加入了～
在本文章採用 Prism.js（by Lea Verou）的 library 引入使用。

Prism.js

由 CSS 女神 Lea Verou 製作的 highlighting library，可以自由客製化選擇主題以及常使用的程式語言 syntax。

首頁

首頁右邊有 Default, Dark, Funky, Okaida, Twilight, Coy, Solarized light 等常見的八種主題選擇。

點擊後則可以在下方範例即時預覽

客製化

選擇剛剛於首頁測試的主題

在這邊句選自己較常使用的語言，最近叫非常火紅的 Dockerfile, React JSX , Typescript 等語法也都有支援。

附屬外掛，例如：否顯示 line number、line highlight 功能，根據你的需求選擇加入即可

加入 Ghost

1. 下載 prism.css 及 prism.js
2. 分別放入個別目錄 assets/css/ 及 assets/js
3. 修改 defult.hbs，加入 stylesheet link

{{!-- Styles'n'Scripts --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

4. 在同一個檔案下方，加入

   {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
    {{{block "scripts"}}}
    <script src="{{asset "js/prism.js"}}"></script>

5. 在將修改好的 theme 壓縮成 zip 並上傳至 Ghost 即可。

就可以在 Ghost 使用 code syntax highlight 拉～～

在暨南大學只要是教職員生，都會有一個 CCServer 帳號，若你的系統不是 Windows，或常常需要在校外環境存取 CCServer 的東西，這篇文章可以參考看看有沒有幫助。

參考資料：FTP 存取 CCServer 網路資料夾之相關使用說明

1. 安裝 FTP client

首先叫你的軟體中心出來（圖中右邊的圖案）

在軟體中心的搜尋列（下圖上方）搜尋 FileZilla

然後按下右邊的 install

在 Ubuntu 只要是安裝或移除程式通常都需要輸入密碼哦。

輸入密碼之後就會開始安裝，
這邊就稍微等它一下。
裝好之後應該在左邊選單會出現最下方紅底白字 FZ 的按鈕。

2. 設定站台

首先開啟你的 FZ，
找到左上角那個看起來像是伺服器的按鈕。

點下去之後會跳出站台管理員的視窗，
選擇左下方的新增站台，
新增站台時需要填入站台名稱，
名稱不影響任何作業，
不過還是取個讓自己不會混淆的名稱較好。

接著在 Host 貼上 ws1.ccserver.ncnu.edu.tw，
Protocol 選擇圖中的 FTP - File Transfer Protocol，
Encryption 選擇圖中的 Require explicit FTP over TLS，
Logon Type 選擇 Normal^[1]
User 填入 ccserver\yourUserName
Password 輸入你的密碼。
然後就完成了。

在進階設定的地方也可以改一下預設連線的遠端資料夾為何，
如上圖 Default remote diretory 的地方，
這樣才不用每次都從茫茫大海裡面找到你的群組資料夾 Orz。

前言

最近在公共電視播出的通靈少女非常的紅，雖然學校宿舍仍有電視但對於菸酒生來說還是非常不方便的，多半選擇網路來源來進行觀賞。

但是！！ 竟然有賞味期限為 4/9，只好來解析一下是否在過期之後繼續觀賞影片的方式。

分析一下

身為一個網頁開發者，不免俗得還是要打開開發者工具來瞧瞧

由於它的連結中已經有做過一些處理，並無法直接打開連結網頁，只好選擇登入了公視 +7 了。

在登入之後，點擊影片的 icon 之後便會跳出一播放器來進行播放，就可以很開心的用 Console 來 document.getElementsByTagName('video') 取得 video 的來源。

這邊要比較注意的是，它彈出來的畫面是插入一個 HTML5 Frame，我們必須選擇 videojs5.htm 頁面來取得資料，如下圖。

打開該純播放器網址後，會發現到這個連結是不需要登入即可觀賞。在網頁播放器的部份，選擇了開源的 video.js 並使用 plugin
videojs5-hlsjs-source-handler。

HTTP Live Streaming（HLS），是因應現在多元化的使用裝置解析度，透過碎片化檔案，讓使用者區讀取到哪一片段在進行下載檔案，而言伸出來的一種協定。

再次開啟開發者工具，Network 頁面，可以查看到 playlist.m3u8 的清單

M3U 是一種播放多媒體列表的檔案格式，它的設計初衷是為了播放音訊檔案，比如 MP3，但是越來越多的軟體現在用來播放影片檔列表，M3U 也可以指定線上串流媒體音訊源。很多播放器和軟體都支援 M3U 檔案格式。--From Wiki

簡單來說，playlist.m3u 定義了

• 解析度：1920x1080、1280x720、854x480
• token
• expires

當解析度為 1920x1080 就會取得 chunklist_b4000000.m3u8 的播放清單，在 chunklist 裡面清楚定義有多少檔案及每個檔案播放長度。

換言之，我們已經知道共有 227 個檔案，而且檔名皆為 media_b4000000_[xx].ts
所以就能撰寫一個小 shell script 來幫我們備份影片了（？

#! /bin/bash

for i in {0..237}
do
   wget "http://plus7hd-pts.cdn.hinet.net/pts-plus7hd/_definst_/smil:mbroutput/169/7_SUN/0402-1_LOGO/0402-1_LOGO.smil/media_b4000000_$i.ts"
done

最後，你只需要一個播放器可以播放 .ts 的影片格式，及我們剛剛的 chunklist.m3u8 的檔案，便可以觀賞影片了。

或是可以透過 ffmpeg -i chunklist_b4000000.m3u -c copy -bsf:a aac_adtstoasc output.mp4 來轉出成 MP4 檔案來觀賞

附註

若要用此方法請注意版權問題記得要刪掉，大家支持正版喔～

然後，通靈少女是一部值得推薦的戲劇，還有瑤瑤好正 XDDDDDDDD

攤位

今年的 SITCON 我反而沒有花那麼多時間去聽演講, 因為 NCNU X MOLi X OSSPlanet 今年變成贊助商攤販了！ 身為潛水成員, 平常都只在 Telegram 出現, 這種時候總該要出來露個臉

NCNU X MOLi X OSS Planet 攤位照

MOLi (Maker's Open Lab for Innovation) 創新自造者開放實驗室 (詳細介紹請點此進入)

老屁股們好久不見, 有人從前端跨資安跟 Blockchain, 有人專案還沒討論就可以自己把網站做完, 有人準備要投論文結果是我們實驗室協辦的 conference, 有人是持續跳坑, 每次聊天除了屁話其實都還是有種我在跟大大們對話的感覺

OSS Planet (詳細介紹請點此進入)

順便在這邊幫忙推廣一下, 這是一個可以幫 Open Source 做 Free hosting 的一個服務, 目前已經有蠻多比較大的服務在上面做 hosting 或是 mirror

OSS Planet sticker #JustGoOpen

Ethereum Taipei meetup

這是今年有特別注意到的攤位, 因為區塊練跟虛擬貨幣的東西我一直沒有甚麼接觸, 僅僅知道這個東西的存在以及一堆人在玩　Bitcoin 跟挖礦而已, 這方面的 pickup 應該是今天我收穫最多的東西, 詳細的內容應該會再後面演講的部份一並提到

順便紀錄一下 @focaaby 大大給我的文章, 用白話文解釋區塊鍊並提及一些區塊練的問題, 我以一個完全沒接觸過區塊鍊資訊的人看完文章, 覺得蠻平易近人而且簡潔扼要, 希望給一些想要了解的人參考看看

reference:
https://www.facebook.com/notes/shi-cho-cha/每日閱讀心得-20170317/10155112963374483/

演講

剛剛上面也有提到, 今年沒有參加太多場演講, 也不打算講太多演講的技術細節

十分鐘認識 MMR (PineApple Kao)

MMR (Montgomery Modular Reduction),　主要是用來解決大數在做 mod (也就是算除法的餘數) 造成的龐大運算資源問題, 透過一些數學證明, 省略除法步驟達到 mod 的目的

可能大家一樣都有意會到這是實際上非常需要注意的問題, 首先不可能讀一個很大的數字再來做運算, 大部分的人都是做 mod 讓數字變小, 然後再對這個數字做運算, 之後再重複這個過程, 因此實際上耗費的運算資源是相對龐大的, 但至少讓大數運算變成一個可以實作的解法之一

數學細節這邊暫且不提, 但是我覺得內容以十分中的時間來說是相對有邏輯並且實際, 唯一可惜的就是 R1 當時人數多到有點誇張

所以我說那個 ML 入門其實真的沒想像中那麼難 (Terry Cheong)

可能因為自己有稍微接觸 Machine Learning 的東西, 這場演講反而是抱持著不知道十分鐘可以說些甚麼的心態去的

雖然有稍微介紹到何謂 Machine Learning, 但是我覺得解釋起來好像還是不夠清楚, 到目前為止我覺得直接參考 Tom M.Mitchell 的比較適合

A computer program is said to learn from experience E with respect to some class of tasks T and performance measure P if its performance at tasks in T, as measured by P, improves with experience E
from wikipedia

然後講者說明了 Machine Learning 的過程, 以及一些常見的演算法

• decision tree
• random forest
• gradient descent

最後講解實作技術使用的是 scikit-learn, 概略描述建 model 的過程, 只是這邊發現講者頭影片上用的 gradient descent 是 stochastic gradient descient 但是卻沒有解釋這是甚麼東西, 果然以十分鐘的長度連 stochastic / batch / mini-batch 的概念都沒辦法完整描述完畢

紀錄一下講者補充的好玩套件: r2d3, 這是一個 R package, 主要是做視覺化的套件

感想就是果然十分鐘講這麼大的主題還是太短

和我簽訂契約成為區塊鍊魔法少女吧 (飛魚)

...先不要討論魔法少女跟庫洛魔法使大家有沒有聽過, 這場演講是我整天聽下來最好的演講, 從投影片到演講方式到內容深度完全適合當概論

這場主要是在說 Ethereum 跟智慧合約的部份, 前面稍微比較了 Bitcoin 跟 Ethereum 的差別, Ethereum 感覺更容易用現在人類的交易模式解釋, 透過挖礦或是購買得到足夠的手續費 (Gas), 然後才可以透過區域鍊做交易的動作, 透過這個機制的實作來限制交易量, 也才因此讓 Ethereum 再實作上可以使用迴圈, 所以如果你有足夠多的手續費...

如果你有很多錢, 這世界就會為你而轉動 飛魚

在上面 @focaaby 大大分享給我的文章裏面也有提到, 區塊鍊基本上就是透過讓大多數人認可達到信賴的技術, 這邊在定義何謂「大多數」的認可時候, 我覺得也是一個蠻有趣的思考面

另外說到區塊練上的資料是無法被更改的時候, 講者提到的小插曲也蠻讓我印象深刻的

2/14 情人節當天有挖礦工司提供一個服務, 讓情人可以把我愛你的字句存入區塊鍊中, 因為區塊鍊的資料是無法被更改的, 所以就算以後你不愛她了, 也無法改變你曾經愛過他的事實飛魚

我真的滿喜歡這種有趣的小八卦

開發學校雲端服務的奇技淫巧 (馬聖豪)

又是一個因為學校網站相關服務太難用, 所以乾脆自幹一個的作品, 感覺在各大校園都會有這個問題, 從首頁設計到選課系統, 總是會有些服務沒辦法滿足學生

雖然演講題目是雲端服務, 但其實就是說明一個第三方服務的架構跟流程設計, 學生提供帳密給該服務, 該服務再把這些個人資料送 requests 到學校主機取得學生的資料, 然後用更好看的 UI 跟 UX 設計呈現給學生使用

剛好最近做了一個爬蟲專案 (這個有機會再寫成文章), 所以讀了一些瀏覽器如何跟網站做互動的資料, 這場演講我才聽的懂, 內容包含動態網頁分析, header 內容, 常見的擋 bot 作法, 只是我到現在還在想破解 CAPTCHA 的方式除了講者的方法, 感覺簡單的英文或數字 CAPTCHA, 建個簡單的圖像辨識 + Machine Learning Model 似乎更好一些？只是不知道會不會有點殺雞用牛刀的感覺

這場演講比較適合有實作過一些東西的人參加, 內容都有說到痛點

Lightning talk

每次 conference 的 lightninh talk 真的都蠻精彩的, 這次的亮點之一就是最近再網路上瘋狂轉載的文章「台大資工短時間上榜心得」神人本人親自現身, 4~5 天準備台大資工考試, 然後正取一這件事情本身本來就是很狂的事情了, 看到本人演講更有種他真的是奇葩的感覺

另外, 我其實一直都很喜歡像是 PCC 或是 Denny 那種統計總結今年年會的一些數據, 當然還有那種 UCCU 的演講方式

總結

這次跟以往相比我花了比較多時間跟人討論, 感覺這樣 pickup 的東西更多, 然後 BlockChain 果然還是我今天最有感的領域

議程我比較偏好長度 40 分鐘以上的內容, 十分鐘比較像是 Lighting talk 的演講方式, 但講者常常會一直想要補充更多東西導致東西講不完

然後聽到 SITCON X HK 的心得感想覺得有點可惜, 也開始好奇香港那邊的資訊圈發展情況是如何？

最後感謝 SITCON 小編讓我轉載 Cover

這次的分享主要是針對入門的文本分析步驟，雖然沒有太多技術細節，但至少可以讓沒有接觸過這一塊的人了解可能的作法與需要的工具

資料分析可以簡單的分為三大步驟：

• 收集資料
• 過濾資料
• 顯示資料

收集資料

爬蟲（Crawling）是一種收集資料的手段，針對網站可以分析 html 架構之後再透過相關 http client 的 library 撰寫程式取得資料，像是 python 的 requests 與 BeautifulSoup 的搭配使用

另外如果該網站或是該服務有提供 API，那我們只要透過 API 做 request 就可以拿到整理好的資料（通常格式都會是 csv，xml，json 其中一種）

過濾資料

拿完資料之後，不論是結構式資料或是非結構式資料，原始資料內都會有許多不會影響到你的決策但卻會干擾分析的資料，我們稱之為噪音（noise）

一開始很難得知哪些資料是噪音，因此必須透過一些指標來整理並判斷過濾資料，而這些步驟會不斷重複，直到你覺得資料已經出現趨勢時就可以停止

顯示資料

也就是所謂的資料視覺化（Data Visualization），針對你想呈現的訊息，研究怎樣的呈現方式可以讓人一目了然

這邊想特別提到一篇最近看到的文章：信息圖表是如何煉成的（一）：圓形與線條 | 海外學習筆記。雖然說文章中提到的視覺化程度可以算是尾聲的階段，但是這種可以很直觀傳遞資料意涵的圖表的確是所有資料科學家可以努力的方向

前面資料分析的階段很重要，但是視覺化的這部份也需要花時間好好研究，就像網站設計如果 UI/UX 不好，我覺得會讓事前準備的那些工作全都事半功倍

目標

接下來要分享的這些流程是我從毫無經驗的狀態，花了大約兩個禮拜做的東西，因此覺得這對於完全沒有學過資料分析的人，門檻應該算是相對來的低，但是同樣的這些也只是很初步的分析

這篇文章的目標是「分析 Facebook 粉絲團貼文內容與按讚數，分享數之間的關聯性」，對於需要做網路行銷，社群行銷的人，可能幫的上一點忙，在購買 Facebook 廣告之餘，了解你的目標族群喜好的關鍵字與內容

初步期待的結果是最後可以得到以下這種圖表

收集資料

目標是讓新手可以快速取得一些資料並開始著手進行分析，因此在收集資料這塊，打算用比較簡單的方式

取得 Facebook 資料除了可以透過分析網頁然後做爬蟲（較難的方式）以外，還可以透過 Facebook 所提供的 Graph API 取得，相關的 API 文件可以去官網查詢，而我這次要使用的是透過 Python 的 requests library 搭配 Facebook URL API，取得文章內容，按讚數量，以及分享數量

在官網上你可以看到他有列出一些 SDK（Software Development Kit），這邊只是提供其他管道做爬蟲，但是跟我接下來的內容沒有甚麼直接關係

Facebook 爬蟲要做的第一件事情就是要取得 Access token，這個在 Graph API 中就可以取得，直接複製貼上到我們的程式之中使用即可，但是在這邊需要提醒一件事情，那就是 Access token 有效期限，某些 application 在使用之前會要求 Facebook login，這就是為了取得有效的 Access token。如果未來你要用同一份程式碼爬蟲，記得要更新 Access token，更詳細的 Token 可以參考官網文件

Native mobile apps using Facebook's SDKs will get long-lived access tokens, good for about 60 days.
Access tokens on the web often have a lifetime of about two hours

雖然還是有方法可以延長 Access token 有效期限，甚至可以取得永久 Access token，但我個人覺得不太安全也沒有必要

回到正題，Facebook 爬蟲要做的第二件事情是要取得你想要分析的粉絲團 id，同樣的，這件事情可以透過 Graph API 取得，這邊以 Moli 社團為例，進入臉書頁面之後將上面的網址複製貼到 Graph API 上，submit 之後你可以透過回傳物件看到 id

import requests
import json

token = '...'
id = '...'

# 透過 python request 接 facebook URL API 拿到我們所需要的資料
all_post = requests.get('https://graph.facebook.com/v2.8/{id}?fields=posts.limit(100){{id,created_time,name,likes.limit(0).summary(true),shares,message}}&access_token={token}'.format(id=id, token=token))

# 透過 python json 將 response 轉為 json 物件
all_post = all_post.json()

透過上面的程式碼我們會拿到以下這種格式的回傳物件

{
  "id": "...", # 你要搜尋的粉絲團或是社團 id
  "posts": {
    # 因為 facebook API 會限制單次回傳的文章數量
    # 所以要透過不斷的 request "paging" 中的 "next" 取得其他文章
    "paging": { 
      "next": "...",
      "previous": "..."
    }
    "data": [
      "id": "...", # 文章 id
      "message": "...", # 臉書貼文文章
      "name": "...", # 外部連結標題
      "created_time": "...",
      "shares": {"count": ...},
      # 這邊我們只需要 "total_count"，所以可以在爬蟲之後重新修改一下 json 結構
      "likes": {
        "data": [],
        "can_like": ...,
        "has_like": ...,
        "total_count": ...
      }, ...
    ]
  }
}

這邊提供幾個對 python 比較不熟的初學者，可能會用到的 Tips

# 想要在 terminal　上看有階層式的資料（e.g. json, dict）
from pprint import pprint
pprint(all_posts)

# 過濾臉書發文的時間（e.g. 我只想分析近兩年的文章趨勢）
# facebook time stamp format example: "2015-04-10T08:40:00+0000"
# 轉成 datetime 物件再去做處理會比較恰當
from datetime import datetime
dt = datetime.strptime("2015-04-10T08:40:00+0000", '%Y-%m-%dT%H:%M:%S+0000')
dt.year # output: 2015

# 透過文章 id 過濾重複文章
list({ i['id']:i for i in all_posts['posts']['data'] }.values())

# 將處理完的資料存成 json
# 透過 `with` 會在文件操作結束之後自動幫你 file close
# 如果你需要直接看 json file，可以在 json.dump 加上 indent，但是檔案容量會比較大
# 所以如果要餵給其他檔案做讀取時，建議不要使用
import json
with open('data.json', 'w+') as f:
  json.dump(all_posts, f, indent=2)

過濾資料

從這邊開始會一邊說明基本過濾資料流程，一邊透過 R 來說明實作部份的程式碼，但不包含太多 R 的基本操作

利用 R 來做 Text mining 之前，我們需要先對我們要分析的標題或是內文做斷詞，而目前比較多人用來做中文斷詞的是 jieba（python R）。而斷詞的準確率會直接影響到後面做的分析，所以這邊我會先說明幾項斷詞需要注意的事項

字典

字典的功能就是所謂的查表，我要讓程式知道哪些文字組合在一起是一個單字，這邊其實 jieba 本身就有字典檔，但對於繁體中文字的處理其實並沒有很好，所以這邊可以去網路上找一些繁體中文字的字典檔。打開字典檔你會發現有許多筆語料資料，語料資料同常會包含單字，權重，詞性等，所以其實你也可以自己定義字典檔

停止詞 stop words

所謂的停止詞就是一些對文章沒有實質上的影響，頻率卻很高的字，像是「首先」「非常」或是一些連接詞。由於我們要做的是尋找關鍵字，所以停止字也是我們要過濾的噪音之一，而這個其實可以在斷字的時候就將其排除，同樣的，這邊也是可以自己定義哪些屬於停止詞，但是這邊可以很簡單存成 csv 就可以了

1. 讀檔

我們在上面用 python 蒐集完資料之後存成 json 檔，現在我們要用 R 讀進剛剛的 json 檔

install.packages(rjson, dependency = T)
library(rjson)
json_data <- fromJSON(file = "data.json", method = "C")

備註

安裝 packages 的時候你可以直接打 install.packages(rjson)，也可以打 install.packages("rjson")，雖然看起來沒甚麼不同，但這算是蠻進階的 R Tips，這個我覺得蠻有趣的可以研究一下 NSE（Non-standard evaluation）

NSE is particularly useful for functions when doing interactive data analysis because it can dramatically reduce the amount of typing

2. 斷字

首先我們要先引入 jiebaR，這邊安裝的的方法都一樣，然後要宣告一個 worker，你可以把他想成斷字器，在這邊我們可以使用自己定義的字典檔

install.packages(jiebaR, dependency = T)
library(jiebaR)
cutter <- worker(user = "user.dict.new.txt")

接著我們要注意一件事情，那就是剛剛透過 R 讀進來的 json 檔案格式，在 R 裏面並沒有 json 這種資料格式，取而代之的是利用 list of list 的方式儲存

R 眾所皆知的是適合拿來做矩陣運算，向量運算等等的程式語言，做 for loop 這種操作反而很沒有效率，所以通常大家會使用 apply，lapply 等等的方式取代 for，在這邊其實還可以透過平行運算加速，也就是我們接下來要安裝的 parallel。我們可以利用 parallel library 中的 mclapply 來讓斷字的過程加速

install.packages(parallel, dependency = T)
library(parallel)

# define as function
# 這邊針對標題（name）做範例介紹斷字流程，並使用自定義停止詞將其排除
stopwords <- read.csv(file = "stopwords.csv", header = F)$V1
break.file <- function (f) {
  mclapply(1:length(f), function (x) {
    if ("name" %in% names(f[[x]])) {
      # 1. 這邊我不會讓斷字結果把原本的標題取代掉，這樣後面要看關鍵字範例會比較方便
      f[[x]]$raw_name <- f[[x]]$name
      
      # 2. 斷字 > 過濾 stopwrods > 過濾英文數字 > 過濾空白
      segment.words <- segment(f[[x]]$name, cutter)
      segment.words <- filter_segment(segment.words, stopwords)
      segment.words <- gsub("[0-9A-z]+?", "", segment.words)
      segment.words <- str_trim(segment.words)
      segment.words <- segment.words[segment.words != ""]

      f[[x]]$name <- segment.words
    }
    f[[x]]
  })
}

3. 頻率篩選

接著要進入主要的分析流程，我們要從剛剛所有文本的斷字結果中找出關鍵字，而這並不是單單看出現頻率的高低就可以直接宣稱該單字是關鍵字。可能有字典以外的 stopwords 沒有被過濾掉，或是斷字結果不夠正確的都還是有可能成為資料雜訊，這邊可能就要等最後結果出來之後回頭找文本範例檢查是否真的是關鍵字來判斷

雖然說出現頻率無法直接等於關鍵字，但卻也是其中一項指標，因此我們可以先把剛剛出現的斷字結果拿去計算出現的次數，在 R 裏面可以使用內建函數 freq 簡單的得到結果，接著我們必須思考出現頻率與關鍵字之間的關係，假如說「科學」這個關鍵字幾乎在每篇文章都有出現，他是屬於對讀者有吸引力的關鍵字？或是根本沒有影響力？

以我這次做的分析為例，我認為出現頻率太極端的單字都可以排除在分析以外，出現頻率超過 70% 以上或是低於 1% 以下的單字我都不納入後面的分析流程（這邊只是舉例）

4. 權重

當我們根據頻率篩選完之後，會得到一個比原本斷字結果還要小的單字集合，但是這邊每個單字的權重是否都一樣呢？

回頭思考，我們上一步驟是根據頻率篩選，但這樣結果有可能是某一個單字在其中一篇文章出現頻率超高，但出現該單字的文章數卻很少，考慮到這一個狀況，我一開始的作法是建立一張表格，計算該單字是否有出現在文章內，並列出該文章相對應的按讚與分享數

但是後來被建議可以使用 TF-IDF，這個用於 text mining 的加權技術會同時考慮到出現的文章篇數與出現在同一篇文章內的次數，因此我這個分析後來就用 TF-IDF 重做了

5. 關聯性分析（Correlation & p-value）

當我們做完頻率的初步篩選以及單字的權重之後，我們接著就要做這些單字跟按讚數以及分享數之間的關聯連性分析，雖然是統計領域，但這些觀念其實國高中應該都有說過

e.g. 當變數 A 的值越來越大時，變數 B 的值也越來越大時我們稱變數 A 與 B 是正相關，反之變數 B 的值越來越小時我們稱變數 A 與 B 是負相關

透過上面的例子來，我可以可以把剛剛得到的「單字在文章中的 TF-IDF value」視做變數 A，而按讚數或是分享數視做變數 B，然後透過 R 內建函數 cor.test 得到兩個變數之間的關聯性，如果自己做測試你會看到類似下面這種格式的東西

cor.test(x, y,)

        Pearson's product-moment correlation

data:  x and y
t = 1.8411, df = 7, p-value = 0.05409
alternative hypothesis: true correlation is greater than 0
95 percent confidence interval:
 -0.02223023  1.00000000
sample estimates:
      cor 
0.5711816 

這邊我們需要的是 cor 與 p.value 這兩個值，在統計學中 p-value 經常被拿來視做統計果的顯著性，剛好最近有些文章在探討，建議有興趣的人可以仔細看一下，這些包含了 p-value 的本質以及虛無假設的相關探討，我會放在後面 reference

雖然說 p-value 有些討論空間，但我們這邊仍然是先根據 p-value 區別關鍵字的顯著性

• p.value >= 0.05：不顯著
• 0.01 <= p.value < 0.05：稍微顯著，我們以 * 標記
• 0.001 <= p.value < 0.01：顯著，我們以 ** 標記
• p.value < 0.001：非常顯著，我們以 *** 標記

透過這些作法與標記，我們可以個別得到單字跟按讚的關聯性與顯著程度，以及單字跟分享的關聯性與顯著程度，我這邊為了最後要輸出的二維圖，還額外加了一個欄位 significance 代表單字同時對按讚與分享顯著，只對其中一項顯著，或是對兩者都不顯著的標記

6. 資料視覺化

我在這邊使用的是 R 的 ggplot2，這是一個非常強大也非常具有彈性的繪圖函式庫，我在 reference 中也列了一些可以參考的網站，所以這邊我就不多做介紹了

做到最後一步，發現單字太多會造成圖表混亂，所以我這邊會手動挑出比較極端的關鍵字，然後不顯著的我後來也乾脆就不列出來了，因此最後的結果比較會像是以下這種圖

當然這是比較一般性的分析，同樣的一份資料我們還可以根據日期看趨勢，以一個月為位移單位，一年份為資料集大小，透過 facet_wrap 可以做出以下這種圖表

又或者有特別需要提出來做範例與介紹的關鍵字，我希望知道他在文章中與按讚或是分享數的分佈狀況，可以透過 boxplot 來做，如果要一次呈現二維資料可以參考 stat_ellipse

結語

以上列的是在兩個禮拜內從毫無經驗，歷經爬蟲，分析到視覺化的過程，其實這些都只是算是很基礎的資料分析過程，如果有人有看過陳昇瑋老師的報告可能會覺得很多圖表都很像，那是因為我就是直接問那些團隊裏面的人邊學習的，哈哈哈

看完那份報告，其實可以知道我這些只是很初期的分析程度，甚至也還不夠完美，但是對我來說卻是一個很好的練手，如果未來我開始接觸後面那些包含模型的建立，機器學習的部份，我再繼續分享

如果對我這篇文章有任何指正的也歡迎一起討論

Reference

• Python requests
• Python BeautifulSoup
• R jiebaR
• R rjson
• R parallel
• R blogger parallel
• R Non-standard evaluation
• R ggplot2 tutorial
• LIWC
• p 值的陷阱（上）：p 值是什麼？又不是什麼？
• p 值的陷阱（下）：「摘櫻桃」問題
• P-值已經死了嗎？莫須有罪名的最大受害者！

不論是實體機器或是 VPS (Virtual Private Server)，當手上需要管理的 server 愈來愈多的時候，我們都不希望逐一在 server 上面做設定，於是就有了中央管理的服務出現，NIS (Network Information Service) 就是其中一種。

NIS 的安全性

NIS 比起其他中央管理帳號的服務，安裝與設定是相對簡單，但是安全性來說是相當低的。

Anyone who can get access to the daemon can dump your password lists. If they can do that, then they have your passwords. It doesn't matter that the passwords are encrypted; they are plaintext equivalent (since authentication is done with encrypted passwords, you don't need to know the text password, you just need to write an app to provide the encrypted one to the authentication system correctly).

[Ubuntu wiki](https://help.ubuntu.com/community/SettingUpNISHowTo)

NIS 自己提供的防護這邊暫且不提，有興趣的可以去看看 Ubuntu wiki，或是透過鳥哥先學概念，但是要注意如果你是用 Ubuntu 的話會發現鳥哥上面的指令或是路徑你會找不到（廢話，人家是用 CentOS）。像是 NIS 要設定 nisdomainname 時，Ubuntu 上並沒有 /etc/sysconfig/network這份檔案，就算查到在 Ubuntu 上面應該是要去找 /etc/network/interfaces，你也看不到上面有 nisdomainname 設定參數（補充：其實直接透過 nisdomainname [domain name] 這個指令就可以設定）。

設定 iptables

建議

• NIS slave server：在設定 iptables 之前有些要建議的事項，如果你管理的 server 有其他人正在使用（e.g. 公司同事），請先確保你有 NIS slave 當備用，不然 iptables 一設定錯誤。你自己被擋掉到還好，全公司的人都被擋掉的話（大家就可以提早下班了），想也知道這是多麼大的麻煩。

• local sudo 帳號 or 直接存取：同樣的，如果對語法不熟常常會自己把自己鎖在門外，人能夠在機器前面最好，local 帳號只能應對 NIS 服務失效，但如果你把所有 IP 都擋掉，還是只能透過 console 直接存取。

設定 NIS master

設定 /etc/hosts.allow 跟 /etc/hosts.deny 以外，比較常用的是設定 iptables，我個人還會裝 iptables-persistent，參考一些網路上的設定方式比較喜歡寫 shell script 然後把 service 跟針對 ip 的規則這些分開，但其實這些都只是個人喜好，最後 iptables rule 設定正確就可以了。

Step 1: 安裝

$ sudo apt-get update
$ sudo apt-get install iptables iptables-persistent

Step 2: 固定 NIS 需要用到的 port

我個人比較喜歡 INPUT filter policy 設定為 DROP，然後再針對 IP 或是 port 去設定條件，這樣的設定算是比較嚴格，而且設定的過程中，也可以複習一下自己管理的網路架構圖跟開啟的服務有哪些

RPC (Remote Procedure Call) port

NIS 是透過 RPC 來做遠端查詢，你可以透過指令 rpcinfo -p 查看詳細資訊。首先要先確定我們有開啟 RPC 服務，看到 portmapper 代表 RPC 有開啟，你可以發現使用的是 port 111，如果你沒看到的話請先執行 sudo service portmap start 開啟服務

幸運的是，RPC 是固定使用 port 111，所以我們後面可以直接針對 port 111 設定防火牆規則

NIS port

如果你一開始在設定 NIS 時並沒有考慮到 iptables，沒有固定 NIS 服務的 port，那每次你做 sudo service ypserv restart 或是 sudo service ypbind restart 時，你會發現他的 port 會一直變，所以下一步我們要固定這些服務的 port

透過你常用的編輯器打開 /etc/default/nis，我們需要固定的 port 有四個，在這邊我們假設我們要設定 port 875~878，這邊要注意一下 YPPASSWDDARGS 的設定參數不太一樣

1. YPSERVARGS="-p 875"
2. YPBINDARGS="-p 876"
3. YPPASSWDDARGS="--port 877"
4. YPXFRDARGS="-p 878"

Step 3: 針對 NIS 需要用到的服務新增 rule

這邊你可以再次透過 rpcinfo -p 觀察發現，哪些需要用 tcp，哪些需要用 udp，然後再根據這個去設定 iptables rule，為了稍微增加一點點安全性，可以不要用 ALL 就不要用 ALL

$ iptables -A INPUT -p tcp -i eth0 -s [要開放的 server IP] -m multiport --dport 111,875,876,878 -j ACCEPT

$ iptables -A INPUT -p udp -i eth0 -s [要開放的 server IP] -m multiport --dport 111,875,876,877,878 -j ACCEPT

Step 4: 重啟服務

這邊要注意的是，如果你直接重啟 ypserv 和 ypbind 會出現：YPBINDPROC_DOMAIN: Domain not bound，因為你沒有通知 RPC server 你做了變更，這邊要先重啟 portmap，再重啟 ypserv 和 ypbind 才會成功

$ sudo service portmap restart
$ sudo service ypserv restart
$ sudo service ypbind restart

Step 5: 測試是否 NIS 有正常服務

首先，因為我們是要測試 NIS 在防火牆環境中是否能夠執行，請先在 NIS client 設定 iptables，記住不要針對 NIS master IP 做設定，這樣就算可以連線但意義不同

然後我們稍早有提過為了不要讓其他人的服務中斷，我們要確保 NIS slave 的存在，現在要測試的時候我們就先在一台沒人用的 NIS client 上面編輯 /etc/yp.conf 這份檔案，確認我們設定的 NIS server 只有我們剛剛設定過的 NIS master

接著重啟 ypbind 之後，我們可以透過 NIS 提供的測試指令：yptest 來檢查

後記

上面說的注意事項其實我都踩過了，就連看起來最嚴重的：全公司的人無法連線，我都遇到了，當時是大概是晚上六七點，已經超過可以進入機房的時間，所以我也沒辦法進去修，只能一直跟大家道歉，然後在一些沒有被影響到的 server 上幫他們佈署環境，隔天早上9點多再馬上進機房解決。

指令下錯的瞬間真的臉都白了⋯⋯

雖然這篇內容的東西也不算複雜，但是真的是找了很多論壇討論串才解決，因為真的幾乎沒人在用 NIS，更不用說是在 ubuntu 上用 NIS，如果有中文的教學也幾乎都跟鳥哥內容差不多（也就代表著都是 CentOS 環境），然後關於 iptables 的設定，如果確定 rule 都沒有問題，建議可以設定成重新開機時也預先啟動 iptables，我個人是透過指令 iptables-persistent save 儲存 rule。

Reference

• 鳥哥的 Linux 私房菜
• Ubuntu wiki
• Linux 設定 iptables

Fcitx 輸入法一般來說應該不會使用到，但是如果您/您的朋友需要用到嘸蝦米輸入法的時候，也許也可以考慮來研究一下。

• 參考資料：Ubuntu與嘸蝦米

在這篇文章裡面 BlueT 大大有介紹使用 gcin 的方式，如果不喜歡 Fcitx 的話可以過去看一下。不過 16.04 的 im-switch 好像消失了，請改用 BlueT 大大文中提到的圖形化界面操作方式：

使用圖形化界面切換輸入法

按下 Ubuntu 右上角的小齒輪，

選擇系統設定 (System Settings)，
然後找到語言支援（Language Support），

進去語言支援後在視窗下方有個輸入法的下拉式選單，

拉下去就會看到 IBus, gcin, XIM 和 fcitx 等。

安裝小企鵝輸入法

小企鵝輸入法只要安裝完中文語系之後就會出現，
所以先照上面的步驟到語言支援視窗，然後選擇安裝/移除語系（Install / Remove Languages）：

把正體中文打勾之後， 按右下角的按鈕，不曉得中文是套用還是確定（Apply）...

接著回到語言支援的視窗，下方輸入法的下拉式選單應該就會出現 fcitx 了。

選擇 fcitx 之後把您手邊的工作先告一段落存檔，然後我們需要登出再登入。請點選右上角小齒輪，然後應該就會看到在使用者名稱下面有登出（Log Out）的選項：

再次登入之後你應該就會看到你的工具列出現小企鵝輸入法了：

安裝嘸蝦米輸入法

這個步驟會需要用到一點點指令，沒用過請不要害怕，Ubuntu 沒有脆弱到一點失誤就壞掉 XD。

首先按下 ctrl + alt + t 叫終端機出來，然後在終端機按右鍵貼上這串指令：

$ sudo apt install fcitx-table-boshiamy

• sudo 的意思請看這邊。
• apt 是 Advanced Packaging Tools，用來幫你安裝程式。
• install 是安裝的意思，然後 fcitx-table-boshiamy 就是我們要安裝的嘸蝦米輸入法。

按下 Enter 之後會開始執行，不過因為安裝程式是需要使用管理員權限的，所以這個時候你需要輸入密碼。

然後就安裝完了。

安裝完之後可能需要登出再登入，
比較能夠順利找到我們剛剛安裝的嘸蝦米輸入法。

設定嘸蝦米輸入法

接著我們要開始設定輸入法，在小企鵝身上戳一下之後會彈出來一個選單：

請選擇設定 Fcitx（圖中的 ConfigureFcitx），是說我第二次登入的時候設定視窗變成這樣：

如果是第二個情況的話請選「設定」（圖中的 Configure）按鈕。

然後會看到下面這個視窗：

按下左下角的 + 號按鈕，會列出目前可以使用的輸入法：

把左下方的只顯示目前語言（Only Show Current Language）取消勾選，然後搜尋 boshiamy，選擇後按下確定，接著你就可以開始使用嘸蝦米輸入法了^[1]。

然後如果你也想要用注音輸入法的話，建議把輸入視窗關閉。

在設定 Fcitx 的視窗，切換到全域設定（圖中的 Global Config）：

首先勾選左下角的顯示進階選項（圖中的 Show Advance Option），視窗會多出第二排橫排的分頁，然後選擇第二排最後面的外觀顯示設定（下圖中的 Appearance），就會看到下面這張圖，把最下面兩個選項勾起來，這樣注音選字的時候會運作的比較正常哦！

腳註