HTML5 로 iPhone App 만들기
Upcoming SlideShare
Loading in...5
×
 

HTML5 로 iPhone App 만들기

on

  • 1,454 views

2010.06.14

2010.06.14

HTML5 를 이용하여 iPhone / iPad 용 모바일 웹 어플리케이션을 만드는 방법을 알아봅니다.

Statistics

Views

Total Views
1,454
Views on SlideShare
1,454
Embed Views
0

Actions

Likes
5
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 로 iPhone App 만들기 HTML5 로 iPhone App 만들기 Presentation Transcript

    • 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
    • 왜 HTML5가 모바일에 중요한가 ? 많은 회사들이 각 모바일 플랫폼용 네이티브 앱을 모두 만들기는 어렵다.Even Google was not rich enough to support all ofthe different mobile platforms from Apple’s AppStoreto those of the BlackBerry, Windows Mobile, Androidand 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 11IE ( Win ) 8.0.7600 19Opera Mini 1.0 33iPhone ( Mobile Safari ) 2.0 37Android 1.6 39iPhone ( Mobile Safari ) 2.1 - 2.2 45Maemo microB 5 PR-1.1.1 55Firefox Mobile 1.0 101Firefox ( Win ) 3.6.3 101Palm WebOS 1.4 107iPhone ( Mobile Safari ) 3.0 110iPhone ( Mobile Safari ) 3.1 113Safari ( Mac ) 4.0.5 113iPad ( Mobile Safari ) 3.2 115Android 2.0 - 2.1 118Android 2.2 122iPhone ( Mobile Safari ) 4.0 Beta 4 133Safari ( Mac ) 5.0 138Chrome ( Win , Mac ) 6.0.422.0 142Mobile test result from http://www.callingallgeeks.org Tested with http://html5test.com
    • HTML5 Key Elements for 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 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 AgentMozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko)Version/3.0 Mobile/4A93 Safari/419.3Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko)Version/3.0 Mobile/1A543 Safari/419.3Mozilla/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 Web App 만들기 #1• 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 ( 아이폰만 )
    • 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" /> * 홈스크린에 추가한 아이콘으로 실행했을때만 적용됨 * 자동으로 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
    • iPhone Web App 만들기 #3• 아이콘 지정하기 <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 스크린에 추가한 경우에만 사용됨
    • 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 알아내기 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 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 <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 &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 <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 #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 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 );• Notification 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 blackberrynavigator.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 iphonenavigator.compass.watchHeading ( function(a) { var compass_magnetic = a.magneticHeading; var compass_true = a.trueHeading; var compass_accuracy = a.headingAccuracy; } , fail , options );• Network Availability iphone blackberrynavigator.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 iphonenavigator.audio.startAudioRecord(); android blackberrynavigator.audio.stopAudioRecord();navigator.audio.play();navigator.audio.stop();new Media(‘beep.wav’).play({numberOfLoops:99}); //.wav , .aiff , .mp3• File I/O iphone androidnavigator.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