HTML5 로 iPhone App 만들기

- HTML5- JavaScript- Web App- jQTouch- PhoneGap

http://xguru.net권정혁

강사소개• 권정혁• 블로거 - http://xguru.net

• 트위터 - @xguru

순서• Web Applications ?

• HTML5 소개

• iPhone Web Application 만들기

• PhoneGap 을 이용하여 Native 앱 만들기

Web Apps

Web Applications

• 첫번째 iPhone 에는 App Store가 없었다

• 아직 많은 컨텐츠 들은 Web 에 있다

• 다양한 Web App > Native 툴 등장

★ PhoneGap , Titanium Mobile , QuickConnect , NimbleKit

• iAd 는 HTML5 기반

Web App 의 장점• 다양한 플랫폼 동시 지원

★ iPhone / iPad , Android , BlackBerry ..

★ 최신 웹브라우저가 있는 모든 디바이스

• 서버 기반 앱 : 빠른 업그레이드

• Web 개발자에게 친숙한 환경★ HTML5 , CSS , Javascript

★ 수많은 Javascript 라이브러리

HTML5

많은 회사들이 각 모바일 플랫폼용 네이티브 앱을 모두 만들기는 어렵다.

Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform

- Vic Gundotra, Google Engineering VP

왜 HTML5가 모바일에 중요한가 ?

What is HTML5 ?

•http://dev.xguru.net/html5HTML5 로 만든 슬라이드

HTML5 지원현황OS or Browser Version Score ( ? / 160 )

IE ( Win ) 6.0 11

IE ( Win ) 8.0.7600 19

Opera Mini 1.0 33

iPhone ( Mobile Safari ) 2.0 37

Android 1.6 39

iPhone ( Mobile Safari ) 2.1 - 2.2 45

Maemo microB 5 PR-1.1.1 55

Firefox Mobile 1.0 101

Firefox ( Win ) 3.6.3 101

Palm WebOS 1.4 107

iPhone ( Mobile Safari ) 3.0 110

iPhone ( Mobile Safari ) 3.1 113

Safari ( Mac ) 4.0.5 113

iPad ( Mobile Safari ) 3.2 115

Android 2.0 - 2.1 118

Android 2.2 122

iPhone ( Mobile Safari ) 4.0 Beta 4 133

Safari ( Mac ) 5.0 138

Chrome ( Win , Mac ) 6.0.422.0 142

Tested with http://html5test.comMobile test result from http://www.callingallgeeks.org

HTML5 Key Elementsfor Mobile

• Offline Support : Web database , LocalStorage , App Cache

• Canvas

• Video

• GeoLocation

• Advanced Forms

• Workers

• Camera , Mic ( html-device )

iPhone Web Apps

iPhone Web Apps

• 초기 iPhone 에서 지원되던 방식★ AppStore 활성후에도 계속적으로 업데이트 하면서 지원

★ App + Web Hybrid 형태의 앱

★ iPad 출시로 각 웹사이트가 Web App 의 기능을 수용중

★ DashCode 로 개발 가능

• Safari 에서 Add to Home Screen ★ 추가되면 거의 일반 App 처럼 사용가능

Web Apps on iPhone

Web App vs. Native AppWeb App Native App

• 아이폰/아이패드에 최적화된 웹사이트

• HTML , CSS , Javascript

• 기존에 사용하던 웹 개발환경

• 웹 표준 컨트롤 , iUI , JQTouch ..

• 꼭 Mac 이 필요하지는 않음

• App 개발자 등록 필요없음 1)

• 제한적인 디바이스 사용 - 카메라/마이크.. 2)

• 자체 결제시스템 구축필요 또는 광고

• 서버에서 바로바로 업데이트가능

• Android / Blackberry 등으로도 바로 변환가능

• 아이폰/아이패드 전용 앱

• Objective-C

• XCode , Interface Builder

• Cocoa Touch

• Mac 이 필요

• App 등록을 위해 년 $99

• 디바이스의 모든 기능을 활용

• App Store 를 통한 판매/수익 구조 & 광고

• 업그레이드 할때마다 검수 ( 즉각대응 어려움 )

• iPhone OS 전용 Application

• 실행속도가 빠르다

1) Phonegap 을 이용한 앱 개발하여 등록할때는 필요함 2) Phonegap , QuickConnect 를 통하여 카메라/연락처 정보등 사용가능 <= Hybrid App

iPhone Web App 만들기 #0• 독립된 CSS 만들기

• User Agent

<link media="only screen and (max-device-width: 480px)" href="mobile.css" type= "text/css" rel="stylesheet">

<link media="screen and (min-device-width: 481px)" href="standard.css" type="text/css" rel="stylesheet">

Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

javascript : if((navigator.userAgent.match(/iPhone/i)) { }

PHP : if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad') !== false) { }

iPhone Web App 만들기 #1• iPhone Browser 화면 & Viewport 알기

URL Bar : 60px ( 아이폰/아이패드 동일 )

Button Bar : 44px ( 아이폰만 )

보이는 영역 : 아이폰-320x356px 아이패드-768x944px

Status Bar : 20px ( 아이폰/아이패드 동일 )

아이폰 : 320X480px 아이패드 : 768x1024px

Viewport : 아무것도 지정안하면 980px (iphone) <meta name=‘viewport’ content=‘width=device-width; initial-scale=1.0; user-scalable=no’>

width=device-width : 디바이스 크기에 일치시킴 ( iPad ) initial-scale=1.0 : 기본 확대 1배율 user-scalable=no : 사용자 확대/축소 불가 maximum-scale / minimum-scale

Viewport 예제http://dev.xguru.net/webapp/viewport

iPhone Web App 만들기 #2• Safari UI ( URL Bar , Button Bar ) 없애기 / 변경하기

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

Safari UI 예제http://dev.xguru.net/webapp/safari_ui

* 홈스크린에 추가한 아이콘으로 실행했을때만 적용됨

* 자동으로 URL Bar 아래로 스크롤 하는 방법

window.addEventListener('load', function(){ setTimeout(scrollTo, 0, 0, 1); }, false);

* status-bar-style : default , black , black-translucent ( 반투명 )

* UI 없는 Fullscreen 모드인지 확인하기 if (navigator.standalone) { alert (‘전체화면 실행중’); }

iPhone Web App 만들기 #3• 아이콘 지정하기

iPhone : 57 x 57iPad : 72 x 72

• Startup 이미지 지정하기

iPhone : 320 x 460iPad : 768 x 1004

* Home 스크린에 추가한 경우에만 사용됨

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

57x5772x72

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

composed

iPhone Web App 만들기 #4• 팝업창 차단하기 - Link 열기 / Image 저장 & 복사하기

• 복사 막기

• 폰트 크기 조정 막기

<style type=”text/css”> * { -webkit-touch-callout: none; }</style>

<style type=”text/css”> * { -webkit-user-select: none;} .text { -webkit-user-select: text;}

<!-- 기본으로 모두 막고 필요한 아이템만 복사가능하게 한다 --></style>

<style type=”text/css”> * { -webkit-text-size-adjust: none;}</style>

iPhone Web App 만들기 #5• 현재 폰의 Orientation 알아내기

• 현재 Online 인지 알아보기

function checkOrientation() { switch (window.orientation) { case 0: alert ('Orientation: Portrait'); break; case 90: case -90: alert ('Orientation: Landscape'); break; }}

addEventListener("orientationchange", checkOrientation);checkOrientation();

function checkOnline() { if (navigator.onLine) { alert ('There is a network connection'); } else { alert ('There is no network connection'); }}

iPhone Web App 만들기 #6• iPhone style UI library

★ JQTouch - http://jqtouch.com/

★ iUI - http://code.google.com/p/iui/

★ WebApp.Net - http://webapp-net.com/

iUI #1• 계층적인 정보들 보여주는데 적합 ( UITableView )

• UI 기능이 풍부하지는 않음

• iPod Touch / 3G 폰에서도 쓸만한 성능

• 가장 초기에 나온 라이브러리 ( de facto standard )

• http://code.google.com/p/iui

iUI #2• Setup

• Usage

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>iUI Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;"/><link rel="apple-touch-icon" href="apple-touch-icon.png" /><style type="text/css" media="screen"> @import "iui.css";</style> <script type="application/x-javascript" src="iui.js"></script></head>

<body> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a class="button" href="#searchForm">Search</a> </div> <ul id="home" title="Music" selected="true"> <li><a href="#artists">Artists</a></li> <li><a href="#settings">Settings</a></li> <li><a href="stats.php">Stats</a></li> </ul> <ul id="artists" title="Artists"> <li class="group">B</li> <li><a href="#TheBeatles">The Beatles</a></li> <li><a href="#BelleSebastian">Belle &amp; Sebastian</a></li> <li class="group">C</li> <li><a href="#CrowdedHouse">Crowded House</a></li> </ul>

iUI #3• 사용화면

WebApp.Net #1• 작고 가벼운 라이브러리

• 문서화가 잘되어 있음

• Form + AJAX 지원

• 디버깅 + 멀티미디어 지원

• 컴포넌트 라이브러리 제공

• 아직 개발이 진행중

• http://webapp-net.com

WebApp.Net #2• Setup

• Usage

<head>...<link rel="stylesheet" href="WebApp/Design/Render.css" /> <script type="text/javascript" scr="WebApp/Action/Logic.js"> </script></head>

<div id="WebApp"> <div id="iHeader"> <a href="#" id="waBackButton">Back</a> <span id="waHeadTitle">WebApp Demo</span> </div> <div id="iGroup"> <div class="iLayer" id="waHome" title="Home"> <div class="iBlock"> <h1>Layer 1</h1> <p>This is the first layer. <a href="#_Next">Tap here</a></p> </div> </div> <div class="iLayer" id="waNext" title="Next Layer"> <div class="iBlock"> <h1>Layer 2</h1> <p>This is the second layer. <a href="#_Home">Tap here</a></p> </div> </div> </div> </div>

WebApp.Net #3• 사용화면

JQTouch #1• jQuery 에 기반한 라이브러리, 가장 강력하고 성능우수

• Native 웹킷 애니메이션 지원

• CallBack Events , Theme 지원 , Swipe Detection

• 사용자 Extension 지원

• http://jqtouch.com

jQTouch #2• Setup

• Usage

<head>...<style type="text/css" media="screen"> @import "jqtouch.min.css"; </style><style type="text/css" media="screen"> @import "themes/apple/theme.min.css"; </style><script src="jquery.1.3.2.min.js" type="text/javascript"> </script> <script src="jqtouch.min.js" type="text/javascript"> </script><script type="text/javascript" > $.jQTouch();</script></head>

<body> <div id="home"> <div class="toolbar"><h1>My app</h1></div> <ul class="rounded"> <li><a href="#foo">Foo</a></li> <li><a href="#bar">Bar</a></li> </ul> </div> <div id="foo"> <div class="toolbar"> <h1>Foo</h1> <a href="#" class="back">Back</a> </div> Foo 페이지 내용 </div></body>

jQTouch #3

jQTouch #4• 초기화 옵션

<head>...<script type="text/javascript" > $.jQTouch();</script></head>

$.jqTouch({ icon: "path/to/apple-touch-icon.png", startupScreen: "path/to/startup-image.png", statusBar: "default|black|black-translucent", addGlossToIcon: true|false, fullScreen: true|false, fixedViewport: true|false, preloadImages: ["img1.png","img2.png", ...], ...});

jQTouch #5• 8 가지 애니메이션 지원

★ slide, slideup, dissolve, fade, flip, pop, swap, cube

• 위의 애니메이션 이름을 class 로 사용

★ <a href=”#foo” class=”dissolve”>Foo</a>

• 기본값은 slide

• Back 버튼을 누르면 반대쪽 애니메이션이 자동수행

<div id="home"> <div class="toolbar"><h1>My app</h1></div> <ul class="rounded"> <li><a href="#foo" class="dissolve">Foo</a></li> <li><a href="#bar">Bar</a></li> </ul> </div>

jQTouch #6• Theme 지원 : 기본 jqt & apple 2가지

PhoneGap

PhoneGap #1• Cross Platform Mobile Application Framework

• HTML+Javascript 로 된 Web App 를 담는 Container

• Web App 를 담은 Native App 으로 만들어 주는 툴

• 기존 Web App 에서 불가능했던 Device 기능들을 Javascript 를 통해 접근하도록 가능하게 함

PhoneGap #2• http://www.phonegap.com/download

http://github.com/phonegap/phonegap-iphone

• 현재 버전 0.9 - 앱스토어에 등록가능한 버전

• make 후 PhoneGapLibInstaller.pkg 실행하여 설치

PhoneGap #3

PhoneGap #4• Geolocation

• Notification

• Device

navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude;}, fail, options);

long navigator.geolocation.watchPosition( success , fail , options );navigator.geolocation.clearWatch( long watchId );

navigator.notification.alert ( message , title , button )navigator.notification.beep ( times )navigator.notification.vibrate ( duration )navigator.notification.loadingStart ( options ) navigator.notification.loadingStop ();

device.platformdevice.versiondevice.namedevice.uuid

iphone android blackberry

iphone android blackberry

iphone android blackberry

iphone only

PhoneGap #5• Accelerometer

• Camera

long navigator.accelerometer.watchAcceleration( success , fail , options );navigator.accelerometer.clearWatch( long watchId );

successFunction(a) { var x = a.x ; var y = a.y ; var z = a.z }

iphone android

navigator.camera.getPicture( success , fail , options );

<img style="width:60px;height:60px" id="test_img" src="" /> <button onclick="getPicture()">From Camera</button><button onclick="getPicture(PictureSourceType.PHOTO_LIBRARY)">From Photo Library</button>

function PictureSourceType() {}; PictureSourceType.PHOTO_LIBRARY = 0; PictureSourceType.CAMERA = 1;function getPicture(sourceType) {     var options = { quality: 10 };     if (sourceType != undefined) { options["sourceType"] = sourceType; }     navigator.camera.getPicture(getPicture_Success, null, options);}; function getPicture_Success(img) {     alert("getpic success");     document.getElementById("test_img").src = "data:image/jpeg;base64," + img;}

iphone android blackberry

blackberry ( OS 4.7 이상 )

PhoneGap #6• Contacts

• Magnetometer

• Network Availability

navigator.contact.contactsCount ( function(num) { alert(num); } , fail );navigator.contact.getAllContacts( function(contactsArray) {} , fail , options );navigator.contact.chooseContact ( function(contact) {} , options );navigator.contact.displayContact(contactsArray[x].recordID , fail, options );navigator.contact.removeContact(contactsArray[x].recordID , succ , fail );var nc = { 'firstName':'정혁', 'lastName' : '권', 'phoneNumber': '555-5555' };navigator.contact.newContact(nc , succ );

iphone android blackberry

iphone

navigator.compass.watchHeading ( function(a) { var compass_magnetic = a.magneticHeading; var compass_true = a.trueHeading; var compass_accuracy = a.headingAccuracy; } , fail , options );

iphone blackberry

navigator.network.isReachable(“www.google.com”, reachable_callback);

function reachable_callback(rc) { var internetConnection = rc.internetConnectionStatus; var localWiFiConnection= rc.localWifiConnectionStatus;// NetworkStatus.NOT_REACHABLE = 0;// NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK = 1;// NetworkStatus.REACHABLE_VIA_WIFI_NETWORK = 2;}

PhoneGap #7• Audio Record / Play

• File I/O

navigator.audio.startAudioRecord();navigator.audio.stopAudioRecord();navigator.audio.play();navigator.audio.stop();

new Media(‘beep.wav’).play({numberOfLoops:99}); //.wav , .aiff , .mp3

iphone android blackberry

navigator.fileMgr.testFileExists ( filename , succ , fail );navigator.fileMgr.testDirectoryExists ( dirname , succ , fail );navigator.fileMgr.createDirectory ( dirname , succ , fail );navigator.fileMgr.deleteDirectory ( dirname , succ , fail );navigator.fileMgr.deleteFile ( filename , succ , fail );navigator.fileMgr.getFreeDiskSpace ( succ , fail ) ;navigator.fileMgr.addFileWriter ( filename , fileWriter );navigator.fileMgr.addFileReader ( filename , fileReader );

var fr = new FileReader();fr.readAsText(filename);fr.onload = function() P alltext = fr.result;}

var fw = new FileWriter();fw.writeAsText(filename , data , bAppend);

iphone android

iPhone Web Limits

• GIF , PNG , TIFF 이미지 : 최대 3메가 픽셀 width * height <= 3 * 1024 * 1024

• JPG : 최대 32메가 픽셀 2 메가 픽셀 이상일 경우 자동 1/16 서브샘플링

• 모든 리소스 파일은 10MB 이하 ( 스트리밍제외)

• 자바스크립트 실행은 탑 레벨에서 최대 10초

• 열수 있는 HTML 문서의 수는 최대 8개

• Local Storage : 5 MB 이하

Web App to Native App Frameworks

• PhoneGap ★ http://www.phonegap.com/★ iPhone, Android,Blackberry,Symbian,Palm,Windows Mobile(제한적)

• Titanium Mobile ★ http://www.appcelerator.com/★ iPhone, Android

• QuickConnect ★ http://quickconnectfamily.org/★ iPhone, Android,Blackberry

• NimbleKit★ http://www.nimblekit.com/★ iPhone

iPhone Web App 개발• HTML5

★ Web SQL , Local Storage , App Cache , Canvas , Video , Forms , GeoLocation

★ CSS UI Effects , 점점 다양해지는 스펙들 ( html-device )

• UI

★ iUI , jQTouch , WebApp.Net

★ 각종 Javascript 기반 UI 라이브러리 , CSS3 를 이용한 다양한 효과들

• App Packaging & Device Integration

★ PhoneGap , NimbleKit , Titanium Mobile ..

고맙습니다!email : guru @ xguru.net twitter : @xguru

References• http://code.google.com/p/html5-slides/

• http://rakaz.nl/2009/09/iphone-webapps-101-detecting-essential-information-about-your-iphone.html

• http://developer.apple.com/safari/library/documentation/appleapplications/Reference/SafariWebContent/

• http://building-iphone-apps.labs.oreilly.com/

• http://www.phonegap.com/

• http://quickconnectfamily.org/

• http://www.appcelerator.com/products/titanium-mobile-application-development/

• http://www.slideshare.net/akosma/webtuesday-mobile-web-applications-framework-overview