Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

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

  • Be the first to comment

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

×