快轉到主要內容

「有露點的肉番福利動漫列表」規格書(原始碼公開啦)

· 民國115年丙午年
·
切換繁體/簡體
分類 NSFW NSFW雜談
標籤 Anime
目錄

為使專案「有露點的肉番福利動漫列表」未來能順利進行,特訂定此規格書 (Specification) 。

內容規範了製作表格的流程,動漫的收錄標準,還有遵循事項。

「有露點的肉番福利動漫列表」約是從2021年11月開始製作,架構經過多次變更。現參照世界趨勢所訂定規格,可能會不定時修正。

這個規格書為理想情況,是作為未來執行的參考。實務上現存的資料仍有多處需要修正的地方。

線上檢視肉番福利動漫列表
#

原始碼:(僅有列表,圖片未公開)

目前的想法是讓原始碼成為共同編輯維護的列表,並允許自由取用原始資料,發布到自己的網站上。譬如下述網址根據Hugo主題,建立的一個方便瀏覽的實例(instance)。

實例網站:

使用者體驗
#

網頁設計:靜態網頁,使用Hugo搭配JSON資料渲染HTML表格,每十年為一個表格。

過去手打HTML表格程式碼的方式實在太沒效率了。

使用lazy loading標籤延遲網頁圖片,並透過details標籤折疊較舊年份的表格,提昇網頁載入速度。

圖片存放在有CDN加速的S3相容儲存空間。

透過CSS和JavaScript控制網頁表格在不同螢幕大小上的展示方式,電腦上表格圖片為全寬並垂直排列,手機則將表格圖片改為左右滑動。

考慮傳輸速度、相容性等因素,不使用AVIF,而使用WEBP當圖片格式。

圖片註解以title標籤表示,電腦滑鼠懸停顯示,手機用戶則是長按顯示。

以上設計在Google Lighthouse測試分數:效能93分,無障礙94分,最佳做法100分,搜尋引擎最佳化92分。

收錄標準
#

詳細見規格書:https://github.com/ivon852/ecchi-fanservice-anime-list-data

未來可能的發展方向
#

目前這個列表是以Hugo靜態網頁框架製作,並單獨渲染成三種語言的網頁。背後的資料無法線上編輯,單一網頁效能也有問題。以下是未來發展方向的草案。

  • 將網站伺服器遷移到正式一點的AWS EC2。
  • 替換掉靜態網頁的架構,改成前端與後端結合的伺服器模式。使用React撰寫前端,並使用NodeJS當後端,JSON轉換成PostgreSQL資料庫儲存,圖片放在AWS S3。
  • 去掉Anime4K的規定,改成用Real-ESRGAN放大圖片,並以PNG格式儲存,解決WEBP不支援10-bit、AVIF普及度不足的問題。於網頁渲染的時候使用ImageKit圖片處理管線壓縮成AVIF格式,減少載入時間。並用Cloudflare緩解流量。
  • 每部動漫一個網頁,方便後續擴充與上傳圖片資訊。
  • 製作圖形化編輯界面。
  • 接入外部網站的API,方便查詢動漫資訊。
  • 製作隨機展示列表圖片的畫廊網頁,提升本列表當配菜的實用性。
  • 將網站原始碼完全開源,轉換到公共網站,成為Wiki式的協作計畫。提升未來擴充性,讓網站可以容納更多動漫露點畫面的截圖,成為完整的Wiki。

相關文章


此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。

(留言板載入中)這是Giscus留言板,需要Github帳號才能留言。支援Markdown語法,若要上傳圖片請善用外部圖床。您的留言會在Github Discussions向所有人公開。

Click here to edit your comments.

(留言板載入中)這是Disqus留言板,您可能會看到Disqus強制投放的廣告。您可以匿名留言。為防止垃圾內容,有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。若要上傳圖片請善用外部圖床網站。