UIWebView                     UI      IEDOTAPON Software@cocoponhttp://dotapon.sakura.ne.jp
Calqum            (iPhone)@cocopon           Osciroi           (Win, Mac)  :
Calqum2
★   UIWebView★   CSS★   Calqum2…
—   UIWebView    Interface Builder
Web
UITwitter   tweet
CSS
Twitter   G ail   Apple Store   Reeder
…
Safari on Mac / iOS SimulatorUIWebView             /           /         /           /Retina           /
Safari on MaciOS Simulator
Mac             SafariMobile SafariJavaScript
Web
iOS Simulator HTML
> Safari >
JavaScript  console.log
Mac                             MacJavaScript              Simulator                        Simulator
UIWebView
UIWebView- (void)loadRequest:(NSURLRequest *)request;           HTML- (void)loadHTMLString:(NSString *)string          bas...
UIWebViewUIWebViewDelegate- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigati...
HTML   …
viewport<meta name="viewport"                        content="initial-scale=1,user-scalable=no">initial-scaleuser-scalable
subviewPrivateAPI                           …JavaScript                 (=                    )<script type="text/javascri...
*{  -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         ...
text-shadow: X   Y                   ;                                  text-shadow: 0 1px 0text-shadow: 0 1px 0 #fff;    ...
-webkit-gradient(linear,        ,        ,   1,   2, ...)                   from ▸       color-stop(0.49) ▸       color-st...
-webkit-gradient(radial,      ,      ,     ,   ,                                                   1,   2, ...);          ...
Retina/*            */.table-section .indicator {   background: url(indicator.png) no-repeat center left;}@media only scre...
@-webkit-keyframes@-webkit-keyframes test {  0% {      -webkit-transform: translate(0, 0);      -webkit-transition-timing-...
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  ...
UIWebView                    UI                 DOTAPON Software                       @cocopon        http://dotapon.saku...
UIWebViewでつくるUI
UIWebViewでつくるUI
UIWebViewでつくるUI
UIWebViewでつくるUI
Upcoming SlideShare
Loading in …5
×

UIWebViewでつくるUI

17,578 views

Published on

発表時に使用したサンプルはこちらです。
http://www.dotapon.sakura.ne.jp/blog/?p=169

Published in: Technology, Education
2 Comments
56 Likes
Statistics
Notes
No Downloads
Views
Total views
17,578
On SlideShare
0
From Embeds
0
Number of Embeds
2,664
Actions
Shares
0
Downloads
139
Comments
2
Likes
56
Embeds 0
No embeds

No notes for slide

UIWebViewでつくるUI

  1. 1. UIWebView UI IEDOTAPON Software@cocoponhttp://dotapon.sakura.ne.jp
  2. 2. Calqum (iPhone)@cocopon Osciroi (Win, Mac) :
  3. 3. Calqum2
  4. 4. ★ UIWebView★ CSS★ Calqum2…
  5. 5. — UIWebView Interface Builder
  6. 6. Web
  7. 7. UITwitter tweet
  8. 8. CSS
  9. 9. Twitter G ail Apple Store Reeder
  10. 10.
  11. 11. Safari on Mac / iOS SimulatorUIWebView / / / /Retina /
  12. 12. Safari on MaciOS Simulator
  13. 13. Mac SafariMobile SafariJavaScript
  14. 14. Web
  15. 15. iOS Simulator HTML
  16. 16. > Safari >
  17. 17. JavaScript console.log
  18. 18. Mac MacJavaScript Simulator Simulator
  19. 19. UIWebView
  20. 20. UIWebView- (void)loadRequest:(NSURLRequest *)request; HTML- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
  21. 21. UIWebViewUIWebViewDelegate- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
  22. 22. HTML …
  23. 23. viewport<meta name="viewport" content="initial-scale=1,user-scalable=no">initial-scaleuser-scalable
  24. 24. subviewPrivateAPI …JavaScript (= )<script type="text/javascript"> document.body.ontouchmove = function(evt) { evt.preventDefault(); };</script>
  25. 25. *{ -webkit-touch-callout: none; -webkit-user-select: none;}-webkit-touch-callout-webkit-user-select
  26. 26. Retina
  27. 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. 28. text-shadow: X Y ; text-shadow: 0 1px 0text-shadow: 0 1px 0 #fff; rgba(0, 0, 0, 0.5);
  29. 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. 30. -webkit-gradient(radial, , , , , 1, 2, ...); (50%, 30%) ▸ 300-webkit-gradient(radial, 50% 30%, 0, 50% 30%, 300, from(#777), to(#333));
  31. 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. 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. 33. CSS (1) • border-radius • box-shadow • text-shadow • -webkit-gradient
  34. 34. CSS (2) iOShttp://graphicpeel.com/cssiosicons
  35. 35. Safari Dev Center
  36. 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. 37. UIWebView UI DOTAPON Software @cocopon http://dotapon.sakura.ne.jp

×