前言
婚宴結束後已經休息一陣子了，除了準備挪威的行程外，擠出些時間寫個婚宴彈幕系統的心得，以免最後因拖延症搞得無疾而終。
會觸發這場婚宴的原因，主要是因為在 2017/04/28 聚餐時，不曉得話題什麼時候被帶到極光去，而另一半提到想看極光時，有學長提到要看極光最好趕快去，因為近年來已經進到衰退期，迫使我們……回家後就開始查相關資訊，而在六天後已經決定去挪威，且開始下訂機票、郵輪、住宿等，決定在今年農曆過年時去一趟挪威旅遊。決定蜜月時間後，即開始挑場地，最後選上老新台菜，並將時間敲定於 2018/01/06。
在這段時間不時的需要去處理婚宴相關的大小事，但就是沒去處理婚宴當天影片要呈現什麼內容，直到約 11 月底時我們在巴哈動畫瘋上看了一部網路評論部分說很好看的遊戲改編動畫作品，而我們看了一致認同非常粗糙，最後每集都是開著彈幕才有辦法看下去（直接從懸疑片變成搞笑片），後來才有了「很多人都會在婚宴上放影片輪播，不如我們把影片加上彈幕系統讓畫面更有趣吧！」的想法出來，另外因為婚宴的座位安排遲遲無法決定，所以也決定寫個線上查詢座位的功能來讓座位可以隨狀態調整（例如臨時有誰要來爆位置，有誰不來使得一桌少於幾人），而最後拖到 2017/12/27 才開了 git repo 出來開始配置專案，開始撰寫彈幕系統跟帶位系統。所幸還有周末遇到跨年跟婚宴前兩天請假，有幾天可以專心寫程式不用擔心寫到太晚需要中斷思緒的問題，這幾天都是做到早上五六點才睡，活像個趕學期專題的大學生。
彈幕系統主要希望是賓客在看影片播放時，也能跟其他人互動交流一下，可能是吐個槽、也可能是交個朋友，就像在看動畫瘋、niconico 一樣，有時可以看到某些留言是有相關性的，也有些留言可能根本就離題，看了也是很有趣，也希望可以讓賓客們找點事做，不會因為影片輪播過一次後就沒有新鮮感，因為留言的內容只會越來越多，也可能會出現其他沒看過的訊息；而對於我們來說，我們知道自己在現場是沒什麼機會看到的，所以事先規劃了資料儲存來讓我們事後自己找時間看，除了部分是當天利用寫好的後台來看留言並隱藏不當留言外，配上影片的完整版本也是婚宴結束後才看的。
看過完整版本後也試著將它錄下來，可惜電腦不夠力，錄下來似乎有點卡，這是隱藏掉部分留言後的最後版本，也就是現場看到的版本。
同時也順便看了一下若將隱藏的留言通通呈現後會長什麼樣子，會發現多了一些大學朋友們現場測試 SQL injection 跟 XSS attack 的一些訊息，這些人給不給活路啊！不過還好沒出什麼問題就是 :P（雖然這類型留言還是被我們隱藏起來了）
實作細節
這個系統架設於 Azure 上，也是第一次接觸 Azure，使用過程上非常輕鬆，沒有過多的陣痛期，主要用的資源是 App Service 跟 Azure Cosmos DB：App Service 快速建立起 Node.js 環境，讓我可以專注在 Node.js 的程式上面，且利用 GitHub 進行 Continuous Deployment，也省去一些手動上傳的動作；Azure Cosmos DB 則是讓我輕鬆建立 mongoDB 來儲存資料。
伺服器網頁框架採用 Express.js，手機發送留言跟影片彈幕功能則是用 socket.io 來處理 websocket 的部分，讓訊息可以即時呈現；影片的彈幕最小單位是秒，我們決定讓它出現於畫面底部且共十個軌道，其位置是利用 Fisher–Yates shuffle 來進行隨機安排，因此每一次播到同樣秒數時，每個留言的位置都是隨機的。除了十軌外，留言移動的速度也是隨機十種，但不做十種 shuffle 而是直接隨機，因此同一秒出現的留言可能會有快有慢，也可能有相等的；而若同一秒內超過十個留言，則是每十個留言做一次位置的 shuffle，最後同時丟出，其中就會出現留言重疊的事件，而留言多到重疊我們也認為這是彈幕的一種特色，且因為時間緊迫，因此就沒特別處理了，只能期望重疊的留言因速度不同的而能分辨各個留言的內容。
而留言系統我們曾考慮過到底該用黑名單還白名單機制來讓人留言，以及是否該綁定 Facebook 第三方登入的問題：黑白名單主要差在是否留言後須先通過審核才會出現，或是出現後再遭隱藏的問題，最後我們選擇使用黑名單機制，認為我們賓客都是很乖的，如果亂留言一定是交到壞朋友才這樣的；綁定 Facbook 登入的問題，以我們自己的觀點來看，若是需要綁定 Facebook 登入來驗證姓名的話，那我的參與意願就會降低，因此最後選擇直接輸入自已的姓名即可，即便害羞要打暱稱也不是不行。而在這點上我們徹底的錯了。原以為某個最有可能亂來的人因為出差去美國所以不用擔心太多的我們真是太天真了。好在防人之心不可無，必要的防護我還是有處理的，不然影片彈幕可能就被 XSS attack 玩壞了。當天才知道原來不是存在幾個亂留言的壞朋友，而是某桌整桌都是壞朋友！除了各種攻擊外，還出現各種不可能出現的姓名留言，例如我自己的名字，還有系上教授的名字，雖然很好笑，但也太 troll 了吧 XDD。好在有寫一個陽春的後台系統，可以即時顯示／隱藏留言及開啟／關閉留言功能，如下圖。
影片彈幕系統的部分，由於影片是放在 local 的電腦上，而又須連到網路上拿取後臺資料，因此利用 Google Chrome kiosk mode 來呈現，好在曾經做過研究，就直接拿以前的筆記稍微改一下複製貼上就沒事了。1
chrome.exe "file:///C:/dist/index.html" --user-data-dir="C:/Chrome dev session" --disable-web-security --test-type --disable-translate --kiosk
手機前端網頁部分其實是花最多時間的，主要是 UI 該怎麼呈現也是改了又改改了又改，又再一次體會了下面這張圖的心情。同時也試著使用 History API 等未使用過的功能。
Sums up my new job as a graphic designer.
另外帶位系統是不是多餘的，有親戚知道這個曾問過如果手機沒網路或不會用的人該怎麼辦，回答是「本婚宴不歡迎非親戚與非現代人入場」。因為我們確定除親戚外，其他人平常都會使用到這部分才這樣做，且許多人可能都有雙重身分，例如是大學同學也是社團同學，到底該坐哪桌的問題。且婚宴前一天都還有人臨時想來／不能來，此時我們要動態調整位置時就變得很方便！
可改善的部分
- 未考慮到使用者可能會輸入 emoji，還好 emoji 能正常顯示，只是可能會跟使用者心中的樣式長得不一樣。
- 留言顏色只有白色，其實有想過更多顏色也許不錯，實作也不難，但後來又覺得會不會太亂就先作罷，看到有留言提到「需要能更換顏色，下班前給我」時覺得沒做好像有點可惜？
總結
寫的過程雖累但有趣，算是累得值得的一件事！
最後再次感謝參與婚宴的所有人，沒有你們的話，這個系統就不會出現。（重點誤）