刀劍神域記憶重組 公告變更記錄產生器

之前有說過了，Heresy 為了自己在玩的手機遊戲《刀劍神域－記憶重組》另外弄了一個部落格來做紀錄（網址）。

而實際上，之前由於覺得遊戲內的公告由於不是照著更新時間排序、要找到哪個公告是新的實在很麻煩，所以就火大，自己試著想辦法去做公告的變更紀錄了。

搞了老半天，弄出了一個使用了兩個 Git repository 的奇怪架構系統，算是勉強做到堪用的程度了～

目前的成品是：https://kheresy.github.io/SAOMD-AA/changelog.html
而實際在運作的專案則是 https://gitlab.com/kheresy/saomd-announcement

為什麼會搞成兩個專案呢？

實際上，Heresy 是透過 GitLab 的專案，設定好 CI/CD 的定時執行功能、來定時去擷取公告網頁的資料。這邊選擇用 GitLab 的原因，是因為 Heresy 對 GitLab CI/CD 腳本相對熟系，而且他也有提供免費的 shared runner 時數可以使用。

但是為了要能和之前的資料做比對，找出變更的項目，所以需要透過第二個 Git repository 來儲存過去的資料；這邊就透過 GitHub 來做了～

其實本來是兩個都放在 GitLab 的，但是不知道為什的 GitLab Pages 的 JavaScript 一直有問題，所以後來放棄、改用 GitHub 的 GitHub Pages 來做最後的顯示了。

---

目前的流程，大致上是：

1. 透過 Git 從 GitHub 擷取之前的資料
2. 讀取目前的網站資料
3. 比對新舊檔案，檢查：索引頁的變更、以及各公告頁面是否有變化
4. 如果有發現有公告變化的話，透過 Git 更新到 GitHub

其中，第 1、4 階段主要是 git 的操作，所以是用 alpine/git 這個 Docker 容器來跑的；裡面就是自己去執行 git 的指令了～

在第 2、3 階段、是自己寫的程式運作的部分，實際上是寫在一起的；所以最後 GitLab CI 只有三個 stage。

這部分雖然本來是想用比較熟系的 C++ 寫，但是考慮到要上 CI/CD 固定執行，感覺好像還是腳本語言比較合適？所以後來就決定改用處理網頁內容比較方便的 Node.js（官網）來寫了～
而這邊是使用 node 這個 Docker 容器來執行。

---

在主要程式的部分，這邊主要是使用兩個套件：

• node-fetch（官網）：用來抓網頁用的
• cheerio（官網）：使用 jQuery 的風格，來針對 HTML DOM 做分析、操作。

而分析完的資料，則是會以 JSON 的格式來儲存（changelog.json）、然後再由 HTML 網頁（changelog.html）讀取近來顯示。

不過，認真講…Heresy 上次碰 JavaScript 是很久以前的事了，這次再回來看…恩，好多新特性啊！以前要透過 function 來模擬 class 現在也直接有了，而在之前很煩的 async 操作上，現在也有 promise 等特性可以用了；感覺上和之前比起來，現在真的好寫很多了！
（忽然想學 TypeScript 了？ XD）

總之，目前的做法呢，就是先把公告首頁抓下來，然後找出每個公告（他是用 <dl>），針對各個公告去分析它的內容，提取出需要的資訊（CAItemNode）、確認他的狀態（新增、移除、更新等等）。

雖然在首頁就提供了每則公告所需要的資訊了，但是由於萬代有的時候會更新內容、但是沒在公告首頁標記，所以這邊也會去讀取個別公告的網頁、和既有資料做比較，確認內容是否一致。

而透過 Promise 等到所有公告都分析完後，則是把內容轉換成 JSON 的格式，然後和舊有的資料比對、分類，最後儲存下來。

---

在分析完之後，則會在最後一個 stage，透過 shell script 檢查是否有更新（透過判斷前一階段是否有產生 NEED_COMMIT 這個檔案），然後在必要的時候，把更新的內容 push 到 GitHub 的 repository 上。

最後，再針對官方可能公告的時間，設定在對應的時間自動執行整個 CI/CD pipeline 就可以了～

---

當然，這樣的架構最明顯的缺點，就是沒辦法即時地更新。而且，還分成兩個部分：

1. 由於是定時運作的機制，所以如果他在非預期的時間更新，就需要等到下一次排定的時間才會更新。
2. 由於這邊分析也需要時間、丟到 GitHub 之後也需要透過 GitHub Action 輸出到 GitHub Pages，所以大概也會有 6 分鐘以上的延誤。

雖然曾經也想過要做成 live 版的，在使用者開啟頁面的時候，即時地從官網抓內容和既有資料比對，但是由於 Cross-Origin Resource Sharing（CORS、參考）的限制，應該是做不到了。
（真要做，應該是只能架一台 Server 來做轉介了。）

其他當然也還有一些零星的問題，不過目前應該算是堪用的狀態了。

理論上，如果要幫其他網站做 changelog，應該也都可以透過這樣的架構完成吧～