Topics

everyone"Office GreenAre you familiar with the website called...?

All the content we release, including our corporate website, is essentially a testbed. (Except for Mr. Futamata's a11y application! By the way, this site isn't WCAG compliant yet 😭)

It all started about 5-6 years ago during the COVID-19 pandemic, when a bored CEO decided to do some DIY greening work in his office.https://yurulog.liberogic.jp/posts/qx9nibr59）

The first unreasonable request @2023

Requirements

• I had a client who wanted to start an affiliate website, so I thought it would be fun to do a little experiment! (The client eventually gave up, so it ended up being just an experiment.)
• How about trying to see if you can qualify for Amazon Associates without actually having a page, by indexing the page that expands within the modal? (We bought a lot of things for office greening, so let's use those as materials!)
• I don't really have much experience with jobs that involve rotating 360° footage. There are libraries and it seems easy, so let's give it a try!
• I don't care about profits or anything like that, so I'll just release it if it works, as an experiment and a learning experience!
• Our website is a guinea pig for our customers, you know? Do you understand? (❓)

Those were the requirements that were thrown at me shortly after I joined the company.

Implementation began in February 2023, and this document will detail the history of improvements and content additions up to the present!
Let's give Liberogic Office Green its moment in the spotlight! ☀️

Technology stack

• Vanilla JS (ES Modules)— No framework,import/exportCustom module division
• Pannellum- 360-degree panoramic viewer library (locally)pannellum/(Installed as a folder, self-hosted, not via CDN)
• HTML / Sass- Markup Styling

External APIs and Services

First and foremost, the core feature of this site is the 360° rotating content. We'll be using a RICOH "THETA SC2" camera to photograph the office.

Here is the original photo that was taken.

360° implementation isPannellunThis library is used. Simply by setting the captured image, you can view it in 360°.

I downloaded the library itself instead of using a CDN because I wanted to do various customizations.

Customization

Place an "i" mark next to the product you want to introduce, and when you hover your mouse over it, the product name will be displayed in a pop-up bubble.

Clicking will display a product introduction modal, which leads to an Amazon Associates link. The office layout in the lower right corner will show star markers indicating the placement location.

Product reviews are completely unbiased and include the CEO's honest review!

You can also switch to a view with the room lights off using the switch in the upper left, and click the arrow to move to the CEO's desk!

We manage our products using spreadsheets but a a CMS, in order to make editing and modification easier.

The reason is,

"Customers prefer a lighter operation, right? Let's try integrating using spreadsheets!"

I'm fetching data from a spreadsheet and loading it into a modal, but... it works, but...

"This site is so slow~"

…………

The API isCustom HotspotI used the source code from [source name] as a basis. The original reference only allowed you to place a mark at any location and display text when you hovered over it, but I added various original elements such as displaying modals and switching views.

It's finally finished! 🎉
I was so happy when it was finished that I kept browsing the site over and over again!

Amazon Associates

This is, as you probably already know, an affiliate service for Amazon products.

The procedure is as follows.

• The website content must be recent (generally updated within the last 60 days / the site must be clearly operational).
• The number of articles and content items is 10 or more.
• Once we are able to include product links, we will add a notice regarding the use of Amazon Associates to our privacy policy page.
• Three sales are required within 180 days of registration (same account or family members are not allowed).
• The entered URL is correct and the site can be verified.

And so on.

Once you have made three sales within 180 days, your application will be reviewed, and if approved, you will be able to earn commissions as an associate.

They don't disclose their review criteria, so you won't get an answer even if you ask. It seems their review process is stricter compared to other affiliate sites!

And I successfully passed the Amazon Associates program! ㊗️
The main source of revenue is my mother's and the company president's shopping affiliate website.And that's how it was born! 💥

* I know it's not a good idea for family members to buy this, but... I'm sorry if this results in my Amazon Associates being revoked m(_ _;)m

Sales are currently at a snail's pace, but the summaries and conversion rates are quite interesting!

Next mission @2024

I left it alone for a while, which created a lull in my work. And then, the next assignment came...

Requirements

• Isn't the page indexing a bit lax?
• Let's add some office space too.
• Why not switch to Next.js while you're at it?

Another unreasonable request.

Technology stack

I'm using Panellum's JS and CSS files in a public directory, but is it more common to import them using npm?
It seems a library for Next.js was recently released; it would have made implementation much easier if I had had it during the process.

I also took web accessibility into consideration and made it possible to operate it using a keyboard.

Modals are indexed by Google's SEO./item/{num}The parameter is added, and it is implemented using Next.js's Parallel Routes so that it is counted as one page.

Will the change from CSR to ISR lead to improved SEO?

The orders continue.

Requirements

• Sorry, but I got in trouble with security, so I've removed the office space! (Completed: I added it, but I've marked it with a blacklist.)
• It's way too slow... Is the rendering messed up? (Almost complete)
• Since we have LLM, why not automate something? I want to incorporate a completely different concept! (ImaKoko: What does that mean?)
• If you add some products...

A quietly evolving, experimental affiliate siteLiberogic office green And that's it!

I love the confetti in the opening screen and the CEO illustration modal, which give it the feel of a small, independent shop! I also like to add these little revisions on my own whenever I have some free time, thinking, "This might be fun!" It will probably continue to evolve!

Summary?

When I first built it with Vanilla JS, I implemented most of it myself, but as I made various revisions, the nesting of functions became more complex. It might have been easier if AI had been as advanced as it is now when I remade it with Next.js, but on the other hand, knowledge has been accumulated."We will use AI with full understanding of its capabilities."I wonder if it's working out.

It's one of my favorite sites, but what do you all think?

Please feel free to look around and take a tour of our office!