フォーク 官方網站已全面改版。
我們追求簡潔的設計,並在前端與後端導入先進技術,致力於打造一個易於瀏覽且使用體驗舒適的網站。
改版重點如下:
提升載入速度
近年來,由於網站效能與轉換率直接相關,因此客戶對於提升網站效能,或是希望在改版時獲得 Lighthouse 高分的需求日益增加。在本次改版中,我們在設計與實作上確保 Lighthouse 效能分數達到 95 以上(※1)。
※1 以桌面版(1280x720)進行測量。分數會因使用者環境而異。
簡化更新作業
一般的 CMS 雖然無需專業知識即可進行網站更新,但也有人反映客製化費工,或管理介面速度緩慢等問題。 在本次改版中,我們建立了可以從 Google 試算表輕鬆進行更新的機制,並結合 Looker Studio (Data Studio) 與表單功能,兼顧了效能與安全性。
技術實作說明
PWA
本網站是以 PWA (Progressive Web Apps) 技術建置,可以像手機 App 一樣進行安裝,並能在離線狀態下使用網站。
Firebase 平台
我們利用 Google 的行動裝置與 Web 應用程式平台 Firebase,建置了與 GitHub 串接的正式、測試(Staging)與開發 CI(持續整合)環境。主要運用 Hosting、Functions、Cloud Run、Firestore (資料庫)、Storage、RemoteConfig (A/B 測試) 等技術,能在短時間內以低成本建置可承受高負載的基礎設施。
透過試算表與 Markdown 進行資料管理
我們並未設置複雜的管理介面來更新內容,而是透過在 Google 試算表中以 Markdown 格式輸入文字,並在瀏覽器端即時轉換為 HTML 進行顯示。此轉換過程使用了 WebAssembly (markdown-wasm),比起傳統使用 JavaScript 執行的方式,速度大幅提升。
使用 Firestore Bundle 進行靜態發布
上述內容資料儲存於資料庫 Firestore 中,但在發布時並非每次都進行讀取,而是透過預先生成靜態資料檔案 (bundle),以實現更快的載入速度並提升安全性。
Web Components
前端採用由 Google 主導開發的 Lit 函式庫來建立 Web Components,實現了網站加速、程式碼簡化以及高度的可維護性。
透過 BudouX 🍇 進行自動斷句
由於本網站支援響應式設計,因此透過 BudouX 函式庫,可以根據裝置的螢幕寬度,自動在最適當的位置斷行。
數位轉型推動事業介紹
在內容方面,我們刊載了去年起展開的 數位轉型推動事業 的服務內容與案例,邁出了從網站製作公司轉型為數位解決方案公司的一步。
敬請期待全新的フォーク。