May 12, 2015

製作艦隊收藏(艦これ)外掛 (二) 處理 VPN、遊戲頁面與資訊


目錄


(零) 聲明

此程式僅為個人學習 Python 的實作練習,並藉由此遊戲來分析與驗證網路傳輸行為,所有程式及文章僅為程式學習目的,架設於 Bitbucket 的私人 repository 中,無任何公開、散佈或任何營利行為,

不正ツール使用は規約違反です。お辞め頂けますようお願い申し上げます。 – 艦これ開発/運営 公式ツイート

本人不鼓勵也不贊同於艦これ使用任何形式的外掛或任何不正的工具,使用此類工具違反 艦これ 的 利用規約,並可能導致帳號被永久刪除。

The program was built for Python learning purpose only. Both the source codes and the program are stored in Bitbucket’s private repository. They are not disclosed to anyone in any form. Using such programs violates kancolle’s Terms of Use and may result in a permanent account ban.


(一) VPN

艦これ網頁頁面封鎖日本海外 IP,海外玩家必須經由 VPN 改變自己 IP,才能連上遊戲頁面。

0. 影片展示、說明

在 Youtube 可選擇 HD 高畫質。

1. VPN 是什麼

VPN 是 Virtual private network 的簡稱。

更多資訊請參考我之前寫的文章:VPN 介紹、挑選與實例

2. VPN Gate

為了連上艦これ,我使用日本筑波大學的 VPN Gate Academic Experiment Project 的 VPN 伺服器。

優點:

  • 免費
  • 使用 SSL 連線
  • 使用 OpenVPN

因為任何人都可以架設,故缺點為:

  • 網路速度不穩
  • 伺服器隨時可能關閉

雖然 VPN Gate 的 Server List 會用各種 Criterion (e.g. Ping)為每個伺服器評分,但還是常常發生「某個伺服器早上還在,但晚上就關閉了」的情形。每當 VPN 伺服器斷線,就得再從 Server List 手動尋找、加入設定檔、重新連線。有點麻煩。

3. 自動抓取 VPN Gate 的 CSV List

於是我寫了個簡單的小程式,去 parse VPN Gate 的 CSV List,找出伺服器位在日本且照評分排序。

VPN Gate 的 CSV List 的欄位名稱及意義都很 intuitive,加上字串處理正是 Python 的強項,實作上應該沒有什麼困難的地方。

Tips

  • urllib2 處理網址。
  • CSV 的最後一個欄位 (OpenVPN_ConfigData_Base64) 是以 base64 編碼的 OpenVPN configure file,使用 decode('base64') 即可解出來。
  • VPN Gate 網站每個伺服器通常提供四種 configure 檔:DDNS UDP, DDNS TCP, IP UDP, IP TCP。而 CSV 內的只包含 IP TCP。
  • Subprocess.call([]) 啟動外部程式。
  • 若使用 Tunnelblink 的話,其預設的執行位置在 /Applications/Tunnelblick.app/Contents/MacOS/Tunnelblick

(二) 用 javascript 改善遊戲頁面、抓取資訊

0. 影片展示、說明

在 Youtube 可選擇 HD 高畫質。

1. 為何需要 javascript

在上篇文章中,我們調查了一些艦これ工具。其中有的工具在解析艦これ遊戲的 API 之後,填入相對應的 User token 及其他資訊,並透過 HTTP Post 直接將封包傳給遊戲伺服器。

這樣做的優點在於速度快、程式單純;缺點則是造成 Server 負擔、影響其他玩家且容易被發現,譬如某個 API 原本需要三個參數 a, b, c,遊戲更新後,該 API 參數需求變成 a, b, c, d,此時遊戲伺服器只要去偵測看誰的 HTTP Post 沒有傳 d 這個參數,就知道誰還在使用舊的 API 了。

為了避免我們的外掛在艦これ更新後無法使用,我們必須採取其他 Approach。詳情請見上方影片。

2. 遮罩

於是我寫了一段 javascript 來協助我們抓取各頁面的按鈕座標。詳情請見上方影片。

Tips

  • 用基本的 javascript、CSS 與 HTML 即可實作出來。
  • jQuery .append(), .prepend(), .css(), .remove, .empty() will make your life eaiser.
  • 排版時可善用 CSS 的: position, z-index
  • 注意 jQuery 中的 .css(json) 與原生 CSS attr 語法的不同。
  • 艦これ遊戲是嵌在另一個 iframe 內,意味著與本頁面會有讀取時間差,可用 setTimeout() 解決。
  • 用 jQuery contents() 取 iframe 內 DOM。
  • event.clientX 取得滑鼠 X 座標、Y 座標。
  • 在 console 可直接執行 javascript,協助 debug。

3. 重新導向錯誤訊息

エラーが発生したため、ページ更新します。 – www.dmm.com

When playing 艦隊これくしょん, an error message “エラーが発生したため、ページ更新します” would sometimes shows up. The message means “An error has occured, please refresh.”

艦これ玩到一半時,常常會跳出下圖這樣的錯誤訊息。


Edit: [O] Lose , [X] Lost

But it is a trap!

If you click cancel, the game would continue without any problem. However, if you click ok, it would refresh the whole page including the game itself, and you will lost all progresses which were not sync between client and server yet.

點選「取消」的話就一切沒事,可以繼續遊玩。

但如果不小心按到「確定」,遊戲頁面會重新刷新,所有尚未與伺服器同步的遊戲進度都會消失,包含新抓到的艦娘、裝備,以及攻略進度等等。

因此當此錯誤訊息跳出時,我們百分之百要點選「取消」。但是我們不知道此錯誤訊息何時會跳出,故最簡單的方法是直接將此錯誤訊息 redirect 導向 console。

這部分請參閱 github 程式碼

套用這段程式碼後,錯誤訊息就會由Window.confirm() 導向瀏覽器 console.log()。錯誤訊息不會再跳出錯誤視窗,而是直接顯示在 console 內,如下圖:

4. Greasemonkey

寫好 javascript 後,貼在瀏覽器的 console 即可執行,但每次開遊戲後都要複製貼上 javascript 的話也很麻煩。善用 Greasemonkey 等工具可自動啟動設定好的腳本,減輕開發者負擔。


(三) 延伸閱讀