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

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

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

3. Calqum2

4. ★ UIWebView
★ CSS
★ Calqum2…

5. — UIWebView
Interface Builder

6. Web

7. UI
Twitter tweet

8. CSS

9. Twitter G ail Apple Store Reeder

10. …

12. Safari on Mac / iOS Simulator
UIWebView
/ /
/ /
Retina /

13. Safari on Mac
iOS Simulator

14. Mac Safari
Mobile Safari
JavaScript

15. Web

16. iOS Simulator
HTML

17. > Safari >

18. JavaScript
console.log

19. Mac
Mac
JavaScript
Simulator
Simulator

20. UIWebView

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

22. UIWebView
UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:
(NSURLRequest *)request navigationType:
(UIWebViewNavigationType)navigationType;

25. HTML …

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

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

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

29. Retina

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

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

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

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

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

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

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

38. CSS (2)
iOS
http://graphicpeel.com/cssiosicons

39. Safari Dev Center

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

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