Topics

tout le monde"Bureau vertConnaissez-vous le site web appelé...?

Tout le contenu que nous publions, y compris notre site web institutionnel, sert essentiellement de banc d'essai. (Sauf pour l'application d'accessibilité de M. Futamata ! D'ailleurs, ce site n'est pas encore conforme aux WCAG 😭)

Tout a commencé il y a environ 5 ou 6 ans, pendant la pandémie de COVID-19, lorsqu'un PDG qui s'ennuyait a décidé de faire lui-même des travaux d'écologisation dans son bureau.https://yurulog.liberogic.jp/posts/qx9nibr59）

La première demande déraisonnable @2023

Exigences

• J'avais un client qui voulait lancer un site web d'affiliation, alors j'ai pensé que ce serait amusant de faire une petite expérience ! (Le client a finalement abandonné, donc ça n'a finalement été qu'une expérience.)
• Et si vous essayiez de voir si vous pouvez bénéficier du programme Amazon Associates sans avoir de page dédiée, en indexant la page qui s'affiche dans la fenêtre modale ? (Nous avons acheté beaucoup de choses pour rendre nos bureaux plus écologiques, alors utilisons-les comme matériaux !)
• Je n'ai pas beaucoup d'expérience avec les projets impliquant la rotation de vidéos à 360°. Il existe des bibliothèques de ressources et ça a l'air simple, alors essayons !
• Je ne me soucie pas des profits ni de quoi que ce soit de ce genre, alors je le publierai simplement s'il fonctionne, comme une expérience et un apprentissage !
• Notre site web sert de cobaye à nos clients, vous savez ? Vous comprenez ? (❓)

Voilà les exigences qui m'ont été présentées peu après mon arrivée dans l'entreprise.

La mise en œuvre a débuté en février 2023, et ce document détaillera l'historique des améliorations et des ajouts de contenu jusqu'à présent !
Donnons à Liberogic Office Green l'occasion de briller ! ☀️

Pile technologique

• Vanilla JS (ES Modules)— Pas de cadre,import/exportDivision des modules personnalisés
• Pannellum- Bibliothèque de visionneuses panoramiques à 360 degrés (localement)pannellum/(Installé sous forme de dossier, auto-hébergé, sans passer par un CDN)
• HTML / Sass- Style de balisage

API et services externes

Avant tout, la principale caractéristique de ce site est son contenu rotatif à 360°. Nous utiliserons un appareil photo RICOH « THETA SC2 » pour photographier les bureaux.

Voici la photo originale qui a été prise.

La mise en œuvre à 360° estPannellunCette bibliothèque est utilisée. Il suffit de paramétrer l'image capturée pour la visualiser à 360°.

J'ai téléchargé la bibliothèque directement au lieu d'utiliser un CDN car je souhaitais effectuer diverses personnalisations.

Personnalisation

Placez un « i » à côté du produit que vous souhaitez présenter, et lorsque vous passerez votre souris dessus, le nom du produit s'affichera dans une bulle contextuelle.

Un clic affichera une fenêtre modale de présentation du produit, qui redirigera vers un lien Amazon Associates. Le plan de bureau en bas à droite affichera des étoiles indiquant l'emplacement.

Les avis sur les produits sont totalement impartiaux et incluent l'avis honnête du PDG !

Vous pouvez également passer à une vue avec les lumières de la pièce éteintes en utilisant l'interrupteur en haut à gauche, et cliquer sur la flèche pour vous déplacer vers le bureau du PDG !

Nous gérons nos produits à l'aide de feuilles de calcul mais une d'un CMS, afin de faciliter l'édition et la modification.

La raison est la suivante :

« Les clients préfèrent une opération plus simple, n'est-ce pas ? Essayons l'intégration à l'aide de feuilles de calcul ! »

Je récupère des données d'une feuille de calcul et les charge dans une fenêtre modale, mais... ça fonctionne, mais...

« Ce site est tellement lent~ »

…………

L'API estPoint d'accès personnaliséJ'ai utilisé le code source de [nom de la source] comme base. La référence originale permettait uniquement de placer un repère à un endroit et d'afficher du texte au survol de la souris, mais j'y ai ajouté divers éléments originaux, comme l'affichage de fenêtres modales et le changement de vue.

C'est enfin terminé ! 🎉
J'étais tellement contente quand ce fut terminé que je n'arrêtais pas de consulter le site !

Partenaires Amazon

Il s'agit, comme vous le savez probablement déjà, d'un service d'affiliation pour les produits Amazon.

La procédure est la suivante.

• Le contenu du site web doit être récent (généralement mis à jour au cours des 60 derniers jours / le site doit être clairement opérationnel).
• Le nombre d'articles et d'éléments de contenu est de 10 ou plus.
• Dès que nous pourrons inclure des liens vers les produits, nous ajouterons une mention concernant l'utilisation du programme Amazon Associates à notre page de politique de confidentialité.
• Trois ventes sont requises dans les 180 jours suivant l'inscription (le même compte ou les membres d'une même famille ne sont pas autorisés).
• L'URL saisie est correcte et le site peut être vérifié.

Et ainsi de suite.

Une fois que vous aurez réalisé trois ventes en 180 jours, votre candidature sera examinée et, si elle est approuvée, vous pourrez percevoir des commissions en tant qu'associé.

Ils ne divulguent pas leurs critères d'évaluation, vous n'obtiendrez donc pas de réponse même si vous posez la question. Il semblerait que leur processus d'évaluation soit plus rigoureux que celui des autres sites d'affiliation !

Et j'ai réussi le programme Amazon Associates ! ㊗️
La principale source de revenus est le site web d'affiliation d'achats de ma mère et du président de l'entreprise.Et voilà comment tout a commencé ! 💥

Je sais que ce n'est pas une bonne idée que les membres de ma famille achètent ça, mais... Je suis désolée si cela entraîne la révocation de mon compte Amazon Associates m(_ _;)m

Les ventes progressent actuellement à un rythme très lent, mais les résumés et les taux de conversion sont plutôt intéressants !

Prochaine mission @2024

Je l'ai laissé de côté pendant un certain temps, ce qui a créé une accalmie dans mon travail. Puis, la tâche suivante est arrivée…

Exigences

• L'indexation des pages n'est-elle pas un peu laxiste ?
• Ajoutons aussi des espaces de bureaux.
• Tant qu'à faire, pourquoi ne pas passer à Next.js ?

Encore une demande déraisonnable.

Pile technologique

J'utilise les fichiers JS et CSS de Panellum dans un répertoire public, mais est-il plus courant de les importer via npm ?
Il semblerait qu'une bibliothèque pour Next.js ait été récemment publiée ; cela aurait grandement facilité l'implémentation si je l'avais eue à ma disposition pendant le processus.

J'ai également pris en compte l'accessibilité web et fait en sorte qu'il soit possible de l'utiliser avec un clavier.

Les fenêtres modales sont indexées par le référencement naturel de Google./item/{num}Le paramètre est ajouté et implémenté à l'aide des routes parallèles de Next.js afin qu'il soit comptabilisé comme une seule page.

Le passage du CSR à l'ISR permettra-t-il d'améliorer le référencement naturel ?

Les commandes se poursuivent.

Exigences

• Désolé, mais j'ai eu un problème de sécurité, j'ai donc supprimé l'espace bureau ! (Terminé : je l'avais ajouté, mais je l'ai mis sur liste noire.)
• C'est beaucoup trop lent... Le rendu est-il défectueux ? (Presque terminé)
• Puisqu'on a un LLM, pourquoi ne pas automatiser quelque chose ? Je veux intégrer un concept complètement différent ! (ImaKoko : Qu'est-ce que ça veut dire ?)
• Si vous ajoutez des produits...

Un site affilié expérimental en évolution discrèteLiberogic office green Et voilà !

J'adore les confettis sur l'écran d'accueil et l'illustration du PDG dans la fenêtre modale ; ça donne un petit côté boutique indépendante ! J'aime aussi ajouter ces petites modifications moi-même dès que j'ai un moment, en me disant : « Tiens, ça pourrait être sympa ! » Ça va sûrement continuer à évoluer !

Résumé?

Lorsque j'ai initialement développé cette application en JavaScript pur, j'ai implémenté la majeure partie moi-même. Cependant, au fil des modifications, l'imbrication des fonctions s'est complexifiée. Cela aurait peut-être été plus simple si l'IA avait été aussi avancée qu'elle l'est aujourd'hui lorsque je l'ai recréée avec Next.js, mais d'un autre côté, les connaissances se sont accumulées.«Nous utilisons l'IA en pleine connaissance de ses capacités.»Je me demande si ça fonctionne.

C'est l'un de mes sites préférés, mais qu'en pensez-vous ?

N'hésitez pas à jeter un coup d'œil et à visiter nos bureaux !