Přejít k navigační liště

Zdroják » Webdesign » Generování QR kódu

Generování QR kódu

Články Webdesign

Co je to QR kód a jak ho okamžitě vytvořit pomocí jednoduchého online generátoru.

Nálepky:

Článek původně vyšel na autorově webu Je čas.

QR code (zkratka z Quick Response Code) se používá hlavně pro mobilní zařízení. Jedná se o způsob, jak do grafické podoby uložit menší množství dat. Vzniklý obrázek potom člověk vyfotí fotoaparátem svého mobilního zařízení a speciální aplikací z obrázku získá potřebná strojově čitelná data.

Hlavní výhoda QR kódu je pohodlné a rychlé získání textových dat. Místo pomalého opisování textu na klávesnici dokáže v jednotkách sekund obsah získat a rozluštit software.

Podoba kódu

qrcode

Na příkladu jednoduchého QR kódu stojí za povšimnutí velké čtverce ve třech rozích, které slouží jako orientační body pro snímací aplikaci. Zbytek jsou už potom data. Díky třem „kontrolním“ čtvercům v rozích jde určit orientaci kódu, takže není problém kód fotit klidně vzhůru nohama.

QR kód je také i tolerantní k chybám, může být v různých barvách nebo barevně invertován. I část výsledného obrázku může fungovat, což přináší možnost do obrázku například umístit logo nebo lidsky čitelný text.

qr-logo
Příklad invertovaného QR kódu s umístěním loga, který je stále funkční
  • Wikipedie: QR kód – obsahuje i detailní popis, jakým způsobem jsou data v obrázku uložena

Počet znaků

Pokud se do obrázku zakóduje víc dat (delší text), bude jeho struktura hustší, což ztíží i převod obrázku na data.

Některé starší čtečky mohou mít s delšími kódy (například nad 300 znaků) problémy. Většinou není nutné do kódu zapsat celé romány, ale používají se spíš odkazy na webovou stránku, kde je potom více obsahu.

Maximální počet znaků

Typ obsahu Znaků
číslice 7 089
písmena a číslice 4 296
8bitová data 2 953
kandži 1 817

Jiný QR kód s delším textem (cca 120 znaků).

qrcode-dlouhy

 

Funkce

Kromě textu nebo URL (adresy webové stránky) se dají do kódu zakódovat další funkce. Aplikace pro luštění QR kódu bývají chytré, takže se snaží automaticky zjistit typ dat.

  • Číslo 123456789 se bude nejspíš brát jako telefonní číslo.
  • Text www.jecas.cz bude potom pochopen jako odkaz na webovou stránku.
  • Text neco@example.com půjde pochopit jako e-mail.

Kromě automatického určování obsahu existuje způsob pro označení jiných funkcí.

Text

Obyčejný text:

Text

URL

Adresa nepotřebuje zvláštní zacházení. Automaticky ji rozpozná aplikace.

http://example.com

E-mail

Samotný e-mail je také možné rozpoznat automaticky.

Pro vytvoření obrázku, který připraví e-mailovou zprávu včetně předmětu nebo textu zprávy, se používá:

MATMSG:TO:mail@example.com;SUB:Předmět;BODY:Text;;

Telefon

Předvyplní číslo pro pohodlné zavolání. Stačí na začátek uvést tel. Aplikace pro snímání QR kódu mohou jako telefon pochopit i prosté uvedení čísla bez „tel:“ na začátku.

tel:420123456789

SMS

Pro připravení SMS zprávy se používá SMSTO na začátku obsahu. Za dvojtečku po telefonním čísle je možné uvést text zprávy.

SMSTO:420123456789:Text

Událost

Připraví událost.

BEGIN:VEVENT
SUMMARY:Název události
DTSTART:20180801T160000Z
DTEND:20180801T170000Z
END:VEVENT

Geolokace

Místo na mapě. Uvádí se v pořadí zeměpisná šířka, zeměpisná délka a nadmořská výška.

geo:50.0892069,14.4032178,400

Získat GPS určitého místa jde například pomocí stránky Mapy.cz:

  1. Stačí kliknout pravým tlačítkem na místo a vybrat Co je zde:
    mapy
  2. V pravém panelu dole si zkopírovat GPS souřadnice:
    mapy-gps

Připojení k Wi-Fi

Do QR kódu jde zachytit i přihlášení k Wi-Fi.

WIFI:T:WPA;S:Nazev;P:heslo;;

Kontakt vCard

Docela užitečná je možnost vytvořit celý kontakt. Dá se zadat jméno, příjmení, telefonní čísla, e-mail, adresa nebo webová stránka.

Může se hodit takový kód vytisknout na visitku, čímž si půjde pohodlně uložit kompletní kontakt. Jelikož vizitky nebývají velké, je kvůli dobré čitelnosti lepší uvést jen nejnutnější údaje (např. jen jeden telefon nebo e-mail a podobně).

Používá se běžný formát vCard:

BEGIN:VCARD
VERSION:2.1
FN:Jméno Příjmení
N:Příjmení;Jméno
TITLE:Funkce
TEL;CELL:222222222
TEL;WORK;VOICE:333333333
TEL;HOME;VOICE:111111111
EMAIL;HOME;INTERNET:osobni@example.com
EMAIL;WORK;INTERNET:pracovni@example.com
URL:http://example.com
ADR:;;Ulice;Město;;11100;Země
ORG:Organisace
END:VCARD
  • vCard – popis formátu na anglické Wikipedii

QR platba

Pro elegantní placení prostřednictvím mobilní bankovní aplikace je užitečné generovat QR platební kód. Člověk tak nemusí z papírové faktury opisovat číslo účtu, banky, sumu a podobně. Nebo tyto údaje kopírovat z e-mailu nebo webové stránky.

Kód pro platby může vypadat následovně:

SPD*1.0*ACC:CZ5608000000000002171532*AM:999*CC:CZK*DT:20150518*MSG:Zpráva*X-KS:1414*X-SS:1313*X-VS:1212
  • ACC – číslo účtu v IBAN formátu (pokud ho neznáte, jde spočítat)
  • AM – částka k platbě
  • CC – měna
  • DT – datum splatnosti
  • MSG – zpráva pro příjemce
  • X-KS – konstantní, X-SS – specifický a X-VS – variabilní symbol
  • QR platba – více informací o placení pomocí QR kódu

Bitcoin adresa

Pro zjednodušení platby v Bitcoinech se používají zpravidla dvě možnosti:

  • Prosté uvedení BTC adresy.
  • Řetězec bitcoin: před samotnou adresou.

Za bitcoinovou adresu jde i uvést částku za „amount=“ a zprávu/popis za „label=“:

bitcoin:{adresa}?amount={částka}&label={zpráva}

Nutná je pochopitelně mobilní bitcoinová peněženka, která může platbu na adresu zpracovat.

Aplikace

Pro čtení QR kódu je nutná nějaká aplikace, co z obrázku vydoluje text.

Pro luštění kódu na počítači bez používání webkamery je ideální nástroj:

  • ZXing Decoder – dekódování QR kódu z URL nebo nahraného obrázku v prohlížeči

Mobilní aplikace

Pro čtení kódu na mobilních telefonech s fotoaparátem si většinou stačí v obchodu vyhledat něco jako „QR code“.

Osobně mi vyhovuje aplikace od Seznamu QR čtečka, je k disposici pro tři nejrozšířenější platformy.

PHP, JS, API generátory

Pro automatické generování QR kódu existuje spousta hotových řešení.

Google Charts

Velice snadný způsob je použít Google Charts. Není potřeba se s ničím programovat, jen se na stránku vloží obrázek s URL, kam se zadá text, co má být v QR kódu.

Generování QR v JavaScriptu

Generovat QR code JavaScriptem je výhodné tím, že se nemusí čekat na odezvu ze strany serveru. Navíc se data pro vytvoření kódu nepřenášejí žádné třetí straně.

Výsledný QR kód je možné nakreslit do plátna <canvas> nebo sestavit pomocí obyčejné HTML tabulky.

  • qr-code – Nástroj pro generování QR kódu v JavaScriptu, ukázka

Existuje řada dalších hotových skriptů, bohužel si ale neporadí s diakritikou:

PHP generátor QR kódu

Pro PHP je dobře použitelná knihovna PHP QR Code, která bezpečně zvládá znaky s českou diakritikou.

  • PHP QR Code – open-source nástroj pro generování QR kódu v PHP

Poznámka: po stažení archivu a spuštění na localhostu nemusí u dema čestina správně fungovat kvůli absenci HTML <meta> značky:

<meta charset="utf-8">

Online generátor

Nakonec je možnost si QR kód jednorázově vygenerovat pomocí nějaké online služby.

Komentáře

Subscribe
Upozornit na
guest
2 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Jan Prachař

Tvrzení, že kromě tří čtverců v rozích jsou zbytek data, je velmi zjednodušené tvrzení.

QR kód obsahuje další pevně dané vzorce – pravidleně rozmístěné 5×5 „alignment“ čterečky, linie pravidleně střídajících se bílých a černých bitů, oblasti kódující formát dat (maska, úroveň schopnosti opravy chyb). Podrobněji například na tomto obrázku.

Aleš Roubíček

Mnohem lepší je pro potřeby QR kódu s vizitkou použít místo formátu vCard daleko datově úspornější meCard.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.