Vanilla JS → Next.js on Cloudflare 實驗網站「Liberogic Office Green」

大家是否聽說過一個名為「Office Green」的網站呢...？

本公司發布的內容，包括企業官方網站在內，全都是實驗品。（二俣先生的 a11y 應用程式除外！順帶一提，這個網站尚未達成 WCAG 合規😭）

事情的起點可以追溯到 5 至 6 年前的新冠疫情時期，當時閒來無事的社長決定自己動手為辦公室進行綠化DIY。（https://yurulog.liberogic.jp/posts/qx9nibr59）

最初的亂來提議 @2023

需求

• 有客戶想開始經營聯盟行銷網站，那就來做個小實驗吧！（該客戶後來放棄了，因此最終只是一場單純的實驗）
• 要不要試試看：在彈出視窗（modal）中展開的頁面保持索引狀態，但不建立實體頁面，能否通過 Amazon Associates 資格審核？（既然為辦公室綠化買了一堆東西，就拿來當素材吧！）
• 很少有機會處理360°素材的旋轉展示，其實挺有意思的。有現成的函式庫，看起來也不難，來試試看吧！
• 收益什麼的無所謂，邊做實驗邊學習，如果能完成就順便公開吧！
• 我們的網站其實是客戶的實驗場喔？你懂嗎？（❓）

這就是我剛進公司不久時接到的需求全部內容。

實作始於2023年2月，接下來將記錄至今的改版與內容新增經過！
Liberogic Office Green 終於見天日！☀️

技術堆疊

• Vanilla JS (ES Modules) — 不使用框架，透過 import/export 自行拆分模組
• Pannellum - 360度全景檢視器函式庫（以 pannellum/ 資料夾形式放置於本地，採自架方式而非 CDN）
• HTML / Sass - 標記與樣式

外部 API・服務

本網站的核心內容是可 360° 旋轉的畫面。我們使用 RICOH 的「THETA SC2」相機拍攝辦公室。

拍攝的原始照片如下。

360° 的實作使用了 Pannellum 函式庫。只要設定拍攝的圖片，即可像 360° 環繞般瀏覽。

為了進行各種自訂，我們沒有使用 CDN，而是下載了函式庫本身。

自訂

在要介紹的商品上放置「i」標記，滑鼠移到上方時，會以彈出框顯示商品名稱。

點擊後會顯示產品介紹彈窗，並連結至 Amazon 的聯盟行銷連結。右下角的辦公室平面圖會以星形標記顯示配置位置。

產品介紹毫不客套，附上社長的真實評測！！

此外，還可以透過左上角的開關切換成關燈的視圖，點擊箭頭還能移動到社長的辦公桌旁！

為了方便編輯與修改，商品管理並未使用 CMS，而是刻意採用試算表進行管理。

原因是，

「客戶希望營運越輕鬆越好吧？用試算表串接看看吧！」

我們用 fetch 讀取試算表的資料並填入彈窗中……做是做出來了，但

「這個網站真的好慢啊〜」

…………

API 是參考自訂熱點的來源所使用的。原本的參考功能只是在任意位置放置標記，滑鼠懸停時才會顯示文字，但我們加入了彈窗、切換視圖等各種原創元素。

總算完成了🎊
完成的時候很開心，一直在網站上來回瀏覽呢！

Amazon Associates

眾所周知，這是 Amazon 商品的聯盟行銷服務。

步驟如下。

• 網站內容須為最新（一般為 60 天內更新，且能看出網站有確實經營）
• 文章數或內容須達 10 則以上
• 能夠刊登商品連結後，請在隱私權政策頁面加註 Amazon Associates 的營運標示。
• 註冊後 180 天內需有 3 筆銷售紀錄（同一帳號或家人帳號不予承認）
• 輸入的網址正確無誤，且網站可正常瀏覽

等等。

若在 180 天內達成 3 筆銷售紀錄，即會開始審核；審核通過後，即可透過 Associates 獲得佣金報酬。

聽說他們不公開審核標準，就算詢問也不會得到回覆。和其他聯盟計畫相比，審核似乎比較嚴格呢！

而且 Amazon Associates 也順利通過了㊗️
銷售主力是我母親和社長的購物聯盟網站就這樣誕生了💥

※ 透過家人購買其實不太妥當……如果因此被取消 Amazon Associates 資格，真的很抱歉 m(_ _;)m

目前銷售進度像龜速一樣慢，不過看看摘要和轉換率，其實蠻有意思的！

下一道指令 @2024

放著不管一陣子後，工作出現了空檔。就在這時，下一道指令來了……

需求

• 頁面的 index 化是不是做得不夠好？
• 也順便加上辦公空間吧？
• 順便改用 Next.js 重新架構如何？

又是硬要辦到的無理要求。

技術堆疊

Pannellum 的 JS、CSS 檔案是放在 public 資料夾中使用，但用 npm 匯入應該才是主流做法吧。
最近好像出了適用於 Next.js 的函式庫，要是實作時就有的話，應該會輕鬆很多呢..

順便也考量到 Web 無障礙（accessibility）的對應，所以設計成也能用鍵盤操作。

為了讓 Google 的 SEO 能將彈出視窗索引化，我加上了 /item/{num} 參數，並使用 Next.js 的 Parallel Routes 實作，讓它被計算為一個頁面。

從 CSR 改為 ISR 之後，也會對 SEO 改善有幫助吧！

指令持續延續下去

需求

• 抱歉，因為資安方面被念了，把辦公空間拿掉吧！（完成：雖然好不容易加上了，但還是標上了🈲記號。）
• 總覺得太重了....渲染是不是有問題啊？（稍微完成）
• 既然有 LLM，不如做點自動化之類的吧？想引入完全不同的概念呢！（目前進行中：這是什麼意思？）
• 像是加點商品之類的吧～

默默地持續版本更新，已經變成實驗系的聯盟行銷網站 Liberogic office green 了！

我最喜歡的是類似個人商店風格的開場畫面，有飄落的紙屑，還有社長插畫的彈出視窗！這類小幅改版我也常在閒暇時自己加上，覺得「如果有這個就好玩了！」。今後想必還會持續進化！

總結？

最初用 Vanilla JS 開發時，還能靠自己摸索著實作，但隨著各種改版，函式的巢狀結構也變得越來越複雜。如果在改寫為 Next.js 的時期就已經有像現在這樣發達的 AI，或許會輕鬆許多；不過相對地，也能累積更多知識，或許正因如此，才能做到「在理解的前提下使用 AI」吧。

就我個人而言，這是一個很喜歡的網站，大家覺得如何呢？？

請務必隨意逛逛，來參觀我們的辦公室！