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 的一个库似乎最近发布了；如果我在开发过程中能用上它，实现起来会容易得多。

我还考虑了网页的可访问性，使其可以使用键盘进行操作。

模态框会被谷歌搜索引擎优化算法收录。/item/{num}已添加该参数，并使用 Next.js 的并行路由实现，以便将其计为一个页面。

从企业社会责任 (CSR) 改为企业社会责任 (ISR) 能否提升搜索引擎优化 (SEO) 效果？

命令仍在继续。

要求

• 抱歉，我因为安全问题惹上了麻烦，所以把办公室区域删掉了！（已完成：我已经添加了，但用🈲标记了。）
• 速度太慢了……是不是渲染出问题了？（快完成了）
• 既然我们有LLM，为什么不实现一些自动化呢？我想引入一个完全不同的概念！（ImaKoko：那是什么意思？）
• 如果您添加一些产品……

一个悄然发展、正在实验的联盟网站Liberogic office green 就这样！

我喜欢开场画面的彩带和CEO的插画，它们营造出一种小型独立店铺的感觉！我也喜欢在空闲时间自己做一些小修改，心想“这或许会很有趣！”它可能会继续演变下去！

概括？

最初我用原生 JavaScript 构建这个项目时，大部分代码都是我自己实现的。但随着我不断修改，函数嵌套变得越来越复杂。如果人工智能在我用 Next.js 重写时已经像现在这样发达，或许会容易一些。但另一方面，知识也得到了积累。我们将充分了解人工智能的各种能力后再使用它。我想知道效果如何。

这是我最喜欢的网站之一，你们觉得怎么样？

欢迎您随意参观我们的办公室！