HTML5 로 iPhone App 만들기

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 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 diﬀerent 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

What is HTML5 ?

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

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
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
Mobile test result from http://www.callingallgeeks.org Tested with http://html5test.com

HTML5 Key Elements
for Mobile
• Ofﬂine Support : Web database , LocalStorage , App Cache

• Canvas

• Video

• GeoLocation

• Advanced Forms

• Workers

• Camera , Mic ( html-device )

iPhone Web Apps
• 초기 iPhone 에서 지원되던 방식
★ AppStore 활성후에도 계속적으로 업데이트 하면서 지원
★ App + Web Hybrid 형태의 앱
★ iPad 출시로 각 웹사이트가 Web App 의 기능을 수용중
★ DashCode 로 개발 가능

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

Web App vs. Native App
Web App Native App
• 아이폰/아이패드에 최적화된 웹사이트 • 아이폰/아이패드 전용 앱
• HTML , CSS , Javascript • Objective-C
• 기존에 사용하던 웹 개발환경 • XCode , Interface Builder
• 웹 표준 컨트롤 , iUI , JQTouch .. • Cocoa Touch
• 꼭 Mac 이 필요하지는 않음 • Mac 이 필요
• App 개발자 등록 필요없음 1)
• App 등록을 위해 년 $99
• 제한적인 디바이스 사용 - 카메라/마이크.. 2)
• 디바이스의 모든 기능을 활용
• 자체 결제시스템 구축필요 또는 광고 • App Store 를 통한 판매/수익 구조 & 광고
• 서버에서 바로바로 업데이트가능 • 업그레이드 할때마다 검수 ( 즉각대응 어려움 )
• Android / Blackberry 등으로도 바로 변환가능 • iPhone OS 전용 Application
• 실행속도가 빠르다
1) Phonegap 을 이용한 앱 개발하여 등록할때는 필요함
2) Phonegap , QuickConnect 를 통하여 카메라/연락처 정보등 사용가능 <= Hybrid App

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

<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">

• User Agent
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 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko)
Version/3.0 Mobile/1A543 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

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

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

• iPhone Browser 화면 & Viewport 알기
아이폰 : 320X480px 아이패드 : 768x1024px Viewport 예제
http://dev.xguru.net/webapp/viewport

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

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

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

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

Button Bar : 44px ( 아이폰만 )

• 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" />

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

* 자동으로 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 (‘전체화면 실행중’);
}

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

• 아이콘 지정하기
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png" />

iPhone : 57 x 57
iPad : 72 x 72
57x57 composed
72x72

• Startup 이미지 지정하기
<link rel="apple-touch-startup-image" href="/startup.png" />

iPhone : 320 x 460
iPad : 768 x 1004

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

• 팝업창 차단하기 - Link 열기 / Image 저장 & 복사하기
<style type=”text/css”>
* { -webkit-touch-callout: none; }
</style>

• 복사 막기
* { -webkit-user-select: none;}
.text { -webkit-user-select: text;}


</style>

• 폰트 크기 조정 막기
* { -webkit-text-size-adjust: none;}
</style>

• 현재 폰의 Orientation 알아내기
function checkOrientation() {
switch (window.orientation) {
case 0:
alert ('Orientation: Portrait');
break;
case 90:
case -90:
alert ('Orientation: Landscape');
break;
}
}

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

• 현재 Online 인지 알아보기
function checkOnline() {
if (navigator.onLine) {
alert ('There is a network connection');
} else {
alert ('There is no network connection');
}
}

• 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
<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>

• Usage
<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 & Sebastian</a></li>
<li class="group">C</li>
<li><a href="#CrowdedHouse">Crowded House</a></li>
</ul>

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

• 문서화가 잘되어 있음

• Form + AJAX 지원

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

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

• 아직 개발이 진행중

• http://webapp-net.com

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

• Usage
<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
<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>

• Usage
<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 #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, ﬂip, 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 #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 #4
• Geolocation iphone android blackberry

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 );

• Notiﬁcation iphone android blackberry

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

• Device
device.platform
iphone android blackberry

device.version
device.name
device.uuid

PhoneGap #5
• Accelerometer iphone android blackberry ( OS 4.7 이상 )

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 }

• Camera iphone android blackberry

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;
}

PhoneGap #6
• Contacts iphone android blackberry

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 );

• Magnetometer iphone

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

• Network Availability 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 iphone

navigator.audio.startAudioRecord();
android blackberry

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

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

• File I/O iphone android

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(); var fw = new FileWriter();
fr.readAsText(filename); fw.writeAsText(filename , data , bAppend);
fr.onload = function() P
alltext = fr.result;
}

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

HTML5 로 iPhone App 만들기

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML5 로 iPhone App 만들기

Similar to HTML5 로 iPhone App 만들기 (20)

More from 정혁 권

More from 정혁 권 (9)

HTML5 로 iPhone App 만들기