如何備份乃木坂畢業成員部落格
03 Jul 2020
一直都有想寫這一篇，但因為具體上不知道要寫到多細所以遲遲沒有動筆。
緣起
小弟 2017 年中因為接觸 16 單入坑，當時自然是已經沒有橋本的部落格可以看了，所以當年年底伊藤万理華畢業的時候就想說不然來把部落格文章通通拉一份下來好了，以後說不定忽然會想看。
那時候草草規劃了幾個決定：
- 用 Node.js 寫：
上班寫 Android，下班 Side-project 換個語言。在 Github 上找到了這個： bda-research / node-crawler ，爬蟲主要是依賴這個套件完成的。 - 資料存成 JSON 格式：
原因主要還是懶，資料庫管理一直都是我的弱項，直覺就是逃避。加上我希望架成靜態網站，JSON 方便直接在前端處理 - 不保存底下的留言：
其他人講了什麼我才不在乎由於上面提到的，資料型態是 JSON，如果再把留言全部拉下來 JSON 檔真的會太大 - 圖片要全部下載：
雖然專案容量因此暴增，但是是值得的 - 採用成員宣布畢業才一口氣下載的設計：
其實比較好的做法應該是架一台伺服器，每次有人發文就下載一篇，這樣才能存到原始的大圖 (部落格發表後一陣子圖片會被壓縮，鳥設計)，但這樣很多架構都要改掉，還是一個字：懶
爬蟲流程
2022 補充：底下的流程已經因為官網在 2022 年改版過而完全失效了，看看就好
- 指定某個成員之後爬取年月的列表
- 進入每個月份爬取該月總分頁數
- 於每個分頁爬取標題清單
- 下載清單的所有文章
之所以設計這樣流程，原因是因為我發現如果邏輯改成打開最新一篇之後一直爬上一篇，有機會掛掉，掛掉的原因分成兩種
- 網站設計的問題：
好像上一頁不能無限的按回到第一篇文章(分頁數疑似有上限) - 文章內文會有問題：
部落格本質上是 UGC(用戶原創內容)，如果成員把文章的 html 編輯壞了雖然在網站上可以顯示，但爬蟲會掛掉 XD 為了避免任何一篇文章出錯就把整個爬蟲弄停真的是煞費苦心…
所以雖然這樣爬起來不是很快，但應該是堪用了，我也怕速度再提升爬蟲會被網站擋下來。
附上程式碼，如果你真的有興趣的話。
開發閱讀用的網頁
這本來只是個後端爬蟲專案，沒想到隨手寫個簡單的閱讀器竟然花了我一大堆的時間…
乃木坂 46 卒業メンバーのブログ
最原始的概念很簡單，就是一個 html 檔，打開可以讀取同目錄下的 JSON，就這樣。
其實第一版的畫面跟現在沒有太多改變
畫面是用 Vue.js 兜出來的，由於前述原因所以也沒有用vue-cli開專案，直接引入 js 檔隨隨便便就開工了。
但寫一寫發現了一些問題…
Chrome 的file-access-from-files
這問題一開始是 Chrome 獨有的，我一直都是 Firefox 的使用者，很後來才注意到我最初的構想用一個單純的 html 文件當閱讀器是行不通的，因為 Chrome 不允許在檔案內存取另一個檔案（現在 Firefox 也不支援了），為此我後來還特別寫了一篇文章聊怎麼處理這件事：
這問題的解法就是要架站，那既然要架站乾脆就直接丟上 github pages 的服務吧。
要認真經營嗎？
這東西毫無疑問的有著作權問題，所以我起初設了幾個規則
- 不放廣告
- 不讓搜尋引擎索引
- 不塞 GA(Google Analytics)
但後來基於個人的好奇心以及虛榮心，除了第一點之外剩下的都做了…
搜尋引擎優化
去 Google 註冊一個網站很簡單，但要被真的搜尋到可不容易。
對前端框架跟 SEO 有點概念的人可能會猜到問題點，沒有錯，我需要做 SSR(Server side rendering)
不知道 SSR 是什麼的同學可以閱讀一下這篇的第一段：
SSR — Nuxt.js 超入門
但我只引入單檔，沒辦法使用 Nuxt.js 幫我做好，所以這部份後來算是用手刻的方法硬著頭皮把它完成的。
有賴於 Google 的搜尋引擎爬蟲可以執行 JS，所以我用了 Babel 把程式轉成 Google Bot 可以執行的版本加上預先填入部分資訊到 html 檔內完成 87% 像的 SSR，至少搜尋引擎可以辨識他們是不同的網頁，而不是大量重複內容然後降我排名。
後來寫了一隻程式專門做這件事情，把資料預填好然後複製 html 到對應的資料夾內，並產生 Sitemap.xml，現在要手動的部分越來越少了。
成果
這應該是可以分享的吧？
然後第一名的搜尋關鍵字是西野七瀬 ブログ，用個字去查排名比七瀨的官網還要前面，希望官方不要宰了我
至於最多人看的前五名分別是：
RWD
掛了 GA 之後發現大部分的使用者都是使用手機，所以開始著手處理 RWD
為了精簡要做的事情，我選擇把左手邊兩塊（成員資料、文章列表）做成浮動的，需要的時候滑出來，要看文章的時候會向左收闔，完全使用 CSS 達成，最後的成果我還蠻喜歡的。
未來方向
爬蟲本身沒啥好改的了，只要乃木坂的官網沒有大改版我應該就不會再去改它。之前有額外寫一個櫸坂 46 的版本，可以運作，但我沒有實際在用，寫好玩的。
但網站本身倒是蠻多事情可以做的
- 買一個域名：
目前使用 github pages 給的預設名稱，變成會跟我現在這個部落格互相干擾 SEO，GA 資料也都混在一起，更重要的是網址直接就是我的 github 帳號名稱實在是有點赤裸，未來看要幫我的部落格換一個域名，還是幫這個站換域名。 - 用 Nuxt.js 完全改寫：
前面提到克難的 SSR，終極解法還是整個網站全部改寫一遍，目前有在嘗試了，只是遇到各種問題呈現一個半放棄的狀態，再給我一點時間吧。後續更新：用 Nuxt.js 改寫舊的專案
- 建資料庫、後端程式：
現在存成 json 最大的問題是要一口氣下載全部的文章才能顯示，浪費很多時間跟流量，還是要有一個後端才行。但這個真的很麻煩我覺得應該只是提一下，永遠不會去做 XD - 往前追加成員：
現存最早的資料是橋本的，看能不能至少補個深川麻衣的。但這等於要去爬別人爬的第二手資料，爬蟲要全部重寫，也不是一件容易的事情。
後記
這篇本來寫了三分之一就擺著，是昨天就這麼剛好在推特看到睽違了三年的橋本的消息才想到該來把它完成。
奈々未ちゃんが
— kanami (@kanami_k_820) July 1, 2020
CELENAスタート初日にお花を持って来てくれた😭✨
あれからずーっとずーっと
綺麗で可愛いよ😌✨
選んでくれたお花の色も
センスが良すぎる🥺💕
本当にありがとう😭
これからもよろしくお願いします🙏#橋本奈々未 #美容室 #美容師 #青山 #表参道 #トリートメント pic.twitter.com/mOWg93bF5U
