HTML5: píšeme aplikaci pro iPad

K psaní nativních aplikací pro tento populární tablet od Apple potřebujete vývojové prostředí pro jazyk Objective-C a framework Cocoa. Pro některé druhy aplikací si ale vystačíme s možnostmi, které nabízí HTML5/CSS/JS. V článku si ukážeme, jak zařídit, aby i takové aplikace vypadaly „jako nativní“.

qrcode

K článku je ukázka

K článku není k dispozici zdrojový kód

Tento návod můžete, až na drobné odlišnosti, použít i pro psaní HTML aplikací pro iPhone.

Společnost Apple se k vývojářům aplikací pro jejich iOS chová poměrně nesmlouvavě a nekompromisně určuje, jak mají aplikace vypadat, jak se mají chovat a v jakém jazyce mají být napsané. Ponechme stranou polemiku nad tímto přístupem, namísto toho se podívejme, jaké máme možnosti.

Můžeme využít oficiálních nástrojů od Apple či nadstaveb nad těmito nástroji a psát aplikace v Objective-C či v nějaké nadstavbě. Bohužel nelze použít např. Adobe AIR (resp. lze, ale s mezikrokem, při němž je výsledek kompilován do nativního kódu). Naštěstí pro nás ale můžeme použít k vývoji i HTML5/JS/CSS. Prohlížeč Safari v systému iOS umožňuje vytvořit ze stránky „zástupce“ na ploše, který se pak chová jako ostatní aplikace v tomto systému.

Pokud si to zkusíte, zjistíte, že tento postup má jednu nevýhodu – po otevření uvidíte zase staré známé okno prohlížeče, a v něm příslušnou stránku. Taková „aplikace“ tak bude jen jedno z oken prohlížeče Safari.



Aby to bylo jako aplikace…

Pomocí proprietárních metainformací v hlavičce HTML souboru můžeme říct Safari, aby nezobrazovalo svoje vlastní ovládací prvky, a místo toho zobrazilo stránku přes celý displej. Slouží nám k tomu hlavička apple-mobile-web-app-capable:

<meta name="apple-mobile-web-app-capable" content=yes >

Pomocí další hlavičky určíme, jak se má zobrazit horní stavový pruh:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Na výběr máme z možností „default“, „black“ a „black-translucent“.

Webovou stránku je možné libovolně zvětšovat a zmenšovat; takové chování není v aplikaci žádoucí a zamezíme mu pomocí následujícího meta tagu:

<meta name="viewport" content="user-scalable=no, width=device-width">

Na stránkách Apple naleznete seznam specifických META hlaviček.



Scrollování

Běžnou webovou stránku lze na iPadu „tahat“ nahoru a dolů, přičemž nad, resp. pod ní se objevuje černá plocha. I tomuto chování je rozumné předejít. Vytvořte si obsluhu události ontouchmove, která zabrání takovému chování:

document.ontouchmove = function(e){e.preventDefault();}

Ikona a úvodní obrázek

Pokud budeme „připichovat“ zástupce na plochu, můžeme snadno určit obrázek, který bude použit. Musí mít rozměry 114 krát 114 pixelů (pro iPhone je to 57) a prohlížeči řekneme, kde je umístěn, pomocí link tagu:

<link rel="apple-touch-icon" href="./apple-touch-icon.png">

Podobně můžeme určit obrázek, který se zobrazí uživateli před samotným spuštěním (tzv. „splash screen“):

<link rel="apple-touch-startup-image" href="./apple-touch-startup-image.png">

Tento obrázek musí mít rozměry 1004 pixelů na výšku krát 768 pixelů na šířku (uvažujeme iPad v pozici portrait, tedy na výšku).

Na výšku / na šířku

Pomocí parametru orientation lze v CSS určit specifická pravidla podle toho, jestli je iPad na výšku (portrait) nebo na šířku (landscape) – viz zprávička.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

Můžeme rovněž ošetřit události otočení (onorientationchange) a zjistit orientaci zařízení z vlastnosti window.orientation. Ta nabývá hodnot 0, 90, 180 a -90.

Ukažme si šablonu takové aplikace (volně k použití):

<!DOCTYPE html>
<html>
<head>
 <meta charset=utf-8>
 <title>Zdroják - Aplikace pro iPad</title>

 <!-- Odstraníme titulkový pruh -->
 <meta name="apple-mobile-web-app-capable" content=yes >

 <!-- Změníme status bar -->
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

 <!-- Zamezíme změnám velikosti -->
 <meta name="viewport" content="user-scalable=no, width=device-width">

 <!-- Splash screen - 1004x768 -->
 <link rel="apple-touch-startup-image" href="./apple-touch-startup-image.png">

 <!-- Ikona 114x114 na plochu -->
 <link rel="apple-touch-icon" href="./apple-touch-icon.png">

 <style>
   html {-webkit-text-size-adjust:auto;}
   body {
     margin: 0px ;
     padding: 0px ;
   }

 </style>

 <script>
  function onload() {
    document.ontouchmove = function(e){e.preventDefault();}
  }
 </script>
</head>

<body onload="onload()">


  <div id="container">
  <h1>Pokusná aplikace</h1>
    <img src="./apple-touch-icon.png">
  </div>

</body>

</html> 



Co to umí?

V zásadě můžete použít vše, co jste se naučili v našem seriálu o HTML5. Můžete použít lokální úložiště, můžete využít geolokaci i aplikační cache. Prohlížeč je postaven na WebKitu a umí téměř všechny „vychytávky“.

Tip: Téměř na všech mobilních zařízeních vám budou fungovat URI se schématem „tel:“ a „sms:“ – viz RFC3966. Lze je využít jako cílové adresy u odkazu, podobně jako mailto: – tedy např. <a href="sms:+420123456789">Pošlete SMSku autorovi</a>.

Samosebou můžete využít i obsluhy dotyků a gest – událostí touch* a gesture*. Podrobněji se rozepisuje opět vývojářský manuál Apple – Handling events. Pravděpodobně bude ale pohodlnější využít některou z existujících knihoven, za mnohé jmenujme jQuery Mobile.

Další možnosti získáte využitím nástrojů jako je PhoneGap – knihoven, které umožňují pracovat s dalším vybavením mobilních zařízení (akcelerometr…) Jejich použití jde však nad rámec tohoto článku.

Pokud bude zájem, ukážeme si v příštím pokračování vytvoření komplexnější aplikace pro iPad s použitím webových technologií.

Doporučené odkazy



Autor děkuje nákupní galerii MALL.CZ za laskavé zapůjčení Apple iPad

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 23

Přehled komentářů

pas Adobe AIR
Lawondyss Těším se na pokračování
Jasan Re: Těším se na pokračování
kocour Re: HTML5: píšeme aplikaci pro iPad
David Ondřich MonoTouch
Mono Re: MonoTouch
josefrichter hezkej článek
Martin Malý Re: hezkej článek
josefrichter Re: hezkej článek
pas Re: hezkej článek
error414- Re: hezkej článek
pas Re: hezkej článek
josefrichter Re: hezkej článek
pas Re: hezkej článek
pas Re: hezkej článek
Michal Illich App store? Zdroják viditelný?
josefrichter Re: App store? Zdroják viditelný?
M. Re: App store? Zdroják viditelný?
josefrichter Re: App store? Zdroják viditelný?
jezovec Re: App store? Zdroják viditelný?
Jizzy Programování na iPad2
xslide Lze udělat jednoduchý odkaz na odeslání SMS?
František CHYBA - Načítání v novém okně
Zdroj: https://www.zdrojak.cz/?p=3428