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í“.
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
- Použitelné META tagy
- How to write native apps in HTML
- Web App creating guide
- Apple URL scheme reference
Martin Malý
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.
„Apple určuje, v jakém jazyce mají být napsané … Bohužel nelze použít např. Adobe AIR.“
Tohle slavné omezení přece platilo pouhých pět měsíců od loňského jara do podzimu a pak bylo zrušeno. „Packager for iPhone“ je součástí Creative Suite 5, i když pro iPad se reálně bude moct používat až nová verze v chystané CS 5.5, která už snad bude brzo.
Technicky vzato to není přímo AIR, protože se nejedná o runtimovou architekturu, ale kompilaci do nativního kódu (to je jediný zbývající požadavek Applu), ale z hlediska vývojáře to vyjde nastejno, jako když dělá AIRovku pro Android.
Jsem PHP programátor a k jiným jazykům jsem jen vzdáleně přičichl. Kolikrát mě i napadlo, že bych spáchal nějaký svůj nápad pro iPhone potažmo iPad, ale vždy mě odradilo samotné Apple a jeho příkazy, zákazy a nákazy.
Ovšem zjištění, že lze připravit aplikaci i v HTML je prostě paráda. Určitě se těším na další pokračování.
Zdravim, mel byste se zajem spolupracovat na vyvoji apple aplikaci? pri pripadnem zajmu mi napiste na jasanskyml@prolux.cz
dekuji a preji hezky den
velmi inspirativni clanek… diky a urcite se taky primlouvam za dalsi dil
OT: Trochu si přihřeju naši polívčičku (i když se to pravověrným asi líbit nebude), ale za podívání taky stojí MonoTouch. Sám se už dlouho chystám, že se mu podívám na zoubky, ale jelikož stále nemám ten hardware, tak je moje motivace poměrně slabá. Když to zčásti napraví další článek, budu jen rád. :-)
MonoTouch je určitě zajímavý projekt (sám jsem přemýšlel, že bych se doučil C# – z Javy to není takový problém), jen mi vadí ta cena…
Taky bych se přimluvil za pokračování, například na téma html5 offline manifest. Taky by mě zajímalo, jestli nějaká knihovna má nativní čudlíky a ostatní prvky z iOS (jQ Mobile tuším ne, ta je univerzál) – <flame>nechcem z toho mít flash nebo android, že :-)</flame>
Přesně nad offline HTML5 jsem uvažoval, že bych ukázal jak vypadá OffTheRoad na iPadu. Jen ten design, resp. knihovnu budu muset pohledat, zatím nevím o ničem. Nějaké tipy? :)
Trochu jsem zapátral v paměti a na googlu a zajímavě vypadají třeba http://www.jqtouch.com/ a http://iphone.hohli.com/ a z těch komplexnějších frameworků asi Sencha Touch http://www.sencha.com/products/touch/ Našel jsem i pár dalších s rozličnou mírou důvěryhodnosti :-)
Někde na netu se taky válel článek/tutorial o offline tetrisu pro iPhone, udělaným právě pomocí html5 offline.
Jaký by to mělo smysl, používat ve webové aplikaci nativní čudlíky konkrétního OS? Buď chci aplikaci šít na míru konkrétnímu OS, tzn. učit se jeho čudlíky, pak dává smysl dělat ji v nativním SDK. Nebo zvolím crossplatformní řešení jako HTML5/jQ nebo AIR, které holt mají i crossplatformní čudlíky…
html a jquery nepouziva nativni cudliky?
Ne, imituje je (tedy předpokládám, že není řeč o primitivních prvcích jako jsou check boxy v HTML).
Smysl je ten, že mi třeba nejde o multiplatformnost. Chci jednoduchou aplikaci pro iOS, pro kterou je Obj-C SDK třeba zbytečnej overkill.
Ostatně i téma článku je „píšeme aplikaci pro IPAD“ – tj. ne „pro iOS“ ani „pro mobilní dotyková zařízení“ ale pro konkrétní jeden přístroj.
V tom případě by správná cesta byla, aby někdo přišel s frameworkem nad nativním SDK, který by místo Obj-C používal JavaScript a vůbec maximálně využíval stávající znalosti webařů (není takový?). Pořád by to ale byla normální aplikace, šířená přes app store. Webové aplikace jsou oddělený svět – žádný app store, žádná cenzura… a na oplátku žádné nativní API. Což mi přijde pochopitelné.
Tak si rovnou i odpovím – takovým nástrojem je Titanium Appcelerator, ten adresuje přímo nativní UI komponenty (narozdíl od PhoneGapu). A nebo je také možné UI vytvořit v HTML, ale nedovedu si dost dobře představit kombinování obojího.
Z článku mi není jasné:
1. Lze takovouhle html appku pak přihlásit do App Store?
2. Je možné v takovém případě nějak schovat zdroják – tedy neukazovat html a js kódy, ale nějak to zkompilovat či zakryptovat?
dvakrát ne :-)
Proč ne? Pokud to zavřeš třeba tím PhoneGapem, neměl by to být problém.
No ale ten PhoneGap je něco jinýho, ne? To vytváří nativní Obj-C appku, s tím že některý její kusy jsi napsal v html+css+js. To o čem pojednává článek je v podstatě vytvoření klasické webové appky, přístupné z prohlížeče, akorát trochu víc laděné pro iPad.
Obávám se že by to mohl být dost problém. Pokud uděláte něco komplexnějšího, třeba s použitím web databáze, častěji používaným ajaxem a animacemi, tak to prostě to UIWebView (to je ta nativní komponenta iOs SDK která to ukazuje) neutáhne. Mám s tím osobní zkušenost, a byla to katastrofa.
Zdravim, chtěl bych se zeptat na názor ohledně programování na iPad 2 + keyboard. Jde na iPad 2 dostat xCode 4?? Dá se na něm vůbec programovat??
Zdravím,
chtěl bych napsat jednoduchou aplikaci v HTMl na ovládání alarmu pro iPhone a chci se zeptat na jednu věc.
Dokážu nějak udělat, aby po kliknutí na odkaz iPhone odeslal SMS na přednastavené číslo s přednastaveným textem.
Po kliknutí by tedy iPhone odeslal SMS na 777 666 555 s textem „zapni alarm“. Je to možné?
Popř. jak na to?
Díky
Dobrý den,
článek super, moc mi pomohl. Ale mám dva problémy.
1. Jakmile kliknu na jakýkoliv odkaz A HREF v této aplikaci, vždycky se mi otevře už normální prohlížeč Safari i se stavovým řádkem a adresou, což nechci.
2. Prohlížeč, zřejmě neuchovává $_SESSION, pomocí session ovládám přihlášení na appce, vždycky mě můj vlastni kód vykopne pro nepřihlášení nebo chybné přihlášení :D Je zde nějaké nastavení session a cookies v Safari?
Předem děkuji za osvětu ! František