Topics

每個人”辦公室綠色你熟悉名為…的網站嗎？

我們發布的所有內容，包括我們的公司網站，本質上都是一個測試平台。 （除了Futamata先生的無障礙應用程式！順便說一句，這個網站目前還不符合WCAG標準😭）

這一切始於大約 5-6 年前的 COVID-19 疫情期間，當時一位百無聊賴的 CEO 決定在自己的辦公室裡進行一些 DIY 綠化工作。https://yurulog.liberogic.jp/posts/qx9nibr59）

第一個不合理的要求 @2023

要求

• 我有個客戶想建聯盟行銷網站，所以我想做個小實驗應該還蠻有趣的！ （客戶最終放棄了，所以這最終只是個實驗。）
• 不如試試看，不用建立頁面，透過索引模態框內展開的頁面，能否獲得亞馬遜聯盟計畫的資格？ （我們買了很多辦公綠化用品，不如用這些當素材！）
• 我其實不太擅長處理360°旋轉影片。不過網路上有很多素材庫，看起來也蠻簡單的，那就試試看吧！
• 我不在乎利潤之類的，所以如果有效的話，我就把它發佈出來，就當是一次實驗和學習經驗吧！
• 你知道嗎？我們的網站就像是給顧客當白老鼠。你明白嗎？ （❓）

這些是我加入公司後不久就被提出的要求。

實施工作於 2023 年 2 月開始，本文檔將詳細介紹迄今為止的改進和內容添加歷史！
讓我們一起來欣賞Liberogic Office Green的魅力吧！ ☀️

技術堆疊

• Vanilla JS (ES Modules)— 沒有框架，import/export用於自訂模組拆分
• Pannellum- 360度全景檢視器庫（本地）pannellum/（以資料夾形式安裝，自架，非透過 CDN）
• HTML / Sass- 標記樣式

外部 API 和服務

首先，本網站的核心特色是360°旋轉內容。我們將使用理光“THETA SC2”相機拍攝辦公室照片。

這是當時拍攝的原圖。

360°實施是Pannellun使用這個庫。只需設定拍攝的影像，即可360°查看。

我下載了庫檔案本身，而是使用 CDN，因為我想進行各種自訂。

客製化

在您要介紹的產品旁邊放置一個「i」標記，當您將滑鼠懸停在其上時，產品名稱將顯示在彈出氣泡中。

點擊後會彈出產品介紹彈窗，其中包含亞馬遜聯盟連結。右下角的辦公室佈局圖會顯示星形標記，指示放置位置。

產品評價完全公正，並包含CEO的真實評價！

您也可以使用左上角的開關切換到關閉房間燈光的視圖，然後點擊箭頭移動到 CEO 的辦公桌！

我們使用電子表格而是內容管理系統來管理我們的產品，以便於編輯和修改。

原因在於：

“客戶更喜歡輕便的操作，對吧？我們試試用電子表格進行整合吧！”

我正在從電子表格中獲取數據並將其加載到模態框中，但是……它能運行，但是…

這個網站好慢啊~

…………

API是自訂熱點我以[原始碼名稱]的原始碼為基礎。原始程式碼只允許在任意位置放置標記，並在滑鼠懸停時顯示文本，但我添加了一些原始功能，例如顯示模態框和切換視圖。

終於完工！ 🎉
網站完成後我太高興了，一遍又一遍地瀏覽！

亞馬遜聯盟

正如您可能已經知道的那樣，這是一項亞馬遜產品的聯盟行銷服務。

步驟如下。

• 網站內容必須是最新的（一般情況下，最近 60 天內更新/網站必須運作正常）。
• 文章和內容項的數量為 10 件或以上。
• 一旦我們能夠添加產品鏈接，我們將在隱私政策頁面中添加關於使用亞馬遜聯盟計劃的通知。
• 註冊後 180 天內需完成三筆銷售（不允許同一帳戶或家庭成員之間進行銷售）。
• 輸入的網址正確，可以驗證網站。

等等。

在 180 天內完成三筆銷售後，您的申請將被審核，如果獲得批准，您將能夠作為合作夥伴賺取佣金。

他們不公開審核標準，所以即使你問也不會得到答覆。看來他們的審核流程比其他聯盟網站嚴格得多！

我成功通過了亞馬遜聯盟計畫！ ㊗️
主要收入來源是我母親和公司總裁的購物聯盟網站。就這樣，它誕生了！ 💥

我知道讓家人買這個不太好，但是…如果這導致我的亞馬遜聯盟計劃被取消，我很抱歉 m(_ _;)m

目前銷售速度非常緩慢，但匯總數據和轉換率卻相當有趣！

下一次任務預計在2024年完成

我暫時擱置了這件事，工作也因此有了些許喘息的空間。然後，下一個任務就來了…

要求

• 頁面索引是不是有點鬆懈了？
• 我們再增加一些辦公空間吧。
• 為什麼不順便切換到 Next.js 呢？

又一個不合理的要求。

技術堆疊

我正在使用 Panellum 的 JS 和 CSS 文件，它們位於公共目錄中，但是使用 npm 導入它們是否更常見？
Next.js 的一個函式庫似乎最近發布了；如果我在開發過程中能用上它，實作起來會容易得多。

我還考慮了網頁的可訪問性，使其可以使用鍵盤進行操作。

模態框會被Google搜尋引擎優化演算法收錄。/item/{num}已新增此參數，並使用 Next.js 的並行路由實現，以便將其計為一個頁面。

從 CSR 改為 ISR 能否提升 SEO 排名？

命令仍在繼續。

要求

• 抱歉，我因為安全問題惹上了麻煩，所以已經把辦公空間移除了！ （已完成：我已經添加了，但已將其列入黑名單。）
• 速度太慢了……是不是渲染出問題了？ （快完成了）
• 既然我們有LLM，為什麼不實現一些自動化呢？我想引入一個完全不同的概念！ （ImaKoko：那是什麼意思？）
• 如果您添加一些產品…

一個悄悄發展、正在實驗的聯盟網站Liberogic office green 就這樣！

我喜歡開場畫面的彩帶和CEO的插畫，它們營造出一種小型獨立店舖的感覺！我也喜歡在空閒時間自己做一些小修改，心想「這或許會很有趣！」它可能會繼續演變下去！

概括？

最初我用原生 JavaScript 建立這個專案時，大部分程式碼都是我自己實現的。但隨著我不斷修改，函數巢狀變得越來越複雜。如果人工智慧在我用 Next.js 重寫時已經像現在這樣發達，或許會容易一些。但另一方面，知識也累積了。我們將充分了解人工智慧的各種能力後再使用它。我想知道效果如何。

這是我最喜歡的網站之一，你們覺得怎麼樣？

歡迎您隨意參觀我們的辦公室！