Topics

alle"Büro GrünIst Ihnen die Webseite mit dem Namen... bekannt?

Alle von uns veröffentlichten Inhalte, einschließlich unserer Unternehmenswebsite, dienen im Grunde als Testumgebung. (Ausgenommen ist die Barrierefreiheits-App von Herrn Futamata! Übrigens ist diese Website noch nicht WCAG-konform 😭)

Alles begann vor etwa 5-6 Jahren während der COVID-19-Pandemie, als ein gelangweilter CEO beschloss, in seinem Büro selbst ein paar Begrünungsarbeiten durchzuführen.https://yurulog.liberogic.jp/posts/qx9nibr59）

Die erste unvernünftige Anfrage @2023

Anforderungen

• Ich hatte einen Kunden, der eine Affiliate-Website starten wollte, also dachte ich, es wäre lustig, ein kleines Experiment zu wagen! (Der Kunde gab schließlich auf, sodass es am Ende nur ein Experiment blieb.)
• Wie wäre es, wenn wir versuchen, uns für das Amazon-Partnerprogramm zu qualifizieren, ohne tatsächlich eine eigene Seite zu haben? Wir könnten einfach die Seite indexieren, die sich im Modal-Fenster öffnet. (Wir haben viele Dinge für ein umweltfreundlicheres Büro gekauft, die könnten wir doch als Vorlage verwenden!)
• Ich habe nicht wirklich viel Erfahrung mit Jobs, bei denen 360°-Aufnahmen gedreht werden müssen. Es gibt aber Bibliotheken und es scheint einfach zu sein, also versuchen wir es einfach mal!
• Gewinne oder ähnliches interessieren mich nicht, deshalb werde ich es einfach veröffentlichen, wenn es funktioniert – als Experiment und Lernerfahrung!
• Unsere Website ist sozusagen unser Versuchskaninchen für unsere Kunden, wissen Sie? Verstehen Sie? (❓)

Das waren die Anforderungen, die mir kurz nach meinem Eintritt ins Unternehmen gestellt wurden.

Die Implementierung begann im Februar 2023, und dieses Dokument beschreibt detailliert die Geschichte der Verbesserungen und Inhaltserweiterungen bis zum heutigen Tag!
Lasst uns Liberogic Office Green ins Rampenlicht rücken! ☀️

Technologie-Stack

• Vanilla JS (ES Modules)— Kein Rahmen,import/exportfür die benutzerdefinierte Modulaufteilung
• Pannellum- Bibliothek mit 360-Grad-Panorama-Betrachtern (lokal)pannellum/(Als Ordner installiert, selbst gehostet, nicht über CDN)
• HTML / Sass- Markup-Styling

Externe APIs und Dienste

Das wichtigste Merkmal dieser Website ist der um 360° drehbare Inhalt. Wir werden eine RICOH „THETA SC2“-Kamera verwenden, um das Büro zu fotografieren.

Hier ist das Originalfoto.

360°-Implementierung istPannellunDiese Bibliothek wird verwendet. Durch einfaches Einstellen des aufgenommenen Bildes können Sie es in 360° betrachten.

Ich habe die Bibliothek selbst heruntergeladen, ansondern ein ein CDN zu verwenden, weil ich verschiedene Anpassungen vornehmen wollte.

Anpassung

Setzen Sie ein „i“ neben das Produkt, das Sie vorstellen möchten. Wenn Sie mit der Maus darüberfahren, wird der Produktname in einer Popup-Sprechblase angezeigt.

Durch Klicken öffnet sich ein Produktinformationsfenster mit einem Link zum Amazon-Partnerprogramm. Die Büroansicht unten rechts zeigt Sternmarkierungen, die den Aufstellungsort anzeigen.

Die Produktbewertungen sind völlig unvoreingenommen und beinhalten die ehrliche Meinung des CEOs!

Sie können auch in eine Ansicht wechseln, in der das Raumlicht ausgeschaltet ist, indem Sie den Schalter oben links verwenden, und auf den Pfeil klicken, um zum Schreibtisch des CEOs zu gelangen!

Wir verwalten unsere Produkte mithilfe von Tabellenkalkulationen ansondern ein eines Content-Management-Systems, um die Bearbeitung und Anpassung zu vereinfachen.

Der Grund dafür ist,

„Kunden bevorzugen einen schlankeren Prozess, richtig? Versuchen wir es doch mal mit der Integration über Tabellenkalkulationen!“

Ich rufe Daten aus einer Tabellenkalkulation ab und lade sie in ein Modal-Fenster, aber... es funktioniert, aber...

"Diese Seite ist so langsam~"

…………

Die API istBenutzerdefinierter HotspotIch habe den Quellcode von [Quellname] als Grundlage verwendet. Die ursprüngliche Referenz erlaubte lediglich das Platzieren einer Markierung an beliebiger Stelle und die Anzeige von Text beim Überfahren mit der Maus. Ich habe jedoch verschiedene eigene Elemente hinzugefügt, wie beispielsweise die Anzeige von Modalfenstern und das Umschalten von Ansichten.

Es ist endlich fertig! 🎉
Ich war so glücklich, als es fertig war, dass ich die Seite immer wieder durchstöbert habe!

Amazon-Partnerprogramm

Dies ist, wie Sie wahrscheinlich bereits wissen, ein Affiliate-Service für Amazon-Produkte.

Die Vorgehensweise ist wie folgt.

• Die Inhalte der Website müssen aktuell sein (im Allgemeinen innerhalb der letzten 60 Tage aktualisiert / die Website muss eindeutig funktionsfähig sein).
• Die Anzahl der Artikel und Inhaltselemente beträgt 10 oder mehr.
• Sobald wir Produktlinks einfügen können, werden wir einen Hinweis zur Nutzung des Amazon-Partnerprogramms auf unserer Datenschutzseite hinzufügen.
• Innerhalb von 180 Tagen nach der Registrierung sind drei Verkäufe erforderlich (Verkäufe vom selben Konto oder von Familienmitgliedern sind nicht zulässig).
• Die eingegebene URL ist korrekt und die Website kann verifiziert werden.

Und so weiter.

Sobald Sie innerhalb von 180 Tagen drei Verkäufe getätigt haben, wird Ihre Bewerbung geprüft, und im Falle einer Genehmigung können Sie als Vertriebspartner Provisionen verdienen.

Sie legen ihre Bewertungskriterien nicht offen, daher erhalten Sie auch auf Anfrage keine Antwort. Ihr Bewertungsprozess scheint im Vergleich zu anderen Affiliate-Seiten strenger zu sein!

Und ich habe das Amazon-Partnerprogramm erfolgreich abgeschlossen! ㊗️
Die Haupteinnahmequelle ist die Shopping-Affiliate-Website meiner Mutter und des Firmenchefs.Und so entstand es! 💥

Ich weiß, es ist keine gute Idee, wenn Familienmitglieder das kaufen, aber... Es tut mir leid, falls dadurch meine Amazon-Partnerlizenz entzogen wird m(_ _;)m

Die Verkäufe verlaufen derzeit schleppend, aber die Zusammenfassungen und Konversionsraten sind durchaus interessant!

Nächste Mission @2024

Ich habe es eine Weile ruhen lassen, wodurch eine Arbeitspause entstand. Und dann kam der nächste Auftrag...

Anforderungen

• Ist die Seitenindizierung nicht etwas nachlässig?
• Lasst uns auch Büroräume hinzufügen.
• Warum nicht gleich auf Next.js umsteigen?

Eine weitere unzumutbare Forderung.

Technologie-Stack

Ich verwende die JS- und CSS-Dateien von Panellum in einem öffentlichen Verzeichnis, aber ist es üblicher, sie mit npm zu importieren?
Es scheint, als sei kürzlich eine Bibliothek für Next.js veröffentlicht worden; es hätte die Implementierung erheblich erleichtert, wenn ich sie während des Prozesses gehabt hätte.

Ich habe auch die Zugänglichkeit im Web berücksichtigt und die Bedienung per Tastatur ermöglicht.

Modalformulare werden von Googles SEO indexiert./item/{num}Der Parameter wird hinzugefügt und mithilfe der Parallel Routes von Next.js implementiert, sodass er als eine Seite gezählt wird.

Wird die Umstellung von CSR auf ISR zu einer verbesserten Suchmaschinenoptimierung führen?

Die Anordnungen bleiben bestehen.

Anforderungen

• Tut mir leid, aber ich habe Probleme mit den Sicherheitsbestimmungen bekommen, deshalb habe ich den Bürobereich entfernt! (Erledigt: Ich habe ihn hinzugefügt, aber auf eine Blacklist gesetzt.)
• Es ist viel zu langsam... Ist die Darstellung fehlerhaft? (Fast fertig)
• Da wir LLM haben, warum nicht etwas automatisieren? Ich möchte ein ganz anderes Konzept einbringen! (ImaKoko: Was soll das heißen?)
• Wenn Sie einige Produkte hinzufügen...

Eine sich still und leise entwickelnde, experimentelle Affiliate-WebsiteLiberogic office green Und das war's!

Ich liebe das Konfetti im Startbildschirm und die Illustration des Geschäftsführers – sie verleihen dem Ganzen den Charme eines kleinen, unabhängigen Ladens! Ich füge auch gerne selbst solche kleinen Änderungen hinzu, wann immer ich etwas Zeit habe, und denke mir: „Das könnte Spaß machen!“ Es wird sich bestimmt noch weiterentwickeln!

Zusammenfassung?

Als ich es ursprünglich mit Vanilla JS erstellte, implementierte ich den Großteil selbst. Durch diverse Überarbeitungen wurde die Verschachtelung der Funktionen jedoch immer komplexer. Mit fortgeschrittener KI, wie sie heute bei der Neuentwicklung mit Next.js verfügbar ist, wäre es vermutlich einfacher gewesen. Andererseits hat sich das Wissen aber auch erweitert.„Wir setzen KI in vollem Bewusstsein ihrer Leistungsfähigkeit ein.“Ich frage mich, ob es funktioniert.

Es ist eine meiner Lieblingsseiten, aber was haltet ihr davon?

Schauen Sie sich gerne um und machen Sie einen Rundgang durch unser Büro!