Vanilla JS → Next.js on Cloudflare 实验站点「Liberogic Office Green」

大家有没有听说过一个叫「办公室绿化」的网站呢……？

我们发布的所有内容，包括企业官网在内，都是实验品。（二俣先生的 a11y 应用除外！顺便说一下，本网站尚未达到 WCAG 合规要求😭）

说起来，这一切始于五六年前的新冠疫情时期，当时闲得发慌的社长决定自己动手把办公室绿化起来。（https://yurulog.liberogic.jp/posts/qx9nibr59）

最初的强人所难 @2023

需求

• 有客户想开始经营联盟营销网站，那不如顺便做点小实验吧！（这位客户后来放弃了，所以这只是一次单纯的实验）
• 要不要试试看：在弹窗内展开的页面已被索引的状态下，不设独立页面，能否通过 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笔销售记录（同一账户或家人账户不予认可）
• 所输入的URL无误，且网站可正常访问

等等。

在注册后180天内完成3笔销售后将开始审核，审核通过即可在Associates中获得佣金。

据说审核标准不公开，询问也得不到答复。与其他联盟相比，审核似乎比较严格呢！

另外，Amazon Associates 也顺利通过了！㊗️
主要销售额来自我母亲和社长的购物联盟网站就这样诞生了💥

※ 虽然不该让家人购买……但如果因此被取消 Amazon Associates 资格的话，非常抱歉 m(_ _;)m

目前销售额增长像乌龟爬一样慢，不过看看摘要和转化率，还是挺有意思的！

下一个指令 @2024

放置了一段时间后，工作出现了空档。就在这时，下一个指令来了……

需求

• 页面的索引化是不是做得不够好？
• 也加个办公空间吧
• 顺便改用 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”吧。

就我个人而言，这是一个很喜欢的网站，大家觉得怎么样呢？？

欢迎一定要四处逛逛，参观一下办公室！