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


之前有說過了,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,應該也都可以透過這樣的架構完成吧~

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.