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

各位知道有一個叫「Office Green」的網站嗎..?

我們發佈的所有內容，包括公司網站在內，都是實驗場所。（二俣的 a11y 應用程式除外！順帶一提，這個網站還沒有達到 WCAG 標準😭）

說起來，約 5 到 6年前在新冠疫情時代，閒著的社長開始自己動手綠化辦公室。（https://yurulog.liberogic.jp/posts/qx9nibr59）

最初的無理要求 @2023

需求

• 有位客戶想開始經營聯盟行銷網站，那就趁這個機會做一些小實驗吧！（由於那位客戶最後放棄了，所以最後只成了一個實驗）
• 在模態窗口中展開的頁面已建立索引，那不試試看能否在沒有頁面的情況下通過 Amazon Associates 認證呢？（因為辦公室綠化購買了很多東西，就用那些當素材製作吧！）
• 360° 素材旋轉工作其實沒什麼接觸機會。既然有相關函式庫而且看起來很簡單，那就試試看吧！
• 盈利之類的無所謂，只要能作為實驗和學習兼用就公開吧！
• 我們的網站是客戶的實驗台，你懂吧？（❓）

我入社不久就被扔來的需求規格如下。

實裝開始於2023年02月，至今的改修與內容新增經過記錄如下！
Liberogic Office Green 嶄露頭角！☀️

技術堆疊

• Vanilla JS (ES Modules) — 無框架，透過 import/export 自行模組分割
• Pannellum - 360度全景檢視器程式庫（本地部署為 pannellum/ 資料夾，採用自主託管而非 CDN）
• HTML / Sass - 標記與樣式設定

外部 API 與服務

這個網站的核心在於 360° 旋轉螢幕內容。我們使用 RICOH 的「THETA SC2」相機拍攝辦公室。

拍攝的原始照片如下。

360° 的實現使用了 Pannellun 這個函式庫。只需設定拍攝的影像，就能實現 360° 全景觀看。

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

自訂

在介紹的商品上放置「i」標記，用滑鼠懸停時，商品名稱會在對話框中顯示。

點擊後會顯示商品介紹模式視窗，並連結至 Amazon 聯盟連結。右下方的辦公室平面圖會顯示配置位置的星標記。

商品介紹毫無保留，附上執行長的誠實評測！！

同時，您也可以透過左上方的開關來切換關燈後的房間視圖，或點擊箭頭移動到執行長辦公桌的方向！

產品管理並非使用 CMS，而是刻意採用試算表來管理，以便於編輯和修改。

原因是，

「客戶希望運營成本越輕越好不是嗎？試試看用試算表來連接吧！」

我們透過 fetch 試算表中的資料並將其注入到模態視窗中……一旦完成的話，

「這個網站好慢啊～」

…………

我們使用了以自訂熱點為基礎的 API。參考文件原本只是在任意位置放置標記，滑鼠懸停時會顯示文字，但我們自行添加了許多元素，例如顯示模態視窗或切換視圖。

總之就這樣完成了🎊
完成的時候真的很高興，一直在網站上轉圈圈！

Amazon Associates

眾所皆知的 Amazon 商品聯盟行銷服務。

步驟如下。

• 網站內容必須是最新的（通常在60天內更新過／能看出網站有妥善維護）
• 文章數或內容需達10篇以上
• 開始刊登商品連結後，需在隱私政策頁面刊登Amazon Associates的營運告示
• 註冊後180天內需有3件銷售成績（同一帳戶或家庭成員無法計算）
• 輸入的URL沒有錯誤且網站可以確認

等等。

在180天內達成3件銷售成績後就會開始審查，通過後便可在Amazon Associates獲得報酬。

Amazon Associates表示不會公開審查標準，即使提問也無法獲得回答。看來Amazon Associates的審查比其他聯盟行銷平台還要嚴格呢！

Amazon Associates也順利通過了㊗️
銷售額的主要來源是我媽和公司老闆的購物聯盟網站於焉誕生💥

※ 內部購買可能不太適當……如果因此被解除 Amazon 聯盟資格的話，先說聲抱歉 m(_ _;)m

目前銷售額還是烏龜爬行的速度，但看摘要和轉換率的話，還是滿有趣的呢！

下一個任務@2024

閒置了一段時間後，工作出現了空檔。就在那時，下一個任務來了……

需求

• 頁面的索引化不夠充分嗎？
• 順便把辦公室空間也加上吧
• 乾脆改用 Next.js 重寫怎麼樣？

又是無理的要求。

技術堆疊

Pannellum 的 js、css 檔案是放在 public 資料夾中使用，但用 npm 匯入應該是主流吧。
最近好像推出了 Next.js 的函式庫，實裝時如果有就好了，會輕鬆一些..

順便也意識到了網頁無障礙設計，也讓鍵盤操作成為可能。

模態視窗使用 /item/{num} 參數設定，以便 Google SEO 能正確索引並計為單一頁面，透過 Next.js 的 Parallel Routes 實現。

從 CSR 轉換為 ISR 後，對 SEO 改善也有幫助呢！

指令持續進行中

需求

• 抱歉，因安全性問題被警告，所以把辦公室空間拿掉了！（完成：雖然剛加入，但已標記為禁用 🈲。）
• 似乎有點太重了....轉譯是不是出問題了？（部分完成）
• 既然有 LLM，何不乾脆自動化一下呢？想引入完全不同的概念呢！（目前進度：是什麼意思？）
• 可以加商品之類的呀～

經過細微的多次版本升級，已成為實驗型聯盟行銷網站 Liberogic office green！

很喜歡個人商店般開場畫面的彩紙飛舞效果和董事長插圖模態視窗！像這種小小的修改，有時在閒暇之際，會「啊，要是有這種功能就有趣了！」而自行添加。應該未來還會持續進化！

總結？

一開始用 Vanilla JS 組建時，我幾乎是自己實作所有功能，但隨著不斷修訂，函式巢狀結構也變得越來越複雜。如果在 Next.js 重製的時期就有現在這般發展的 AI，可能會輕鬆得多，但另一方面，我們也累積了許多知識，能夠「在充分理解的基礎上運用 AI」吧。

我個人很喜歡這個網站，大家覺得怎麼樣呢？？

歡迎到處走走逛逛，來參觀辦公室吧！