S’il y a bien un symbole qui s’est imposé dans notre monde physique grâce au numérique, c’est le QR Code. Descendant du code-barre, on le voit à toutes les sauces. Une fois pour transmettre le lien d’un site-web, une autre fois pour valider son Covid Safe Ticket, et j’en passe… Mais comment générer un QR Code ?
Un peu d’histoire…
Le QR Code n’est plus si jeune. En effet, j’apprends en rédigeant cet article, qu’il a été inventé en 1994. Son créateur, Masahiro Hara, travaillait à l’époque pour une entreprise japonaise qui l’a ensuite rendu public et sous licence libre en 1998 (1).
Pour ma part, je l’ai connu en début de formation et à l’époque, je n’étais pas friand de ce type de flash-code. En effet, à ce moment-là, les téléphones portables capables de scanner le QR Code devaient le faire via une application tierce, et qui n’était pas installée de base ou liée à l’appareil photo du smartphone. Comme c’est encore le cas pour moi et pour beaucoup d’autres.
Toujours est-il que le QR Code a fait du chemin depuis, puisqu’on ne sait plus maintenant s’en passer. Les institutions publiques et privées l’utilisent volontiers afin de gagner de la place notamment (un petit carré plutôt qu’une URL de 255 caractères facilite pas mal les choses). Mais c’est aussi une manière de s’authentifier, à l’instar des code-barres ; nous ne voyons pas en le regardant ce qui se cache derrière. (il faudra d’ailleurs y faire attention) Mais contrairement à son ancêtre, le QR Code peut contenir 4 296 caractères alphanumériques alors que le code-barre standard n’en proposait qu’une douzaine. Eh puis, s’il est pour encore beaucoup le symbole de la fracture numérique qui touche aujourd’hui nos sociétés, et qu’il faut dénoncer, il a le mérite d’être graphiquement très intéressant.
Générer un QR Code
Vous l’aurez compris, si je n’aime pas son utilisation à outrance et décrit comme « sexy » dans le milieu du marketing, l’invention a le mérite d’être respectée et utilisé de manière intelligente. Et comme vous et moi, nous allons encore le rencontrer, je vous propose ici de voir ensemble comment en générer.
La méthode la plus simple
La méthode la plus simple consisterait à se servir d’un service tiers. Il y en a vraiment beaucoup sur le web alors je vous propose celui que j’utilise : https://www.unitag.io/qrcode. Ce dernier vous permet de changer de couleur de fond, ou la couleur des pixels noirs par défaut. Même de rajouter un logo au centre (oui, le QR Code fonctionnera toujours).
Quand utiliser cette méthode ? Utilisez un service tiers si le temps vous manque et que vous ne devez pas générer une quantité astronomique de QR Code. Dans ce cas, les sites en lignes feront bien l’affaire. Testez-le toujours avant l’impression de votre projet, ou sa mise en ligne !
Utiliser une API
Une seconde méthode serait d’utiliser une API. Vous me direz que c’est aussi un service tiers, mais il va falloir (enfin !) mettre quand même un petit peu les mains dans le cambouis. Ici aussi, il en existe plusieurs, mais celle qui me vient tout de suite en tête est celle de Google. Elle est très simple, vous entrez l’URL de l’API avec la chaîne de caractère à crypter et Google fait le reste. Voilà un exemple :
https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20worldCette URL nous dit : affiche-moi un QR Code de 150 pixels sur 150 pixels et dont le message crypté est « Hello world« . Une fois construite, vous pouvez ensuite mettre cette URL dans une balise image que vous pouvez ensuite ajouter sur votre site-web ou dans votre emailing. L’avantage de passer par le code, c’est comme dh’abitude : vous allez pouvoir utiliser la chaîne de carctères à crypter de manière dynamique. Vous pouvez aussi générer plusieurs QR Code à travers cette méthode, si vous bouclez l’image dont il est question par exemple.
Méthode 3 : pure dev
La dernière méthode est de passer par un langage informatique pour générer votre QR Code. Le seul avantage est de ne pas passer par aucun un service tiers, ce qui peut gagner en ressources, mais surtout en indépendance dans l’élaboration de votre projet perso. Il faudra tout de même passer par une bibliothèque déjà construite. Je vous propose qrcode.js (2) qui vous permet lui aussi d’ajouter de la couleur. Voilà ce que cela donnerait :
See the Pen QR Code by Merlin (@lintermediaire) on CodePen.
Explication du code
La bibliothèque prend 4 paramètres. Sa couleur de fond, celle des pixels. Sa hauteur et sa largeur.
Moi, j’ai rendu le tout dynamique à travers l’HTML afin que l’utilisateur puisse uniquement changer l’HTML pour générer son code. Et j’ai trouvé utile et sémantique d’afficher ce que le QR Code signifie. Et voilà le résultat.
Conclusion
Le Qr Code est finalement une technologie assez poussée qui permet la transmission de données via le scan, ou une photo réalisée avec votre téléphone (ou webcam). Vous devrez donc l’utiliser avec des services tiers, une API ou une bibliothèque Javascript par exemple. Le résultat : un petit carré le plus souvent composé de deux couleurs, facile à intégrer sur vos pages ou vos imprimés. Mais attention : vérifiez toujours ce que le QR Code transmet, et surtout, prenons conscience que son utilisation n’est pas à la portée de tout le monde et qu’il serait judicieux à mon sens de l’utiliser plus sereinement que ce n’est le cas aujourd’hui.
Sources
(1) https://fr.wikipedia.org/wiki/Code_QR
Remaque : il existe plusieurs variations du QR Code ou de code-barre aujourd’hui et dont je ne parle pas ici bien sûr… Merci d’en tenir compte
(2) https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js
