UIWebViewでつくるUI

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

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

3. Calqum2

4. ★ UIWebView★ CSS★ Calqum2…

5. — UIWebView Interface Builder

6. Web

7. UITwitter tweet

8. CSS

9. Twitter G ail Apple Store Reeder

10. …

11. Safari on Mac / iOS SimulatorUIWebView / / / /Retina /

12. Safari on MaciOS Simulator

13. Mac SafariMobile SafariJavaScript

14. Web

15. iOS Simulator HTML

16. > Safari >

17. JavaScript console.log

18. Mac MacJavaScript Simulator Simulator

19. UIWebView

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

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

22. HTML …

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

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

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

26. Retina

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

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

29. -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))

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

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

32. @-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;}

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

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

35. Safari Dev Center

36. 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

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

UIWebViewでつくるUI

cocopon

Transcript