UIWebViewでつくるUI

UIWebView UI IEDOTAPON Software@cocoponhttp://dotapon.sakura.ne.jp

Calqum (iPhone)@cocopon Osciroi (Win, Mac) :

Calqum2

★ UIWebView★ CSS★ Calqum2…

— UIWebView Interface Builder

UITwitter tweet

Twitter G ail Apple Store Reeder

Safari on Mac / iOS SimulatorUIWebView / / / /Retina /

Safari on MaciOS Simulator

Mac SafariMobile SafariJavaScript

iOS Simulator HTML

> Safari >

JavaScript console.log

Mac MacJavaScript Simulator Simulator

UIWebView

UIWebView- (void)loadRequest:(NSURLRequest *)request; HTML- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;

UIWebViewUIWebViewDelegate- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

HTML …

viewport<meta name="viewport" content="initial-scale=1,user-scalable=no">initial-scaleuser-scalable

subviewPrivateAPI …JavaScript (= )<script type="text/javascript"> document.body.ontouchmove = function(evt) { evt.preventDefault(); };</script>

*{ -webkit-touch-callout: none; -webkit-user-select: none;}-webkit-touch-callout-webkit-user-select

Retina

box-shadow: (inset: )X Y ;box-shadow: 0 1px 3px box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); rgba(0, 0, 0, 0.5);

text-shadow: X Y ; text-shadow: 0 1px 0text-shadow: 0 1px 0 #fff; rgba(0, 0, 0, 0.5);

-webkit-gradient(linear, , , 1, 2, ...) from ▸ color-stop(0.49) ▸ color-stop(0.50) ▸ to ▸-webkit-gradient(linear, left top, left bottom, from(#a9afbf), color-stop(0.49, #6c768e), color-stop(0.5, #444f6e), to(#59637e))

-webkit-gradient(radial, , , , , 1, 2, ...); (50%, 30%) ▸ 300-webkit-gradient(radial, 50% 30%, 0, 50% 30%, 300, from(#777), to(#333));

Retina/* */.table-section .indicator { background: url(indicator.png) no-repeat center left;}@media only screen and (-webkit-min-device-pixel-ratio: 2) { /* Retina */ .table-section .indicator { background-image: url(indicator@2x.png); -webkit-background-size: 8px 12px; }}

@-webkit-keyframes@-webkit-keyframes test { 0% { -webkit-transform: translate(0, 0); -webkit-transition-timing-function: ease-out; } 50% { -webkit-transform: translate(0, -50px) rotate(5deg); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: translate(0, 0); }}-webkit-animation-name#app-logo { -webkit-animation-name: test; -webkit-animation-delay: 10s; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1;}

CSS (1) • border-radius • box-shadow • text-shadow • -webkit-gradient

CSS (2) iOShttp://graphicpeel.com/cssiosicons

Safari Dev Center

Safari Dev Center Safari Web Content Guide Web Safari HTML Reference HTML meta Safari CSS Reference CSS Safari CSS Visual Effects Guidehttp://developer.apple.com/devcenter/safari/index.action

UIWebView UI DOTAPON Software @cocopon http://dotapon.sakura.ne.jp

http://www.dotapon.sakura.ne.jp	1963
https://twitter.com	44
http://paper.li	27
http://us-w1.rockmelt.com	3
http://a0.twimg.com	2
http://s.deeeki.com	2
http://tweetedtimes.com	1

UIWebViewでつくるUI

by cocopon on Dec 10, 2011

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 2,042

Statistics

UIWebViewでつくるUI Presentation Transcript